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;