@tociva/tailng-ui 0.11.0 → 0.13.0

package/fesm2022/tociva-tailng-ui-navigation.mjs

@@ -1,22 +1,785 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports$1) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports$1, p)) __createBinding(exports$1, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./lib"), exports);
+import * as i0 from '@angular/core';
+import { input, computed, Component, output, signal, effect, TemplateRef, ViewChild, ContentChild, Directive, inject, HostListener, ElementRef, booleanAttribute, HostBinding, numberAttribute, contentChildren } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { TngFocusTrap } from '@tociva/tailng-cdk/a11y';
+import * as i1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import { TngConnectedOverlay, TngOverlayPanel, TngOverlayRef } from '@tociva/tailng-ui/popups-overlays';
+
+class TngBreadcrumbs {
+    /** Items */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Optional Home crumb (prepended) */
+    home = input(null, ...(ngDevMode ? [{ debugName: "home" }] : []));
+    /** Separator text (if you later want icons, change template to project) */
+    separator = input('/', ...(ngDevMode ? [{ debugName: "separator" }] : []));
+    /** a11y label */
+    ariaLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /* =====================
+     * Klass inputs (Tailng style)
+     * ===================== */
+    rootKlass = input('flex items-center text-sm text-muted-foreground', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    listKlass = input('flex items-center flex-wrap gap-1', ...(ngDevMode ? [{ debugName: "listKlass" }] : []));
+    itemKlass = input('inline-flex items-center', ...(ngDevMode ? [{ debugName: "itemKlass" }] : []));
+    linkKlass = input('text-primary hover:underline', ...(ngDevMode ? [{ debugName: "linkKlass" }] : []));
+    currentKlass = input('text-foreground font-medium', ...(ngDevMode ? [{ debugName: "currentKlass" }] : []));
+    disabledKlass = input('opacity-60 pointer-events-none', ...(ngDevMode ? [{ debugName: "disabledKlass" }] : []));
+    separatorKlass = input('mx-2 text-slate-400', ...(ngDevMode ? [{ debugName: "separatorKlass" }] : []));
+    /* =====================
+     * Derived
+     * ===================== */
+    resolvedItems = computed(() => {
+        const home = this.home();
+        const items = this.items() ?? [];
+        return home ? [home, ...items] : items;
+    }, ...(ngDevMode ? [{ debugName: "resolvedItems" }] : []));
+    currentIndex = computed(() => {
+        const items = this.resolvedItems();
+        const explicit = items.findIndex((x) => !!x.current);
+        return explicit >= 0 ? explicit : Math.max(0, items.length - 1);
+    }, ...(ngDevMode ? [{ debugName: "currentIndex" }] : []));
+    isCurrent(i) {
+        return i === this.currentIndex();
+    }
+    isClickable(item, i) {
+        if (item.disabled)
+            return false;
+        if (this.isCurrent(i))
+            return false;
+        return !!item.route || !!item.href;
+    }
+    itemClasses(item, i) {
+        const base = this.itemKlass();
+        const disabled = item.disabled ? ` ${this.disabledKlass()}` : '';
+        return `${base}${disabled}`.trim();
+    }
+    labelClasses(item, i) {
+        const isCurrent = this.isCurrent(i);
+        return (isCurrent ? this.currentKlass() : this.linkKlass()).trim();
+    }
+    relFor(item) {
+        if (!item.href)
+            return null;
+        if (item.rel)
+            return item.rel;
+        return item.target === '_blank' ? 'noopener noreferrer' : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngBreadcrumbs, isStandalone: true, selector: "tng-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, home: { classPropertyName: "home", publicName: "home", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, listKlass: { classPropertyName: "listKlass", publicName: "listKlass", isSignal: true, isRequired: false, transformFunction: null }, itemKlass: { classPropertyName: "itemKlass", publicName: "itemKlass", isSignal: true, isRequired: false, transformFunction: null }, linkKlass: { classPropertyName: "linkKlass", publicName: "linkKlass", isSignal: true, isRequired: false, transformFunction: null }, currentKlass: { classPropertyName: "currentKlass", publicName: "currentKlass", isSignal: true, isRequired: false, transformFunction: null }, disabledKlass: { classPropertyName: "disabledKlass", publicName: "disabledKlass", isSignal: true, isRequired: false, transformFunction: null }, separatorKlass: { classPropertyName: "separatorKlass", publicName: "separatorKlass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"rootKlass()\">\n  <ol [class]=\"listKlass()\">\n    @for (item of resolvedItems(); track $index; let i = $index; let last = $last) {\n      <li [class]=\"itemClasses(item, i)\">\n        <!-- Internal route -->\n        @if (item.route && isClickable(item, i)) {\n          <a\n            [routerLink]=\"item.route\"\n            [class]=\"labelClasses(item, i)\"\n          >\n            {{ item.label }}\n          </a>\n        }\n        <!-- External link -->\n        @else if (item.href && isClickable(item, i)) {\n          <a\n            [href]=\"item.href\"\n            [target]=\"item.target ?? null\"\n            [attr.rel]=\"relFor(item)\"\n            [class]=\"labelClasses(item, i)\"\n          >\n            {{ item.label }}\n          </a>\n        }\n        <!-- Current/disabled/plain -->\n        @else {\n          <span\n            [class]=\"labelClasses(item, i)\"\n            [attr.aria-current]=\"isCurrent(i) ? 'page' : null\"\n          >\n            {{ item.label }}\n          </span>\n        }\n\n        @if (!last) {\n          <span [class]=\"separatorKlass()\">{{ separator() }}</span>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngBreadcrumbs, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-breadcrumbs', standalone: true, imports: [RouterLink], template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"rootKlass()\">\n  <ol [class]=\"listKlass()\">\n    @for (item of resolvedItems(); track $index; let i = $index; let last = $last) {\n      <li [class]=\"itemClasses(item, i)\">\n        <!-- Internal route -->\n        @if (item.route && isClickable(item, i)) {\n          <a\n            [routerLink]=\"item.route\"\n            [class]=\"labelClasses(item, i)\"\n          >\n            {{ item.label }}\n          </a>\n        }\n        <!-- External link -->\n        @else if (item.href && isClickable(item, i)) {\n          <a\n            [href]=\"item.href\"\n            [target]=\"item.target ?? null\"\n            [attr.rel]=\"relFor(item)\"\n            [class]=\"labelClasses(item, i)\"\n          >\n            {{ item.label }}\n          </a>\n        }\n        <!-- Current/disabled/plain -->\n        @else {\n          <span\n            [class]=\"labelClasses(item, i)\"\n            [attr.aria-current]=\"isCurrent(i) ? 'page' : null\"\n          >\n            {{ item.label }}\n          </span>\n        }\n\n        @if (!last) {\n          <span [class]=\"separatorKlass()\">{{ separator() }}</span>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], home: [{ type: i0.Input, args: [{ isSignal: true, alias: "home", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], listKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listKlass", required: false }] }], itemKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemKlass", required: false }] }], linkKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkKlass", required: false }] }], currentKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentKlass", required: false }] }], disabledKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledKlass", required: false }] }], separatorKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorKlass", required: false }] }] } });
+
+class TngDrawer {
+    /* =====================
+     * Projected content
+     * ===================== */
+    drawerTpl;
+    anchorEl;
+    /* =====================
+     * Inputs / Outputs
+     * ===================== */
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    placement = input('left', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : []));
+    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
+    /** Focus trap (a11y) */
+    trapFocus = input(true, ...(ngDevMode ? [{ debugName: "trapFocus" }] : []));
+    restoreFocus = input(true, ...(ngDevMode ? [{ debugName: "restoreFocus" }] : []));
+    autoCapture = input(true, ...(ngDevMode ? [{ debugName: "autoCapture" }] : []));
+    deferCaptureElements = input(false, ...(ngDevMode ? [{ debugName: "deferCaptureElements" }] : []));
+    opened = output();
+    closed = output();
+    /* =====================
+     * Styling (klass-first)
+     * ===================== */
+    backdropKlass = input('fixed inset-0 bg-black/40 backdrop-blur-[1px]', ...(ngDevMode ? [{ debugName: "backdropKlass" }] : []));
+    panelKlass = input('bg-bg shadow-xl outline-none', ...(ngDevMode ? [{ debugName: "panelKlass" }] : []));
+    sizeKlass = input('w-80', ...(ngDevMode ? [{ debugName: "sizeKlass" }] : [])); // for left/right
+    heightKlass = input('h-80', ...(ngDevMode ? [{ debugName: "heightKlass" }] : [])); // for top/bottom
+    /* =====================
+     * Internal
+     * ===================== */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    overlayPlacement = computed(() => {
+        switch (this.placement()) {
+            case 'left':
+                return 'bottom-start';
+            case 'right':
+                return 'bottom-end';
+            case 'top':
+                return 'top-start';
+            case 'bottom':
+                return 'bottom-start';
+        }
+    }, ...(ngDevMode ? [{ debugName: "overlayPlacement" }] : []));
+    slideClasses = computed(() => {
+        const base = 'fixed transition-transform duration-200 ease-in-out will-change-transform';
+        switch (this.placement()) {
+            case 'left':
+                return `${base} left-0 top-0 h-full ${this.isOpen() ? 'translate-x-0' : '-translate-x-full'}`;
+            case 'right':
+                return `${base} right-0 top-0 h-full ${this.isOpen() ? 'translate-x-0' : 'translate-x-full'}`;
+            case 'top':
+                return `${base} top-0 left-0 w-full ${this.isOpen() ? 'translate-y-0' : '-translate-y-full'}`;
+            case 'bottom':
+                return `${base} bottom-0 left-0 w-full ${this.isOpen() ? 'translate-y-0' : 'translate-y-full'}`;
+        }
+    }, ...(ngDevMode ? [{ debugName: "slideClasses" }] : []));
+    constructor() {
+        effect(() => {
+            if (this.open()) {
+                this.isOpen.set(true);
+                this.opened.emit();
+            }
+            else {
+                this.isOpen.set(false);
+            }
+        });
+    }
+    onOverlayClosed(reason) {
+        this.closed.emit(reason);
+    }
+    onBackdropClick() {
+        if (!this.closeOnBackdropClick())
+            return;
+        this.closed.emit('outside-click');
+    }
+    /** Keep escape handling scoped to drawer (instead of document listener) */
+    onPanelKeydown(ev) {
+        if (!this.open())
+            return;
+        if (!this.closeOnEscape())
+            return;
+        if (ev.defaultPrevented)
+            return;
+        if (ev.key === 'Escape') {
+            ev.preventDefault();
+            this.closed.emit('escape');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngDrawer, isStandalone: true, selector: "tng-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, autoCapture: { classPropertyName: "autoCapture", publicName: "autoCapture", isSignal: true, isRequired: false, transformFunction: null }, deferCaptureElements: { classPropertyName: "deferCaptureElements", publicName: "deferCaptureElements", isSignal: true, isRequired: false, transformFunction: null }, backdropKlass: { classPropertyName: "backdropKlass", publicName: "backdropKlass", isSignal: true, isRequired: false, transformFunction: null }, panelKlass: { classPropertyName: "panelKlass", publicName: "panelKlass", isSignal: true, isRequired: false, transformFunction: null }, sizeKlass: { classPropertyName: "sizeKlass", publicName: "sizeKlass", isSignal: true, isRequired: false, transformFunction: null }, heightKlass: { classPropertyName: "heightKlass", publicName: "heightKlass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "drawerTpl", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "anchorEl", first: true, predicate: ["anchorEl"], descendants: true, static: true }], ngImport: i0, template: "@if (open()) {\n  <!-- Backdrop (below panel) -->\n  <div\n    [class]=\"backdropKlass()\"\n    class=\"z-[1000]\"\n    (click)=\"onBackdropClick()\"\n  ></div>\n\n  <!-- Drawer panel (above backdrop) -->\n  <div\n    [class]=\"slideClasses() + ' ' + panelKlass()\"\n    class=\"z-[1001]\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    tabindex=\"-1\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown)=\"onPanelKeydown($event)\"\n    [tngFocusTrap]=\"open() && trapFocus()\"\n    [restoreFocus]=\"restoreFocus()\"\n    [autoCapture]=\"autoCapture()\"\n    [deferCaptureElements]=\"deferCaptureElements()\"\n  >\n    <ng-content />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: TngFocusTrap, selector: "[tngFocusTrap]", inputs: ["tngFocusTrap", "deferCaptureElements", "autoCapture", "restoreFocus"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-drawer', standalone: true, imports: [TngFocusTrap], template: "@if (open()) {\n  <!-- Backdrop (below panel) -->\n  <div\n    [class]=\"backdropKlass()\"\n    class=\"z-[1000]\"\n    (click)=\"onBackdropClick()\"\n  ></div>\n\n  <!-- Drawer panel (above backdrop) -->\n  <div\n    [class]=\"slideClasses() + ' ' + panelKlass()\"\n    class=\"z-[1001]\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    tabindex=\"-1\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown)=\"onPanelKeydown($event)\"\n    [tngFocusTrap]=\"open() && trapFocus()\"\n    [restoreFocus]=\"restoreFocus()\"\n    [autoCapture]=\"autoCapture()\"\n    [deferCaptureElements]=\"deferCaptureElements()\"\n  >\n    <ng-content />\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { drawerTpl: [{
+                type: ContentChild,
+                args: [TemplateRef, { descendants: true }]
+            }], anchorEl: [{
+                type: ViewChild,
+                args: ['anchorEl', { static: true }]
+            }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], restoreFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreFocus", required: false }] }], autoCapture: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCapture", required: false }] }], deferCaptureElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferCaptureElements", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], backdropKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropKlass", required: false }] }], panelKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelKlass", required: false }] }], sizeKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeKlass", required: false }] }], heightKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightKlass", required: false }] }] } });
+
+class TngMenuTemplate {
+    tpl;
+    constructor(tpl) {
+        this.tpl = tpl;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngMenuTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: TngMenuTemplate, isStandalone: true, selector: "ng-template[tngMenuTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngMenuTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[tngMenuTemplate]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+// menu.component.ts
+class TngMenu {
+    tplDir;
+    get menuTemplate() {
+        return this.tplDir?.tpl;
+    }
+    triggerEl;
+    // Modal mode (backdrop semantics)
+    modal = input(false, ...(ngDevMode ? [{ debugName: "modal" }] : []));
+    placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    offset = input(6, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    width = input('anchor', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    closeOnOutsideClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnOutsideClick" }] : []));
+    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
+    closeOnItemClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnItemClick" }] : []));
+    rootKlass = input('relative inline-block', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    triggerKlass = input('inline-flex', ...(ngDevMode ? [{ debugName: "triggerKlass" }] : []));
+    panelKlass = input('p-1', ...(ngDevMode ? [{ debugName: "panelKlass" }] : []));
+    backdropKlass = input('fixed inset-0 bg-black/40 z-[999]', ...(ngDevMode ? [{ debugName: "backdropKlass" }] : []));
+    opened = output();
+    closed = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    // Simple stable id for aria-controls (unique enough per instance)
+    uid = Math.random().toString(36).slice(2);
+    menuId = computed(() => `tng-menu-${this.uid}`, ...(ngDevMode ? [{ debugName: "menuId" }] : []));
+    /** Modal forces predictable close behavior */
+    effectiveCloseOnOutsideClick = computed(() => this.modal() ? true : this.closeOnOutsideClick(), ...(ngDevMode ? [{ debugName: "effectiveCloseOnOutsideClick" }] : []));
+    effectiveCloseOnEscape = computed(() => this.modal() ? true : this.closeOnEscape(), ...(ngDevMode ? [{ debugName: "effectiveCloseOnEscape" }] : []));
+    open() {
+        this.isOpen.set(true);
+    }
+    onOverlayOpened() {
+        this.opened.emit();
+    }
+    close(reason) {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.closed.emit(reason);
+        queueMicrotask(() => this.triggerEl?.nativeElement?.focus());
+    }
+    onOverlayOpenChange(open) {
+        if (open)
+            this.isOpen.set(true);
+    }
+    onOverlayClosed(reason) {
+        this.isOpen.set(false);
+        this.closed.emit(reason);
+        queueMicrotask(() => this.triggerEl?.nativeElement?.focus());
+    }
+    onTriggerClick() {
+        this.isOpen() ? this.close('programmatic') : this.open();
+    }
+    requestCloseOnSelection() {
+        if (!this.closeOnItemClick())
+            return;
+        this.close('selection');
+    }
+    onItemSelected() {
+        this.requestCloseOnSelection();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngMenu, isStandalone: true, selector: "tng-menu", inputs: { modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnItemClick: { classPropertyName: "closeOnItemClick", publicName: "closeOnItemClick", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, triggerKlass: { classPropertyName: "triggerKlass", publicName: "triggerKlass", isSignal: true, isRequired: false, transformFunction: null }, panelKlass: { classPropertyName: "panelKlass", publicName: "panelKlass", isSignal: true, isRequired: false, transformFunction: null }, backdropKlass: { classPropertyName: "backdropKlass", publicName: "backdropKlass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "tplDir", first: true, predicate: TngMenuTemplate, descendants: true }], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, static: true }], ngImport: i0, template: "\n<div [class]=\"rootKlass()\">\n  <!-- Trigger -->\n  <button\n    #triggerEl\n    type=\"button\"\n    [class]=\"triggerKlass()\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? menuId() : null\"\n    (click)=\"onTriggerClick()\"\n  >\n    <ng-content select=\"[tngMenuTrigger]\"></ng-content>\n  </button>\n\n  <!-- Overlay -->\n  <tng-overlay-ref\n    #overlayRef=\"tngOverlayRef\"\n    [open]=\"isOpen()\"\n    (openChange)=\"onOverlayOpenChange($event)\"\n    (opened)=\"onOverlayOpened()\"\n    (closed)=\"onOverlayClosed($event)\"\n  >\n    <tng-connected-overlay\n      [open]=\"overlayRef.isOpen()\"\n      [anchor]=\"triggerEl\"\n      [placement]=\"placement()\"\n      [offset]=\"offset()\"\n      [width]=\"width()\"\n      [hasBackdrop]=\"modal()\"\n      [backdropClass]=\"backdropKlass()\"\n      [closeOnOutsideClick]=\"effectiveCloseOnOutsideClick()\"\n      [closeOnEscape]=\"effectiveCloseOnEscape()\"\n      [closeOnInsideClick]=\"false\"\n      (closed)=\"overlayRef.close($event)\"\n\n    >\n      <tng-overlay-panel [klass]=\"panelKlass()\" [modal]=\"modal()\">\n        <div [id]=\"menuId()\" role=\"menu\">\n          @if (menuTemplate) {\n            <ng-container [ngTemplateOutlet]=\"menuTemplate!\" />\n          } @else {\n            <ng-content select=\"[tngMenuContent]\"></ng-content>\n          }\n        </div>\n      </tng-overlay-panel>\n    </tng-connected-overlay>\n  </tng-overlay-ref>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TngConnectedOverlay, selector: "tng-connected-overlay", inputs: ["open", "anchor", "placement", "offset", "width", "closeOnOutsideClick", "closeOnInsideClick", "closeOnEscape", "hasBackdrop", "backdropClass"], outputs: ["opened", "closed", "backdropClick"] }, { kind: "component", type: TngOverlayPanel, selector: "tng-overlay-panel", inputs: ["klass", "modal", "role", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "restoreFocus", "autoCapture", "deferCaptureElements"] }, { kind: "component", type: TngOverlayRef, selector: "tng-overlay-ref", inputs: ["open"], outputs: ["openChange", "opened", "closed"], exportAs: ["tngOverlayRef"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-menu', standalone: true, imports: [
+                        CommonModule,
+                        NgTemplateOutlet,
+                        TngConnectedOverlay,
+                        TngOverlayPanel,
+                        TngOverlayRef,
+                    ], template: "\n<div [class]=\"rootKlass()\">\n  <!-- Trigger -->\n  <button\n    #triggerEl\n    type=\"button\"\n    [class]=\"triggerKlass()\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? menuId() : null\"\n    (click)=\"onTriggerClick()\"\n  >\n    <ng-content select=\"[tngMenuTrigger]\"></ng-content>\n  </button>\n\n  <!-- Overlay -->\n  <tng-overlay-ref\n    #overlayRef=\"tngOverlayRef\"\n    [open]=\"isOpen()\"\n    (openChange)=\"onOverlayOpenChange($event)\"\n    (opened)=\"onOverlayOpened()\"\n    (closed)=\"onOverlayClosed($event)\"\n  >\n    <tng-connected-overlay\n      [open]=\"overlayRef.isOpen()\"\n      [anchor]=\"triggerEl\"\n      [placement]=\"placement()\"\n      [offset]=\"offset()\"\n      [width]=\"width()\"\n      [hasBackdrop]=\"modal()\"\n      [backdropClass]=\"backdropKlass()\"\n      [closeOnOutsideClick]=\"effectiveCloseOnOutsideClick()\"\n      [closeOnEscape]=\"effectiveCloseOnEscape()\"\n      [closeOnInsideClick]=\"false\"\n      (closed)=\"overlayRef.close($event)\"\n\n    >\n      <tng-overlay-panel [klass]=\"panelKlass()\" [modal]=\"modal()\">\n        <div [id]=\"menuId()\" role=\"menu\">\n          @if (menuTemplate) {\n            <ng-container [ngTemplateOutlet]=\"menuTemplate!\" />\n          } @else {\n            <ng-content select=\"[tngMenuContent]\"></ng-content>\n          }\n        </div>\n      </tng-overlay-panel>\n    </tng-connected-overlay>\n  </tng-overlay-ref>\n</div>\n" }]
+        }], propDecorators: { tplDir: [{
+                type: ContentChild,
+                args: [TngMenuTemplate]
+            }], triggerEl: [{
+                type: ViewChild,
+                args: ['triggerEl', { static: true }]
+            }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnItemClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnItemClick", required: false }] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], triggerKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerKlass", required: false }] }], panelKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelKlass", required: false }] }], backdropKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropKlass", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class TngMenuItem {
+    menu = inject(TngMenu, { optional: true });
+    onClick() {
+        this.menu?.requestCloseOnSelection();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: TngMenuItem, isStandalone: true, selector: "[tngMenuItem]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngMenuItem]',
+                    standalone: true,
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class TngPaginator {
+    /* =====================
+     * Inputs
+     * ===================== */
+    /** Total items count */
+    count = input(0, ...(ngDevMode ? [{ debugName: "count" }] : []));
+    /** Current page (1-based) */
+    page = input(1, ...(ngDevMode ? [{ debugName: "page" }] : []));
+    /** Items per page */
+    pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    /** Page size options */
+    pageSizeOptions = input([10, 20, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
+    /** Hide page size selector */
+    hidePageSize = input(false, ...(ngDevMode ? [{ debugName: "hidePageSize" }] : []));
+    /** Max visible page buttons (window size) */
+    maxPages = input(7, ...(ngDevMode ? [{ debugName: "maxPages" }] : []));
+    /* =====================
+     * Klass inputs (Tailng)
+     * ===================== */
+    rootKlass = input('flex flex-wrap items-center justify-between gap-3 text-sm', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    leftKlass = input('text-muted-foreground', ...(ngDevMode ? [{ debugName: "leftKlass" }] : []));
+    rightKlass = input('flex flex-wrap items-center gap-2', ...(ngDevMode ? [{ debugName: "rightKlass" }] : []));
+    buttonKlass = input('rounded-md border border-border bg-bg px-2.5 py-1.5 text-sm hover:bg-slate-50 disabled:opacity-50 disabled:pointer-events-none', ...(ngDevMode ? [{ debugName: "buttonKlass" }] : []));
+    activePageKlass = input('bg-primary text-on-primary border-primary hover:bg-primary', ...(ngDevMode ? [{ debugName: "activePageKlass" }] : []));
+    pageKlass = input('rounded-md border border-border bg-bg px-2.5 py-1.5 text-sm hover:bg-slate-50', ...(ngDevMode ? [{ debugName: "pageKlass" }] : []));
+    selectKlass = input('rounded-md border border-border bg-bg px-2 py-1.5 text-sm', ...(ngDevMode ? [{ debugName: "selectKlass" }] : []));
+    separatorKlass = input('mx-2 text-slate-400', ...(ngDevMode ? [{ debugName: "separatorKlass" }] : []));
+    /* =====================
+     * Outputs
+     * ===================== */
+    pageChange = output();
+    pageSizeChange = output();
+    change = output();
+    /* =====================
+     * Derived
+     * ===================== */
+    totalPages = computed(() => {
+        const total = Math.max(0, this.count());
+        const size = Math.max(1, this.pageSize());
+        return Math.max(1, Math.ceil(total / size));
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    clampedPage = computed(() => {
+        const p = this.page();
+        return Math.min(Math.max(1, p), this.totalPages());
+    }, ...(ngDevMode ? [{ debugName: "clampedPage" }] : []));
+    skip = computed(() => (this.clampedPage() - 1) * this.pageSize(), ...(ngDevMode ? [{ debugName: "skip" }] : []));
+    rangeStart = computed(() => {
+        const total = this.count();
+        if (total <= 0)
+            return 0;
+        return this.skip() + 1;
+    }, ...(ngDevMode ? [{ debugName: "rangeStart" }] : []));
+    rangeEnd = computed(() => {
+        const total = this.count();
+        if (total <= 0)
+            return 0;
+        return Math.min(total, this.skip() + this.pageSize());
+    }, ...(ngDevMode ? [{ debugName: "rangeEnd" }] : []));
+    pages = computed(() => {
+        const total = this.totalPages();
+        const max = Math.max(5, this.maxPages()); // keep sane min
+        const current = this.clampedPage();
+        if (total <= max) {
+            return Array.from({ length: total }, (_, i) => i + 1);
+        }
+        const half = Math.floor(max / 2);
+        let start = Math.max(1, current - half);
+        let end = Math.min(total, start + max - 1);
+        // adjust if we hit end
+        start = Math.max(1, end - max + 1);
+        const result = [];
+        if (start > 1) {
+            result.push(1);
+            if (start > 2)
+                result.push('…');
+        }
+        for (let p = start; p <= end; p++)
+            result.push(p);
+        if (end < total) {
+            if (end < total - 1)
+                result.push('…');
+            result.push(total);
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "pages" }] : []));
+    /* =====================
+     * Actions
+     * ===================== */
+    emitChange(nextPage, nextSize) {
+        this.pageChange.emit(nextPage);
+        this.pageSizeChange.emit(nextSize);
+        this.change.emit({
+            page: nextPage,
+            pageSize: nextSize,
+            skip: (nextPage - 1) * nextSize,
+        });
+    }
+    goTo(page) {
+        const next = Math.min(Math.max(1, page), this.totalPages());
+        if (next === this.clampedPage())
+            return;
+        // keep size unchanged
+        this.pageChange.emit(next);
+        this.change.emit({ page: next, pageSize: this.pageSize(), skip: (next - 1) * this.pageSize() });
+    }
+    prev() {
+        this.goTo(this.clampedPage() - 1);
+    }
+    next() {
+        this.goTo(this.clampedPage() + 1);
+    }
+    first() {
+        this.goTo(1);
+    }
+    last() {
+        this.goTo(this.totalPages());
+    }
+    onPageSizeSelect(value) {
+        const size = Math.max(1, Number(value) || this.pageSize());
+        if (size === this.pageSize())
+            return;
+        // keep user near same position: recompute page from previous skip
+        const currentSkip = (this.clampedPage() - 1) * this.pageSize();
+        const nextPage = Math.floor(currentSkip / size) + 1;
+        this.emitChange(nextPage, size);
+    }
+    isActive(p) {
+        return p === this.clampedPage();
+    }
+    pageBtnClasses(p) {
+        const base = this.pageKlass();
+        const active = this.isActive(p) ? ` ${this.activePageKlass()}` : '';
+        return (base + active).trim();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngPaginator, isStandalone: true, selector: "tng-paginator", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, maxPages: { classPropertyName: "maxPages", publicName: "maxPages", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, leftKlass: { classPropertyName: "leftKlass", publicName: "leftKlass", isSignal: true, isRequired: false, transformFunction: null }, rightKlass: { classPropertyName: "rightKlass", publicName: "rightKlass", isSignal: true, isRequired: false, transformFunction: null }, buttonKlass: { classPropertyName: "buttonKlass", publicName: "buttonKlass", isSignal: true, isRequired: false, transformFunction: null }, activePageKlass: { classPropertyName: "activePageKlass", publicName: "activePageKlass", isSignal: true, isRequired: false, transformFunction: null }, pageKlass: { classPropertyName: "pageKlass", publicName: "pageKlass", isSignal: true, isRequired: false, transformFunction: null }, selectKlass: { classPropertyName: "selectKlass", publicName: "selectKlass", isSignal: true, isRequired: false, transformFunction: null }, separatorKlass: { classPropertyName: "separatorKlass", publicName: "separatorKlass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", change: "change" }, ngImport: i0, template: "<div [class]=\"rootKlass()\">\n  <!-- Left: range -->\n  <div [class]=\"leftKlass()\">\n    @if (count() > 0) {\n      Showing <span class=\"text-foreground\">{{ rangeStart() }}</span>\u2013<span class=\"text-foreground\">{{ rangeEnd() }}</span>\n      of <span class=\"text-foreground\">{{ count() }}</span>\n    } @else {\n      Showing 0 of 0\n    }\n  </div>\n\n  <!-- Right: controls -->\n  <div [class]=\"rightKlass()\">\n    @if (!hidePageSize()) {\n      <div class=\"flex items-center gap-2\">\n        <span class=\"text-xs text-muted-foreground\">Rows</span>\n        <select\n          [class]=\"selectKlass()\"\n          [value]=\"pageSize()\"\n          (change)=\"onPageSizeSelect($any($event.target).value)\"\n        >\n          @for (s of pageSizeOptions(); track s) {\n            <option [value]=\"s\">{{ s }}</option>\n          }\n        </select>\n      </div>\n    }\n\n    <button type=\"button\" [class]=\"buttonKlass()\" (click)=\"first()\" [disabled]=\"clampedPage() <= 1\">\n      \u00AB\n    </button>\n\n    <button type=\"button\" [class]=\"buttonKlass()\" (click)=\"prev()\" [disabled]=\"clampedPage() <= 1\">\n      \u2039\n    </button>\n\n    <!-- Page numbers -->\n    <div class=\"flex items-center gap-1\">\n      @for (p of pages(); track $index) {\n        @if (p === '\u2026') {\n          <span class=\"px-2 text-muted-foreground\">\u2026</span>\n        } @else {\n          <button\n            type=\"button\"\n            [class]=\"pageBtnClasses(p)\"\n            (click)=\"goTo(p)\"\n            [attr.aria-current]=\"isActive(p) ? 'page' : null\"\n          >\n            {{ p }}\n          </button>\n        }\n      }\n    </div>\n\n    <button type=\"button\" [class]=\"buttonKlass()\" (click)=\"next()\" [disabled]=\"clampedPage() >= totalPages()\">\n      \u203A\n    </button>\n\n    <button type=\"button\" [class]=\"buttonKlass()\" (click)=\"last()\" [disabled]=\"clampedPage() >= totalPages()\">\n      \u00BB\n    </button>\n  </div>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngPaginator, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-paginator', standalone: true, template: "<div [class]=\"rootKlass()\">\n  <!-- Left: range -->\n  <div [class]=\"leftKlass()\">\n    @if (count() > 0) {\n      Showing <span class=\"text-foreground\">{{ rangeStart() }}</span>\u2013<span class=\"text-foreground\">{{ rangeEnd() }}</span>\n      of <span class=\"text-foreground\">{{ count() }}</span>\n    } @else {\n      Showing 0 of 0\n    }\n  </div>\n\n  <!-- Right: controls -->\n  <div [class]=\"rightKlass()\">\n    @if (!hidePageSize()) {\n      <div class=\"flex items-center gap-2\">\n        <span class=\"text-xs text-muted-foreground\">Rows</span>\n        <select\n          [class]=\"selectKlass()\"\n          [value]=\"pageSize()\"\n          (change)=\"onPageSizeSelect($any($event.target).value)\"\n        >\n          @for (s of pageSizeOptions(); track s) {\n            <option [value]=\"s\">{{ s }}</option>\n          }\n        </select>\n      </div>\n    }\n\n    <button type=\"button\" [class]=\"buttonKlass()\" (click)=\"first()\" [disabled]=\"clampedPage() <= 1\">\n      \u00AB\n    </button>\n\n    <button type=\"button\" [class]=\"buttonKlass()\" (click)=\"prev()\" [disabled]=\"clampedPage() <= 1\">\n      \u2039\n    </button>\n\n    <!-- Page numbers -->\n    <div class=\"flex items-center gap-1\">\n      @for (p of pages(); track $index) {\n        @if (p === '\u2026') {\n          <span class=\"px-2 text-muted-foreground\">\u2026</span>\n        } @else {\n          <button\n            type=\"button\"\n            [class]=\"pageBtnClasses(p)\"\n            (click)=\"goTo(p)\"\n            [attr.aria-current]=\"isActive(p) ? 'page' : null\"\n          >\n            {{ p }}\n          </button>\n        }\n      }\n    </div>\n\n    <button type=\"button\" [class]=\"buttonKlass()\" (click)=\"next()\" [disabled]=\"clampedPage() >= totalPages()\">\n      \u203A\n    </button>\n\n    <button type=\"button\" [class]=\"buttonKlass()\" (click)=\"last()\" [disabled]=\"clampedPage() >= totalPages()\">\n      \u00BB\n    </button>\n  </div>\n</div>\n" }]
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], maxPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPages", required: false }] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], leftKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftKlass", required: false }] }], rightKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightKlass", required: false }] }], buttonKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonKlass", required: false }] }], activePageKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "activePageKlass", required: false }] }], pageKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageKlass", required: false }] }], selectKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectKlass", required: false }] }], separatorKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorKlass", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], change: [{ type: i0.Output, args: ["change"] }] } });
+
+class TngSidenav {
+    /* =====================
+     * State
+     * ===================== */
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    /* =====================
+     * Tailwind class inputs
+     * ===================== */
+    rootKlass = input('group h-full bg-bg border-r border-border flex flex-col ' +
+        'transition-[width] duration-200 ease-in-out will-change-[width]', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    expandedKlass = input('w-64', ...(ngDevMode ? [{ debugName: "expandedKlass" }] : []));
+    collapsedKlass = input('w-16', ...(ngDevMode ? [{ debugName: "collapsedKlass" }] : []));
+    contentKlass = input('flex-1 overflow-auto', ...(ngDevMode ? [{ debugName: "contentKlass" }] : []));
+    footerKlass = input('border-t border-border', ...(ngDevMode ? [{ debugName: "footerKlass" }] : []));
+    /* =====================
+     * Computed
+     * ===================== */
+    classes = computed(() => [this.rootKlass(), this.collapsed() ? this.collapsedKlass() : this.expandedKlass()].join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    /**
+     * Expose state as attribute for Tailwind selectors:
+     * `data-[collapsed=true]:...`
+     */
+    dataCollapsed = computed(() => (this.collapsed() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataCollapsed" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TngSidenav, isStandalone: true, selector: "tng-sidenav", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, expandedKlass: { classPropertyName: "expandedKlass", publicName: "expandedKlass", isSignal: true, isRequired: false, transformFunction: null }, collapsedKlass: { classPropertyName: "collapsedKlass", publicName: "collapsedKlass", isSignal: true, isRequired: false, transformFunction: null }, contentKlass: { classPropertyName: "contentKlass", publicName: "contentKlass", isSignal: true, isRequired: false, transformFunction: null }, footerKlass: { classPropertyName: "footerKlass", publicName: "footerKlass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav\n  [class]=\"classes()\"\n  [attr.data-collapsed]=\"dataCollapsed()\"\n  aria-label=\"Primary navigation\"\n>\n  <!-- Header slot -->\n  <div class=\"shrink-0\">\n    <ng-content select=\"[tngSidenavHeader]\"></ng-content>\n  </div>\n\n  <!-- Main navigation -->\n  <div [class]=\"contentKlass()\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Footer slot -->\n  <div [class]=\"footerKlass()\">\n    <ng-content select=\"[tngSidenavFooter]\"></ng-content>\n  </div>\n</nav>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSidenav, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-sidenav', standalone: true, template: "<nav\n  [class]=\"classes()\"\n  [attr.data-collapsed]=\"dataCollapsed()\"\n  aria-label=\"Primary navigation\"\n>\n  <!-- Header slot -->\n  <div class=\"shrink-0\">\n    <ng-content select=\"[tngSidenavHeader]\"></ng-content>\n  </div>\n\n  <!-- Main navigation -->\n  <div [class]=\"contentKlass()\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Footer slot -->\n  <div [class]=\"footerKlass()\">\n    <ng-content select=\"[tngSidenavFooter]\"></ng-content>\n  </div>\n</nav>\n" }]
+        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], expandedKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedKlass", required: false }] }], collapsedKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedKlass", required: false }] }], contentKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentKlass", required: false }] }], footerKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerKlass", required: false }] }] } });
+
+class TngSidenavHeaderSlot {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSidenavHeaderSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: TngSidenavHeaderSlot, isStandalone: true, selector: "[tngSidenavHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSidenavHeaderSlot, decorators: [{
+            type: Directive,
+            args: [{ selector: '[tngSidenavHeader]', standalone: true }]
+        }] });
+class TngSidenavFooterSlot {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSidenavFooterSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: TngSidenavFooterSlot, isStandalone: true, selector: "[tngSidenavFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSidenavFooterSlot, decorators: [{
+            type: Directive,
+            args: [{ selector: '[tngSidenavFooter]', standalone: true }]
+        }] });
+
+class TngStep {
+    stepper = inject(TngStepper);
+    el = inject((ElementRef));
+    /* =====================
+     * Inputs
+     * ===================== */
+    /** Optional label (you can also project content) */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Disable this step */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    /** Mark as complete (used by linear mode to allow forward navigation) */
+    complete = input(false, { ...(ngDevMode ? { debugName: "complete" } : {}), transform: booleanAttribute });
+    /* =====================
+     * Klass hooks
+     * ===================== */
+    stepKlass = input('inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium border border-transparent', ...(ngDevMode ? [{ debugName: "stepKlass" }] : []));
+    activeKlass = input('bg-primary text-on-primary', ...(ngDevMode ? [{ debugName: "activeKlass" }] : []));
+    inactiveKlass = input('bg-bg text-muted-foreground hover:text-foreground hover:bg-slate-50', ...(ngDevMode ? [{ debugName: "inactiveKlass" }] : []));
+    disabledKlass = input('opacity-50 cursor-not-allowed', ...(ngDevMode ? [{ debugName: "disabledKlass" }] : []));
+    /* =====================
+     * Internal
+     * ===================== */
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    isComplete() {
+        return this.complete();
+    }
+    isFocused() {
+        return this.focused();
+    }
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    /* =====================
+     * Host bindings
+     * ===================== */
+    role = 'tab';
+    get tabindex() {
+        // roving tabindex: active is focusable by default, others -1
+        return this.stepper.isActive(this.index()) ? 0 : -1;
+    }
+    get selected() {
+        return this.stepper.isActive(this.index());
+    }
+    get ariaDisabled() {
+        return this.disabled() ? 'true' : null;
+    }
+    get klass() {
+        if (this.disabled())
+            return `${this.stepKlass()} ${this.disabledKlass()}`.trim();
+        return this.stepper.isActive(this.index())
+            ? `${this.stepKlass()} ${this.activeKlass()}`.trim()
+            : `${this.stepKlass()} ${this.inactiveKlass()}`.trim();
+    }
+    /* =====================
+     * Index resolution
+     * ===================== */
+    index = computed(() => {
+        const steps = this.stepper.steps();
+        return steps.indexOf(this);
+    }, ...(ngDevMode ? [{ debugName: "index" }] : []));
+    /* =====================
+     * Events
+     * ===================== */
+    onClick() {
+        if (this.disabled())
+            return;
+        this.stepper.setIndex(this.index());
+    }
+    onFocus() {
+        this.focused.set(true);
+    }
+    onBlur() {
+        this.focused.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TngStep, isStandalone: true, selector: "tng-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, complete: { classPropertyName: "complete", publicName: "complete", isSignal: true, isRequired: false, transformFunction: null }, stepKlass: { classPropertyName: "stepKlass", publicName: "stepKlass", isSignal: true, isRequired: false, transformFunction: null }, activeKlass: { classPropertyName: "activeKlass", publicName: "activeKlass", isSignal: true, isRequired: false, transformFunction: null }, inactiveKlass: { classPropertyName: "inactiveKlass", publicName: "inactiveKlass", isSignal: true, isRequired: false, transformFunction: null }, disabledKlass: { classPropertyName: "disabledKlass", publicName: "disabledKlass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex", "attr.aria-selected": "this.selected", "attr.aria-disabled": "this.ariaDisabled", "class": "this.klass" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngStep, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tng-step',
+                    standalone: true,
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], complete: [{ type: i0.Input, args: [{ isSignal: true, alias: "complete", required: false }] }], stepKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepKlass", required: false }] }], activeKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKlass", required: false }] }], inactiveKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inactiveKlass", required: false }] }], disabledKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledKlass", required: false }] }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], selected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], klass: [{
+                type: HostBinding,
+                args: ['class']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+class TngStepper {
+    /* =====================
+     * Inputs
+     * ===================== */
+    /**
+     * Controlled active index.
+     * If not null, stepper behaves controlled.
+     * NOTE: No transform here (Angular typing limitation with null initial).
+     */
+    activeIndex = input(null, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    /** Uncontrolled initial index */
+    defaultIndex = input(0, { ...(ngDevMode ? { debugName: "defaultIndex" } : {}), transform: numberAttribute });
+    /** Linear mode: prevent jumping forward beyond completed steps */
+    linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : {}), transform: booleanAttribute });
+    /** Orientation */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    /* =====================
+     * Outputs
+     * ===================== */
+    activeIndexChange = output();
+    /* =====================
+     * Klass hooks
+     * ===================== */
+    rootKlass = input('w-full', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    headerKlass = input('flex gap-2', ...(ngDevMode ? [{ debugName: "headerKlass" }] : []));
+    headerVerticalKlass = input('flex flex-col gap-2', ...(ngDevMode ? [{ debugName: "headerVerticalKlass" }] : []));
+    panelWrapKlass = input('pt-4', ...(ngDevMode ? [{ debugName: "panelWrapKlass" }] : []));
+    /* =====================
+     * Children
+     * ===================== */
+    steps = contentChildren(TngStep, { ...(ngDevMode ? { debugName: "steps" } : {}), descendants: true });
+    /* =====================
+     * State
+     * ===================== */
+    _index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    index = this._index.asReadonly();
+    constructor() {
+        // Controlled/uncontrolled sync
+        effect(() => {
+            const steps = this.steps(); // track for clamping
+            const n = steps.length;
+            const controlled = this.activeIndex();
+            if (controlled !== null) {
+                this._index.set(this.clamp(Number(controlled), n));
+                return;
+            }
+            // uncontrolled init (only when nothing set yet)
+            const current = this._index();
+            if (current === 0 && this.defaultIndex() !== 0) {
+                this._index.set(this.clamp(this.defaultIndex(), n));
+            }
+            else {
+                // always keep clamped if steps count changes
+                this._index.set(this.clamp(current, n));
+            }
+        });
+    }
+    /* =====================
+     * Public API
+     * ===================== */
+    setIndex(next) {
+        const clamped = this.clamp(next, this.steps().length);
+        if (!this.canActivate(clamped))
+            return;
+        this._index.set(clamped);
+        this.activeIndexChange.emit(clamped);
+    }
+    next() {
+        this.setIndex(this._index() + 1);
+    }
+    prev() {
+        this.setIndex(this._index() - 1);
+    }
+    isActive(i) {
+        return this._index() === i;
+    }
+    /* =====================
+     * Keyboard navigation (roving focus)
+     * ===================== */
+    onKeydown(ev) {
+        const steps = this.steps();
+        if (!steps.length)
+            return;
+        const key = ev.key;
+        const horizontal = this.orientation() === 'horizontal';
+        const prevKey = horizontal ? 'ArrowLeft' : 'ArrowUp';
+        const nextKey = horizontal ? 'ArrowRight' : 'ArrowDown';
+        if (key === prevKey) {
+            ev.preventDefault();
+            this.focusStep(this._index() - 1);
+            return;
+        }
+        if (key === nextKey) {
+            ev.preventDefault();
+            this.focusStep(this._index() + 1);
+            return;
+        }
+        if (key === 'Home') {
+            ev.preventDefault();
+            this.focusStep(0);
+            return;
+        }
+        if (key === 'End') {
+            ev.preventDefault();
+            this.focusStep(steps.length - 1);
+            return;
+        }
+        if (key === 'Enter' || key === ' ') {
+            const focusedIndex = steps.findIndex((s) => s.isFocused());
+            if (focusedIndex >= 0) {
+                ev.preventDefault();
+                this.setIndex(focusedIndex);
+            }
+        }
+    }
+    focusStep(i) {
+        const steps = this.steps();
+        const clamped = this.clamp(i, steps.length);
+        steps[clamped]?.focus();
+    }
+    /* =====================
+     * Rules
+     * ===================== */
+    clamp(i, n) {
+        if (n <= 0)
+            return 0;
+        if (!Number.isFinite(i))
+            return 0;
+        return Math.max(0, Math.min(n - 1, i));
+    }
+    canActivate(target) {
+        const steps = this.steps();
+        const current = this._index();
+        if (!this.linear())
+            return true;
+        if (target <= current)
+            return true;
+        for (let i = 0; i < target; i++) {
+            const s = steps[i];
+            if (!s)
+                return false;
+            if (!s.isComplete())
+                return false;
+        }
+        return true;
+    }
+    /* =====================
+     * Computed
+     * ===================== */
+    headerResolvedKlass = computed(() => this.orientation() === 'vertical' ? this.headerVerticalKlass() : this.headerKlass(), ...(ngDevMode ? [{ debugName: "headerResolvedKlass" }] : []));
+    orientationAttr = computed(() => this.orientation() === 'vertical' ? 'vertical' : 'horizontal', ...(ngDevMode ? [{ debugName: "orientationAttr" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: TngStepper, isStandalone: true, selector: "tng-stepper", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, defaultIndex: { classPropertyName: "defaultIndex", publicName: "defaultIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, headerKlass: { classPropertyName: "headerKlass", publicName: "headerKlass", isSignal: true, isRequired: false, transformFunction: null }, headerVerticalKlass: { classPropertyName: "headerVerticalKlass", publicName: "headerVerticalKlass", isSignal: true, isRequired: false, transformFunction: null }, panelWrapKlass: { classPropertyName: "panelWrapKlass", publicName: "panelWrapKlass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndexChange: "activeIndexChange" }, queries: [{ propertyName: "steps", predicate: TngStep, descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"rootKlass()\">\n  <!-- Step headers -->\n  <div\n    role=\"tablist\"\n    [attr.aria-orientation]=\"orientationAttr()\"\n    [class]=\"headerResolvedKlass()\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    <ng-content select=\"tng-step\"></ng-content>\n  </div>\n\n  <!-- Panels -->\n  <div [class]=\"panelWrapKlass()\">\n    <ng-content select=\"tng-step-panel\"></ng-content>\n  </div>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngStepper, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-stepper', standalone: true, template: "<div [class]=\"rootKlass()\">\n  <!-- Step headers -->\n  <div\n    role=\"tablist\"\n    [attr.aria-orientation]=\"orientationAttr()\"\n    [class]=\"headerResolvedKlass()\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    <ng-content select=\"tng-step\"></ng-content>\n  </div>\n\n  <!-- Panels -->\n  <div [class]=\"panelWrapKlass()\">\n    <ng-content select=\"tng-step-panel\"></ng-content>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], defaultIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultIndex", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], activeIndexChange: [{ type: i0.Output, args: ["activeIndexChange"] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], headerKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerKlass", required: false }] }], headerVerticalKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerVerticalKlass", required: false }] }], panelWrapKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWrapKlass", required: false }] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TngStep), { ...{ descendants: true }, isSignal: true }] }] } });
+
+class TngStepPanel {
+    stepper = inject(TngStepper);
+    /** Panel index this content belongs to */
+    index = input.required(...(ngDevMode ? [{ debugName: "index" }] : []));
+    role = 'tabpanel';
+    get hidden() {
+        return !this.stepper.isActive(this.index());
+    }
+    // Optional: you can use this for debugging or conditional content
+    isActive = computed(() => this.stepper.isActive(this.index()), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngStepPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TngStepPanel, isStandalone: true, selector: "tng-step-panel", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.role": "this.role", "hidden": "this.hidden" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngStepPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tng-step-panel',
+                    standalone: true,
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hidden: [{
+                type: HostBinding,
+                args: ['hidden']
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
+
+export { TngBreadcrumbs, TngDrawer, TngMenu, TngMenuItem, TngMenuTemplate, TngPaginator, TngSidenav, TngSidenavFooterSlot, TngSidenavHeaderSlot, TngStep, TngStepPanel, TngStepper };
 //# sourceMappingURL=tociva-tailng-ui-navigation.mjs.map