Merge pull request #612 from dxc-technology/gomezivann-accordion-types

Types for Accordion component

Author: Jialecl

projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html

@@ -13,7 +13,7 @@
   <tr>
     <td>label: string</td>
     <td></td>
-    <td>Text to be placed next to the button.</td>
+    <td>The panel label.</td>
   </tr>
   <tr>
     <td>iconSrc: string</td>
@@ -35,20 +35,24 @@
   </tr>
   <tr>
     <td>isExpanded: boolean</td>
-    <td><code>false</code></td>
-    <td>If true, the component will be expanded.</td>
+    <td></td>
+    <td>
+      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.
+    </td>
   </tr>
   <tr>
     <td>onClick: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the user clicks the icon to open/close
-      the panel. The state of the panel (opened/closed) should be passed as a
-      parameter
+      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.
     </td>
   </tr>
   <tr>
-    <td>margin: any (string | object)</td>
+    <td>margin: string | object</td>
     <td></td>
     <td>
       Size of the margin to be applied to the component ('xxsmall' | 'xsmall' |
@@ -58,7 +62,7 @@
     </td>
   </tr>
   <tr>
-    <td>padding: any (string | object)</td>
+    <td>padding: string | object</td>
     <td></td>
     <td>
       Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall'

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() {}
-
 }

projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.html

@@ -10,9 +10,7 @@
       [expandedHeight]="'48px'"
       [tabindex]="disabled ? -1 : tabIndexValue"
     >
-      <mat-panel-title
-        [ngClass]="'before'"
-      >
+      <mat-panel-title [ngClass]="'before'">
         <span *ngIf="label">{{ label }}</span>
         <img [src]="iconSrc" *ngIf="iconSrc" class="imageIcon" />
         <ng-content select="dxc-accordion-icon"></ng-content>
@@ -33,9 +31,8 @@
         </svg>
       </span>
     </mat-expansion-panel-header>
-    <background-provider-inner color="{{currentBackgroundColor}}">
+    <background-provider-inner color="{{ currentBackgroundColor }}">
       <ng-content></ng-content>
     </background-provider-inner>
-
   </mat-expansion-panel>
 </mat-accordion>

projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts

@@ -22,17 +22,51 @@ 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",
   providers: [CssUtils, BackgroundProviderComponent],
 })
 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<any>();
-  @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<boolean>();
+  /**
+   * 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,20 +103,26 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit {
     this._isExpanded = coerceBooleanProperty(value);
   }
   private _isExpanded;
+  /**
+   * Value of the tabindex.
+   */
   @Input()
   get tabIndexValue(): number {
     return this._tabIndexValue;
   }
   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<DxcAccordionIconComponent>;