fix: optimization tab-component and docs

italia · Feb 23, 2023 · ed17bba · ed17bba
1 parent 6eb88d7
commit ed17bba
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 16 deletions.
diff --git a/...design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.html b/...design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.html
@@ -5,14 +5,14 @@
     role="tablist">
 
   <li class="nav-item" *ngFor="let tab of tabs">
-    <a [id]="tab.id+'-tab-link'"
+    <a #tabNavLinks [id]="tab.id+'-tab-link'"
        role="tab"
        class="nav-link"
        [class.active]="isTrueBooleanInput(tab.active)"
        [class.disabled]="isTrueBooleanInput(tab.disabled)"
        [attr.href]="'#'+tab.id+'-tab'"
        [attr.aria-controls]="tab.id+'-tab'">
-      <it-icon *ngIf="tab.icon" [name]="tab.icon"></it-icon>
+      <it-icon *ngIf="tab.icon" [name]="tab.icon" class="me-2"></it-icon>
       {{tab.label}}
     </a>
   </li>
@@ -21,7 +21,7 @@
 <div class="tab-content">
   <div *ngFor="let tab of tabs"
        [id]="tab.id+'-tab'"
-       class="tab-pane fade {{tab.class ?? ''}}"
+       class="tab-pane p-4 fade {{tab.class ?? ''}}"
        [class.active]="isTrueBooleanInput(tab.active)"
        [class.show]="isTrueBooleanInput(tab.active)"
        role="tabpanel"

diff --git a/...s/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.ts b/...s/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.ts
@@ -1,7 +1,16 @@
-import { ChangeDetectionStrategy, Component, ContentChildren, Input, OnDestroy, QueryList } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  ElementRef,
+  Input,
+  OnDestroy,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
 import { BooleanInput, isTrueBooleanInput } from '../../../../utils/boolean-input';
 import { TabItemComponent } from '../tab-item/tab-item.component';
-import { delay, startWith, Subscription, tap } from 'rxjs';
+import { of, startWith, Subscription, switchMap, tap } from 'rxjs';
 import { Tab } from 'bootstrap-italia';
 import { AbstractComponent } from '../../../../abstracts/abstract.component';
 
@@ -32,6 +41,8 @@ export class TabContainerComponent extends AbstractComponent implements OnDestro
    */
   @ContentChildren(TabItemComponent) tabs?: QueryList<TabItemComponent>;
 
+  @ViewChildren('tabNavLinks') private tabNavLinks?: QueryList<ElementRef<HTMLAnchorElement>>;
+
   private tabSubscriptions?: Array<Subscription>;
 
   isTrueBooleanInput(booleanInput?: BooleanInput): boolean {
@@ -50,19 +61,19 @@ export class TabContainerComponent extends AbstractComponent implements OnDestro
         }));
         this._changeDetectorRef.detectChanges(); // Force update html render
       }),
-      delay(100)
+      switchMap(() => this.tabNavLinks?.changes.pipe(startWith(undefined)) || of(undefined))
     ).subscribe(() => {
       // Init tabs from bootstrap-italia
-      const triggerTabList: Array<HTMLAnchorElement> = this._elementRef.nativeElement.querySelectorAll('.nav-item a');
-      triggerTabList?.forEach(triggerEl => {
-        const tabTrigger = Tab.getOrCreateInstance(triggerEl);
+      this.tabNavLinks?.forEach(tabNavLink => {
+        const triggerEl = tabNavLink.nativeElement,
+          tabTrigger = Tab.getOrCreateInstance(triggerEl);
 
         if (triggerEl.getAttribute('tab-listener') !== 'true') {
           triggerEl.addEventListener('click', event => {
             event.preventDefault();
-            triggerEl.setAttribute('tab-listener', 'true'); // Prevents multiple insertion of the listener
             tabTrigger.show();
           });
+          triggerEl.setAttribute('tab-listener', 'true'); // Prevents multiple insertion of the listener
         }
       });
     });

diff --git a/src/app/tabs/tabs-example/tabs-example.component.html b/src/app/tabs/tabs-example/tabs-example.component.html
@@ -14,13 +14,13 @@ <h3>Configurazione tabs</h3>
   <h4 class="mt-5 mb-4">Risultato tabs</h4>
   <!--    TODO  [pill]="isPill"-->
   <it-tab-container [dark]="isDarkTheme">
-    <it-tab-item id="example" *ngFor="let tab of tabs; let i = index"
+    <it-tab-item id="docs-example" *ngFor="let tab of tabs; let i = index"
                  [label]="tab.label"
                  [icon]="tab.icon"
                  [active]="i === 0">
       {{tab.content}}
     </it-tab-item>
-    <it-tab-item id="settings-example" label="custom" [disabled]="isDisabled" icon="settings">
+    <it-tab-item id="docs-icon-example" label="custom" [disabled]="isDisabled" icon="settings">
       <h4>Titolo</h4>
       <p>Contenuto complesso <span itBadge="secondary">badge</span></p>
     </it-tab-item>

diff --git a/src/app/tabs/tabs-example/tabs-example.component.ts b/src/app/tabs/tabs-example/tabs-example.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { IconName } from '../../../../projects/design-angular-kit/src/lib/interfaces/icon';
 
 @Component({
   selector: 'it-tabs-example',
@@ -13,21 +14,25 @@ export class TabsExampleComponent {
 
   isPill = false;
 
-  tabs = [
+  tabs: Array<{
+    label: string,
+    content: string,
+    icon: IconName
+  }> = [
     {
       label: 'tab1',
       content: 'content1',
-      icon: 'it-file'
+      icon: 'file'
     },
     {
       label: 'tab2',
       content: 'content2',
-      icon: 'it-calendar'
+      icon: 'calendar'
     },
     {
       label: 'tab3',
       content: 'content3',
-      icon: 'it-comment'
+      icon: 'comment'
     }
   ];
 }