From 0aff55cf98d1e9f23f7adc092e2347f55035bb4d Mon Sep 17 00:00:00 2001
From: Philipp Jenni <philipp.jenni@gmx.ch>
Date: Sat, 31 Aug 2024 16:44:32 +0200
Subject: [PATCH] fix: TabItem create undefined Link ID when id is set with
 binding (#140)

---
 .../src/app/tabs/tabs.component.html              | 15 +++++++++++++--
 .../src/app/tabs/tabs.component.ts                |  4 ++++
 .../src/app/tabs/tabs.component.html              | 13 +++++++++++++
 .../src/app/tabs/tabs.component.ts                |  8 +++++++-
 .../src/app/tabs/tabs.component.html              | 13 +++++++++++++
 .../src/app/tabs/tabs.component.ts                |  8 +++++++-
 .../sac-bootstrap3/src/controls/tabs/tab.html     |  2 +-
 .../sac-bootstrap4/src/controls/tabs/tab.html     |  1 +
 .../sac-bootstrap5/src/controls/tabs/tab.html     |  1 +
 9 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/tabs/tabs.component.html b/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/tabs/tabs.component.html
index 27b74f370..f24010a53 100644
--- a/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/tabs/tabs.component.html
+++ b/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/tabs/tabs.component.html
@@ -1,6 +1,5 @@
 <h2>Tabs</h2>
 <form #myForm="sacform" labelsize="3">
-
   <sac-tab name="tab1">
     <sac-tabitem id="home1" label="Home">
       <ng-template>
@@ -47,4 +46,16 @@ <h2>Tabs</h2>
     </sac-tabitem>
   </sac-tab>
 
-</form>
\ No newline at end of file
+  <sac-tab name="tab3">
+    <sac-tabitem
+      id="tab_{{ item }}"
+      [label]="item"
+      [active]="i === 0 ? true : false"
+      *ngFor="let item of languages; index as i"
+    >
+      <ng-template>
+        <p>Tab Content here {{ i }}</p>
+      </ng-template>
+    </sac-tabitem>
+  </sac-tab>
+</form>
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/tabs/tabs.component.ts b/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/tabs/tabs.component.ts
index 43c324301..1e11a8be2 100644
--- a/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/tabs/tabs.component.ts
+++ b/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/tabs/tabs.component.ts
@@ -5,5 +5,9 @@ import { Component } from '@angular/core';
   templateUrl: './tabs.component.html',
 })
 export class DemoTabsComponent {
+  // #region Properties
 
+  public languages = ['de', 'fr', 'it'];
+
+  // #endregion Properties
 }
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/tabs/tabs.component.html b/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/tabs/tabs.component.html
index 2fbd2b16e..5d4c9a487 100644
--- a/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/tabs/tabs.component.html
+++ b/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/tabs/tabs.component.html
@@ -53,4 +53,17 @@ <h2>Tabs</h2>
       </ng-template>
     </sac-tabitem>
   </sac-tab>
+
+  <sac-tab name="tab3">
+    <sac-tabitem
+      id="tab_{{ item }}"
+      [label]="item"
+      [active]="i === 0 ? true : false"
+      *ngFor="let item of languages; index as i"
+    >
+      <ng-template>
+        <p>Tab Content here {{ i }}</p>
+      </ng-template>
+    </sac-tabitem>
+  </sac-tab>
 </form>
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/tabs/tabs.component.ts b/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/tabs/tabs.component.ts
index 70ab6632a..1e11a8be2 100644
--- a/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/tabs/tabs.component.ts
+++ b/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/tabs/tabs.component.ts
@@ -4,4 +4,10 @@ import { Component } from '@angular/core';
   selector: 'app-tabs',
   templateUrl: './tabs.component.html',
 })
-export class DemoTabsComponent {}
+export class DemoTabsComponent {
+  // #region Properties
+
+  public languages = ['de', 'fr', 'it'];
+
+  // #endregion Properties
+}
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/tabs/tabs.component.html b/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/tabs/tabs.component.html
index 2fbd2b16e..5d4c9a487 100644
--- a/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/tabs/tabs.component.html
+++ b/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/tabs/tabs.component.html
@@ -53,4 +53,17 @@ <h2>Tabs</h2>
       </ng-template>
     </sac-tabitem>
   </sac-tab>
+
+  <sac-tab name="tab3">
+    <sac-tabitem
+      id="tab_{{ item }}"
+      [label]="item"
+      [active]="i === 0 ? true : false"
+      *ngFor="let item of languages; index as i"
+    >
+      <ng-template>
+        <p>Tab Content here {{ i }}</p>
+      </ng-template>
+    </sac-tabitem>
+  </sac-tab>
 </form>
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/tabs/tabs.component.ts b/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/tabs/tabs.component.ts
index 70ab6632a..1e11a8be2 100644
--- a/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/tabs/tabs.component.ts
+++ b/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/tabs/tabs.component.ts
@@ -4,4 +4,10 @@ import { Component } from '@angular/core';
   selector: 'app-tabs',
   templateUrl: './tabs.component.html',
 })
-export class DemoTabsComponent {}
+export class DemoTabsComponent {
+  // #region Properties
+
+  public languages = ['de', 'fr', 'it'];
+
+  // #endregion Properties
+}
diff --git a/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/tabs/tab.html b/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/tabs/tab.html
index 5bf17cec9..abe9535f3 100644
--- a/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/tabs/tab.html
+++ b/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/tabs/tab.html
@@ -7,7 +7,7 @@
       (click)="selectTab(item)"
       [ngStyle]="{'cursor': item._disabled ? 'not-allowed' : 'pointer'}"
     >
-      <a [id]="GetTabItemButtonId(item._id)" role="tab">
+      <a [id]="GetTabItemButtonId(item.id)" role="tab">
         <ng-template
           *ngTemplateOutlet="tablabeltemplate || defaultTabLabelTemplate;context:{ label: item.label }"
         >
diff --git a/ch.jnetwork.sac-controls/projects/sac-bootstrap4/src/controls/tabs/tab.html b/ch.jnetwork.sac-controls/projects/sac-bootstrap4/src/controls/tabs/tab.html
index 81f9179a5..9a74a5765 100644
--- a/ch.jnetwork.sac-controls/projects/sac-bootstrap4/src/controls/tabs/tab.html
+++ b/ch.jnetwork.sac-controls/projects/sac-bootstrap4/src/controls/tabs/tab.html
@@ -2,6 +2,7 @@
 <div class="nav nav-tabs" role="tablist">
   <a
     *ngFor="let item of _tabItems"
+    [id]="GetTabItemButtonId(item.id)"
     role="tab"
     class="nav-item nav-link active"
     data-toggle="tab"
diff --git a/ch.jnetwork.sac-controls/projects/sac-bootstrap5/src/controls/tabs/tab.html b/ch.jnetwork.sac-controls/projects/sac-bootstrap5/src/controls/tabs/tab.html
index 24f50117c..6f7399048 100644
--- a/ch.jnetwork.sac-controls/projects/sac-bootstrap5/src/controls/tabs/tab.html
+++ b/ch.jnetwork.sac-controls/projects/sac-bootstrap5/src/controls/tabs/tab.html
@@ -2,6 +2,7 @@
 <ul class="nav nav-tabs" role="tablist">
   <li class="nav-item" *ngFor="let item of _tabItems">
     <a
+      [id]="GetTabItemButtonId(item.id)"
       role="tab"
       class="nav-link"
       data-toggle="tab"