@truenas/ui-components 0.4.11 → 0.4.12

package/fesm2022/truenas-ui-components.mjs

@@ -6,7 +6,7 @@ import * as i1$3 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule, Validators } from '@angular/forms';
 import { ComponentHarness, HarnessPredicate, TestKey, parallel } from '@angular/cdk/testing';
 import * as i1 from '@angular/cdk/a11y';
-import { A11yModule, FocusMonitor, _IdGenerator } from '@angular/cdk/a11y';
+import { A11yModule, AriaDescriber, FocusMonitor, _IdGenerator } from '@angular/cdk/a11y';
 import * as i1$2 from '@angular/common';
 import { DOCUMENT, NgTemplateOutlet, CommonModule, AsyncPipe, isPlatformBrowser } from '@angular/common';
 import { mdiCheckCircle, mdiAlertCircle, mdiAlert, mdiInformation, mdiOpenInNew, mdiHelpCircle, mdiDotsVertical, mdiClose } from '@mdi/js';
@@ -2589,6 +2589,22 @@ class TnButtonComponent {
         this.onClick.emit(event);
     }
     hostRef = inject((ElementRef));
+    constructor() {
+        // A disabled native <button> suppresses its own click events, but its
+        // pointer-events: none style retargets clicks over it to this host element —
+        // where consumers commonly bind (click). Halt those here so a disabled
+        // tn-button is inert for every consumer, matching what handleAnchorClick
+        // does for the anchor variants. Registered in the constructor (before any
+        // template listener on the host) and capture-phase, so it runs first and
+        // stopImmediatePropagation() reliably blocks host (click) handlers.
+        const host = this.hostRef.nativeElement;
+        host.addEventListener('click', (event) => {
+            if (this.disabled()) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        }, { capture: true });
+    }
     // The template renders exactly one of `<a [routerLink]>`, `<a [href]>`, or
     // `<button>` via `@if/@else`, and each carries the `#button` ref — so this
     // resolves to whichever variant is active. Using a viewChild instead of a
@@ -2626,7 +2642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             args: [{ selector: 'tn-button', standalone: true, imports: [CommonModule, RouterLink, TnTestIdDirective, LabelMarkupPipe, TnIconComponent], host: {
                         '[class.tn-button--full-width]': 'fullWidth()',
                     }, template: "<ng-template #content>\n  @if (icon() && iconPosition() === 'left') {\n    <tn-icon class=\"storybook-button__icon\" size=\"sm\" aria-hidden=\"true\" [name]=\"icon()!\" />\n  }\n  <span class=\"storybook-button__label\" [innerHTML]=\"label() | tnLabelMarkup\"></span>\n  @if (icon() && iconPosition() === 'right') {\n    <tn-icon class=\"storybook-button__icon\" size=\"sm\" aria-hidden=\"true\" [name]=\"icon()!\" />\n  }\n</ng-template>\n\n@if (isRouterLink()) {\n  <a\n    #button\n    tnTestIdType=\"button\"\n    [ngClass]=\"classes()\"\n    [ngStyle]=\"{ 'background-color': backgroundColor() }\"\n    [routerLink]=\"disabled() ? null : routerLink()\"\n    [queryParams]=\"queryParams()\"\n    [fragment]=\"fragment()\"\n    [target]=\"target()\"\n    [rel]=\"rel()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.tabindex]=\"disabled() ? -1 : null\"\n    [class.is-disabled]=\"disabled()\"\n    [tnTestId]=\"testId()\"\n    (click)=\"handleAnchorClick($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </a>\n} @else if (isAnchor()) {\n  <a\n    #button\n    tnTestIdType=\"button\"\n    [ngClass]=\"classes()\"\n    [ngStyle]=\"{ 'background-color': backgroundColor() }\"\n    [attr.href]=\"disabled() ? null : href()\"\n    [target]=\"target()\"\n    [rel]=\"rel()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.tabindex]=\"disabled() ? -1 : null\"\n    [class.is-disabled]=\"disabled()\"\n    [tnTestId]=\"testId()\"\n    (click)=\"handleAnchorClick($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </a>\n} @else {\n  <button\n    #button\n    tnTestIdType=\"button\"\n    [attr.type]=\"type()\"\n    [ngClass]=\"classes()\"\n    [ngStyle]=\"{ 'background-color': backgroundColor() }\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [tnTestId]=\"testId()\"\n    (click)=\"onClick.emit($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </button>\n}\n", styles: [":host{display:inline-block;width:fit-content;justify-self:center}:host(.tn-button--full-width){display:block;width:100%;justify-self:stretch}:host(.tn-button--full-width) .storybook-button{width:100%}.storybook-button ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.storybook-button{display:inline-block;cursor:pointer;border:1px solid transparent;font-weight:500;line-height:1;font-family:IBM Plex Sans,Helvetica Neue,Helvetica,Arial,sans-serif;white-space:nowrap}.storybook-button:disabled,.storybook-button.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.storybook-button--has-icon{display:inline-flex;align-items:center;justify-content:center;gap:8px}.storybook-button__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}a.storybook-button{text-decoration:none;text-align:center}.button-primary{background-color:var(--tn-primary);color:var(--tn-primary-txt)}.button-default{box-shadow:#00000026 0 0 0 1px inset;background-color:var(--tn-btn-default-bg);color:var(--tn-btn-default-txt)}.button-outline-primary{background-color:transparent;border:1px solid var(--tn-primary);color:var(--tn-primary);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-primary:hover{background-color:var(--tn-primary);border:1px solid var(--tn-primary);color:var(--tn-primary-txt)}.button-outline-default{background-color:transparent;border:1px solid var(--tn-lines, #e5e7eb);color:var(--tn-fg1, #000000);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-default:hover{background-color:var(--tn-btn-default-bg);border:1px solid var(--tn-btn-default-bg);color:var(--tn-btn-default-txt);box-shadow:#00000026 0 0 0 1px inset}.button-warn{background-color:var(--tn-red);color:#fff}.button-outline-warn{background-color:transparent;border:1px solid var(--tn-red);color:var(--tn-red);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out}.button-outline-warn:hover{background-color:var(--tn-red);border:1px solid var(--tn-red);color:#fff}.storybook-button--small{padding:10px 16px;font-size:12px}.storybook-button--medium{padding:11px 20px;font-size:14px}.storybook-button--large{padding:12px 24px;font-size:1rem}\n"] }]
-        }], propDecorators: { primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], fragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "fragment", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], innerRef: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], fragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "fragment", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], innerRef: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }] } });
 
 /**
  * Harness for interacting with tn-button in tests.
@@ -2815,6 +2831,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 /* eslint-disable @angular-eslint/no-input-rename */
 // Input aliasing is intentional for directive API consistency (e.g., ixTooltip, ixTooltipPosition)
 // This follows the standard Angular pattern used by Material and other directive-based components
