[Mino] Added defaultValue in tabs component

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

@@ -15,6 +15,11 @@
     <td><code>0</code></td>
     <td>The index of the active tab.</td>
   </tr>
+  <tr>
+    <td>defaultActiveTabIndex: number</td>
+    <td></td>
+    <td>Initially active tab, only when it is uncontrolled.</td>
+  </tr>
   <tr>
     <td>iconPosition: 'top' | 'left'</td>
     <td><code>'left'</code></td>

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/tabs-preview/tabs-preview.component.html

@@ -1,16 +1,29 @@
 <div>
   <tbuilder-component-mode text="Default">
-    <dxc-tabs margin="xsmall" [activeTabIndex]="activeTabIndex1">
+    <dxc-tabs margin="xsmall" defaultActiveTabIndex="2">
       <dxc-tab label="Tab 1" (onTabClick)="tabClicked1($event)"></dxc-tab>
       <dxc-tab label="Tab 2" (onTabClick)="tabClicked1($event)"></dxc-tab>
       <dxc-tab label="Tab 3" (onTabClick)="tabClicked1($event)"></dxc-tab>
     </dxc-tabs>
   </tbuilder-component-mode>
 
   <tbuilder-component-mode text="Disabled">
-    <dxc-tabs margin="xsmall" [activeTabIndex]="activeTabIndex1" iconPosition="top">
-      <dxc-tab notificationNumber="99" label="Tab 1" (onTabClick)="tabClicked1($event)"></dxc-tab>
-      <dxc-tab [notificationNumber]="trueNotificationNumber" label="Tab 2" (onTabClick)="tabClicked1($event)" [disabled] = "true" >
+    <dxc-tabs
+      margin="xsmall"
+      [activeTabIndex]="activeTabIndex1"
+      iconPosition="top"
+    >
+      <dxc-tab
+        notificationNumber="99"
+        label="Tab 1"
+        (onTabClick)="tabClicked1($event)"
+      ></dxc-tab>
+      <dxc-tab
+        [notificationNumber]="trueNotificationNumber"
+        label="Tab 2"
+        (onTabClick)="tabClicked1($event)"
+        [disabled]="true"
+      >
         <dxc-tab-icon>
           <svg
             version="1.1"
@@ -35,12 +48,20 @@
           </svg>
         </dxc-tab-icon>
       </dxc-tab>
-      <dxc-tab notificationNumber="150" label="Tab 3" (onTabClick)="tabClicked1($event)"></dxc-tab>
+      <dxc-tab
+        notificationNumber="150"
+        label="Tab 3"
+        (onTabClick)="tabClicked1($event)"
+      ></dxc-tab>
     </dxc-tabs>
   </tbuilder-component-mode>
 
   <tbuilder-component-mode text="Icons">
-    <dxc-tabs margin="xsmall" [activeTabIndex]="activeTabIndex1" iconPosition="top">
+    <dxc-tabs
+      margin="xsmall"
+      [activeTabIndex]="activeTabIndex1"
+      iconPosition="top"
+    >
       <dxc-tab label="Tab 1" (onTabClick)="tabClicked1($event)">
         <dxc-tab-icon>
           <svg
@@ -91,7 +112,7 @@
           </svg>
         </dxc-tab-icon>
       </dxc-tab>
-      <dxc-tab label="Tab 3" (onTabClick)="tabClicked1($event)" >
+      <dxc-tab label="Tab 3" (onTabClick)="tabClicked1($event)">
         <dxc-tab-icon>
           <svg
             version="1.1"

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

