From 1ac0c8cd5f748db12edaadfe3ad2a0128724c8d2 Mon Sep 17 00:00:00 2001
From: Khizer Rehan <khizerrehan92@gmail.com>
Date: Thu, 7 May 2026 12:16:53 +0500
Subject: [PATCH] Add TabLabelDirective and update tab components to use it for
 label templates

---
 .../app/cluster/details/cluster/template.html |  4 ++--
 .../components/tab-card/tab/component.ts      |  7 +++++-
 .../tab-card/tab/label.directive.ts           | 23 +++++++++++++++++++
 modules/web/src/app/shared/module.ts          |  2 ++
 4 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 modules/web/src/app/shared/components/tab-card/tab/label.directive.ts

diff --git a/modules/web/src/app/cluster/details/cluster/template.html b/modules/web/src/app/cluster/details/cluster/template.html
index e1accb1259..346cb225ef 100644
--- a/modules/web/src/app/cluster/details/cluster/template.html
+++ b/modules/web/src/app/cluster/details/cluster/template.html
@@ -611,7 +611,7 @@ <h4>IPv6</h4>
     </km-tab>
     @if (cluster.spec.opaIntegration?.enabled) {
     <km-tab label="OPA Constraints">
-      <ng-template>
+      <ng-template kmTabLabel>
         OPA Constraints
         <i class="km-icon-warning km-pointer-warning km-opa-warning"
            [matTooltip]="OPA_DEPRECATED_MESSAGE"></i>
@@ -624,7 +624,7 @@ <h4>IPv6</h4>
     }
     @if (cluster.spec.opaIntegration?.enabled) {
     <km-tab label="OPA Gatekeeper Config">
-      <ng-template>
+      <ng-template kmTabLabel>
         OPA Gatekeeper Config
         <i class="km-icon-warning km-pointer km-opa-warning"
            [matTooltip]="OPA_DEPRECATED_MESSAGE"></i>
diff --git a/modules/web/src/app/shared/components/tab-card/tab/component.ts b/modules/web/src/app/shared/components/tab-card/tab/component.ts
index c3cdb321dd..93d82840a2 100644
--- a/modules/web/src/app/shared/components/tab-card/tab/component.ts
+++ b/modules/web/src/app/shared/components/tab-card/tab/component.ts
@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import {Component, Input, TemplateRef, ViewChild, ContentChild} from '@angular/core';
+import {TabLabelDirective} from './label.directive';
 
 @Component({
   selector: 'km-tab',
@@ -22,5 +23,9 @@ import {Component, Input, TemplateRef, ViewChild, ContentChild} from '@angular/c
 export class TabComponent {
   @Input() label: string;
   @ViewChild(TemplateRef) template: TemplateRef<any>;
-  @ContentChild(TemplateRef) labelTemplate: TemplateRef<any>;
+  @ContentChild(TabLabelDirective) private _labelDirective?: TabLabelDirective;
+
+  get labelTemplate(): TemplateRef<unknown> | undefined {
+    return this._labelDirective?.templateRef;
+  }
 }
diff --git a/modules/web/src/app/shared/components/tab-card/tab/label.directive.ts b/modules/web/src/app/shared/components/tab-card/tab/label.directive.ts
new file mode 100644
index 0000000000..59b91a6765
--- /dev/null
+++ b/modules/web/src/app/shared/components/tab-card/tab/label.directive.ts
@@ -0,0 +1,23 @@
+// Copyright 2026 The Kubermatic Kubernetes Platform contributors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {Directive, TemplateRef} from '@angular/core';
+
+@Directive({
+  selector: '[kmTabLabel]',
+  standalone: false,
+})
+export class TabLabelDirective {
+  constructor(public templateRef: TemplateRef<unknown>) {}
+}
diff --git a/modules/web/src/app/shared/module.ts b/modules/web/src/app/shared/module.ts
index 2e80da49b0..64dc85cb5b 100644
--- a/modules/web/src/app/shared/module.ts
+++ b/modules/web/src/app/shared/module.ts
@@ -91,6 +91,7 @@ import {SideNavExpansionMenuComponent} from '@shared/components/side-nav-field/c
 import {TabCardComponent} from '@shared/components/tab-card/component';
 import {DynamicTabComponent} from '@shared/components/tab-card/dynamic-tab/component';
 import {TabComponent} from '@shared/components/tab-card/tab/component';
+import {TabLabelDirective} from '@shared/components/tab-card/tab/label.directive';
 import {TerminalComponent} from '@shared/components/terminal/component';
 import {TerminalStatusBarComponent} from '@shared/components/terminal/terminal-status-bar/component';
 import {TerminalToolBarComponent} from '@shared/components/terminal/terminal-toolbar/component';
@@ -284,6 +285,7 @@ const directives = [
   OptionDirective,
   InputPasswordDirective,
   ValueChangedIndicatorDirective,
+  TabLabelDirective,
 ];
 
 @NgModule({