Merge pull request #626 from dxc-technology/marcialfps-tabs-types

Types for Tabs component

Author: Jialecl

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

@@ -55,18 +55,27 @@ <h3>Tab Properties</h3>
     <td>Whether the tab is disabled.</td>
   </tr>
   <tr>
-    <td>onTabClick: EventEmitter</td>
+    <td>notificationNumber: boolean | number</td>
     <td></td>
     <td>
-      This function will be called when the user clicks on a tab. The index of
-      the clicked tab will be passed as a parameter.
+      It can have boolean type or number type. If the value is 'true', an empty
+      badge will appear. If it is 'false', no badge will appear. If a number is
+      put it will be shown as the label of the notification in the tab, taking
+      into account that if that number is greater than 99, it will appear as
+      '+99' in the badge.
     </td>
   </tr>
   <tr>
-    <td>onTabHover: EventEmitter</td>
+    <td>onTabClick: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the user is on hover on a tab.
+      This event will emit when the user clicks on a tab. The index of the
+      clicked tab will be passed as a parameter.
     </td>
   </tr>
+  <tr>
+    <td>onTabHover: EventEmitter</td>
+    <td></td>
+    <td>This event will emit when the user is on hover on a tab.</td>
+  </tr>
 </dxc-table>

projects/dxc-ngx-cdk/src/lib/dxc-tabs/dxc-tab/dxc-tab.component.ts

@@ -17,14 +17,43 @@ import { TabService } from "../services/tab.service";
   templateUrl: "./dxc-tab.component.html",
 })
 export class DxcTabComponent implements OnChanges {
-  //Default values
+  /**
+   * Text to be placed within the tab.
+   */
   @Input() label: string;
+
+  /**
+   * @deprecated The path of an icon to be placed within the tab.
+   */
   @Input() iconSrc: string;
-  @Input() disabled: boolean;
+
+  /**
+   * Whether the tab is disabled or not.
+   */
+  @Input() disabled: boolean = false;
+
+  /**
+   * It can have boolean type or number type.
+   * If the value is 'true', an empty badge will appear. If it is 'false',
+   * no badge will appear.
+   * If a number is put it will be shown as the label of the notification
+   * in the tab, taking into account that if that number is greater than 99,
+   * it will appear as '+99' in the badge.
+   */
+  @Input() notificationNumber: boolean | number;
+
+  /**
+   * This event will emit when the user clicks on a tab. The index 
+   * of the clicked tab will be passed as a parameter.
+   */
+  @Output() onTabClick: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * This event will emit when the user is on hover on a tab.
+   */
+  @Output() onTabHover: EventEmitter<number> = new EventEmitter<number>();
+
   @Input() id: number;
-  @Input() notificationNumber: any;
-  @Output() onTabClick = new EventEmitter<any>();
-  @Output() onTabHover = new EventEmitter<any>();
 
   showDotIndicator: boolean = false;
   labelClass: string;

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

@@ -28,6 +28,23 @@ const globalRippleConfig: RippleGlobalOptions = {
     exitDuration: 0,
   },
 };
+
+type Space =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge";
+
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
 @Component({
   selector: "dxc-tabs",
   templateUrl: "./dxc-tabs.component.html",
@@ -39,21 +56,33 @@ const globalRippleConfig: RippleGlobalOptions = {
   ],
 })
 export class DxcTabsComponent implements OnChanges {
-  @HostBinding("class") className;
-  @HostBinding("class.label-icons") allTabWithLabelAndIcon: boolean = false;
-
-  //Default values
-  @Input() margin: any;
-  @Input() iconPosition: string;
-
+  /**
+   * The index of the active tab.
+   */
   @Input()
   get activeTabIndex(): number {
     return this._activeTabIndex;
   }
   set activeTabIndex(value: number) {
     this._activeTabIndex = coerceNumberProperty(value);
   }
-  private _activeTabIndex;
+  private _activeTabIndex = 0;
+
+  /**
+   * Position of icons in tabs.
+   */
+  @Input() iconPosition: "top" | "left" = "left";
+
+  /**
+   * Size of the margin to be applied to the component. You can pass an object
+   * with 'top', 'bottom', 'left' and 'right' properties in order to specify
+   * different margin sizes.
+   */
+  @Input() margin: Space | Margin;
+
+  @HostBinding("class") className;
+  @HostBinding("class.label-icons") allTabWithLabelAndIcon: boolean = false;
+
   renderedActiveTabIndex: number;
 
   @ViewChild(MatRipple) ripple: MatRipple;
@@ -65,8 +94,9 @@ export class DxcTabsComponent implements OnChanges {
   protected tabs: QueryList<DxcTabComponent>;
 
   defaultInputs = new BehaviorSubject<any>({
+    activeTabIndex: 0,
+    iconPosition: "left",
     margin: null,
-    iconPosition: null,
   });
 
   constructor(