@tociva/tailng-ui 0.11.0 → 0.13.0

package/fesm2022/tociva-tailng-ui-popups-overlays.mjs

@@ -1,22 +1,1120 @@
-"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 i1 from '@angular/common';
+import { NgStyle, CommonModule, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, ElementRef, effect, HostListener, ViewChild, Component, viewChild, inject, Injector, runInInjectionContext, afterNextRender, HostBinding, Directive, TemplateRef, ContentChild } from '@angular/core';
+import { TngFocusTrap } from '@tociva/tailng-cdk/a11y';
+
+class TngConnectedOverlay {
+    /**
+     * Control
+     */
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /**
+     * Anchor: pass either ElementRef<HTMLElement> or HTMLElement
+     * Example: [anchor]="inputEl" where inputEl is ElementRef<HTMLInputElement>
+     */
+    anchor = input(null, ...(ngDevMode ? [{ debugName: "anchor" }] : []));
+    /**
+     * Position / size
+     */
+    placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    offset = input(6, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    width = input('anchor', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    /**
+     * Close behavior
+     */
+    closeOnOutsideClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnOutsideClick" }] : []));
+    closeOnInsideClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnInsideClick" }] : []));
+    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
+    /**
+     * Backdrop (modal semantics)
+     */
+    hasBackdrop = input(false, ...(ngDevMode ? [{ debugName: "hasBackdrop" }] : []));
+    backdropClass = input('fixed inset-0 bg-black/40 z-[999]', ...(ngDevMode ? [{ debugName: "backdropClass" }] : []));
+    /**
+     * Events
+     */
+    opened = output();
+    closed = output();
+    backdropClick = output();
+    overlayRoot;
+    // Internal position state
+    topPx = signal(0, ...(ngDevMode ? [{ debugName: "topPx" }] : []));
+    leftPx = signal(0, ...(ngDevMode ? [{ debugName: "leftPx" }] : []));
+    widthPx = signal(null, ...(ngDevMode ? [{ debugName: "widthPx" }] : []));
+    minWidthPx = signal(null, ...(ngDevMode ? [{ debugName: "minWidthPx" }] : []));
+    // Cache whether we already emitted "opened" for current open cycle
+    didEmitOpened = false;
+    // RAF guard for resize/scroll repositioning
+    raf = 0;
+    /**
+     * Resolve anchor element
+     */
+    anchorEl = computed(() => {
+        const a = this.anchor();
+        if (!a)
+            return null;
+        return a instanceof ElementRef ? a.nativeElement : a;
+    }, ...(ngDevMode ? [{ debugName: "anchorEl" }] : []));
+    /**
+     * Overlay style for template
+     */
+    overlayStyle = computed(() => {
+        const top = this.topPx();
+        const left = this.leftPx();
+        const width = this.widthPx();
+        const minWidth = this.minWidthPx();
+        return {
+            top: `${top}px`,
+            left: `${left}px`,
+            width: width != null ? `${width}px` : undefined,
+            minWidth: minWidth != null ? `${minWidth}px` : undefined,
+        };
+    }, ...(ngDevMode ? [{ debugName: "overlayStyle" }] : []));
+    constructor() {
+        // When open/anchor changes, recompute position
+        effect(() => {
+            const isOpen = this.open();
+            const anchorEl = this.anchorEl();
+            if (!isOpen || !anchorEl) {
+                this.didEmitOpened = false;
+                return;
+            }
+            // Initial calc
+            this.updatePosition();
+            // Recalc after content renders so we can measure height (top placements + clamping)
+            queueMicrotask(() => {
+                if (this.open())
+                    this.updatePosition();
+            });
+            if (!this.didEmitOpened) {
+                this.didEmitOpened = true;
+                this.opened.emit();
+            }
+        });
+    }
+    /**
+     * Public API: parent can call close programmatically (optional)
+     */
+    close(reason = 'programmatic') {
+        // Controlled component: parent must set [open]=false.
+        this.closed.emit(reason);
+    }
+    /**
+     * Recompute overlay position
+     */
+    updatePosition() {
+        const anchor = this.anchorEl();
+        if (!anchor) {
+            this.close('detach');
+            return;
+        }
+        const rect = anchor.getBoundingClientRect();
+        const offset = this.offset();
+        const placement = this.placement();
+        // Determine width setting (style)
+        const w = this.width();
+        if (w === 'anchor') {
+            this.minWidthPx.set(rect.width);
+            this.widthPx.set(rect.width);
+        }
+        else if (typeof w === 'number') {
+            this.minWidthPx.set(null);
+            this.widthPx.set(w);
+        }
+        else {
+            this.minWidthPx.set(null);
+            this.widthPx.set(null);
+        }
+        // Measure panel if present
+        const panelEl = this.overlayRoot?.nativeElement ?? null;
+        const panelRect = panelEl?.getBoundingClientRect() ?? null;
+        const panelW = panelRect?.width ?? this.getOverlayWidthForPosition(rect);
+        const panelH = panelRect?.height ?? 0;
+        // Position calculation (viewport coords; overlay is `position: fixed`)
+        let top = 0;
+        let left = 0;
+        switch (placement) {
+            case 'bottom-start':
+                top = rect.bottom + offset;
+                left = rect.left;
+                break;
+            case 'bottom-end':
+                top = rect.bottom + offset;
+                left = rect.right - panelW;
+                break;
+            case 'top-start':
+                top = rect.top - offset - panelH;
+                left = rect.left;
+                break;
+            case 'top-end':
+                top = rect.top - offset - panelH;
+                left = rect.right - panelW;
+                break;
+        }
+        // Viewport clamping
+        const pad = 8;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const maxLeft = Math.max(pad, vw - pad - panelW);
+        const maxTop = Math.max(pad, vh - pad - panelH);
+        left = Math.max(pad, Math.min(left, maxLeft));
+        top = Math.max(pad, Math.min(top, maxTop));
+        this.leftPx.set(left);
+        this.topPx.set(top);
+    }
+    getOverlayWidthForPosition(anchorRect) {
+        const w = this.width();
+        if (w === 'anchor')
+            return anchorRect.width;
+        if (typeof w === 'number')
+            return w;
+        // fallback: use rendered width if available, else anchor width
+        return this.overlayRoot?.nativeElement?.getBoundingClientRect().width ?? anchorRect.width;
+    }
+    requestReposition() {
+        if (this.raf)
+            return;
+        this.raf = requestAnimationFrame(() => {
+            this.raf = 0;
+            if (this.open())
+                this.updatePosition();
+        });
+    }
+    /**
+     * Backdrop pointerdown (if enabled)
+     */
+    onBackdropPointerDown(ev) {
+        if (!this.open())
+            return;
+        ev.preventDefault();
+        this.backdropClick.emit();
+        if (this.closeOnOutsideClick()) {
+            this.close('outside-click');
+        }
+    }
+    /**
+     * Close on escape
+     */
+    onDocKeydown(ev) {
+        if (!this.open())
+            return;
+        if (!this.closeOnEscape())
+            return;
+        if (ev.key === 'Escape') {
+            ev.preventDefault();
+            this.close('escape');
+        }
+    }
+    /**
+     * Close on outside click (and optionally inside click)
+     * Use pointerdown so it works for mouse/touch/pen and is earlier than click.
+     */
+    onDocPointerDown(ev) {
+        if (!this.open())
+            return;
+        const target = ev.target;
+        if (!target)
+            return;
+        const anchor = this.anchorEl();
+        const panel = this.overlayRoot?.nativeElement ?? null;
+        const inAnchor = !!anchor && anchor.contains(target);
+        const inPanel = !!panel && panel.contains(target);
+        // Anchor should never be treated as outside.
+        if (inAnchor)
+            return;
+        // If backdrop is enabled and we clicked backdrop, the backdrop handler will run.
+        // Still, keep logic safe: treat it as outside.
+        if (inPanel) {
+            if (this.closeOnInsideClick())
+                this.close('inside-click');
+            return;
+        }
+        if (this.closeOnOutsideClick())
+            this.close('outside-click');
+    }
+    /**
+     * Keep position in sync on viewport changes
+     */
+    onResize() {
+        this.requestReposition();
+    }
+    onScroll() {
+        this.requestReposition();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngConnectedOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngConnectedOverlay, isStandalone: true, selector: "tng-connected-overlay", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", 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 }, closeOnInsideClick: { classPropertyName: "closeOnInsideClick", publicName: "closeOnInsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", backdropClick: "backdropClick" }, host: { listeners: { "document:keydown": "onDocKeydown($event)", "document:pointerdown": "onDocPointerDown($event)", "window:resize": "onResize()", "window:scroll": "onScroll()" } }, viewQueries: [{ propertyName: "overlayRoot", first: true, predicate: ["overlayRoot"], descendants: true }], ngImport: i0, template: "@if (open() && anchorEl()) {\n  @if (hasBackdrop()) {\n    <div\n      [class]=\"backdropClass()\"\n      (pointerdown)=\"onBackdropPointerDown($event)\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  <div\n    #overlayRoot\n    class=\"fixed z-[1000]\"\n    [ngStyle]=\"overlayStyle()\"\n    role=\"presentation\"\n  >\n    <ng-content />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngConnectedOverlay, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-connected-overlay', standalone: true, imports: [NgStyle], template: "@if (open() && anchorEl()) {\n  @if (hasBackdrop()) {\n    <div\n      [class]=\"backdropClass()\"\n      (pointerdown)=\"onBackdropPointerDown($event)\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  <div\n    #overlayRoot\n    class=\"fixed z-[1000]\"\n    [ngStyle]=\"overlayStyle()\"\n    role=\"presentation\"\n  >\n    <ng-content />\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", 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 }] }], closeOnInsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnInsideClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], backdropClick: [{ type: i0.Output, args: ["backdropClick"] }], overlayRoot: [{
+                type: ViewChild,
+                args: ['overlayRoot', { static: false }]
+            }], onDocKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }], onDocPointerDown: [{
+                type: HostListener,
+                args: ['document:pointerdown', ['$event']]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onScroll: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }] } });
+
+class TngOverlayRef {
+    /**
+     * Controlled open state (parent owns state).
+     * Use [(open)]="signal()" style with openChange.
+     */
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    openChange = output();
+    /** Lifecycle outputs */
+    opened = output();
+    closed = output();
+    /** Read-only computed */
+    isOpen = computed(() => this.open(), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Request open (controlled) */
+    requestOpen() {
+        if (this.open())
+            return;
+        this.openChange.emit(true);
+        this.opened.emit();
+    }
+    /** Request close (controlled) */
+    requestClose(reason) {
+        if (!this.open())
+            return;
+        this.openChange.emit(false);
+        this.closed.emit(reason);
+    }
+    /** Convenience aliases */
+    openOverlay() {
+        this.requestOpen();
+    }
+    close(reason) {
+        this.requestClose(reason);
+    }
+    toggle() {
+        this.open() ? this.requestClose('programmatic') : this.requestOpen();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngOverlayRef, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TngOverlayRef, isStandalone: true, selector: "tng-overlay-ref", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", opened: "opened", closed: "closed" }, exportAs: ["tngOverlayRef"], ngImport: i0, template: "<ng-content />\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngOverlayRef, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-overlay-ref', standalone: true, exportAs: 'tngOverlayRef', template: "<ng-content />\n" }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class TngOverlayPanel {
+    /** Consumer-provided class overrides / extensions */
+    klass = input('', ...(ngDevMode ? [{ debugName: "klass" }] : []));
+    /**
+     * When true, treat panel as modal surface:
+     * - trap focus
+     * - restore focus on destroy
+     * - aria-modal="true"
+     */
+    modal = input(false, ...(ngDevMode ? [{ debugName: "modal" }] : []));
+    /** a11y */
+    role = input('presentation', ...(ngDevMode ? [{ debugName: "role" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaLabelledby = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
+    ariaDescribedby = input('', ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : []));
+    /** Focus trap options (only meaningful when modal=true) */
+    restoreFocus = input(true, ...(ngDevMode ? [{ debugName: "restoreFocus" }] : []));
+    autoCapture = input(true, ...(ngDevMode ? [{ debugName: "autoCapture" }] : []));
+    deferCaptureElements = input(false, ...(ngDevMode ? [{ debugName: "deferCaptureElements" }] : []));
+    /** Base themed Tailwind classes */
+    baseClasses = 'bg-bg text-fg border border-border rounded-md shadow-lg max-h-60 overflow-auto outline-none';
+    /** Final merged class string */
+    classes = computed(() => `${this.baseClasses} ${this.klass()}`.trim(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    /** For ARIA: only true when modal */
+    ariaModal = computed(() => (this.modal() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaModal" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngOverlayPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TngOverlayPanel, isStandalone: true, selector: "tng-overlay-panel", inputs: { klass: { classPropertyName: "klass", publicName: "klass", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", 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 } }, ngImport: i0, template: "<div\n  [class]=\"classes()\"\n  [attr.role]=\"role()\"\n  [attr.aria-modal]=\"ariaModal()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n  [attr.aria-describedby]=\"ariaDescribedby() || null\"\n  tabindex=\"-1\"\n  [tngFocusTrap]=\"modal()\"\n  [restoreFocus]=\"restoreFocus()\"\n  [autoCapture]=\"autoCapture()\"\n  [deferCaptureElements]=\"deferCaptureElements()\"\n>\n  <ng-content />\n</div>\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: TngOverlayPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-overlay-panel', standalone: true, imports: [TngFocusTrap], template: "<div\n  [class]=\"classes()\"\n  [attr.role]=\"role()\"\n  [attr.aria-modal]=\"ariaModal()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n  [attr.aria-describedby]=\"ariaDescribedby() || null\"\n  tabindex=\"-1\"\n  [tngFocusTrap]=\"modal()\"\n  [restoreFocus]=\"restoreFocus()\"\n  [autoCapture]=\"autoCapture()\"\n  [deferCaptureElements]=\"deferCaptureElements()\"\n>\n  <ng-content />\n</div>\n" }]
+        }], propDecorators: { klass: [{ type: i0.Input, args: [{ isSignal: true, alias: "klass", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", 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 }] }] } });
+
+class TngDialog {
+    /** Controlled open state */
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /** Close behavior */
+    closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : []));
+    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
+    /** a11y */
+    ariaLabel = input('Dialog', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** 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" }] : []));
+    /** When no tabbables exist, focus the panel */
+    autoFocusPanelWhenEmpty = input(true, ...(ngDevMode ? [{ debugName: "autoFocusPanelWhenEmpty" }] : []));
+    /** Klass inputs */
+    backdropKlass = input('fixed inset-0 bg-black/40', ...(ngDevMode ? [{ debugName: "backdropKlass" }] : []));
+    panelKlass = input([
+        'fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
+        'w-[min(32rem,calc(100vw-2rem))]',
+        'max-h-[calc(100vh-2rem)] overflow-auto',
+        'rounded-lg border border-border bg-bg shadow-xl outline-none',
+    ].join(' '), ...(ngDevMode ? [{ debugName: "panelKlass" }] : []));
+    headerWrapKlass = input('border-b border-border px-4 py-3', ...(ngDevMode ? [{ debugName: "headerWrapKlass" }] : []));
+    bodyWrapKlass = input('px-4 py-4', ...(ngDevMode ? [{ debugName: "bodyWrapKlass" }] : []));
+    footerWrapKlass = input('border-t border-border px-4 py-3', ...(ngDevMode ? [{ debugName: "footerWrapKlass" }] : []));
+    /** Outputs */
+    closed = output();
+    opened = output();
+    /** Derived */
+    isOpen = computed(() => this.open(), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Panel ref */
+    panelRef = viewChild('panel', ...(ngDevMode ? [{ debugName: "panelRef" }] : []));
+    injector = inject(Injector);
+    didEmitOpened = false;
+    constructor() {
+        effect(() => {
+            if (!this.isOpen())
+                return;
+            // afterNextRender must be called inside injection context
+            runInInjectionContext(this.injector, () => {
+                afterNextRender(() => this.focusPanelIfNoTabbable());
+            });
+        });
+    }
+    ngDoCheck() {
+        if (this.isOpen() && !this.didEmitOpened) {
+            this.didEmitOpened = true;
+            this.opened.emit();
+            // Optional extra attempt
+            queueMicrotask(() => this.focusPanelIfNoTabbable());
+        }
+        if (!this.isOpen() && this.didEmitOpened) {
+            this.didEmitOpened = false;
+        }
+    }
+    requestClose(reason) {
+        if (!this.open())
+            return;
+        this.closed.emit(reason);
+    }
+    onBackdropClick() {
+        if (!this.closeOnBackdropClick())
+            return;
+        this.requestClose('outside-click');
+    }
+    onPanelKeydown(ev) {
+        if (!this.open())
+            return;
+        if (!this.closeOnEscape())
+            return;
+        if (ev.defaultPrevented)
+            return;
+        if (ev.key === 'Escape') {
+            ev.preventDefault();
+            this.requestClose('escape');
+        }
+    }
+    focusPanelIfNoTabbable() {
+        if (!this.isOpen())
+            return;
+        if (!this.trapFocus())
+            return;
+        if (!this.autoFocusPanelWhenEmpty())
+            return;
+        const panel = this.panelRef()?.nativeElement;
+        if (!panel)
+            return;
+        const active = document.activeElement;
+        if (active && panel.contains(active))
+            return;
+        if (this.hasTabbable(panel))
+            return;
+        panel.focus();
+    }
+    hasTabbable(root) {
+        const candidates = root.querySelectorAll([
+            'a[href]',
+            'button',
+            'input',
+            'select',
+            'textarea',
+            '[tabindex]',
+            '[contenteditable="true"]',
+        ].join(','));
+        for (const el of Array.from(candidates)) {
+            if (el === root)
+                continue;
+            if (el.hasAttribute('disabled'))
+                continue;
+            if (el.type === 'hidden')
+                continue;
+            const tabindexAttr = el.getAttribute('tabindex');
+            const tabindex = tabindexAttr == null ? 0 : Number(tabindexAttr);
+            if (Number.isNaN(tabindex) || tabindex < 0)
+                continue;
+            if (el.getClientRects().length === 0)
+                continue;
+            return true;
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngDialog, isStandalone: true, selector: "tng-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 }, autoFocusPanelWhenEmpty: { classPropertyName: "autoFocusPanelWhenEmpty", publicName: "autoFocusPanelWhenEmpty", 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 }, headerWrapKlass: { classPropertyName: "headerWrapKlass", publicName: "headerWrapKlass", isSignal: true, isRequired: false, transformFunction: null }, bodyWrapKlass: { classPropertyName: "bodyWrapKlass", publicName: "bodyWrapKlass", isSignal: true, isRequired: false, transformFunction: null }, footerWrapKlass: { classPropertyName: "footerWrapKlass", publicName: "footerWrapKlass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", opened: "opened" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <div [class]=\"backdropKlass()\" (click)=\"onBackdropClick()\"></div>\n\n  <div\n    #panel\n    [class]=\"panelKlass()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    tabindex=\"-1\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown)=\"onPanelKeydown($event)\"\n    [tngFocusTrap]=\"isOpen() && trapFocus()\"\n    [restoreFocus]=\"restoreFocus()\"\n    [autoCapture]=\"autoCapture()\"\n    [deferCaptureElements]=\"deferCaptureElements()\"\n  >\n    <!-- Header slot -->\n    @if (true) {\n      <div [class]=\"headerWrapKlass()\">\n        <ng-content select=\"[tngDialogHeader]\"></ng-content>\n      </div>\n    }\n\n    <!-- Body -->\n    <div [class]=\"bodyWrapKlass()\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer slot -->\n    <div [class]=\"footerWrapKlass()\">\n      <ng-content select=\"[tngDialogFooter]\"></ng-content>\n    </div>\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: TngDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-dialog', standalone: true, imports: [TngFocusTrap], template: "@if (open()) {\n  <div [class]=\"backdropKlass()\" (click)=\"onBackdropClick()\"></div>\n\n  <div\n    #panel\n    [class]=\"panelKlass()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    tabindex=\"-1\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown)=\"onPanelKeydown($event)\"\n    [tngFocusTrap]=\"isOpen() && trapFocus()\"\n    [restoreFocus]=\"restoreFocus()\"\n    [autoCapture]=\"autoCapture()\"\n    [deferCaptureElements]=\"deferCaptureElements()\"\n  >\n    <!-- Header slot -->\n    @if (true) {\n      <div [class]=\"headerWrapKlass()\">\n        <ng-content select=\"[tngDialogHeader]\"></ng-content>\n      </div>\n    }\n\n    <!-- Body -->\n    <div [class]=\"bodyWrapKlass()\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer slot -->\n    <div [class]=\"footerWrapKlass()\">\n      <ng-content select=\"[tngDialogFooter]\"></ng-content>\n    </div>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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 }] }], autoFocusPanelWhenEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocusPanelWhenEmpty", required: false }] }], backdropKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropKlass", required: false }] }], panelKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelKlass", required: false }] }], headerWrapKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerWrapKlass", required: false }] }], bodyWrapKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyWrapKlass", required: false }] }], footerWrapKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerWrapKlass", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+
+class TngDialogInitialFocus {
+    // Attribute CDK FocusTrap looks for
+    cdkFocusInitialAttr = '';
+    // Optional camelCase alias (harmless, future-proof)
+    cdkFocusInitialCamelAttr = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngDialogInitialFocus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: TngDialogInitialFocus, isStandalone: true, selector: "[tngDialogInitialFocus]", host: { properties: { "attr.cdk-focus-initial": "this.cdkFocusInitialAttr", "attr.cdkFocusInitial": "this.cdkFocusInitialCamelAttr" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngDialogInitialFocus, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngDialogInitialFocus]',
+                    standalone: true,
+                }]
+        }], propDecorators: { cdkFocusInitialAttr: [{
+                type: HostBinding,
+                args: ['attr.cdk-focus-initial']
+            }], cdkFocusInitialCamelAttr: [{
+                type: HostBinding,
+                args: ['attr.cdkFocusInitial']
+            }] } });
+
+class TngOptionList {
+    // IMPORTANT: because #listbox is under @if branches (modal/non-modal),
+    // keep static:false so Angular always resolves the *current* element.
+    listbox;
+    /* =====================
+     * Modal (optional)
+     * ===================== */
+    modal = input(false, ...(ngDevMode ? [{ debugName: "modal" }] : []));
+    /** overlay-panel options (only used when modal=true) */
+    panelKlass = input('p-0', ...(ngDevMode ? [{ debugName: "panelKlass" }] : []));
+    restoreFocus = input(true, ...(ngDevMode ? [{ debugName: "restoreFocus" }] : []));
+    autoCapture = input(true, ...(ngDevMode ? [{ debugName: "autoCapture" }] : []));
+    deferCaptureElements = input(false, ...(ngDevMode ? [{ debugName: "deferCaptureElements" }] : []));
+    /** a11y (for listbox container) */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : [])); // applied to listbox container
+    ariaLabelledby = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
+    ariaDescribedby = input('', ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : []));
+    /**
+     * tabindex for listbox container:
+     * - Default: 0 (focusable, good for keyboard + typeahead)
+     * - Set -1 for programmatic focus only
+     * - Set null to omit tabindex attribute
+     */
+    tabindex = input(0, ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
+    /* =====================
+     * Templates + data
+     * ===================== */
+    optionTemplate = input(null, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    activeIndex = input(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    displayWith = input((v) => String(v), ...(ngDevMode ? [{ debugName: "displayWith" }] : []));
+    emptyText = input('No results', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+    containerKlass = input('py-1 overflow-auto max-h-60', ...(ngDevMode ? [{ debugName: "containerKlass" }] : []));
+    optionKlass = input('px-3 py-2 text-sm cursor-pointer select-none', ...(ngDevMode ? [{ debugName: "optionKlass" }] : []));
+    optionActiveKlass = input('bg-primary text-on-primary', ...(ngDevMode ? [{ debugName: "optionActiveKlass" }] : []));
+    optionInactiveKlass = input('bg-bg text-fg', ...(ngDevMode ? [{ debugName: "optionInactiveKlass" }] : []));
+    emptyKlass = input('px-3 py-2 text-sm text-disable', ...(ngDevMode ? [{ debugName: "emptyKlass" }] : []));
+    optionTpl;
+    /* =====================
+     * Outputs
+     * ===================== */
+    optionMouseDown = output();
+    optionHover = output();
+    /** Parent-controlled active index */
+    activeIndexChange = output();
+    /** Parent decides what selection means */
+    requestSelectActive = output();
+    /** Optional: parent can observe typeahead match */
+    requestTypeaheadMatch = output();
+    /** Optional: key stroke propagation */
+    propagateKeys = input(false, ...(ngDevMode ? [{ debugName: "propagateKeys" }] : []));
+    keyStroke = output();
+    /* =====================
+     * Keyboard / typeahead config
+     * ===================== */
+    keyboard = input(true, ...(ngDevMode ? [{ debugName: "keyboard" }] : []));
+    loop = input(true, ...(ngDevMode ? [{ debugName: "loop" }] : []));
+    selectOnEnter = input(true, ...(ngDevMode ? [{ debugName: "selectOnEnter" }] : []));
+    typeahead = input(true, ...(ngDevMode ? [{ debugName: "typeahead" }] : []));
+    typeaheadMode = input('startsWith', ...(ngDevMode ? [{ debugName: "typeaheadMode" }] : []));
+    typeaheadResetMs = input(500, ...(ngDevMode ? [{ debugName: "typeaheadResetMs" }] : []));
+    pageJumpSize = input(8, ...(ngDevMode ? [{ debugName: "pageJumpSize" }] : []));
+    typeaheadQuery = signal('', ...(ngDevMode ? [{ debugName: "typeaheadQuery" }] : []));
+    typeaheadTimer = null;
+    /* =====================
+     * Computeds
+     * ===================== */
+    hasItems = computed(() => (this.items()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "hasItems" }] : []));
+    constructor() {
+        /**
+         * Scroll follows the controlled `activeIndex`:
+         * This guarantees scrolling even when parent changes activeIndex via:
+         * - hover
+         * - open() initialization
+         * - programmatic updates
+         * - any external state
+         *
+         * (Not just when OptionList handles keydown.)
+         */
+        effect(() => {
+            const i = this.activeIndex();
+            if (i < 0)
+                return;
+            // Wait for DOM update / projection / overlay paint
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => this.scrollIndexIntoView(i));
+            });
+        });
+    }
+    get tpl() {
+        return this.optionTemplate() ?? this.optionTpl;
+    }
+    display(item) {
+        return this.displayWith()(item);
+    }
+    isActive(i) {
+        return i === this.activeIndex();
+    }
+    optionClasses(i) {
+        const state = this.isActive(i) ? this.optionActiveKlass() : this.optionInactiveKlass();
+        return `${this.optionKlass()} ${state}`.trim();
+    }
+    onMouseDown(item, index, ev) {
+        ev.preventDefault();
+        this.optionMouseDown.emit({ item, index });
+    }
+    onMouseEnter(index) {
+        this.optionHover.emit(index);
+    }
+    /* =====================
+     * Keyboard handling
+     * ===================== */
+    onKeydown(ev) {
+        const key = ev.key;
+        if (!this.hasItems()) {
+            this.emitKeyStroke({ key, handled: false, prevented: false, action: 'none', originalEvent: ev });
+            return;
+        }
+        if (ev.defaultPrevented) {
+            this.emitKeyStroke({ key, handled: false, prevented: false, action: 'none', originalEvent: ev });
+            return;
+        }
+        const anyEv = ev;
+        if (anyEv.isComposing === true || anyEv.keyCode === 229) {
+            this.emitKeyStroke({ key, handled: false, prevented: false, action: 'none', originalEvent: ev });
+            return;
+        }
+        if (!this.keyboard()) {
+            this.emitKeyStroke({ key, handled: false, prevented: false, action: 'none', originalEvent: ev });
+            return;
+        }
+        // Navigation
+        if (key === 'ArrowDown') {
+            ev.preventDefault();
+            const next = this.computeNextIndex(1);
+            this.commitActive(next);
+            this.emitKeyStroke({ key, handled: true, prevented: true, action: 'move', nextActiveIndex: next, originalEvent: ev });
+            return;
+        }
+        if (key === 'ArrowUp') {
+            ev.preventDefault();
+            const next = this.computeNextIndex(-1);
+            this.commitActive(next);
+            this.emitKeyStroke({ key, handled: true, prevented: true, action: 'move', nextActiveIndex: next, originalEvent: ev });
+            return;
+        }
+        if (key === 'Home') {
+            ev.preventDefault();
+            const next = 0;
+            this.commitActive(next);
+            this.emitKeyStroke({ key, handled: true, prevented: true, action: 'move', nextActiveIndex: next, originalEvent: ev });
+            return;
+        }
+        if (key === 'End') {
+            ev.preventDefault();
+            const next = this.items().length - 1;
+            this.commitActive(next);
+            this.emitKeyStroke({ key, handled: true, prevented: true, action: 'move', nextActiveIndex: next, originalEvent: ev });
+            return;
+        }
+        if (key === 'PageDown') {
+            ev.preventDefault();
+            const next = this.computeNextIndex(this.pageJumpSize());
+            this.commitActive(next);
+            this.emitKeyStroke({ key, handled: true, prevented: true, action: 'move', nextActiveIndex: next, originalEvent: ev });
+            return;
+        }
+        if (key === 'PageUp') {
+            ev.preventDefault();
+            const next = this.computeNextIndex(-this.pageJumpSize());
+            this.commitActive(next);
+            this.emitKeyStroke({ key, handled: true, prevented: true, action: 'move', nextActiveIndex: next, originalEvent: ev });
+            return;
+        }
+        // Selection
+        if (key === 'Enter') {
+            if (!this.selectOnEnter()) {
+                this.emitKeyStroke({ key, handled: false, prevented: false, action: 'none', originalEvent: ev });
+                return;
+            }
+            ev.preventDefault();
+            this.requestSelectActive.emit();
+            this.emitKeyStroke({ key, handled: true, prevented: true, action: 'select', originalEvent: ev });
+            return;
+        }
+        // Typeahead
+        if (this.typeahead() && this.isPrintableKey(ev)) {
+            const { query, matchIndex } = this.onTypeaheadKey(key);
+            if (matchIndex >= 0) {
+                this.commitActive(matchIndex);
+                this.emitKeyStroke({
+                    key,
+                    handled: true,
+                    prevented: false,
+                    action: 'typeahead',
+                    nextActiveIndex: matchIndex,
+                    query,
+                    originalEvent: ev,
+                });
+                return;
+            }
+            this.emitKeyStroke({ key, handled: true, prevented: false, action: 'typeahead', query, originalEvent: ev });
+            return;
+        }
+        this.emitKeyStroke({ key, handled: false, prevented: false, action: 'none', originalEvent: ev });
+    }
+    emitKeyStroke(e) {
+        if (!this.propagateKeys())
+            return;
+        this.keyStroke.emit(e);
+    }
+    computeNextIndex(delta) {
+        const len = this.items().length;
+        if (len <= 0)
+            return -1;
+        const current = this.activeIndex();
+        const base = current < 0 ? (delta < 0 && this.loop() ? len - 1 : 0) : current;
+        const nextRaw = base + delta;
+        if (this.loop()) {
+            return ((nextRaw % len) + len) % len;
+        }
+        return Math.max(0, Math.min(len - 1, nextRaw));
+    }
+    /**
+     * Controlled activeIndex
+     * - Emit activeIndexChange (parent owns state)
+     * - Scrolling is handled by the effect() reacting to activeIndex()
+     */
+    commitActive(index) {
+        if (index < 0)
+            return;
+        this.activeIndexChange.emit(index);
+    }
+    /**
+     * Scroll the active option into view.
+     * Let the browser pick the nearest scrollable ancestor.
+     */
+    scrollIndexIntoView(index) {
+        const root = this.listbox?.nativeElement;
+        if (!root)
+            return;
+        const optionEl = root.querySelector(`[data-index="${index}"]`);
+        if (!optionEl)
+            return;
+        optionEl.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
+            behavior: 'auto',
+        });
+    }
+    /* =====================
+     * Typeahead
+     * ===================== */
+    onTypeaheadKey(char) {
+        if (this.typeaheadTimer != null) {
+            window.clearTimeout(this.typeaheadTimer);
+        }
+        const nextQuery = (this.typeaheadQuery() + char).toLowerCase();
+        this.typeaheadQuery.set(nextQuery);
+        this.typeaheadTimer = window.setTimeout(() => {
+            this.typeaheadQuery.set('');
+            this.typeaheadTimer = null;
+        }, this.typeaheadResetMs());
+        const idx = this.findTypeaheadMatch(nextQuery);
+        if (idx >= 0) {
+            this.requestTypeaheadMatch.emit({ query: nextQuery, index: idx });
+        }
+        return { query: nextQuery, matchIndex: idx };
+    }
+    findTypeaheadMatch(query) {
+        const items = this.items();
+        const mode = this.typeaheadMode();
+        const start = this.activeIndex();
+        const from = start < 0 ? 0 : start + 1;
+        const matches = (item) => {
+            const label = this.display(item).toLowerCase();
+            return mode === 'includes' ? label.includes(query) : label.startsWith(query);
+        };
+        for (let i = from; i < items.length; i++)
+            if (matches(items[i]))
+                return i;
+        for (let i = 0; i < from && i < items.length; i++)
+            if (matches(items[i]))
+                return i;
+        return -1;
+    }
+    isPrintableKey(ev) {
+        if (ev.ctrlKey || ev.metaKey || ev.altKey)
+            return false;
+        if (ev.key.length !== 1)
+            return false;
+        if (ev.key === ' ')
+            return false;
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngOptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngOptionList, isStandalone: true, selector: "tng-option-list", inputs: { modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, panelKlass: { classPropertyName: "panelKlass", publicName: "panelKlass", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, containerKlass: { classPropertyName: "containerKlass", publicName: "containerKlass", isSignal: true, isRequired: false, transformFunction: null }, optionKlass: { classPropertyName: "optionKlass", publicName: "optionKlass", isSignal: true, isRequired: false, transformFunction: null }, optionActiveKlass: { classPropertyName: "optionActiveKlass", publicName: "optionActiveKlass", isSignal: true, isRequired: false, transformFunction: null }, optionInactiveKlass: { classPropertyName: "optionInactiveKlass", publicName: "optionInactiveKlass", isSignal: true, isRequired: false, transformFunction: null }, emptyKlass: { classPropertyName: "emptyKlass", publicName: "emptyKlass", isSignal: true, isRequired: false, transformFunction: null }, propagateKeys: { classPropertyName: "propagateKeys", publicName: "propagateKeys", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, selectOnEnter: { classPropertyName: "selectOnEnter", publicName: "selectOnEnter", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMode: { classPropertyName: "typeaheadMode", publicName: "typeaheadMode", isSignal: true, isRequired: false, transformFunction: null }, typeaheadResetMs: { classPropertyName: "typeaheadResetMs", publicName: "typeaheadResetMs", isSignal: true, isRequired: false, transformFunction: null }, pageJumpSize: { classPropertyName: "pageJumpSize", publicName: "pageJumpSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionMouseDown: "optionMouseDown", optionHover: "optionHover", activeIndexChange: "activeIndexChange", requestSelectActive: "requestSelectActive", requestTypeaheadMatch: "requestTypeaheadMatch", keyStroke: "keyStroke" }, queries: [{ propertyName: "optionTpl", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!-- option-list.component.html -->\n@let active = activeIndex();\n\n@if (modal()) {\n  <tng-overlay-panel\n    [modal]=\"true\"\n    [klass]=\"panelKlass()\"\n    [restoreFocus]=\"restoreFocus()\"\n    [autoCapture]=\"autoCapture()\"\n    [deferCaptureElements]=\"deferCaptureElements()\"\n  >\n    <div\n      #listbox\n      role=\"listbox\"\n      [class]=\"containerKlass()\"\n      [attr.tabindex]=\"tabindex()\"\n      (keydown)=\"onKeydown($event)\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n      [attr.aria-describedby]=\"ariaDescribedby() || null\"\n      [attr.aria-activedescendant]=\"active >= 0 ? 'tng-opt-' + active : null\"\n    >\n      @if (hasItems()) {\n        @for (item of items(); let i = $index; track i) {\n          <div\n            role=\"option\"\n            [id]=\"'tng-opt-' + i\"\n            [class]=\"optionClasses(i)\"\n            [attr.aria-selected]=\"isActive(i) ? 'true' : 'false'\"\n            [attr.data-index]=\"i\"\n            (mousedown)=\"onMouseDown(item, i, $event)\"\n            (mouseenter)=\"onMouseEnter(i)\"\n          >\n            @if (tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index: i, active: isActive(i) }\"\n              />\n            } @else {\n              {{ display(item) }}\n            }\n          </div>\n        }\n      } @else {\n        <div [class]=\"emptyKlass()\">{{ emptyText() }}</div>\n      }\n    </div>\n  </tng-overlay-panel>\n} @else {\n  <div\n    #listbox\n    role=\"listbox\"\n    [class]=\"containerKlass()\"\n    [attr.tabindex]=\"tabindex()\"\n    (keydown)=\"onKeydown($event)\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-describedby]=\"ariaDescribedby() || null\"\n    [attr.aria-activedescendant]=\"active >= 0 ? 'tng-opt-' + active : null\"\n  >\n    @if (hasItems()) {\n      @for (item of items(); let i = $index; track i) {\n        <div\n          role=\"option\"\n          [id]=\"'tng-opt-' + i\"\n          [class]=\"optionClasses(i)\"\n          [attr.aria-selected]=\"isActive(i) ? 'true' : 'false'\"\n          [attr.data-index]=\"i\"\n          (mousedown)=\"onMouseDown(item, i, $event)\"\n          (mouseenter)=\"onMouseEnter(i)\"\n        >\n          @if (tpl) {\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, index: i, active: isActive(i) }\"\n            />\n          } @else {\n            {{ display(item) }}\n          }\n        </div>\n      }\n    } @else {\n      <div [class]=\"emptyKlass()\">{{ emptyText() }}</div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TngOverlayPanel, selector: "tng-overlay-panel", inputs: ["klass", "modal", "role", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "restoreFocus", "autoCapture", "deferCaptureElements"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngOptionList, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-option-list', standalone: true, imports: [CommonModule, TngOverlayPanel], template: "<!-- option-list.component.html -->\n@let active = activeIndex();\n\n@if (modal()) {\n  <tng-overlay-panel\n    [modal]=\"true\"\n    [klass]=\"panelKlass()\"\n    [restoreFocus]=\"restoreFocus()\"\n    [autoCapture]=\"autoCapture()\"\n    [deferCaptureElements]=\"deferCaptureElements()\"\n  >\n    <div\n      #listbox\n      role=\"listbox\"\n      [class]=\"containerKlass()\"\n      [attr.tabindex]=\"tabindex()\"\n      (keydown)=\"onKeydown($event)\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n      [attr.aria-describedby]=\"ariaDescribedby() || null\"\n      [attr.aria-activedescendant]=\"active >= 0 ? 'tng-opt-' + active : null\"\n    >\n      @if (hasItems()) {\n        @for (item of items(); let i = $index; track i) {\n          <div\n            role=\"option\"\n            [id]=\"'tng-opt-' + i\"\n            [class]=\"optionClasses(i)\"\n            [attr.aria-selected]=\"isActive(i) ? 'true' : 'false'\"\n            [attr.data-index]=\"i\"\n            (mousedown)=\"onMouseDown(item, i, $event)\"\n            (mouseenter)=\"onMouseEnter(i)\"\n          >\n            @if (tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, index: i, active: isActive(i) }\"\n              />\n            } @else {\n              {{ display(item) }}\n            }\n          </div>\n        }\n      } @else {\n        <div [class]=\"emptyKlass()\">{{ emptyText() }}</div>\n      }\n    </div>\n  </tng-overlay-panel>\n} @else {\n  <div\n    #listbox\n    role=\"listbox\"\n    [class]=\"containerKlass()\"\n    [attr.tabindex]=\"tabindex()\"\n    (keydown)=\"onKeydown($event)\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-describedby]=\"ariaDescribedby() || null\"\n    [attr.aria-activedescendant]=\"active >= 0 ? 'tng-opt-' + active : null\"\n  >\n    @if (hasItems()) {\n      @for (item of items(); let i = $index; track i) {\n        <div\n          role=\"option\"\n          [id]=\"'tng-opt-' + i\"\n          [class]=\"optionClasses(i)\"\n          [attr.aria-selected]=\"isActive(i) ? 'true' : 'false'\"\n          [attr.data-index]=\"i\"\n          (mousedown)=\"onMouseDown(item, i, $event)\"\n          (mouseenter)=\"onMouseEnter(i)\"\n        >\n          @if (tpl) {\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, index: i, active: isActive(i) }\"\n            />\n          } @else {\n            {{ display(item) }}\n          }\n        </div>\n      }\n    } @else {\n      <div [class]=\"emptyKlass()\">{{ emptyText() }}</div>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { listbox: [{
+                type: ViewChild,
+                args: ['listbox', { read: ElementRef }]
+            }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], panelKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelKlass", 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], containerKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerKlass", required: false }] }], optionKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionKlass", required: false }] }], optionActiveKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionActiveKlass", required: false }] }], optionInactiveKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionInactiveKlass", required: false }] }], emptyKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyKlass", required: false }] }], optionTpl: [{
+                type: ContentChild,
+                args: [TemplateRef, { descendants: true }]
+            }], optionMouseDown: [{ type: i0.Output, args: ["optionMouseDown"] }], optionHover: [{ type: i0.Output, args: ["optionHover"] }], activeIndexChange: [{ type: i0.Output, args: ["activeIndexChange"] }], requestSelectActive: [{ type: i0.Output, args: ["requestSelectActive"] }], requestTypeaheadMatch: [{ type: i0.Output, args: ["requestTypeaheadMatch"] }], propagateKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateKeys", required: false }] }], keyStroke: [{ type: i0.Output, args: ["keyStroke"] }], keyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboard", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], selectOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnEnter", required: false }] }], typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], typeaheadMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadMode", required: false }] }], typeaheadResetMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadResetMs", required: false }] }], pageJumpSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageJumpSize", required: false }] }] } });
+
+class TngPopover {
+    /* =====================
+     * Slots
+     * ===================== */
+    contentTpl;
+    triggerEl;
+    /* =====================
+     * Inputs / outputs
+     * ===================== */
+    open = input(null, ...(ngDevMode ? [{ debugName: "open" }] : [])); // optional controlled
+    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" }] : []));
+    rootKlass = input('relative inline-flex', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    triggerKlass = input('inline-flex', ...(ngDevMode ? [{ debugName: "triggerKlass" }] : []));
+    panelKlass = input('p-2', ...(ngDevMode ? [{ debugName: "panelKlass" }] : []));
+    opened = output();
+    closed = output();
+    openChange = output(); // for controlled usage if desired
+    /* =====================
+     * State
+     * ===================== */
+    internalOpen = signal(false, ...(ngDevMode ? [{ debugName: "internalOpen" }] : []));
+    isOpen = computed(() => (this.open() == null ? this.internalOpen() : !!this.open()), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    constructor() {
+        // If externally controlled, keep internal in sync for animation consistency
+        effect(() => {
+            const ext = this.open();
+            if (ext == null)
+                return;
+            this.internalOpen.set(!!ext);
+        });
+    }
+    toggle() {
+        this.isOpen() ? this.requestClose('programmatic') : this.requestOpen();
+    }
+    requestOpen() {
+        if (this.isOpen())
+            return;
+        if (this.open() == null)
+            this.internalOpen.set(true);
+        this.openChange.emit(true);
+        this.opened.emit();
+    }
+    requestClose(reason) {
+        if (!this.isOpen())
+            return;
+        if (this.open() == null)
+            this.internalOpen.set(false);
+        this.openChange.emit(false);
+        this.closed.emit(reason);
+        queueMicrotask(() => this.triggerEl?.nativeElement?.focus());
+    }
+    onOverlayClosed(reason) {
+        // Map connected-overlay reasons
+        if (reason === 'escape')
+            this.requestClose('escape');
+        else if (reason === 'outside-click')
+            this.requestClose('outside-click');
+        else
+            this.requestClose('programmatic');
+    }
+    onTriggerClick() {
+        this.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngPopover, isStandalone: true, selector: "tng-popover", inputs: { open: { classPropertyName: "open", publicName: "open", 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 }, 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 } }, outputs: { opened: "opened", closed: "closed", openChange: "openChange" }, queries: [{ propertyName: "contentTpl", first: true, predicate: ["popoverContent"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, static: true }], ngImport: i0, template: "<div [class]=\"rootKlass()\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [class]=\"triggerKlass()\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"isOpen()\"\n    (click)=\"onTriggerClick()\"\n  >\n    <ng-content select=\"[tngPopoverTrigger]\"></ng-content>\n  </button>\n\n  <tng-overlay-ref\n    [open]=\"isOpen()\"\n    (openChange)=\"openChange.emit($event)\"\n    (opened)=\"opened.emit()\"\n    (closed)=\"onOverlayClosed($event)\"\n  >\n    <tng-connected-overlay\n      [open]=\"isOpen()\"\n      [anchor]=\"triggerEl\"\n      [placement]=\"placement()\"\n      [offset]=\"offset()\"\n      [width]=\"width()\"\n      [closeOnOutsideClick]=\"closeOnOutsideClick()\"\n      [closeOnEscape]=\"closeOnEscape()\"\n      (closed)=\"onOverlayClosed($event)\"\n    >\n      <tng-overlay-panel [klass]=\"panelKlass()\">\n        @if (contentTpl) {\n          <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n        } @else {\n          <ng-content select=\"[tngPopoverContent]\"></ng-content>\n        }\n      </tng-overlay-panel>\n    </tng-connected-overlay>\n  </tng-overlay-ref>\n</div>\n", dependencies: [{ kind: "directive", type: 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: TngPopover, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-popover', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        TngConnectedOverlay,
+                        TngOverlayPanel,
+                        TngOverlayRef,
+                    ], template: "<div [class]=\"rootKlass()\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [class]=\"triggerKlass()\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"isOpen()\"\n    (click)=\"onTriggerClick()\"\n  >\n    <ng-content select=\"[tngPopoverTrigger]\"></ng-content>\n  </button>\n\n  <tng-overlay-ref\n    [open]=\"isOpen()\"\n    (openChange)=\"openChange.emit($event)\"\n    (opened)=\"opened.emit()\"\n    (closed)=\"onOverlayClosed($event)\"\n  >\n    <tng-connected-overlay\n      [open]=\"isOpen()\"\n      [anchor]=\"triggerEl\"\n      [placement]=\"placement()\"\n      [offset]=\"offset()\"\n      [width]=\"width()\"\n      [closeOnOutsideClick]=\"closeOnOutsideClick()\"\n      [closeOnEscape]=\"closeOnEscape()\"\n      (closed)=\"onOverlayClosed($event)\"\n    >\n      <tng-overlay-panel [klass]=\"panelKlass()\">\n        @if (contentTpl) {\n          <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n        } @else {\n          <ng-content select=\"[tngPopoverContent]\"></ng-content>\n        }\n      </tng-overlay-panel>\n    </tng-connected-overlay>\n  </tng-overlay-ref>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { contentTpl: [{
+                type: ContentChild,
+                args: ['popoverContent', { read: TemplateRef }]
+            }], triggerEl: [{
+                type: ViewChild,
+                args: ['triggerEl', { static: true }]
+            }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", 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 }] }], 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 }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
+
+class TngSnackbarHost {
+    /** Controlled items array */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Placement on screen */
+    position = input('bottom-center', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /** Max stack size (visual). Consumer should also enforce if desired. */
+    max = input(3, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    /** Outputs */
+    dismiss = output();
+    /* =====================
+     * Klass inputs
+     * ===================== */
+    hostKlass = input('fixed z-[1100] flex flex-col gap-2 p-4', ...(ngDevMode ? [{ debugName: "hostKlass" }] : []));
+    itemKlass = input('pointer-events-auto w-[min(28rem,calc(100vw-2rem))] rounded-md border border-border bg-bg shadow-lg', ...(ngDevMode ? [{ debugName: "itemKlass" }] : []));
+    itemInnerKlass = input('flex items-start gap-3 px-4 py-3', ...(ngDevMode ? [{ debugName: "itemInnerKlass" }] : []));
+    messageKlass = input('text-sm text-foreground', ...(ngDevMode ? [{ debugName: "messageKlass" }] : []));
+    actionKlass = input('text-sm font-medium text-primary hover:underline', ...(ngDevMode ? [{ debugName: "actionKlass" }] : []));
+    dismissBtnKlass = input('text-muted-foreground hover:text-foreground', ...(ngDevMode ? [{ debugName: "dismissBtnKlass" }] : []));
+    /** Intent -> klass mapping */
+    intentKlass = input((intent) => {
+        switch (intent) {
+            case 'success':
+                return 'border-success/30';
+            case 'info':
+                return 'border-info/30';
+            case 'warning':
+                return 'border-warning/30';
+            case 'error':
+                return 'border-danger/30';
+            case 'default':
+            default:
+                return '';
+        }
+    }, ...(ngDevMode ? [{ debugName: "intentKlass" }] : []));
+    /* =====================
+     * Derived / internal
+     * ===================== */
+    hostPositionKlass = computed(() => {
+        const base = this.hostKlass();
+        switch (this.position()) {
+            case 'top-left':
+                return `${base} top-0 left-0 items-start`;
+            case 'top-center':
+                return `${base} top-0 left-1/2 -translate-x-1/2 items-center`;
+            case 'top-right':
+                return `${base} top-0 right-0 items-end`;
+            case 'bottom-left':
+                return `${base} bottom-0 left-0 items-start`;
+            case 'bottom-center':
+                return `${base} bottom-0 left-1/2 -translate-x-1/2 items-center`;
+            case 'bottom-right':
+                return `${base} bottom-0 right-0 items-end`;
+        }
+    }, ...(ngDevMode ? [{ debugName: "hostPositionKlass" }] : []));
+    /** Track which ids have active timers */
+    timers = new Map();
+    constructor() {
+        effect(() => {
+            const incoming = (this.items() ?? []).slice(0, Math.max(1, this.max()));
+            // Start timers for new items with duration
+            for (const item of incoming) {
+                const dur = item.durationMs ?? 0;
+                if (dur > 0 && !this.timers.has(item.id)) {
+                    const t = window.setTimeout(() => {
+                        this.timers.delete(item.id);
+                        this.dismiss.emit({ id: item.id, reason: 'timeout' });
+                    }, dur);
+                    this.timers.set(item.id, t);
+                }
+            }
+            // Clear timers for removed items
+            const ids = new Set(incoming.map((x) => x.id));
+            for (const [id, t] of Array.from(this.timers.entries())) {
+                if (!ids.has(id)) {
+                    window.clearTimeout(t);
+                    this.timers.delete(id);
+                }
+            }
+        });
+    }
+    itemClasses(item) {
+        const intent = item.intent ?? 'default';
+        const intentCls = this.intentKlass()(intent);
+        return `${this.itemKlass()} ${intentCls}`.trim();
+    }
+    onDismiss(id) {
+        const t = this.timers.get(id);
+        if (t != null) {
+            window.clearTimeout(t);
+            this.timers.delete(id);
+        }
+        this.dismiss.emit({ id, reason: 'dismiss' });
+    }
+    onAction(id) {
+        const t = this.timers.get(id);
+        if (t != null) {
+            window.clearTimeout(t);
+            this.timers.delete(id);
+        }
+        this.dismiss.emit({ id, reason: 'action' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSnackbarHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngSnackbarHost, isStandalone: true, selector: "tng-snackbar-host", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, hostKlass: { classPropertyName: "hostKlass", publicName: "hostKlass", isSignal: true, isRequired: false, transformFunction: null }, itemKlass: { classPropertyName: "itemKlass", publicName: "itemKlass", isSignal: true, isRequired: false, transformFunction: null }, itemInnerKlass: { classPropertyName: "itemInnerKlass", publicName: "itemInnerKlass", isSignal: true, isRequired: false, transformFunction: null }, messageKlass: { classPropertyName: "messageKlass", publicName: "messageKlass", isSignal: true, isRequired: false, transformFunction: null }, actionKlass: { classPropertyName: "actionKlass", publicName: "actionKlass", isSignal: true, isRequired: false, transformFunction: null }, dismissBtnKlass: { classPropertyName: "dismissBtnKlass", publicName: "dismissBtnKlass", isSignal: true, isRequired: false, transformFunction: null }, intentKlass: { classPropertyName: "intentKlass", publicName: "intentKlass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "@if ((items()?.length ?? 0) > 0) {\n  <div [class]=\"hostPositionKlass()\">\n    @for (item of items().slice(0, max()); track item.id) {\n      <div [class]=\"itemClasses(item)\">\n        <div [class]=\"itemInnerKlass()\">\n          <div class=\"flex-1\">\n            <div [class]=\"messageKlass()\">{{ item.message }}</div>\n          </div>\n\n          @if (item.actionLabel) {\n            <button type=\"button\" [class]=\"actionKlass()\" (click)=\"onAction(item.id)\">\n              {{ item.actionLabel }}\n            </button>\n          }\n\n          <button\n            type=\"button\"\n            [class]=\"dismissBtnKlass()\"\n            aria-label=\"Dismiss\"\n            (click)=\"onDismiss(item.id)\"\n          >\n            \u2715\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSnackbarHost, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-snackbar-host', standalone: true, template: "@if ((items()?.length ?? 0) > 0) {\n  <div [class]=\"hostPositionKlass()\">\n    @for (item of items().slice(0, max()); track item.id) {\n      <div [class]=\"itemClasses(item)\">\n        <div [class]=\"itemInnerKlass()\">\n          <div class=\"flex-1\">\n            <div [class]=\"messageKlass()\">{{ item.message }}</div>\n          </div>\n\n          @if (item.actionLabel) {\n            <button type=\"button\" [class]=\"actionKlass()\" (click)=\"onAction(item.id)\">\n              {{ item.actionLabel }}\n            </button>\n          }\n\n          <button\n            type=\"button\"\n            [class]=\"dismissBtnKlass()\"\n            aria-label=\"Dismiss\"\n            (click)=\"onDismiss(item.id)\"\n          >\n            \u2715\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], hostKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hostKlass", required: false }] }], itemKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemKlass", required: false }] }], itemInnerKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemInnerKlass", required: false }] }], messageKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageKlass", required: false }] }], actionKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionKlass", required: false }] }], dismissBtnKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissBtnKlass", required: false }] }], intentKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "intentKlass", required: false }] }] } });
+
+class TngTooltip {
+    triggerEl;
+    /**
+     * Option B: projected template support
+     * Usage:
+     * <tng-tooltip>
+     *   <ng-template #tooltipContent>...</ng-template>
+     *   <button>...</button>
+     * </tng-tooltip>
+     */
+    projectedTpl;
+    /** Option A: explicit input template (kept for flexibility) */
+    contentTpl = input(null, ...(ngDevMode ? [{ debugName: "contentTpl" }] : []));
+    /** Simple text tooltip */
+    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
+    /** Behavior */
+    placement = input('top-start', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    showDelay = input(250, ...(ngDevMode ? [{ debugName: "showDelay" }] : []));
+    hideDelay = input(100, ...(ngDevMode ? [{ debugName: "hideDelay" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Klass */
+    panelKlass = input('px-3 py-2 text-xs text-foreground', ...(ngDevMode ? [{ debugName: "panelKlass" }] : []));
+    surfaceKlass = input('rounded-md border border-border bg-bg shadow-md', ...(ngDevMode ? [{ debugName: "surfaceKlass" }] : []));
+    /** Events */
+    opened = output();
+    closed = output();
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    showTimer = null;
+    hideTimer = null;
+    /** Resolved template (Option A overrides Option B) */
+    tpl = computed(() => this.contentTpl() ?? this.projectedTpl ?? null, ...(ngDevMode ? [{ debugName: "tpl" }] : []));
+    hasContent = computed(() => !!this.tpl() || !!this.text(), ...(ngDevMode ? [{ debugName: "hasContent" }] : []));
+    clearTimers() {
+        if (this.showTimer != null) {
+            window.clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+        if (this.hideTimer != null) {
+            window.clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+    }
+    requestOpen() {
+        if (this.disabled())
+            return;
+        if (!this.hasContent())
+            return;
+        this.clearTimers();
+        const delay = Math.max(0, this.showDelay());
+        this.showTimer = window.setTimeout(() => {
+            this.open.set(true);
+            this.opened.emit();
+        }, delay);
+    }
+    requestClose(reason) {
+        this.clearTimers();
+        const delay = Math.max(0, this.hideDelay());
+        this.hideTimer = window.setTimeout(() => {
+            if (!this.open())
+                return;
+            this.open.set(false);
+            this.closed.emit(reason);
+        }, delay);
+    }
+    onMouseEnter() {
+        this.requestOpen();
+    }
+    onMouseLeave() {
+        this.requestClose('programmatic');
+    }
+    onFocusIn() {
+        this.requestOpen();
+    }
+    onFocusOut() {
+        this.requestClose('blur');
+    }
+    onDocKeydown(ev) {
+        if (!this.open())
+            return;
+        if (ev.key === 'Escape') {
+            ev.preventDefault();
+            this.requestClose('escape');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngTooltip, isStandalone: true, selector: "tng-tooltip", inputs: { contentTpl: { classPropertyName: "contentTpl", publicName: "contentTpl", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", 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 }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, panelKlass: { classPropertyName: "panelKlass", publicName: "panelKlass", isSignal: true, isRequired: false, transformFunction: null }, surfaceKlass: { classPropertyName: "surfaceKlass", publicName: "surfaceKlass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "document:keydown": "onDocKeydown($event)" } }, queries: [{ propertyName: "projectedTpl", first: true, predicate: ["tooltipContent"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, static: true }], ngImport: i0, template: "<span #triggerEl class=\"inline-flex\">\n  <ng-content></ng-content>\n</span>\n\n<tng-connected-overlay\n  [open]=\"open()\"\n  [anchor]=\"triggerEl\"\n  [placement]=\"placement()\"\n  [offset]=\"offset()\"\n  [width]=\"'anchor'\"\n  [closeOnOutsideClick]=\"false\"\n  [closeOnEscape]=\"false\"\n>\n  <tng-overlay-panel [klass]=\"surfaceKlass() + ' ' + panelKlass()\">\n    @if (tpl()) {\n      <ng-container [ngTemplateOutlet]=\"tpl()\"></ng-container>\n    } @else {\n      {{ text() }}\n    }\n  </tng-overlay-panel>\n</tng-connected-overlay>\n", dependencies: [{ kind: "directive", type: 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngTooltip, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-tooltip', standalone: true, imports: [NgTemplateOutlet, TngConnectedOverlay, TngOverlayPanel], template: "<span #triggerEl class=\"inline-flex\">\n  <ng-content></ng-content>\n</span>\n\n<tng-connected-overlay\n  [open]=\"open()\"\n  [anchor]=\"triggerEl\"\n  [placement]=\"placement()\"\n  [offset]=\"offset()\"\n  [width]=\"'anchor'\"\n  [closeOnOutsideClick]=\"false\"\n  [closeOnEscape]=\"false\"\n>\n  <tng-overlay-panel [klass]=\"surfaceKlass() + ' ' + panelKlass()\">\n    @if (tpl()) {\n      <ng-container [ngTemplateOutlet]=\"tpl()\"></ng-container>\n    } @else {\n      {{ text() }}\n    }\n  </tng-overlay-panel>\n</tng-connected-overlay>\n" }]
+        }], propDecorators: { triggerEl: [{
+                type: ViewChild,
+                args: ['triggerEl', { static: true }]
+            }], projectedTpl: [{
+                type: ContentChild,
+                args: ['tooltipContent', { read: TemplateRef }]
+            }], contentTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTpl", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDelay", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], panelKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelKlass", required: false }] }], surfaceKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceKlass", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin']
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout']
+            }], onDocKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
+
+export { TngConnectedOverlay, TngDialog, TngDialogInitialFocus, TngOptionList, TngOverlayPanel, TngOverlayRef, TngPopover, TngSnackbarHost, TngTooltip };
 //# sourceMappingURL=tociva-tailng-ui-popups-overlays.mjs.map