- | padding: any (string | object) |
+ padding: string | object |
|
Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall'
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion-icon/dxc-accordion-icon.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion-icon/dxc-accordion-icon.component.ts
index 8a0094440..9cc2b3ba9 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion-icon/dxc-accordion-icon.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion-icon/dxc-accordion-icon.component.ts
@@ -1,13 +1,9 @@
-import {
- Component,
-} from "@angular/core";
+import { Component } from "@angular/core";
@Component({
selector: "dxc-accordion-icon",
- templateUrl: "./dxc-accordion-icon.component.html"
+ templateUrl: "./dxc-accordion-icon.component.html",
})
export class DxcAccordionIconComponent {
-
constructor() {}
-
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.html
index 12d547289..da77beeb8 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.html
@@ -10,9 +10,7 @@
[expandedHeight]="'48px'"
[tabindex]="disabled ? -1 : tabIndexValue"
>
-
+
{{ label }}
![]()
@@ -33,9 +31,8 @@
-
+
-
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts
index 249eb7e3f..087038bd1 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts
@@ -22,6 +22,29 @@ import { DxcAccordionIconComponent } from "./dxc-accordion-icon/dxc-accordion-ic
import { QueryList, ChangeDetectorRef, ElementRef } from "@angular/core";
import { BackgroundProviderComponent } from "../background-provider/background-provider.component";
+type Space =
+ | "xxsmall"
+ | "xsmall"
+ | "small"
+ | "medium"
+ | "large"
+ | "xlarge"
+ | "xxlarge";
+
+type Margin = {
+ top?: Space;
+ bottom?: Space;
+ left?: Space;
+ right?: Space;
+};
+
+type Padding = {
+ top?: Space;
+ bottom?: Space;
+ left?: Space;
+ right?: Space;
+};
+
@Component({
selector: "dxc-accordion",
templateUrl: "./dxc-accordion.component.html",
@@ -29,10 +52,21 @@ import { BackgroundProviderComponent } from "../background-provider/background-p
})
export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
currentBackgroundColor: string;
- @Input() mode: string;
- @Input() label: string;
+ /**
+ * The panel label.
+ */
+ @Input() label: string = "";
+ /**
+ * @deprecated URL of the icon that will be placed next to panel label.
+ */
@Input() iconSrc: string;
- @Input() assistiveText: string;
+ /**
+ * Assistive text to be placed on the right side of the panel.
+ */
+ @Input() assistiveText: string = "";
+ /**
+ * If true, the component will be disabled.
+ */
@Input()
get disabled(): boolean {
return this._disabled;
@@ -41,9 +75,26 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
this._disabled = coerceBooleanProperty(value);
}
private _disabled = false;
- @Output() onClick = new EventEmitter();
- @Input() margin: any;
- @Input() padding: any;
+ /**
+ * This event will emit in case the user clicks the accordion to expand or collapse
+ * the panel. The new state of the panel will be passed as a parameter.
+ */
+ @Output() onClick = new EventEmitter();
+ /**
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+ */
+ @Input() margin: Space | Margin;
+ /**
+ * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
+ */
+ @Input() padding: Space | Padding;
+ /**
+ * Represents the state of the panel. When true, the component will be
+ * expanded. If undefined, the component will be uncontrolled and its
+ * value will be managed internally by the component.
+ */
@Input()
get isExpanded(): boolean {
return this._isExpanded;
@@ -52,6 +103,9 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
this._isExpanded = coerceBooleanProperty(value);
}
private _isExpanded;
+ /**
+ * Value of the tabindex.
+ */
@Input()
get tabIndexValue(): number {
return this._tabIndexValue;
@@ -59,13 +113,16 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
set tabIndexValue(value: number) {
this._tabIndexValue = coerceNumberProperty(value);
}
- private _tabIndexValue;
+ private _tabIndexValue = 0;
@HostBinding("class") className;
@ViewChild("matExpansionPanel", { static: true }) _matExpansionPanel: any;
renderedIsExpanded: boolean;
+ /**
+ * Element used as the icon that will be placed next to panel label.
+ */
@ContentChildren(DxcAccordionIconComponent)
dxcAccordionIcon: QueryList;
|