@@ -43,7 +43,7 @@ export class DxcTabComponent implements OnChanges {
   @Input() notificationNumber: boolean | number;
 
   /**
-   * This event will emit when the user clicks on a tab. The index 
+   * 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>();

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

@@ -1,6 +1,5 @@
 import { render, fireEvent } from "@testing-library/angular";
 import { screen } from "@testing-library/dom";
-import { DxcTabsComponent } from "./dxc-tabs.component";
 import { DxcTabsModule } from "./dxc-tabs.module";
 import {
   BrowserDynamicTestingModule,
@@ -16,7 +15,7 @@ TestBed.initTestEnvironment(
 describe("DxcTabs tests", () => {
   test("should render dxc-tabs", async () => {
     const tabs = await render(
-      `<dxc-tabs theme="dark">
+      `<dxc-tabs>
         <dxc-tab label="Tab1"></dxc-tab>
         <dxc-tab label="Tab2"></dxc-tab>
         <dxc-tab label="Tab3"></dxc-tab>
@@ -33,9 +32,41 @@ describe("DxcTabs tests", () => {
     expect(tabs.getByText("Tab3")).toBeTruthy();
   });
 
+  test("should render dxc-tabs with default value", async () => {
+    const clickFunction = jest.fn();
+    const tabs = await render(
+      `<dxc-tabs margin="xsmall" defaultActiveTabIndex="2">
+        <dxc-tab label="Tab1" (onTabClick)="clickFunction($event)"></dxc-tab>
+        <dxc-tab label="Tab2" (onTabClick)="clickFunction($event)"></dxc-tab>
+        <dxc-tab label="Tab3" (onTabClick)="clickFunction($event)"></dxc-tab>
+      </dxc-tabs>`,
+      {
+        componentProperties: { clickFunction },
+        imports: [DxcTabsModule],
+        excludeComponentDeclaration: true,
+      }
+    );
+    tabs.detectChanges();
+    const arrTabs = screen.getAllByRole("tab");
+    expect(arrTabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(arrTabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(arrTabs[2].getAttribute("aria-selected")).toBe("true");
+    expect(tabs.getByText("Tab1")).toBeTruthy();
+    expect(tabs.getByText("Tab2")).toBeTruthy();
+    expect(tabs.getByText("Tab3")).toBeTruthy();
+
+    const tab1 = screen.getByText("Tab1");
+    fireEvent.click(tab1);
+    tabs.detectChanges();
+    expect(clickFunction).toHaveBeenCalledWith(0);
+    expect(arrTabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(arrTabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(arrTabs[2].getAttribute("aria-selected")).toBe("false");
+  });
+
   test("should render dxc-badge", async () => {
     const tabs = await render(
-      `<dxc-tabs theme="dark">
+      `<dxc-tabs>
         <dxc-tab label="Tab1" notificationNumber="90"></dxc-tab>
         <dxc-tab label="Tab2" notificationNumber="150"></dxc-tab>
         <dxc-tab label="Tab3"></dxc-tab>
@@ -54,7 +85,7 @@ describe("DxcTabs tests", () => {
   test("should render uncontrolled tabs", async () => {
     const clickFunction = jest.fn();
     const tabs = await render(
-      `<dxc-tabs theme="dark">
+      `<dxc-tabs>
         <dxc-tab label="Tab1" (onTabClick)="clickFunction($event)"></dxc-tab>
         <dxc-tab label="Tab2" (onTabClick)="clickFunction($event)"></dxc-tab>
         <dxc-tab label="Tab3" (onTabClick)="clickFunction($event)"></dxc-tab>
@@ -80,7 +111,7 @@ describe("DxcTabs tests", () => {
   test("should render controlled tabs", async () => {
     const clickFunction = jest.fn();
     const tabs = await render(
-      `<dxc-tabs theme="dark" [activeTabIndex]="0">
+      `<dxc-tabs [activeTabIndex]="0">
         <dxc-tab label="Tab1" (onTabClick)="clickFunction($event)"></dxc-tab>
         <dxc-tab label="Tab2" (onTabClick)="clickFunction($event)"></dxc-tab>
         <dxc-tab label="Tab3" (onTabClick)="clickFunction($event)"></dxc-tab>
@@ -92,14 +123,24 @@ describe("DxcTabs tests", () => {
       }
     );
     tabs.detectChanges();
+    const arrTabs = screen.getAllByRole("tab");
+    expect(arrTabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(arrTabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(arrTabs[2].getAttribute("aria-selected")).toBe("false");
     const tab2 = screen.getByText("Tab2");
     const tab3 = screen.getByText("Tab3");
     fireEvent.click(tab2);
     tabs.detectChanges();
     expect(clickFunction).toHaveBeenCalledWith(1);
+    expect(arrTabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(arrTabs[1].getAttribute("aria-selected")).toBe("true");
+    expect(arrTabs[2].getAttribute("aria-selected")).toBe("false");
     tabs.detectChanges();
     fireEvent.click(tab3);
     tabs.detectChanges();
     expect(clickFunction).toHaveBeenCalledWith(2);
+    expect(arrTabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(arrTabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(arrTabs[2].getAttribute("aria-selected")).toBe("true");
   });
 });

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

@@ -53,6 +53,18 @@ export class DxcTabsComponent implements OnChanges {
   }
   private _activeTabIndex = 0;
 
+  /**
+   * Initially active tab, only when it is uncontrolled
+   */
+  @Input()
+  get defaultActiveTabIndex(): number {
+    return this._defaultActiveTabIndex;
+  }
+  set defaultActiveTabIndex(value: number) {
+    this._defaultActiveTabIndex = coerceNumberProperty(value);
+  }
+  private _defaultActiveTabIndex = 0;
+
   /**
    * Position of icons in tabs.
    */
@@ -98,7 +110,6 @@ export class DxcTabsComponent implements OnChanges {
     if (this.tabs && this.tabs.length > 0) {
       this.generateTabs();
     }
-
     const inputs = Object.keys(changes).reduce((result, item) => {
       result[item] = changes[item].currentValue;
       return result;
@@ -109,6 +120,9 @@ export class DxcTabsComponent implements OnChanges {
 
   ngOnInit() {
     this.service.iconPosition.next(this.iconPosition || "left");
+    this.activeTabIndex = this.defaultActiveTabIndex
+      ? this.defaultActiveTabIndex
+      : this.activeTabIndex;
     this.renderedActiveTabIndex = this.activeTabIndex;
     this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
   }

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

@@ -18,4 +18,5 @@ export interface TabsProperties {
   activeTabIndex?: number;
   iconPosition?: "top" | "left";
   margin?: Space | Spacing;
+  defaultActiveTabIndex?: number;
 }