+/**
+ * Elements that can receive focus / are read by assistive tech. Used to decide whether
+ * the directive's host is itself the interactive element, or a wrapper (e.g. `<tn-button>`)
+ * whose inner control should carry `aria-describedby`.
+ */
+const INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, [tabindex]';
 class TnTooltipDirective {
     message = input('', { ...(ngDevMode ? { debugName: "message" } : {}), alias: 'tnTooltip' });
     position = input('above', { ...(ngDevMode ? { debugName: "position" } : {}), alias: 'tnTooltipPosition' });
@@ -2828,27 +2850,99 @@ class TnTooltipDirective {
     _hideTimeout = null;
     _isTooltipVisible = false;
     _positionSub = null;
-    _tooltipId = '';
-    /**
-     * Only point `aria-describedby` at the tooltip when there is actually a message to
-     * describe. Otherwise every host (e.g. an icon button with no tooltip) would carry a
-     * dangling reference to a tooltip element that is never rendered.
-     */
-    get _ariaDescribedBy() {
-        return !this.disabled() && this.message() ? this._tooltipId : null;
-    }
+    // Unique ID for the overlay tooltip element
+    _tooltipId = `tn-tooltip-${Math.random().toString(36).substr(2, 9)}`;
     _overlay = inject(Overlay);
     _elementRef = inject((ElementRef));
     _viewContainerRef = inject(ViewContainerRef);
     _overlayPositionBuilder = inject(OverlayPositionBuilder);
-    ngOnInit() {
-        // Generate unique ID for aria-describedby
-        this._tooltipId = `tn-tooltip-${Math.random().toString(36).substr(2, 9)}`;
+    _ariaDescriber = inject(AriaDescriber);
+    _viewInitialized = false;
+    _describedTarget = null;
+    _describedMessage = '';
+    _innerObserver = null;
+    /**
+     * Re-sync the description (see ngAfterViewInit) when the inputs change. The initial
+     * write cannot happen here: on the first run the host's child components (e.g.
+     * tn-button's inner `<button>`) have not rendered yet.
+     */
+    _syncDescriptionOnInputChange = effect(() => {
+        this.disabled();
+        this.message();
+        if (this._viewInitialized) {
+            this._syncAriaDescription();
+        }
+    }, ...(ngDevMode ? [{ debugName: "_syncDescriptionOnInputChange" }] : []));
+    /**
+     * Expose the message to assistive tech via CDK's AriaDescriber: it keeps the text in
+     * a persistent visually-hidden element (so `aria-describedby` never dangles — the
+     * overlay tooltip only exists while shown) and adds/removes only its own id token,
+     * leaving descriptions the control already carries (form hints, error ids) intact.
+     * The description goes on the interactive element itself: the host when it is one,
+     * otherwise the first interactive descendant (e.g. `<tn-button>`'s inner `<button>`),
+     * because screen readers read descriptions off the focused control, not wrappers.
+     */
+    ngAfterViewInit() {
+        this._viewInitialized = true;
+        this._syncAriaDescription();
+        const host = this._elementRef.nativeElement;
+        if (!host.matches(INTERACTIVE_SELECTOR) && typeof MutationObserver !== 'undefined') {
+            // The inner control can render after view init (@if branches inside the wrapper
+            // swapping, deferred content) — re-describe when the host's subtree changes.
+            // AriaDescriber writes attributes only, which produces no childList mutations,
+            // so this cannot loop.
+            this._innerObserver = new MutationObserver(() => this._syncAriaDescription());
+            this._innerObserver.observe(host, { childList: true, subtree: true });
+        }
+    }
+    _syncAriaDescription() {
+        const host = this._elementRef.nativeElement;
+        let target = host;
+        if (!host.matches(INTERACTIVE_SELECTOR)) {
+            // Forward the description only when it is unambiguous: a wrapper with exactly
+            // one interactive descendant (e.g. tn-button's inner <button>). A container
+            // holding several controls keeps the description on the host — describing an
+            // arbitrary first control would attach the text to the wrong element.
+            const candidates = host.querySelectorAll(INTERACTIVE_SELECTOR);
+            if (candidates.length === 1) {
+                target = candidates[0];
+            }
+        }
+        const message = !this.disabled() ? this._plainTextMessage(this.message()) : '';
+        if (this._describedTarget === target && this._describedMessage === message) {
+            return;
+        }
+        this._removeAriaDescription();
+        if (message) {
+            this._ariaDescriber.describe(target, message);
+            this._describedTarget = target;
+            this._describedMessage = message;
+        }
+    }
+    /**
+     * The overlay tooltip renders its message as HTML (`[innerHTML]`), but AriaDescriber
+     * writes the description as plain text — strip any markup so screen readers never
+     * announce literal tags. DOMParser parses inert markup (no script execution).
+     */
+    _plainTextMessage(message) {
+        if (!message.includes('<') && !message.includes('&')) {
+            return message;
+        }
+        return new DOMParser().parseFromString(message, 'text/html').body.textContent ?? '';
+    }
+    _removeAriaDescription() {
+        if (this._describedTarget && this._describedMessage) {
+            this._ariaDescriber.removeDescription(this._describedTarget, this._describedMessage);
+        }
+        this._describedTarget = null;
+        this._describedMessage = '';
     }
     ngOnDestroy() {
         this._clearTimeouts();
         this.hide(0);
         this._positionSub?.unsubscribe();
+        this._innerObserver?.disconnect();
+        this._removeAriaDescription();
         if (this._overlayRef) {
             this._overlayRef.dispose();
             this._overlayRef = null;
@@ -2862,12 +2956,22 @@ class TnTooltipDirective {
     _onMouseLeave() {
         this.hide(this.hideDelay());
     }
-    _onFocus() {
+    // focusin/focusout (not focus/blur): focus does not bubble, so on a wrapper host
+    // (e.g. `<tn-button>`) a focus listener never fires when the inner control is
+    // focused via keyboard. focusin/focusout bubble and cover both shapes.
+    _onFocusIn() {
         if (!this.disabled() && this.message()) {
             this.show(this.showDelay());
         }
     }
-    _onBlur() {
+    _onFocusOut(event) {
+        // focusout bubbles for every focus move inside the host too — only hide when
+        // focus actually leaves the host, or a wrapper-internal move would tear down
+        // the visible tooltip via the armed hide timeout.
+        const next = event.relatedTarget;
+        if (next && this._elementRef.nativeElement.contains(next)) {
+            return;
+        }
         this.hide(this.hideDelay());
     }
     _onKeydown(event) {
@@ -2877,10 +2981,16 @@ class TnTooltipDirective {
     }
     /** Shows the tooltip */
     show(delay = 0) {
-        if (this.disabled() || !this.message() || this._isTooltipVisible) {
+        if (this.disabled() || !this.message()) {
             return;
         }
+        // Cancel any pending hide even when already visible: a show intent while the
+        // tooltip is up (e.g. focus or pointer re-entering) must keep it up, not let a
+        // previously armed hide timeout tear it down.
         this._clearTimeouts();
+        if (this._isTooltipVisible) {
+            return;
+        }
         this._showTimeout = setTimeout(() => {
             if (!this._overlayRef) {
                 this._createOverlay();
@@ -3001,16 +3111,13 @@ class TnTooltipDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: TnTooltipDirective, isStandalone: true, selector: "[tnTooltip]", inputs: { message: { classPropertyName: "message", publicName: "tnTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "tnTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "tnTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "tnTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "tnTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, tooltipClass: { classPropertyName: "tooltipClass", publicName: "tnTooltipClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "_onMouseEnter()", "mouseleave": "_onMouseLeave()", "focus": "_onFocus()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-describedby": "_ariaDescribedBy" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: TnTooltipDirective, isStandalone: true, selector: "[tnTooltip]", inputs: { message: { classPropertyName: "message", publicName: "tnTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "tnTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "tnTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "tnTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "tnTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, tooltipClass: { classPropertyName: "tooltipClass", publicName: "tnTooltipClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "_onMouseEnter()", "mouseleave": "_onMouseLeave()", "focusin": "_onFocusIn()", "focusout": "_onFocusOut($event)", "keydown": "_onKeydown($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tnTooltip]',
                     standalone: true,
-                    host: {
-                        '[attr.aria-describedby]': '_ariaDescribedBy',
-                    }
                 }]
         }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnTooltip", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnTooltipPosition", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnTooltipDisabled", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnTooltipShowDelay", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnTooltipHideDelay", required: false }] }], tooltipClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnTooltipClass", required: false }] }], _onMouseEnter: [{
                 type: HostListener,
@@ -3018,12 +3125,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             }], _onMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave']
-            }], _onFocus: [{
+            }], _onFocusIn: [{
                 type: HostListener,
-                args: ['focus']
-            }], _onBlur: [{
+                args: ['focusin']
+            }], _onFocusOut: [{
                 type: HostListener,
-                args: ['blur']
+                args: ['focusout', ['$event']]
             }], _onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -6314,7 +6421,7 @@ class TnCardComponent {
         return type ? `tn-card__status--${type}` : 'tn-card__status--neutral';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnCardComponent, isStandalone: true, selector: "tn-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleLink: { classPropertyName: "titleLink", publicName: "titleLink", isSignal: true, isRequired: false, transformFunction: null }, titleRouterLink: { classPropertyName: "titleRouterLink", publicName: "titleRouterLink", isSignal: true, isRequired: false, transformFunction: null }, titleQueryParams: { classPropertyName: "titleQueryParams", publicName: "titleQueryParams", isSignal: true, isRequired: false, transformFunction: null }, titleTooltip: { classPropertyName: "titleTooltip", publicName: "titleTooltip", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, padContent: { classPropertyName: "padContent", publicName: "padContent", isSignal: true, isRequired: false, transformFunction: null }, fillHeight: { classPropertyName: "fillHeight", publicName: "fillHeight", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, headerStatus: { classPropertyName: "headerStatus", publicName: "headerStatus", isSignal: true, isRequired: false, transformFunction: null }, headerControl: { classPropertyName: "headerControl", publicName: "headerControl", isSignal: true, isRequired: false, transformFunction: null }, headerMenu: { classPropertyName: "headerMenu", publicName: "headerMenu", isSignal: true, isRequired: false, transformFunction: null }, headerMenuTriggerTestId: { classPropertyName: "headerMenuTriggerTestId", publicName: "headerMenuTriggerTestId", isSignal: true, isRequired: false, transformFunction: null }, primaryAction: { classPropertyName: "primaryAction", publicName: "primaryAction", isSignal: true, isRequired: false, transformFunction: null }, secondaryAction: { classPropertyName: "secondaryAction", publicName: "secondaryAction", isSignal: true, isRequired: false, transformFunction: null }, footerLink: { classPropertyName: "footerLink", publicName: "footerLink", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tn-card-host--content-height": "!fillHeight()" } }, queries: [{ propertyName: "projectedHeader", first: true, predicate: TnCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "headerActions", first: true, predicate: TnCardHeaderActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerActions", first: true, predicate: TnCardFooterActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"classes()\">\n  <!-- Header section -->\n  @if (hasHeader()) {\n    <div class=\"tn-card__header\">\n      <div class=\"tn-card__header-left\">\n        <ng-content select=\"[tnCardHeader]\" />\n        @if (!projectedHeader() && title()) {\n          <h3 class=\"tn-card__title\">\n            @if (isTitleRouterLink()) {\n              <a\n                class=\"tn-card__title-link\"\n                [routerLink]=\"titleRouterLink()\"\n                [queryParams]=\"titleQueryParams()\">\n                {{ title() }}\n                <tn-icon class=\"tn-card__title-link-icon\" name=\"open-in-new\" library=\"mdi\" size=\"sm\" [attr.aria-hidden]=\"true\" />\n              </a>\n            } @else if (titleLink()) {\n              <span\n                class=\"tn-card__title-link\"\n                role=\"button\"\n                tabindex=\"0\"\n                (click)=\"onTitleClick()\"\n                (keydown.enter)=\"onTitleClick()\"\n                (keydown.space)=\"onTitleClick(); $event.preventDefault()\">\n                {{ title() }}\n                <tn-icon class=\"tn-card__title-link-icon\" name=\"open-in-new\" library=\"mdi\" size=\"sm\" [attr.aria-hidden]=\"true\" />\n              </span>\n            } @else {\n              {{ title() }}\n            }\n\n            @if (titleTooltip(); as tooltip) {\n              <button\n                type=\"button\"\n                class=\"tn-card__title-tooltip\"\n                aria-label=\"More information\"\n                [tnTooltip]=\"tooltip\">\n                <tn-icon name=\"help-circle\" library=\"mdi\" size=\"sm\" [attr.aria-hidden]=\"true\" />\n              </button>\n            }\n          </h3>\n        }\n      </div>\n\n      @if (hasHeaderRight()) {\n      <div class=\"tn-card__header-right\">\n        <!-- Header Status -->\n        @if (headerStatus(); as status) {\n          <div\n            class=\"tn-card__status\"\n            [ngClass]=\"getStatusClass(status?.type)\"\n            [tnTestId]=\"status.testId\">\n            {{ status.label }}\n          </div>\n        }\n\n        <!-- Header Control (Slide Toggle) -->\n        @if (headerControl(); as control) {\n          <div class=\"tn-card__control\">\n            <tn-slide-toggle\n              [label]=\"control.label\"\n              [checked]=\"control.checked\"\n              [disabled]=\"control.disabled || false\"\n              [testId]=\"control.testId\"\n              (change)=\"onControlChange($event)\" />\n          </div>\n        }\n\n        <!-- Projected header actions (escape hatch for custom/permission-gated controls) -->\n        @if (headerActions(); as actions) {\n          <ng-container [ngTemplateOutlet]=\"actions\" />\n        }\n\n        <!-- Header Menu -->\n        @if (headerMenu(); as menu) {\n          @if (menu.length) {\n            <div class=\"tn-card__menu\">\n              <tn-icon-button\n                name=\"dots-vertical\"\n                library=\"mdi\"\n                size=\"md\"\n                ariaLabel=\"Card menu\"\n                [testId]=\"headerMenuTriggerTestId()\"\n                [tnMenuTriggerFor]=\"cardMenu\" />\n              <tn-menu\n                #cardMenu\n                [items]=\"menu\"\n                (menuItemClick)=\"onHeaderMenuItemClick($event)\" />\n            </div>\n          }\n        }\n      </div>\n      }\n    </div>\n  }\n\n  <!-- Content section -->\n  <div class=\"tn-card__content\">\n    <ng-content />\n  </div>\n\n  <!-- Footer section -->\n  @if (hasFooter()) {\n    <div class=\"tn-card__footer\">\n      <div class=\"tn-card__footer-left\">\n        @if (footerLink(); as link) {\n          <button\n            type=\"button\"\n            class=\"tn-card__footer-link\"\n            tnTestIdType=\"link\"\n            [tnTestId]=\"link.testId\"\n            (click)=\"link.handler()\">\n            {{ link.label }}\n          </button>\n        }\n      </div>\n\n      <div class=\"tn-card__footer-right\">\n        @if (secondaryAction(); as action) {\n          <tn-button\n            variant=\"outline\"\n            color=\"default\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            (click)=\"action.handler()\" />\n        }\n\n        @if (primaryAction(); as action) {\n          <tn-button\n            variant=\"filled\"\n            color=\"primary\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            (click)=\"action.handler()\" />\n        }\n\n        <!-- Projected footer actions (escape hatch for custom/permission-gated controls) -->\n        @if (footerActions(); as actions) {\n          <ng-container [ngTemplateOutlet]=\"actions\" />\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [":host{display:block}:host(.tn-card-host--content-height){height:auto}:host(.tn-card-host--content-height) .tn-card{height:auto}.tn-card{height:100%;display:flex;flex-direction:column;border-radius:8px;transition:box-shadow .3s ease;overflow:hidden}.tn-card--elevation-none{box-shadow:none}.tn-card--elevation-low{box-shadow:0 1px 3px #0000001a}.tn-card--elevation-medium{box-shadow:0 4px 6px #0000001a}.tn-card--elevation-high{box-shadow:0 10px 15px #0000001a}.tn-card--bordered{border:1px solid var(--tn-lines, #e5e7eb)}.tn-card--background{background-color:var(--tn-bg2, #ffffff)}.tn-card--padding-small .tn-card__header{padding:12px 16px}.tn-card--padding-medium .tn-card__header{padding:16px 24px}.tn-card--padding-large .tn-card__header{padding:24px 32px}.tn-card--content-padding-none .tn-card__content{padding:0}.tn-card--content-padding-small .tn-card__content{padding:16px}.tn-card--content-padding-medium .tn-card__content{padding:24px}.tn-card--content-padding-large .tn-card__content{padding:32px}.tn-card__content{flex:1;min-height:0;font-size:14px}.tn-card__header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--tn-lines, #e5e7eb)}.tn-card__header-left{flex:1;min-width:0}.tn-card__header-right{display:flex;align-items:center;gap:12px;flex-shrink:0}.tn-card__title{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #1f2937);line-height:1.5}.tn-card__title-link{display:inline-flex;align-items:center;gap:4px;color:inherit;cursor:pointer;text-decoration:none;transition:color .2s ease}.tn-card__title-link:hover{color:var(--tn-primary, #2563eb)}.tn-card__title-link-icon{flex-shrink:0}.tn-card__title-tooltip{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tn-fg2, #6c757d);cursor:help;line-height:0}.tn-card__title-tooltip:hover,.tn-card__title-tooltip:focus-visible{color:var(--tn-fg1, #1f2937)}.tn-card__status{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.tn-card__status--success{background-color:#10b9811a;color:var(--tn-success, #10b981)}.tn-card__status--warning{background-color:#f59e0b1a;color:var(--tn-warning, #f59e0b)}.tn-card__status--error{background-color:#ef44441a;color:var(--tn-error, #ef4444)}.tn-card__status--info{background-color:#3b82f61a;color:var(--tn-info, #3b82f6)}.tn-card__status--neutral{background-color:#6b72801a;color:var(--tn-fg2, #6b7280)}.tn-card__control,.tn-card__menu{display:flex;align-items:center}.tn-card__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--tn-lines, #e5e7eb);padding:16px 24px}.tn-card--padding-small .tn-card__footer{padding:12px 16px}.tn-card--padding-large .tn-card__footer{padding:24px 32px}.tn-card__footer-left{flex:1;min-width:0}.tn-card__footer-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.tn-card__footer-link{border:none;background:transparent;color:var(--tn-primary, #2563eb);font-size:1rem;font-weight:600;cursor:pointer;padding:0;text-decoration:none;transition:color .2s ease}.tn-card__footer-link:hover{color:var(--tn-primary-dark, #1d4ed8);text-decoration:underline}.tn-card__footer-link:focus{outline:2px solid var(--tn-primary, #2563eb);outline-offset:2px;border-radius:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "icon", "iconPosition", "disabled", "fullWidth", "type", "testId", "href", "routerLink", "queryParams", "fragment", "target", "rel", "ariaLabel"], outputs: ["onClick"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "library", "iconClass"], outputs: ["onClick"] }, { kind: "component", type: TnSlideToggleComponent, selector: "tn-slide-toggle", inputs: ["labelPosition", "label", "fullWidth", "disabled", "required", "color", "testId", "ariaLabel", "ariaLabelledby", "checked"], outputs: ["change", "toggleChange"] }, { kind: "component", type: TnMenuComponent, selector: "tn-menu", inputs: ["items", "contextMenu", "testId"], outputs: ["menuItemClick", "menuOpen", "menuClose"] }, { kind: "directive", type: TnMenuTriggerDirective, selector: "[tnMenuTriggerFor]", inputs: ["tnMenuTriggerFor", "tnMenuPosition"], exportAs: ["tnMenuTrigger"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "directive", type: TnTooltipDirective, selector: "[tnTooltip]", inputs: ["tnTooltip", "tnTooltipPosition", "tnTooltipDisabled", "tnTooltipShowDelay", "tnTooltipHideDelay", "tnTooltipClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnCardComponent, isStandalone: true, selector: "tn-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleLink: { classPropertyName: "titleLink", publicName: "titleLink", isSignal: true, isRequired: false, transformFunction: null }, titleRouterLink: { classPropertyName: "titleRouterLink", publicName: "titleRouterLink", isSignal: true, isRequired: false, transformFunction: null }, titleQueryParams: { classPropertyName: "titleQueryParams", publicName: "titleQueryParams", isSignal: true, isRequired: false, transformFunction: null }, titleTooltip: { classPropertyName: "titleTooltip", publicName: "titleTooltip", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, padContent: { classPropertyName: "padContent", publicName: "padContent", isSignal: true, isRequired: false, transformFunction: null }, fillHeight: { classPropertyName: "fillHeight", publicName: "fillHeight", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, headerStatus: { classPropertyName: "headerStatus", publicName: "headerStatus", isSignal: true, isRequired: false, transformFunction: null }, headerControl: { classPropertyName: "headerControl", publicName: "headerControl", isSignal: true, isRequired: false, transformFunction: null }, headerMenu: { classPropertyName: "headerMenu", publicName: "headerMenu", isSignal: true, isRequired: false, transformFunction: null }, headerMenuTriggerTestId: { classPropertyName: "headerMenuTriggerTestId", publicName: "headerMenuTriggerTestId", isSignal: true, isRequired: false, transformFunction: null }, primaryAction: { classPropertyName: "primaryAction", publicName: "primaryAction", isSignal: true, isRequired: false, transformFunction: null }, secondaryAction: { classPropertyName: "secondaryAction", publicName: "secondaryAction", isSignal: true, isRequired: false, transformFunction: null }, footerLink: { classPropertyName: "footerLink", publicName: "footerLink", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tn-card-host--content-height": "!fillHeight()" } }, queries: [{ propertyName: "projectedHeader", first: true, predicate: TnCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "headerActions", first: true, predicate: TnCardHeaderActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerActions", first: true, predicate: TnCardFooterActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"classes()\">\n  <!-- Header section -->\n  @if (hasHeader()) {\n    <div class=\"tn-card__header\">\n      <div class=\"tn-card__header-left\">\n        <ng-content select=\"[tnCardHeader]\" />\n        @if (!projectedHeader() && title()) {\n          <h3 class=\"tn-card__title\">\n            @if (isTitleRouterLink()) {\n              <a\n                class=\"tn-card__title-link\"\n                [routerLink]=\"titleRouterLink()\"\n                [queryParams]=\"titleQueryParams()\">\n                {{ title() }}\n                <tn-icon class=\"tn-card__title-link-icon\" name=\"open-in-new\" library=\"mdi\" size=\"sm\" [attr.aria-hidden]=\"true\" />\n              </a>\n            } @else if (titleLink()) {\n              <span\n                class=\"tn-card__title-link\"\n                role=\"button\"\n                tabindex=\"0\"\n                (click)=\"onTitleClick()\"\n                (keydown.enter)=\"onTitleClick()\"\n                (keydown.space)=\"onTitleClick(); $event.preventDefault()\">\n                {{ title() }}\n                <tn-icon class=\"tn-card__title-link-icon\" name=\"open-in-new\" library=\"mdi\" size=\"sm\" [attr.aria-hidden]=\"true\" />\n              </span>\n            } @else {\n              {{ title() }}\n            }\n\n            @if (titleTooltip(); as tooltip) {\n              <button\n                type=\"button\"\n                class=\"tn-card__title-tooltip\"\n                aria-label=\"More information\"\n                [tnTooltip]=\"tooltip\">\n                <tn-icon name=\"help-circle\" library=\"mdi\" size=\"sm\" [attr.aria-hidden]=\"true\" />\n              </button>\n            }\n          </h3>\n        }\n      </div>\n\n      @if (hasHeaderRight()) {\n      <div class=\"tn-card__header-right\">\n        <!-- Header Status -->\n        @if (headerStatus(); as status) {\n          <div\n            class=\"tn-card__status\"\n            [ngClass]=\"getStatusClass(status?.type)\"\n            [tnTestId]=\"status.testId\">\n            {{ status.label }}\n          </div>\n        }\n\n        <!-- Header Control (Slide Toggle) -->\n        @if (headerControl(); as control) {\n          <div class=\"tn-card__control\">\n            <tn-slide-toggle\n              [label]=\"control.label\"\n              [checked]=\"control.checked\"\n              [disabled]=\"control.disabled || false\"\n              [testId]=\"control.testId\"\n              (change)=\"onControlChange($event)\" />\n          </div>\n        }\n\n        <!-- Projected header actions (escape hatch for custom/permission-gated controls) -->\n        @if (headerActions(); as actions) {\n          <ng-container [ngTemplateOutlet]=\"actions\" />\n        }\n\n        <!-- Header Menu -->\n        @if (headerMenu(); as menu) {\n          @if (menu.length) {\n            <div class=\"tn-card__menu\">\n              <tn-icon-button\n                name=\"dots-vertical\"\n                library=\"mdi\"\n                size=\"md\"\n                ariaLabel=\"Card menu\"\n                [testId]=\"headerMenuTriggerTestId()\"\n                [tnMenuTriggerFor]=\"cardMenu\" />\n              <tn-menu\n                #cardMenu\n                [items]=\"menu\"\n                (menuItemClick)=\"onHeaderMenuItemClick($event)\" />\n            </div>\n          }\n        }\n      </div>\n      }\n    </div>\n  }\n\n  <!-- Content section -->\n  <div class=\"tn-card__content\">\n    <ng-content />\n  </div>\n\n  <!-- Footer section -->\n  @if (hasFooter()) {\n    <div class=\"tn-card__footer\">\n      <div class=\"tn-card__footer-left\">\n        @if (footerLink(); as link) {\n          <button\n            type=\"button\"\n            class=\"tn-card__footer-link\"\n            tnTestIdType=\"link\"\n            [tnTestId]=\"link.testId\"\n            (click)=\"link.handler()\">\n            {{ link.label }}\n          </button>\n        }\n      </div>\n\n      <div class=\"tn-card__footer-right\">\n        @if (secondaryAction(); as action) {\n          <tn-button\n            variant=\"outline\"\n            color=\"default\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            [tnTooltip]=\"action.tooltip || ''\"\n            (click)=\"action.handler()\" />\n        }\n\n        @if (primaryAction(); as action) {\n          <tn-button\n            variant=\"filled\"\n            color=\"primary\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            [tnTooltip]=\"action.tooltip || ''\"\n            (click)=\"action.handler()\" />\n        }\n\n        <!-- Projected footer actions (escape hatch for custom/permission-gated controls) -->\n        @if (footerActions(); as actions) {\n          <ng-container [ngTemplateOutlet]=\"actions\" />\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [":host{display:block}:host(.tn-card-host--content-height){height:auto}:host(.tn-card-host--content-height) .tn-card{height:auto}.tn-card{height:100%;display:flex;flex-direction:column;border-radius:8px;transition:box-shadow .3s ease;overflow:hidden}.tn-card--elevation-none{box-shadow:none}.tn-card--elevation-low{box-shadow:0 1px 3px #0000001a}.tn-card--elevation-medium{box-shadow:0 4px 6px #0000001a}.tn-card--elevation-high{box-shadow:0 10px 15px #0000001a}.tn-card--bordered{border:1px solid var(--tn-lines, #e5e7eb)}.tn-card--background{background-color:var(--tn-bg2, #ffffff)}.tn-card--padding-small .tn-card__header{padding:12px 16px}.tn-card--padding-medium .tn-card__header{padding:16px 24px}.tn-card--padding-large .tn-card__header{padding:24px 32px}.tn-card--content-padding-none .tn-card__content{padding:0}.tn-card--content-padding-small .tn-card__content{padding:16px}.tn-card--content-padding-medium .tn-card__content{padding:24px}.tn-card--content-padding-large .tn-card__content{padding:32px}.tn-card__content{flex:1;min-height:0;font-size:14px}.tn-card__header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--tn-lines, #e5e7eb)}.tn-card__header-left{flex:1;min-width:0}.tn-card__header-right{display:flex;align-items:center;gap:12px;flex-shrink:0}.tn-card__title{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #1f2937);line-height:1.5}.tn-card__title-link{display:inline-flex;align-items:center;gap:4px;color:inherit;cursor:pointer;text-decoration:none;transition:color .2s ease}.tn-card__title-link:hover{color:var(--tn-primary, #2563eb)}.tn-card__title-link-icon{flex-shrink:0}.tn-card__title-tooltip{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tn-fg2, #6c757d);cursor:help;line-height:0}.tn-card__title-tooltip:hover,.tn-card__title-tooltip:focus-visible{color:var(--tn-fg1, #1f2937)}.tn-card__status{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.tn-card__status--success{background-color:#10b9811a;color:var(--tn-success, #10b981)}.tn-card__status--warning{background-color:#f59e0b1a;color:var(--tn-warning, #f59e0b)}.tn-card__status--error{background-color:#ef44441a;color:var(--tn-error, #ef4444)}.tn-card__status--info{background-color:#3b82f61a;color:var(--tn-info, #3b82f6)}.tn-card__status--neutral{background-color:#6b72801a;color:var(--tn-fg2, #6b7280)}.tn-card__control,.tn-card__menu{display:flex;align-items:center}.tn-card__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--tn-lines, #e5e7eb);padding:16px 24px}.tn-card--padding-small .tn-card__footer{padding:12px 16px}.tn-card--padding-large .tn-card__footer{padding:24px 32px}.tn-card__footer-left{flex:1;min-width:0}.tn-card__footer-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.tn-card__footer-link{border:none;background:transparent;color:var(--tn-primary, #2563eb);font-size:1rem;font-weight:600;cursor:pointer;padding:0;text-decoration:none;transition:color .2s ease}.tn-card__footer-link:hover{color:var(--tn-primary-dark, #1d4ed8);text-decoration:underline}.tn-card__footer-link:focus{outline:2px solid var(--tn-primary, #2563eb);outline-offset:2px;border-radius:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "icon", "iconPosition", "disabled", "fullWidth", "type", "testId", "href", "routerLink", "queryParams", "fragment", "target", "rel", "ariaLabel"], outputs: ["onClick"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "library", "iconClass"], outputs: ["onClick"] }, { kind: "component", type: TnSlideToggleComponent, selector: "tn-slide-toggle", inputs: ["labelPosition", "label", "fullWidth", "disabled", "required", "color", "testId", "ariaLabel", "ariaLabelledby", "checked"], outputs: ["change", "toggleChange"] }, { kind: "component", type: TnMenuComponent, selector: "tn-menu", inputs: ["items", "contextMenu", "testId"], outputs: ["menuItemClick", "menuOpen", "menuClose"] }, { kind: "directive", type: TnMenuTriggerDirective, selector: "[tnMenuTriggerFor]", inputs: ["tnMenuTriggerFor", "tnMenuPosition"], exportAs: ["tnMenuTrigger"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "directive", type: TnTooltipDirective, selector: "[tnTooltip]", inputs: ["tnTooltip", "tnTooltipPosition", "tnTooltipDisabled", "tnTooltipShowDelay", "tnTooltipHideDelay", "tnTooltipClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCardComponent, decorators: [{
             type: Component,
@@ -6331,7 +6438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         TnTooltipDirective,
                     ], host: {
                         '[class.tn-card-host--content-height]': '!fillHeight()',
-                    }, template: "<div [ngClass]=\"classes()\">\n  <!-- Header section -->\n  @if (hasHeader()) {\n    <div class=\"tn-card__header\">\n      <div class=\"tn-card__header-left\">\n        <ng-content select=\"[tnCardHeader]\" />\n        @if (!projectedHeader() && title()) {\n          <h3 class=\"tn-card__title\">\n            @if (isTitleRouterLink()) {\n              <a\n                class=\"tn-card__title-link\"\n                [routerLink]=\"titleRouterLink()\"\n                [queryParams]=\"titleQueryParams()\">\n                {{ title() }}\n                <tn-icon class=\"tn-card__title-link-icon\" name=\"open-in-new\" library=\"mdi\" size=\"sm\" [attr.aria-hidden]=\"true\" />\n              </a>\n            } @else if (titleLink()) {\n              <span\n                class=\"tn-card__title-link\"\n                role=\"button\"\n                tabindex=\"0\"\n                (click)=\"onTitleClick()\"\n                (keydown.enter)=\"onTitleClick()\"\n                (keydown.space)=\"onTitleClick(); $event.preventDefault()\">\n                {{ title() }}\n                <tn-icon class=\"tn-card__title-link-icon\" name=\"open-in-new\" library=\"mdi\" size=\"sm\" [attr.aria-hidden]=\"true\" />\n              </span>\n            } @else {\n              {{ title() }}\n            }\n\n            @if (titleTooltip(); as tooltip) {\n              <button\n                type=\"button\"\n                class=\"tn-card__title-tooltip\"\n                aria-label=\"More information\"\n                [tnTooltip]=\"tooltip\">\n                <tn-icon name=\"help-circle\" library=\"mdi\" size=\"sm\" [attr.aria-hidden]=\"true\" />\n              </button>\n            }\n          </h3>\n        }\n      </div>\n\n      @if (hasHeaderRight()) {\n      <div class=\"tn-card__header-right\">\n        <!-- Header Status -->\n        @if (headerStatus(); as status) {\n          <div\n            class=\"tn-card__status\"\n            [ngClass]=\"getStatusClass(status?.type)\"\n            [tnTestId]=\"status.testId\">\n            {{ status.label }}\n          </div>\n        }\n\n        <!-- Header Control (Slide Toggle) -->\n        @if (headerControl(); as control) {\n          <div class=\"tn-card__control\">\n            <tn-slide-toggle\n              [label]=\"control.label\"\n              [checked]=\"control.checked\"\n              [disabled]=\"control.disabled || false\"\n              [testId]=\"control.testId\"\n              (change)=\"onControlChange($event)\" />\n          </div>\n        }\n\n        <!-- Projected header actions (escape hatch for custom/permission-gated controls) -->\n        @if (headerActions(); as actions) {\n          <ng-container [ngTemplateOutlet]=\"actions\" />\n        }\n\n        <!-- Header Menu -->\n        @if (headerMenu(); as menu) {\n          @if (menu.length) {\n            <div class=\"tn-card__menu\">\n              <tn-icon-button\n                name=\"dots-vertical\"\n                library=\"mdi\"\n                size=\"md\"\n                ariaLabel=\"Card menu\"\n                [testId]=\"headerMenuTriggerTestId()\"\n                [tnMenuTriggerFor]=\"cardMenu\" />\n              <tn-menu\n                #cardMenu\n                [items]=\"menu\"\n                (menuItemClick)=\"onHeaderMenuItemClick($event)\" />\n            </div>\n          }\n        }\n      </div>\n      }\n    </div>\n  }\n\n  <!-- Content section -->\n  <div class=\"tn-card__content\">\n    <ng-content />\n  </div>\n\n  <!-- Footer section -->\n  @if (hasFooter()) {\n    <div class=\"tn-card__footer\">\n      <div class=\"tn-card__footer-left\">\n        @if (footerLink(); as link) {\n          <button\n            type=\"button\"\n            class=\"tn-card__footer-link\"\n            tnTestIdType=\"link\"\n            [tnTestId]=\"link.testId\"\n            (click)=\"link.handler()\">\n            {{ link.label }}\n          </button>\n        }\n      </div>\n\n      <div class=\"tn-card__footer-right\">\n        @if (secondaryAction(); as action) {\n          <tn-button\n            variant=\"outline\"\n            color=\"default\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            (click)=\"action.handler()\" />\n        }\n\n        @if (primaryAction(); as action) {\n          <tn-button\n            variant=\"filled\"\n            color=\"primary\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            (click)=\"action.handler()\" />\n        }\n\n        <!-- Projected footer actions (escape hatch for custom/permission-gated controls) -->\n        @if (footerActions(); as actions) {\n          <ng-container [ngTemplateOutlet]=\"actions\" />\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [":host{display:block}:host(.tn-card-host--content-height){height:auto}:host(.tn-card-host--content-height) .tn-card{height:auto}.tn-card{height:100%;display:flex;flex-direction:column;border-radius:8px;transition:box-shadow .3s ease;overflow:hidden}.tn-card--elevation-none{box-shadow:none}.tn-card--elevation-low{box-shadow:0 1px 3px #0000001a}.tn-card--elevation-medium{box-shadow:0 4px 6px #0000001a}.tn-card--elevation-high{box-shadow:0 10px 15px #0000001a}.tn-card--bordered{border:1px solid var(--tn-lines, #e5e7eb)}.tn-card--background{background-color:var(--tn-bg2, #ffffff)}.tn-card--padding-small .tn-card__header{padding:12px 16px}.tn-card--padding-medium .tn-card__header{padding:16px 24px}.tn-card--padding-large .tn-card__header{padding:24px 32px}.tn-card--content-padding-none .tn-card__content{padding:0}.tn-card--content-padding-small .tn-card__content{padding:16px}.tn-card--content-padding-medium .tn-card__content{padding:24px}.tn-card--content-padding-large .tn-card__content{padding:32px}.tn-card__content{flex:1;min-height:0;font-size:14px}.tn-card__header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--tn-lines, #e5e7eb)}.tn-card__header-left{flex:1;min-width:0}.tn-card__header-right{display:flex;align-items:center;gap:12px;flex-shrink:0}.tn-card__title{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #1f2937);line-height:1.5}.tn-card__title-link{display:inline-flex;align-items:center;gap:4px;color:inherit;cursor:pointer;text-decoration:none;transition:color .2s ease}.tn-card__title-link:hover{color:var(--tn-primary, #2563eb)}.tn-card__title-link-icon{flex-shrink:0}.tn-card__title-tooltip{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tn-fg2, #6c757d);cursor:help;line-height:0}.tn-card__title-tooltip:hover,.tn-card__title-tooltip:focus-visible{color:var(--tn-fg1, #1f2937)}.tn-card__status{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.tn-card__status--success{background-color:#10b9811a;color:var(--tn-success, #10b981)}.tn-card__status--warning{background-color:#f59e0b1a;color:var(--tn-warning, #f59e0b)}.tn-card__status--error{background-color:#ef44441a;color:var(--tn-error, #ef4444)}.tn-card__status--info{background-color:#3b82f61a;color:var(--tn-info, #3b82f6)}.tn-card__status--neutral{background-color:#6b72801a;color:var(--tn-fg2, #6b7280)}.tn-card__control,.tn-card__menu{display:flex;align-items:center}.tn-card__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--tn-lines, #e5e7eb);padding:16px 24px}.tn-card--padding-small .tn-card__footer{padding:12px 16px}.tn-card--padding-large .tn-card__footer{padding:24px 32px}.tn-card__footer-left{flex:1;min-width:0}.tn-card__footer-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.tn-card__footer-link{border:none;background:transparent;color:var(--tn-primary, #2563eb);font-size:1rem;font-weight:600;cursor:pointer;padding:0;text-decoration:none;transition:color .2s ease}.tn-card__footer-link:hover{color:var(--tn-primary-dark, #1d4ed8);text-decoration:underline}.tn-card__footer-link:focus{outline:2px solid var(--tn-primary, #2563eb);outline-offset:2px;border-radius:2px}\n"] }]
+                    }, template: "<div [ngClass]=\"classes()\">\n  <!-- Header section -->\n  @if (hasHeader()) {\n    <div class=\"tn-card__header\">\n      <div class=\"tn-card__header-left\">\n        <ng-content select=\"[tnCardHeader]\" />\n        @if (!projectedHeader() && title()) {\n          <h3 class=\"tn-card__title\">\n            @if (isTitleRouterLink()) {\n              <a\n                class=\"tn-card__title-link\"\n                [routerLink]=\"titleRouterLink()\"\n                [queryParams]=\"titleQueryParams()\">\n                {{ title() }}\n                <tn-icon class=\"tn-card__title-link-icon\" name=\"open-in-new\" library=\"mdi\" size=\"sm\" [attr.aria-hidden]=\"true\" />\n              </a>\n            } @else if (titleLink()) {\n              <span\n                class=\"tn-card__title-link\"\n                role=\"button\"\n                tabindex=\"0\"\n                (click)=\"onTitleClick()\"\n                (keydown.enter)=\"onTitleClick()\"\n                (keydown.space)=\"onTitleClick(); $event.preventDefault()\">\n                {{ title() }}\n                <tn-icon class=\"tn-card__title-link-icon\" name=\"open-in-new\" library=\"mdi\" size=\"sm\" [attr.aria-hidden]=\"true\" />\n              </span>\n            } @else {\n              {{ title() }}\n            }\n\n            @if (titleTooltip(); as tooltip) {\n              <button\n                type=\"button\"\n                class=\"tn-card__title-tooltip\"\n                aria-label=\"More information\"\n                [tnTooltip]=\"tooltip\">\n                <tn-icon name=\"help-circle\" library=\"mdi\" size=\"sm\" [attr.aria-hidden]=\"true\" />\n              </button>\n            }\n          </h3>\n        }\n      </div>\n\n      @if (hasHeaderRight()) {\n      <div class=\"tn-card__header-right\">\n        <!-- Header Status -->\n        @if (headerStatus(); as status) {\n          <div\n            class=\"tn-card__status\"\n            [ngClass]=\"getStatusClass(status?.type)\"\n            [tnTestId]=\"status.testId\">\n            {{ status.label }}\n          </div>\n        }\n\n        <!-- Header Control (Slide Toggle) -->\n        @if (headerControl(); as control) {\n          <div class=\"tn-card__control\">\n            <tn-slide-toggle\n              [label]=\"control.label\"\n              [checked]=\"control.checked\"\n              [disabled]=\"control.disabled || false\"\n              [testId]=\"control.testId\"\n              (change)=\"onControlChange($event)\" />\n          </div>\n        }\n\n        <!-- Projected header actions (escape hatch for custom/permission-gated controls) -->\n        @if (headerActions(); as actions) {\n          <ng-container [ngTemplateOutlet]=\"actions\" />\n        }\n\n        <!-- Header Menu -->\n        @if (headerMenu(); as menu) {\n          @if (menu.length) {\n            <div class=\"tn-card__menu\">\n              <tn-icon-button\n                name=\"dots-vertical\"\n                library=\"mdi\"\n                size=\"md\"\n                ariaLabel=\"Card menu\"\n                [testId]=\"headerMenuTriggerTestId()\"\n                [tnMenuTriggerFor]=\"cardMenu\" />\n              <tn-menu\n                #cardMenu\n                [items]=\"menu\"\n                (menuItemClick)=\"onHeaderMenuItemClick($event)\" />\n            </div>\n          }\n        }\n      </div>\n      }\n    </div>\n  }\n\n  <!-- Content section -->\n  <div class=\"tn-card__content\">\n    <ng-content />\n  </div>\n\n  <!-- Footer section -->\n  @if (hasFooter()) {\n    <div class=\"tn-card__footer\">\n      <div class=\"tn-card__footer-left\">\n        @if (footerLink(); as link) {\n          <button\n            type=\"button\"\n            class=\"tn-card__footer-link\"\n            tnTestIdType=\"link\"\n            [tnTestId]=\"link.testId\"\n            (click)=\"link.handler()\">\n            {{ link.label }}\n          </button>\n        }\n      </div>\n\n      <div class=\"tn-card__footer-right\">\n        @if (secondaryAction(); as action) {\n          <tn-button\n            variant=\"outline\"\n            color=\"default\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            [tnTooltip]=\"action.tooltip || ''\"\n            (click)=\"action.handler()\" />\n        }\n\n        @if (primaryAction(); as action) {\n          <tn-button\n            variant=\"filled\"\n            color=\"primary\"\n            [label]=\"action.label\"\n            [disabled]=\"action.disabled || false\"\n            [testId]=\"action.testId\"\n            [tnTooltip]=\"action.tooltip || ''\"\n            (click)=\"action.handler()\" />\n        }\n\n        <!-- Projected footer actions (escape hatch for custom/permission-gated controls) -->\n        @if (footerActions(); as actions) {\n          <ng-container [ngTemplateOutlet]=\"actions\" />\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [":host{display:block}:host(.tn-card-host--content-height){height:auto}:host(.tn-card-host--content-height) .tn-card{height:auto}.tn-card{height:100%;display:flex;flex-direction:column;border-radius:8px;transition:box-shadow .3s ease;overflow:hidden}.tn-card--elevation-none{box-shadow:none}.tn-card--elevation-low{box-shadow:0 1px 3px #0000001a}.tn-card--elevation-medium{box-shadow:0 4px 6px #0000001a}.tn-card--elevation-high{box-shadow:0 10px 15px #0000001a}.tn-card--bordered{border:1px solid var(--tn-lines, #e5e7eb)}.tn-card--background{background-color:var(--tn-bg2, #ffffff)}.tn-card--padding-small .tn-card__header{padding:12px 16px}.tn-card--padding-medium .tn-card__header{padding:16px 24px}.tn-card--padding-large .tn-card__header{padding:24px 32px}.tn-card--content-padding-none .tn-card__content{padding:0}.tn-card--content-padding-small .tn-card__content{padding:16px}.tn-card--content-padding-medium .tn-card__content{padding:24px}.tn-card--content-padding-large .tn-card__content{padding:32px}.tn-card__content{flex:1;min-height:0;font-size:14px}.tn-card__header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--tn-lines, #e5e7eb)}.tn-card__header-left{flex:1;min-width:0}.tn-card__header-right{display:flex;align-items:center;gap:12px;flex-shrink:0}.tn-card__title{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #1f2937);line-height:1.5}.tn-card__title-link{display:inline-flex;align-items:center;gap:4px;color:inherit;cursor:pointer;text-decoration:none;transition:color .2s ease}.tn-card__title-link:hover{color:var(--tn-primary, #2563eb)}.tn-card__title-link-icon{flex-shrink:0}.tn-card__title-tooltip{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tn-fg2, #6c757d);cursor:help;line-height:0}.tn-card__title-tooltip:hover,.tn-card__title-tooltip:focus-visible{color:var(--tn-fg1, #1f2937)}.tn-card__status{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.tn-card__status--success{background-color:#10b9811a;color:var(--tn-success, #10b981)}.tn-card__status--warning{background-color:#f59e0b1a;color:var(--tn-warning, #f59e0b)}.tn-card__status--error{background-color:#ef44441a;color:var(--tn-error, #ef4444)}.tn-card__status--info{background-color:#3b82f61a;color:var(--tn-info, #3b82f6)}.tn-card__status--neutral{background-color:#6b72801a;color:var(--tn-fg2, #6b7280)}.tn-card__control,.tn-card__menu{display:flex;align-items:center}.tn-card__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--tn-lines, #e5e7eb);padding:16px 24px}.tn-card--padding-small .tn-card__footer{padding:12px 16px}.tn-card--padding-large .tn-card__footer{padding:24px 32px}.tn-card__footer-left{flex:1;min-width:0}.tn-card__footer-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.tn-card__footer-link{border:none;background:transparent;color:var(--tn-primary, #2563eb);font-size:1rem;font-weight:600;cursor:pointer;padding:0;text-decoration:none;transition:color .2s ease}.tn-card__footer-link:hover{color:var(--tn-primary-dark, #1d4ed8);text-decoration:underline}.tn-card__footer-link:focus{outline:2px solid var(--tn-primary, #2563eb);outline-offset:2px;border-radius:2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { projectedHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnCardHeaderDirective), { isSignal: true }] }], headerActions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnCardHeaderActionsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], footerActions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TnCardFooterActionsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLink", required: false }] }], titleRouterLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleRouterLink", required: false }] }], titleQueryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleQueryParams", required: false }] }], titleTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleTooltip", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], padContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "padContent", required: false }] }], fillHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillHeight", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], headerStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerStatus", required: false }] }], headerControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerControl", required: false }] }], headerMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerMenu", required: false }] }], headerMenuTriggerTestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerMenuTriggerTestId", required: false }] }], primaryAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryAction", required: false }] }], secondaryAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryAction", required: false }] }], footerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerLink", required: false }] }] } });
 
 class TnExpansionPanelComponent {