diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion-group/properties/accordion-group-table-properties/accordion-group-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion-group/properties/accordion-group-table-properties/accordion-group-table-properties.component.html
index 2b011c7c2..a4be5c451 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion-group/properties/accordion-group-table-properties/accordion-group-table-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion-group/properties/accordion-group-table-properties/accordion-group-table-properties.component.html
@@ -26,11 +26,11 @@
If true, the component will be disabled. |
- | onActiveChange: function |
+ onActiveChange: EventEmitter |
|
- This function will be called when the user clicks on an accordion. The
- index of the clicked accordion will be passed as a parameter.
+ This event will emit in case the user clicks on an accordion. The index of
+ the clicked accordion will be passed as a parameter.
|
@@ -85,13 +85,6 @@
label.
-
- | iconPosition: 'before' | 'after' |
-
- 'before'
- |
- Whether the icon should appear after or before the label. |
-
| assistiveText: string |
|
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordionGroup/dxc-accordionGroup.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-accordionGroup/dxc-accordionGroup.component.ts
index 6a6bbbaa3..2c39e3f77 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-accordionGroup/dxc-accordionGroup.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-accordionGroup/dxc-accordionGroup.component.ts
@@ -23,27 +23,49 @@ import {
coerceBooleanProperty,
} from "@angular/cdk/coercion";
+type Space =
+ | "xxsmall"
+ | "xsmall"
+ | "small"
+ | "medium"
+ | "large"
+ | "xlarge"
+ | "xxlarge";
+
+type Margin = {
+ top?: Space;
+ bottom?: Space;
+ left?: Space;
+ right?: Space;
+};
+
@Component({
selector: "dxc-accordion-group",
templateUrl: "./dxc-accordionGroup.component.html",
providers: [CssUtils, AccordionService],
})
export class DxcAccordionGroupComponent implements OnChanges, OnInit {
- @Input() margin: any;
+ /**
+ * 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;
+ /**
+ * The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component.
+ * If null, the component will be controlled and all accordions will be closed.
+ */
@Input()
- get indexActive(): any {
+ get indexActive(): number {
return this._indexActive;
}
- set indexActive(value: any) {
- if (value === undefined || value === "undefined") {
- this._indexActive = undefined;
- } else if (value === null || value === "null") {
- this._indexActive = null;
- } else {
- this._indexActive = coerceNumberProperty(value);
- }
+ set indexActive(value: number) {
+ if (value == null) this._indexActive = value;
+ else this._indexActive = coerceNumberProperty(value);
}
private _indexActive;
+ /**
+ * If true, the component will be disabled.
+ */
@Input()
get disabled(): boolean {
return this._disabled;
@@ -52,10 +74,17 @@ export class DxcAccordionGroupComponent implements OnChanges, OnInit {
this._disabled = coerceBooleanProperty(value);
}
private _disabled = false;
- @Output() onActiveChange = new EventEmitter();
+ /**
+ * This event will emit in case the user clicks on an accordion.
+ * The index of the clicked accordion will be passed as a parameter.
+ */
+ @Output() onActiveChange: EventEmitter = new EventEmitter();
@HostBinding("class") className;
+ /**
+ * Customized accordion that allows this accordion group component. Accordion component can be checked here.
+ */
@ContentChildren(DxcAccordionComponent)
dxcAccordion: QueryList;