Merge pull request #653 from dxc-technology/gomezivann-accordionGroup-types

Types for Accordion Group

Author: Jialecl

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 @@
     <td>If true, the component will be disabled.</td>
   </tr>
   <tr>
-    <td>onActiveChange: function</td>
+    <td>onActiveChange: EventEmitter</td>
     <td></td>
     <td>
-      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.
     </td>
   </tr>
   <tr>
@@ -85,13 +85,6 @@
       label.
     </td>
   </tr>
-  <tr>
-    <td>iconPosition: 'before' | 'after'</td>
-    <td>
-      <code>'before'</code>
-    </td>
-    <td>Whether the icon should appear after or before the label.</td>
-  </tr>
   <tr>
     <td>assistiveText: string</td>
     <td></td>

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<any>();
+  /**
+   * 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<number> = new EventEmitter<number>();
 
   @HostBinding("class") className;
 
+  /**
+   * Customized accordion that allows this accordion group component. Accordion component can be checked here.
+   */
   @ContentChildren(DxcAccordionComponent)
   dxcAccordion: QueryList<DxcAccordionComponent>;