@tociva/tailng-ui 0.11.0 → 0.13.0

package/fesm2022/tociva-tailng-ui-form-controls.mjs

@@ -1,22 +1,3101 @@
-"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 { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, effect, TemplateRef, forwardRef, ViewChild, ContentChild, Component, Injectable, InjectionToken, inject, ChangeDetectionStrategy, HostListener, Directive, contentChild, DestroyRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { TngConnectedOverlay, TngOverlayPanel, TngOptionList, TngOverlayRef } from '@tociva/tailng-ui/popups-overlays';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { merge, of } from 'rxjs';
+
+// autocomplete.component.ts
+class TngAutocomplete {
+    /* =====================
+     * Projected templates
+     * ===================== */
+    // Dropdown option template (list rows)
+    optionTpl;
+    // Selected value template (shown inside input area when not typing)
+    inputTpl;
+    inputEl;
+    // We call optionList.onKeydown(ev) from the INPUT keydown handler
+    optionList;
+    /* =====================
+    * Inputs / Outputs
+    * ===================== */
+    inputKlass = input('', ...(ngDevMode ? [{ debugName: "inputKlass" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    placeholder = input('Start typing…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** External disabled input (read-only InputSignal) */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** String representation (used for actual input.value + fallback) */
+    displayWith = input((v) => String(v), ...(ngDevMode ? [{ debugName: "displayWith" }] : []));
+    /** Raw text for filtering / API search (not the form value) */
+    search = output();
+    /** Optional: non-form usage hook */
+    selected = output();
+    /** Emits whenever overlay closes (selection/escape/outside-click/blur/programmatic) */
+    closed = output();
+    /* =====================
+     * Internal State
+     * ===================== */
+    inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+    /** eslint-safe + template-safe internal disabled state */
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /** Selected item (for inputTpl rendering) */
+    selectedValue = signal(null, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
+    /**
+     * Whether to show rich selected template over the input.
+     * Show only when:
+     * - inputTpl exists
+     * - we have a selected value
+     * - overlay is closed (so typing/search UX stays normal)
+     */
+    showSelectedTpl = computed(() => !!this.inputTpl && this.selectedValue() != null && !this.isOpen(), ...(ngDevMode ? [{ debugName: "showSelectedTpl" }] : []));
+    inputKlassFinal = computed(() => ['relative z-0 w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-bg text-fg', this.inputKlass()].join(' '), ...(ngDevMode ? [{ debugName: "inputKlassFinal" }] : []));
+    /** Form value (selected item) */
+    value = null;
+    /* =====================
+     * ControlValueAccessor
+     * ===================== */
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Sync external [disabled] -> internal state
+        effect(() => {
+            this.isDisabled.set(this.disabled());
+            if (this.isDisabled())
+                this.close('programmatic');
+        });
+    }
+    /* =====================
+     * ControlValueAccessor API
+     * ===================== */
+    writeValue(value) {
+        this.value = value;
+        this.selectedValue.set(value);
+        if (value == null) {
+            this.inputValue.set('');
+            this.focusedIndex.set(-1);
+            return;
+        }
+        // keep text value for fallback + accessibility
+        this.inputValue.set(this.displayWith()(value));
+        this.focusedIndex.set(-1);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+        if (isDisabled)
+            this.close('programmatic');
+    }
+    /* =====================
+     * Display helper
+     * ===================== */
+    display(item) {
+        return this.displayWith()(item);
+    }
+    /* =====================
+     * State Transitions
+     * ===================== */
+    open(_reason) {
+        if (this.isDisabled())
+            return;
+        this.isOpen.set(true);
+        if (this.options().length) {
+            const current = this.focusedIndex();
+            if (current < 0)
+                this.focusedIndex.set(0);
+        }
+        else {
+            this.focusedIndex.set(-1);
+        }
+    }
+    close(reason) {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.focusedIndex.set(-1);
+        this.closed.emit(reason);
+    }
+    onOverlayClosed(reason) {
+        this.close(reason);
+    }
+    onOverlayOpenChange(open) {
+        if (this.isDisabled()) {
+            this.isOpen.set(false);
+            return;
+        }
+        if (open)
+            this.open('programmatic');
+        else
+            this.close('programmatic');
+    }
+    /* =====================
+     * UI Events
+     * ===================== */
+    onInput(ev) {
+        if (this.isDisabled())
+            return;
+        const text = ev.target.value ?? '';
+        this.inputValue.set(text);
+        // typing clears selection (so inputTpl disappears)
+        this.value = null;
+        this.selectedValue.set(null);
+        this.onChange(null);
+        this.search.emit(text);
+        this.open('programmatic');
+    }
+    onBlur() {
+        this.onTouched();
+        queueMicrotask(() => {
+            if (document.activeElement === this.inputEl.nativeElement)
+                return;
+            this.close('blur');
+        });
+    }
+    /**
+     * Key handling updated to match OptionList architecture:
+     * - Escape is handled here (OptionList doesn't close overlays)
+     * - Navigation/Enter are delegated to optionList.onKeydown(ev)
+     * - Printable keys are NOT delegated (input typing controls filtering)
+     */
+    onKeydown(ev) {
+        if (this.isDisabled())
+            return;
+        // Close on escape
+        if (ev.key === 'Escape' && this.isOpen()) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.close('escape');
+            return;
+        }
+        // If closed: ArrowDown/Up should open + delegate once overlay is painted
+        if (!this.isOpen() && (ev.key === 'ArrowDown' || ev.key === 'ArrowUp')) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.open('programmatic');
+            // wait for overlay + optionList to exist
+            requestAnimationFrame(() => this.optionList?.onKeydown(ev));
+            return;
+        }
+        if (!this.isOpen())
+            return;
+        // Delegate only list-navigation keys
+        if (!this.isListNavigationKey(ev))
+            return;
+        ev.stopPropagation(); // helps if parent/global handlers exist
+        this.optionList?.onKeydown(ev);
+    }
+    isListNavigationKey(ev) {
+        // Match the keys handled by OptionList (excluding typeahead)
+        switch (ev.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+            case 'Home':
+            case 'End':
+            case 'PageDown':
+            case 'PageUp':
+            case 'Enter':
+                return true;
+            default:
+                return false;
+        }
+    }
+    /* =====================
+     * OptionList wiring
+     * ===================== */
+    onFocusedIndexChange(i) {
+        this.focusedIndex.set(i);
+    }
+    requestSelectActive() {
+        const i = this.focusedIndex();
+        const item = this.options()[i];
+        if (item !== undefined)
+            this.select(item);
+    }
+    /* =====================
+     * Selection
+     * ===================== */
+    select(item) {
+        if (this.isDisabled())
+            return;
+        this.value = item;
+        this.selectedValue.set(item);
+        // keep input value as text fallback
+        this.inputValue.set(this.displayWith()(item));
+        this.onChange(item);
+        this.onTouched();
+        this.selected.emit(item);
+        this.close('selection');
+        queueMicrotask(() => {
+            this.inputEl.nativeElement.focus();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngAutocomplete, isStandalone: true, selector: "tng-autocomplete", inputs: { inputKlass: { classPropertyName: "inputKlass", publicName: "inputKlass", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "search", selected: "selected", closed: "closed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngAutocomplete),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "optionTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }, { propertyName: "inputTpl", first: true, predicate: ["inputTpl"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }, { propertyName: "optionList", first: true, predicate: TngOptionList, descendants: true }], ngImport: i0, template: "<!-- autocomplete.component.html -->\n<div class=\"relative\">\n  <!-- Selected-value rich display overlay (inside input) -->\n  @if (showSelectedTpl()) {\n    <div\n      class=\"pointer-events-none absolute inset-y-0 left-0 right-0 z-10 flex items-center px-3\"\n      aria-hidden=\"true\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"inputTpl!\"\n        [ngTemplateOutletContext]=\"{ $implicit: selectedValue()! }\"\n      />\n    </div>\n  }\n\n  <div [class.opacity-60]=\"isDisabled()\" [class.pointer-events-none]=\"isDisabled()\">\n    <input\n      #inputEl\n      type=\"text\"\n      [class]=\"inputKlassFinal()\"\n      [class.text-transparent]=\"showSelectedTpl()\"\n      [class.caret-slate-900]=\"showSelectedTpl()\"\n      [class.bg-transparent]=\"showSelectedTpl()\"\n      [value]=\"inputValue()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"overlayRef.requestOpen()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"isOpen()\"\n    />\n  </div>\n\n  <tng-overlay-ref\n    #overlayRef=\"tngOverlayRef\"\n    [open]=\"isOpen()\"\n    (openChange)=\"onOverlayOpenChange($event)\"\n    (closed)=\"onOverlayClosed($event)\"\n  >\n    <tng-connected-overlay\n      [open]=\"overlayRef.isOpen()\"\n      [anchor]=\"inputEl\"\n      placement=\"bottom-start\"\n      width=\"anchor\"\n      (closed)=\"overlayRef.close($event)\"\n    >\n      <tng-overlay-panel>\n        <tng-option-list\n          [items]=\"options()\"\n          [activeIndex]=\"focusedIndex()\"\n          [displayWith]=\"displayWith()\"\n          [optionTemplate]=\"optionTpl ?? null\"\n          [loop]=\"false\"\n          [typeahead]=\"false\"\n          (activeIndexChange)=\"onFocusedIndexChange($event)\"\n          (requestSelectActive)=\"requestSelectActive()\"\n          (optionMouseDown)=\"select($event.item)\"\n          (optionHover)=\"focusedIndex.set($event)\"\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: TngOptionList, selector: "tng-option-list", inputs: ["modal", "panelKlass", "restoreFocus", "autoCapture", "deferCaptureElements", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "tabindex", "optionTemplate", "items", "activeIndex", "displayWith", "emptyText", "containerKlass", "optionKlass", "optionActiveKlass", "optionInactiveKlass", "emptyKlass", "propagateKeys", "keyboard", "loop", "selectOnEnter", "typeahead", "typeaheadMode", "typeaheadResetMs", "pageJumpSize"], outputs: ["optionMouseDown", "optionHover", "activeIndexChange", "requestSelectActive", "requestTypeaheadMatch", "keyStroke"] }, { 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: TngAutocomplete, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-autocomplete', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        TngConnectedOverlay,
+                        TngOverlayPanel,
+                        TngOptionList,
+                        TngOverlayRef,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngAutocomplete),
+                            multi: true,
+                        },
+                    ], template: "<!-- autocomplete.component.html -->\n<div class=\"relative\">\n  <!-- Selected-value rich display overlay (inside input) -->\n  @if (showSelectedTpl()) {\n    <div\n      class=\"pointer-events-none absolute inset-y-0 left-0 right-0 z-10 flex items-center px-3\"\n      aria-hidden=\"true\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"inputTpl!\"\n        [ngTemplateOutletContext]=\"{ $implicit: selectedValue()! }\"\n      />\n    </div>\n  }\n\n  <div [class.opacity-60]=\"isDisabled()\" [class.pointer-events-none]=\"isDisabled()\">\n    <input\n      #inputEl\n      type=\"text\"\n      [class]=\"inputKlassFinal()\"\n      [class.text-transparent]=\"showSelectedTpl()\"\n      [class.caret-slate-900]=\"showSelectedTpl()\"\n      [class.bg-transparent]=\"showSelectedTpl()\"\n      [value]=\"inputValue()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"overlayRef.requestOpen()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"isOpen()\"\n    />\n  </div>\n\n  <tng-overlay-ref\n    #overlayRef=\"tngOverlayRef\"\n    [open]=\"isOpen()\"\n    (openChange)=\"onOverlayOpenChange($event)\"\n    (closed)=\"onOverlayClosed($event)\"\n  >\n    <tng-connected-overlay\n      [open]=\"overlayRef.isOpen()\"\n      [anchor]=\"inputEl\"\n      placement=\"bottom-start\"\n      width=\"anchor\"\n      (closed)=\"overlayRef.close($event)\"\n    >\n      <tng-overlay-panel>\n        <tng-option-list\n          [items]=\"options()\"\n          [activeIndex]=\"focusedIndex()\"\n          [displayWith]=\"displayWith()\"\n          [optionTemplate]=\"optionTpl ?? null\"\n          [loop]=\"false\"\n          [typeahead]=\"false\"\n          (activeIndexChange)=\"onFocusedIndexChange($event)\"\n          (requestSelectActive)=\"requestSelectActive()\"\n          (optionMouseDown)=\"select($event.item)\"\n          (optionHover)=\"focusedIndex.set($event)\"\n        />\n      </tng-overlay-panel>\n    </tng-connected-overlay>\n  </tng-overlay-ref>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { optionTpl: [{
+                type: ContentChild,
+                args: ['optionTpl', { read: TemplateRef }]
+            }], inputTpl: [{
+                type: ContentChild,
+                args: ['inputTpl', { read: TemplateRef }]
+            }], inputEl: [{
+                type: ViewChild,
+                args: ['inputEl', { static: true }]
+            }], optionList: [{
+                type: ViewChild,
+                args: [TngOptionList]
+            }], inputKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputKlass", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], selected: [{ type: i0.Output, args: ["selected"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class TngButtonToggle {
+    /* =====================
+     * Inputs / Outputs
+     * ===================== */
+    /** Options for the segmented control */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /**
+     * Direct mode value (optional).
+     * In forms mode, CVA is source of truth.
+     */
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    valueChange = output();
+    /** External disabled input (read-only) */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Material-like: single (default) or multiple selection */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    /**
+     * Whether selection can be cleared:
+     * - single: clicking active option -> null
+     * - multiple: allows empty array
+     */
+    allowDeselect = input(false, ...(ngDevMode ? [{ debugName: "allowDeselect" }] : []));
+    /* =====================
+     * Theming / class hooks (section-wise)
+     * ===================== */
+    /** Root wrapper */
+    rootKlass = input('block w-full', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    /** Group container */
+    groupKlass = input('', ...(ngDevMode ? [{ debugName: "groupKlass" }] : []));
+    /** Button base */
+    buttonKlass = input('', ...(ngDevMode ? [{ debugName: "buttonKlass" }] : []));
+    /** Active option button */
+    activeButtonKlass = input('', ...(ngDevMode ? [{ debugName: "activeButtonKlass" }] : []));
+    /** Inactive option button */
+    inactiveButtonKlass = input('', ...(ngDevMode ? [{ debugName: "inactiveButtonKlass" }] : []));
+    /** Disabled option button */
+    disabledButtonKlass = input('', ...(ngDevMode ? [{ debugName: "disabledButtonKlass" }] : []));
+    /* =====================
+     * Internal state
+     * ===================== */
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /** Authoritative selected value inside component */
+    selectedValue = signal(null, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
+    /** When true, CVA owns the value (forms mode) */
+    usingCva = false;
+    /* =====================
+     * ControlValueAccessor
+     * ===================== */
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // sync external disabled -> internal
+        effect(() => {
+            this.isDisabled.set(this.disabled());
+        });
+        // sync external [value] -> internal only when NOT using CVA
+        effect(() => {
+            const v = this.value();
+            if (this.usingCva)
+                return;
+            this.selectedValue.set(this.normalizeIncoming(v));
+        });
+        // ensure internal value shape matches mode when `multiple` changes
+        effect(() => {
+            const isMulti = this.multiple();
+            const cur = this.selectedValue();
+            const normalized = isMulti ? this.toArray(cur) : this.toSingle(cur);
+            if (!this.shallowEqual(cur, normalized)) {
+                this.selectedValue.set(normalized);
+                // NOTE: we DO NOT emit onChange here; mode switch is a "configuration change"
+            }
+        });
+    }
+    writeValue(value) {
+        this.usingCva = true;
+        this.selectedValue.set(this.normalizeIncoming(value));
+    }
+    registerOnChange(fn) {
+        this.usingCva = true;
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    /* =====================
+     * Helpers
+     * ===================== */
+    currentValue = computed(() => this.selectedValue(), ...(ngDevMode ? [{ debugName: "currentValue" }] : []));
+    isOptionDisabled(opt) {
+        return this.isDisabled() || !!opt.disabled;
+    }
+    isSelected(opt) {
+        const v = this.selectedValue();
+        if (Array.isArray(v))
+            return v.includes(opt.value);
+        return v === opt.value;
+    }
+    select(opt) {
+        if (this.isOptionDisabled(opt))
+            return;
+        const cur = this.selectedValue();
+        let next;
+        if (this.multiple()) {
+            const currArr = this.toArray(cur);
+            const toggled = this.toggleInArray(currArr, opt.value);
+            // if deselect not allowed, prevent empty
+            if (!this.allowDeselect() && toggled.length === 0) {
+                next = currArr;
+            }
+            else {
+                next = toggled;
+            }
+        }
+        else {
+            const currSingle = this.toSingle(cur);
+            next =
+                this.allowDeselect() && currSingle === opt.value
+                    ? null
+                    : opt.value;
+        }
+        this.selectedValue.set(next);
+        // CVA
+        this.onChange(next);
+        this.onTouched();
+        // direct mode output
+        this.valueChange.emit(next);
+    }
+    /* =====================
+     * Keyboard support
+     * ===================== */
+    onKeydown(ev) {
+        if (this.isDisabled())
+            return;
+        const opts = this.options();
+        if (!opts.length)
+            return;
+        const enabledIndexes = opts
+            .map((o, i) => ({ o, i }))
+            .filter(({ o }) => !this.isOptionDisabled(o))
+            .map(({ i }) => i);
+        if (!enabledIndexes.length)
+            return;
+        // for keyboard navigation we keep a "current index" concept:
+        // - single: selected option index
+        // - multi: first selected index, otherwise first enabled
+        const cur = this.selectedValue();
+        const currentIndex = (() => {
+            if (Array.isArray(cur)) {
+                const first = opts.findIndex((o) => cur.includes(o.value));
+                return first;
+            }
+            return opts.findIndex((o) => o.value === cur);
+        })();
+        const move = (dir) => {
+            ev.preventDefault();
+            const start = currentIndex >= 0 ? currentIndex : enabledIndexes[0];
+            let idx = start;
+            for (let step = 0; step < opts.length; step++) {
+                idx = (idx + dir + opts.length) % opts.length;
+                if (enabledIndexes.includes(idx)) {
+                    this.select(opts[idx]);
+                    break;
+                }
+            }
+        };
+        switch (ev.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                move(1);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                move(-1);
+                break;
+            case 'Enter':
+            case ' ':
+                ev.preventDefault();
+                if (currentIndex >= 0)
+                    this.select(opts[currentIndex]);
+                break;
+            default:
+                break;
+        }
+    }
+    /* =====================
+     * Classes
+     * ===================== */
+    /** Group container classes */
+    groupClasses = computed(() => ('flex w-full overflow-hidden rounded-md border border-border ' +
+        'bg-bg ' +
+        (this.isDisabled() ? 'opacity-60 pointer-events-none ' : '') +
+        this.groupKlass()).trim(), ...(ngDevMode ? [{ debugName: "groupClasses" }] : []));
+    /** Button base classes */
+    baseBtn = computed(() => ('flex-1 px-3 py-2 text-sm font-medium text-center ' +
+        'transition-colors select-none ' +
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ' +
+        'focus-visible:ring-offset-2 focus-visible:ring-offset-background ' +
+        'border-r border-border last:border-r-0 ' +
+        this.buttonKlass()).trim(), ...(ngDevMode ? [{ debugName: "baseBtn" }] : []));
+    buttonClasses(opt) {
+        const active = this.isSelected(opt);
+        const disabled = this.isOptionDisabled(opt);
+        const state = disabled
+            ? 'text-disable bg-bg ' + this.disabledButtonKlass()
+            : active
+                ? 'bg-primary text-on-primary ' + this.activeButtonKlass()
+                : 'bg-on-primary text-fg hover:bg-alternate-background ' +
+                    this.inactiveButtonKlass();
+        return `${this.baseBtn()} ${state}`.trim();
+    }
+    /* =====================
+     * Normalization utilities
+     * ===================== */
+    normalizeIncoming(value) {
+        return this.multiple() ? this.toArray(value) : this.toSingle(value);
+    }
+    toArray(value) {
+        if (Array.isArray(value))
+            return value;
+        if (value === null || value === undefined)
+            return [];
+        return [value];
+    }
+    toSingle(value) {
+        if (Array.isArray(value))
+            return value[0] ?? null;
+        return value ?? null;
+    }
+    toggleInArray(arr, value) {
+        return arr.includes(value) ? arr.filter((x) => x !== value) : [...arr, value];
+    }
+    shallowEqual(a, b) {
+        if (a === b)
+            return true;
+        const aArr = Array.isArray(a);
+        const bArr = Array.isArray(b);
+        if (aArr !== bArr)
+            return false;
+        if (!aArr || !bArr)
+            return false;
+        // array shallow equality (order-sensitive)
+        if (a.length !== b.length)
+            return false;
+        for (let i = 0; i < a.length; i++) {
+            if (a[i] !== b[i])
+                return false;
+        }
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngButtonToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngButtonToggle, isStandalone: true, selector: "tng-button-toggle", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, allowDeselect: { classPropertyName: "allowDeselect", publicName: "allowDeselect", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, groupKlass: { classPropertyName: "groupKlass", publicName: "groupKlass", isSignal: true, isRequired: false, transformFunction: null }, buttonKlass: { classPropertyName: "buttonKlass", publicName: "buttonKlass", isSignal: true, isRequired: false, transformFunction: null }, activeButtonKlass: { classPropertyName: "activeButtonKlass", publicName: "activeButtonKlass", isSignal: true, isRequired: false, transformFunction: null }, inactiveButtonKlass: { classPropertyName: "inactiveButtonKlass", publicName: "inactiveButtonKlass", isSignal: true, isRequired: false, transformFunction: null }, disabledButtonKlass: { classPropertyName: "disabledButtonKlass", publicName: "disabledButtonKlass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngButtonToggle),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div [class]=\"rootKlass()\">\n  <div\n    role=\"group\"\n    [attr.aria-multiselectable]=\"multiple() ? true : null\"\n    [class]=\"groupClasses()\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @for (opt of options(); let i = $index; track i) {\n      <button\n        type=\"button\"\n        role=\"button\"\n        [attr.aria-pressed]=\"isSelected(opt)\"\n        [attr.aria-disabled]=\"isOptionDisabled(opt) ? true : null\"\n        [disabled]=\"isOptionDisabled(opt)\"\n        [class]=\"buttonClasses(opt)\"\n        (click)=\"select(opt)\"\n      >\n        {{ opt.label }}\n      </button>\n    }\n  </div>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngButtonToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-button-toggle', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngButtonToggle),
+                            multi: true,
+                        },
+                    ], template: "<div [class]=\"rootKlass()\">\n  <div\n    role=\"group\"\n    [attr.aria-multiselectable]=\"multiple() ? true : null\"\n    [class]=\"groupClasses()\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @for (opt of options(); let i = $index; track i) {\n      <button\n        type=\"button\"\n        role=\"button\"\n        [attr.aria-pressed]=\"isSelected(opt)\"\n        [attr.aria-disabled]=\"isOptionDisabled(opt) ? true : null\"\n        [disabled]=\"isOptionDisabled(opt)\"\n        [class]=\"buttonClasses(opt)\"\n        (click)=\"select(opt)\"\n      >\n        {{ opt.label }}\n      </button>\n    }\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowDeselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDeselect", required: false }] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], groupKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupKlass", required: false }] }], buttonKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonKlass", required: false }] }], activeButtonKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeButtonKlass", required: false }] }], inactiveButtonKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inactiveButtonKlass", required: false }] }], disabledButtonKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledButtonKlass", required: false }] }] } });
+
+class TngCheckbox {
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /* =====================
+     * Theming / class hooks (section-wise)
+     * ===================== */
+    /** Root <label> */
+    rootKlass = input('inline-flex items-center gap-2 cursor-pointer select-none', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    /** <input type="checkbox"> */
+    inputKlass = input('', ...(ngDevMode ? [{ debugName: "inputKlass" }] : []));
+    /** Label <span> */
+    labelKlass = input('text-sm text-fg', ...(ngDevMode ? [{ debugName: "labelKlass" }] : []));
+    _value = signal(false, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    writeValue(value) {
+        this._value.set(value ?? false);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    /** Final classes */
+    classes = computed(() => (
+    // size + shape
+    `h-4 w-4 rounded ` +
+        // theme tokens
+        `border border-border bg-bg ` +
+        `accent-primary ` +
+        // focus ring
+        `focus-visible:outline-none ` +
+        `focus-visible:ring-2 focus-visible:ring-primary ` +
+        `focus-visible:ring-offset-2 focus-visible:ring-offset-background ` +
+        // disabled
+        `disabled:opacity-50 disabled:pointer-events-none ` +
+        // user override
+        this.inputKlass()).trim(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    onToggle(event) {
+        if (this.isDisabled())
+            return;
+        const checked = event.target.checked;
+        this._value.set(checked);
+        this.onChange(checked);
+        this.onTouched();
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngCheckbox, isStandalone: true, selector: "tng-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, inputKlass: { classPropertyName: "inputKlass", publicName: "inputKlass", isSignal: true, isRequired: false, transformFunction: null }, labelKlass: { classPropertyName: "labelKlass", publicName: "labelKlass", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngCheckbox),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label [class]=\"rootKlass()\">\n  <input\n    type=\"checkbox\"\n    [id]=\"id() || null\"\n    [name]=\"name() || null\"\n    [checked]=\"value()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [class]=\"classes()\"\n    (change)=\"onToggle($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (label()) {\n    <span [class]=\"labelKlass()\">\n      {{ label() }}\n    </span>\n  }\n</label>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-checkbox', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngCheckbox),
+                            multi: true,
+                        },
+                    ], template: "<label [class]=\"rootKlass()\">\n  <input\n    type=\"checkbox\"\n    [id]=\"id() || null\"\n    [name]=\"name() || null\"\n    [checked]=\"value()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [class]=\"classes()\"\n    (change)=\"onToggle($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (label()) {\n    <span [class]=\"labelKlass()\">\n      {{ label() }}\n    </span>\n  }\n</label>\n" }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], inputKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputKlass", required: false }] }], labelKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKlass", required: false }] }] } });
+
+// chips.component.ts
+class TngChips {
+    /* =====================
+     * Projected templates
+     * ===================== */
+    chipTpl;
+    optionTpl;
+    inputEl;
+    // Delegate list keys to OptionList
+    optionList;
+    /* =====================
+     * Inputs / Outputs
+     * ===================== */
+    value = input([], ...(ngDevMode ? [{ debugName: "value" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    placeholder = input('Add…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    displayWith = input((v) => String(v), ...(ngDevMode ? [{ debugName: "displayWith" }] : []));
+    allowFreeText = input(true, ...(ngDevMode ? [{ debugName: "allowFreeText" }] : []));
+    parse = input((raw) => raw, ...(ngDevMode ? [{ debugName: "parse" }] : []));
+    normalize = input((raw) => raw.trim(), ...(ngDevMode ? [{ debugName: "normalize" }] : []));
+    preventDuplicates = input(true, ...(ngDevMode ? [{ debugName: "preventDuplicates" }] : []));
+    search = output();
+    valueChange = output();
+    chipAdded = output();
+    chipRemoved = output();
+    closed = output();
+    /* =====================
+     * Theming
+     * ===================== */
+    rootKlass = input('relative', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    containerKlass = input([
+        'w-full min-h-[42px] px-2 py-1 text-sm',
+        'flex flex-wrap items-center gap-2',
+        'border border-border rounded-md',
+        'bg-bg text-fg',
+        'focus-within:ring-2 focus-within:ring-primary',
+    ].join(' '), ...(ngDevMode ? [{ debugName: "containerKlass" }] : []));
+    chipKlass = input([
+        'inline-flex items-center gap-1 px-2 py-1 rounded-md',
+        'bg-alternate-background border border-border',
+        'text-sm',
+    ].join(' '), ...(ngDevMode ? [{ debugName: "chipKlass" }] : []));
+    chipLabelKlass = input('truncate max-w-[200px]', ...(ngDevMode ? [{ debugName: "chipLabelKlass" }] : []));
+    removeButtonKlass = input('ml-1 text-disable hover:text-fg', ...(ngDevMode ? [{ debugName: "removeButtonKlass" }] : []));
+    inputKlass = input('flex-1 min-w-[140px] px-2 py-2 outline-none bg-transparent', ...(ngDevMode ? [{ debugName: "inputKlass" }] : []));
+    /* =====================
+     * Internal State
+     * ===================== */
+    inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    chipsValue = signal([], ...(ngDevMode ? [{ debugName: "chipsValue" }] : []));
+    usingCva = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        effect(() => {
+            this.isDisabled.set(this.disabled());
+            if (this.isDisabled())
+                this.close('programmatic');
+        });
+        effect(() => {
+            const v = this.value();
+            if (this.usingCva)
+                return;
+            this.chipsValue.set(v);
+        });
+    }
+    /* =====================
+     * ControlValueAccessor
+     * ===================== */
+    writeValue(value) {
+        this.usingCva = true;
+        this.chipsValue.set(value ?? []);
+    }
+    registerOnChange(fn) {
+        this.usingCva = true;
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+        if (isDisabled)
+            this.close('programmatic');
+    }
+    /* =====================
+     * Template getters
+     * ===================== */
+    chips() {
+        return this.chipsValue();
+    }
+    placeholderText = computed(() => (this.chipsValue().length ? '' : this.placeholder()), ...(ngDevMode ? [{ debugName: "placeholderText" }] : []));
+    containerClasses = computed(() => (this.containerKlass() + (this.isDisabled() ? ' opacity-60 pointer-events-none' : '')).trim(), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    /* =====================
+     * Helpers
+     * ===================== */
+    display(item) {
+        return this.displayWith()(item);
+    }
+    existsAlready(next) {
+        if (!this.preventDuplicates())
+            return false;
+        const nextKey = this.display(next).toLowerCase();
+        return this.chipsValue().some((v) => this.display(v).toLowerCase() === nextKey);
+    }
+    emitValue(next) {
+        this.chipsValue.set(next);
+        this.onChange(next);
+        this.valueChange.emit(next);
+    }
+    /* =====================
+     * Overlay open/close
+     * ===================== */
+    open(_reason) {
+        if (this.isDisabled())
+            return;
+        this.isOpen.set(true);
+        if (this.options().length) {
+            const current = this.focusedIndex();
+            if (current < 0)
+                this.focusedIndex.set(0);
+        }
+        else {
+            this.focusedIndex.set(-1);
+        }
+    }
+    close(reason) {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.focusedIndex.set(-1);
+        this.closed.emit(reason);
+    }
+    onOverlayOpenChange(open) {
+        if (this.isDisabled()) {
+            this.isOpen.set(false);
+            return;
+        }
+        if (open)
+            this.open('programmatic');
+        else
+            this.close('programmatic');
+    }
+    onOverlayClosed(reason) {
+        this.close(reason);
+    }
+    /* =====================
+     * UI events
+     * ===================== */
+    onInput(ev) {
+        if (this.isDisabled())
+            return;
+        const raw = ev.target.value ?? '';
+        this.inputValue.set(raw);
+        this.search.emit(raw);
+        this.open('programmatic');
+    }
+    onBlur() {
+        this.onTouched();
+        queueMicrotask(() => {
+            if (document.activeElement === this.inputEl.nativeElement)
+                return;
+            this.close('blur');
+        });
+    }
+    onKeydown(ev) {
+        if (this.isDisabled())
+            return;
+        // Escape closes
+        if (ev.key === 'Escape' && this.isOpen()) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.close('escape');
+            return;
+        }
+        // Backspace removes last chip when input empty
+        if (ev.key === 'Backspace' && !this.inputValue()) {
+            const current = this.chipsValue();
+            if (current.length) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.removeAt(current.length - 1);
+            }
+            return;
+        }
+        // Enter
+        if (ev.key === 'Enter') {
+            // IMPORTANT: if open, DO NOT preventDefault here — OptionList must see a non-prevented event
+            if (this.isOpen()) {
+                ev.stopPropagation();
+                this.optionList?.onKeydown(ev); // OptionList will preventDefault + emit requestSelectActive
+                return;
+            }
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.addFromInput();
+            return;
+        }
+        // Open on arrows when closed (prevent original cursor move),
+        // then delegate a *fresh* event to OptionList after mount.
+        if (!this.isOpen() && (ev.key === 'ArrowDown' || ev.key === 'ArrowUp')) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.open('programmatic');
+            requestAnimationFrame(() => {
+                const replay = this.cloneKeyboardEvent(ev);
+                this.optionList?.onKeydown(replay);
+            });
+            return;
+        }
+        if (!this.isOpen())
+            return;
+        // Delegate list-navigation keys (no preventDefault here; OptionList does it)
+        if (!this.isListNavigationKey(ev))
+            return;
+        ev.stopPropagation();
+        this.optionList?.onKeydown(ev);
+    }
+    isListNavigationKey(ev) {
+        switch (ev.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+            case 'Home':
+            case 'End':
+            case 'PageDown':
+            case 'PageUp':
+                return true;
+            default:
+                return false;
+        }
+    }
+    // Used to replay arrow keys after opening (original event already defaultPrevented)
+    cloneKeyboardEvent(ev) {
+        return new KeyboardEvent(ev.type, {
+            key: ev.key,
+            code: ev.code,
+            location: ev.location,
+            repeat: ev.repeat,
+            ctrlKey: ev.ctrlKey,
+            shiftKey: ev.shiftKey,
+            altKey: ev.altKey,
+            metaKey: ev.metaKey,
+            bubbles: true,
+            cancelable: true,
+        });
+    }
+    /* =====================
+     * OptionList wiring
+     * ===================== */
+    requestSelectActive() {
+        const i = this.focusedIndex();
+        const item = this.options()[i];
+        if (item !== undefined)
+            this.selectOption(item);
+    }
+    /* =====================
+     * Chip actions
+     * ===================== */
+    addFromInput() {
+        if (this.isDisabled())
+            return;
+        if (!this.allowFreeText())
+            return;
+        const normalized = this.normalize()(this.inputValue());
+        if (!normalized)
+            return;
+        const nextChip = this.parse()(normalized);
+        if (this.existsAlready(nextChip)) {
+            this.inputValue.set('');
+            this.close('programmatic');
+            return;
+        }
+        const next = [...this.chipsValue(), nextChip];
+        this.emitValue(next);
+        this.chipAdded.emit(nextChip);
+        this.inputValue.set('');
+        this.close('programmatic');
+        queueMicrotask(() => this.inputEl.nativeElement.focus());
+    }
+    selectOption(item) {
+        if (this.isDisabled())
+            return;
+        if (this.existsAlready(item)) {
+            this.inputValue.set('');
+            this.close('selection');
+            queueMicrotask(() => this.inputEl.nativeElement.focus());
+            return;
+        }
+        const next = [...this.chipsValue(), item];
+        this.emitValue(next);
+        this.chipAdded.emit(item);
+        this.inputValue.set('');
+        this.close('selection');
+        queueMicrotask(() => this.inputEl.nativeElement.focus());
+    }
+    removeAt(index) {
+        if (this.isDisabled())
+            return;
+        const current = this.chipsValue();
+        if (index < 0 || index >= current.length)
+            return;
+        const removed = current[index];
+        const next = current.filter((_, i) => i !== index);
+        this.emitValue(next);
+        this.chipRemoved.emit(removed);
+    }
+    clearAll() {
+        if (this.isDisabled())
+            return;
+        const current = this.chipsValue();
+        if (!current.length)
+            return;
+        for (const item of current)
+            this.chipRemoved.emit(item);
+        this.emitValue([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngChips, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngChips, isStandalone: true, selector: "tng-chips", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, allowFreeText: { classPropertyName: "allowFreeText", publicName: "allowFreeText", isSignal: true, isRequired: false, transformFunction: null }, parse: { classPropertyName: "parse", publicName: "parse", isSignal: true, isRequired: false, transformFunction: null }, normalize: { classPropertyName: "normalize", publicName: "normalize", isSignal: true, isRequired: false, transformFunction: null }, preventDuplicates: { classPropertyName: "preventDuplicates", publicName: "preventDuplicates", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, containerKlass: { classPropertyName: "containerKlass", publicName: "containerKlass", isSignal: true, isRequired: false, transformFunction: null }, chipKlass: { classPropertyName: "chipKlass", publicName: "chipKlass", isSignal: true, isRequired: false, transformFunction: null }, chipLabelKlass: { classPropertyName: "chipLabelKlass", publicName: "chipLabelKlass", isSignal: true, isRequired: false, transformFunction: null }, removeButtonKlass: { classPropertyName: "removeButtonKlass", publicName: "removeButtonKlass", isSignal: true, isRequired: false, transformFunction: null }, inputKlass: { classPropertyName: "inputKlass", publicName: "inputKlass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "search", valueChange: "valueChange", chipAdded: "chipAdded", chipRemoved: "chipRemoved", closed: "closed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngChips),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "chipTpl", first: true, predicate: ["chipTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }, { propertyName: "optionList", first: true, predicate: TngOptionList, descendants: true }], ngImport: i0, template: "<!-- chips.component.html -->\n<div [class]=\"rootKlass()\">\n  <!-- Chips row + input -->\n  <div [class]=\"containerClasses()\">\n    @for (chip of chips(); let i = $index; track i) {\n      <span [class]=\"chipKlass()\">\n        @if (chipTpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"chipTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: chip, index: i }\"\n          />\n        } @else {\n          <span [class]=\"chipLabelKlass()\">{{ display(chip) }}</span>\n        }\n\n        <button\n          type=\"button\"\n          [class]=\"removeButtonKlass()\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"removeAt(i)\"\n          aria-label=\"Remove chip\"\n        >\n          \u00D7\n        </button>\n      </span>\n    }\n\n    <input\n      #inputEl\n      type=\"text\"\n      [class]=\"inputKlass()\"\n      [value]=\"inputValue()\"\n      [placeholder]=\"placeholderText()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"open('programmatic')\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"isOpen()\"\n    />\n  </div>\n\n  <!-- Suggestions overlay -->\n  <tng-overlay-ref\n    #overlayRef=\"tngOverlayRef\"\n    [open]=\"isOpen()\"\n    (openChange)=\"onOverlayOpenChange($event)\"\n    (closed)=\"onOverlayClosed($event)\"\n  >\n    <tng-connected-overlay\n      [open]=\"overlayRef.isOpen()\"\n      [anchor]=\"inputEl\"\n      placement=\"bottom-start\"\n      width=\"anchor\"\n      (closed)=\"overlayRef.close($event)\"\n    >\n      <tng-overlay-panel>\n        <tng-option-list\n          [items]=\"options()\"\n          [activeIndex]=\"focusedIndex()\"\n          [displayWith]=\"displayWith()\"\n          [optionTemplate]=\"optionTpl ?? null\"\n          [loop]=\"false\"\n          [typeahead]=\"false\"\n          (activeIndexChange)=\"focusedIndex.set($event)\"\n          (requestSelectActive)=\"requestSelectActive()\"\n          (optionMouseDown)=\"selectOption($event.item)\"\n          (optionHover)=\"focusedIndex.set($event)\"\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: TngOptionList, selector: "tng-option-list", inputs: ["modal", "panelKlass", "restoreFocus", "autoCapture", "deferCaptureElements", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "tabindex", "optionTemplate", "items", "activeIndex", "displayWith", "emptyText", "containerKlass", "optionKlass", "optionActiveKlass", "optionInactiveKlass", "emptyKlass", "propagateKeys", "keyboard", "loop", "selectOnEnter", "typeahead", "typeaheadMode", "typeaheadResetMs", "pageJumpSize"], outputs: ["optionMouseDown", "optionHover", "activeIndexChange", "requestSelectActive", "requestTypeaheadMatch", "keyStroke"] }, { 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: TngChips, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-chips', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        TngConnectedOverlay,
+                        TngOverlayPanel,
+                        TngOptionList,
+                        TngOverlayRef,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngChips),
+                            multi: true,
+                        },
+                    ], template: "<!-- chips.component.html -->\n<div [class]=\"rootKlass()\">\n  <!-- Chips row + input -->\n  <div [class]=\"containerClasses()\">\n    @for (chip of chips(); let i = $index; track i) {\n      <span [class]=\"chipKlass()\">\n        @if (chipTpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"chipTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: chip, index: i }\"\n          />\n        } @else {\n          <span [class]=\"chipLabelKlass()\">{{ display(chip) }}</span>\n        }\n\n        <button\n          type=\"button\"\n          [class]=\"removeButtonKlass()\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"removeAt(i)\"\n          aria-label=\"Remove chip\"\n        >\n          \u00D7\n        </button>\n      </span>\n    }\n\n    <input\n      #inputEl\n      type=\"text\"\n      [class]=\"inputKlass()\"\n      [value]=\"inputValue()\"\n      [placeholder]=\"placeholderText()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"open('programmatic')\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"isOpen()\"\n    />\n  </div>\n\n  <!-- Suggestions overlay -->\n  <tng-overlay-ref\n    #overlayRef=\"tngOverlayRef\"\n    [open]=\"isOpen()\"\n    (openChange)=\"onOverlayOpenChange($event)\"\n    (closed)=\"onOverlayClosed($event)\"\n  >\n    <tng-connected-overlay\n      [open]=\"overlayRef.isOpen()\"\n      [anchor]=\"inputEl\"\n      placement=\"bottom-start\"\n      width=\"anchor\"\n      (closed)=\"overlayRef.close($event)\"\n    >\n      <tng-overlay-panel>\n        <tng-option-list\n          [items]=\"options()\"\n          [activeIndex]=\"focusedIndex()\"\n          [displayWith]=\"displayWith()\"\n          [optionTemplate]=\"optionTpl ?? null\"\n          [loop]=\"false\"\n          [typeahead]=\"false\"\n          (activeIndexChange)=\"focusedIndex.set($event)\"\n          (requestSelectActive)=\"requestSelectActive()\"\n          (optionMouseDown)=\"selectOption($event.item)\"\n          (optionHover)=\"focusedIndex.set($event)\"\n        />\n      </tng-overlay-panel>\n    </tng-connected-overlay>\n  </tng-overlay-ref>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { chipTpl: [{
+                type: ContentChild,
+                args: ['chipTpl', { read: TemplateRef }]
+            }], optionTpl: [{
+                type: ContentChild,
+                args: ['optionTpl', { read: TemplateRef }]
+            }], inputEl: [{
+                type: ViewChild,
+                args: ['inputEl', { static: true }]
+            }], optionList: [{
+                type: ViewChild,
+                args: [TngOptionList]
+            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], allowFreeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFreeText", required: false }] }], parse: [{ type: i0.Input, args: [{ isSignal: true, alias: "parse", required: false }] }], normalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "normalize", required: false }] }], preventDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventDuplicates", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], chipAdded: [{ type: i0.Output, args: ["chipAdded"] }], chipRemoved: [{ type: i0.Output, args: ["chipRemoved"] }], closed: [{ type: i0.Output, args: ["closed"] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], containerKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerKlass", required: false }] }], chipKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipKlass", required: false }] }], chipLabelKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipLabelKlass", required: false }] }], removeButtonKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeButtonKlass", required: false }] }], inputKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputKlass", required: false }] }] } });
+
+class TngNativeDateAdapter {
+    now() {
+        return new Date();
+    }
+    from(value) {
+        const d = new Date(value);
+        return this.isValid(d) ? d : null;
+    }
+    isValid(date) {
+        return date instanceof Date && !Number.isNaN(date.getTime());
+    }
+    startOfDay(date) {
+        const d = new Date(date);
+        d.setHours(0, 0, 0, 0);
+        return d;
+    }
+    year(date) { return date.getFullYear(); }
+    month(date) { return date.getMonth(); }
+    date(date) { return date.getDate(); }
+    day(date) { return date.getDay(); }
+    daysInMonth(date) {
+        return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+    }
+    setYear(date, year) {
+        const d = new Date(date);
+        d.setFullYear(year);
+        return d;
+    }
+    setMonth(date, month0) {
+        const d = new Date(date);
+        d.setMonth(month0);
+        return d;
+    }
+    setDate(date, dayOfMonth) {
+        const d = new Date(date);
+        d.setDate(dayOfMonth);
+        return d;
+    }
+    addDays(date, days) {
+        const d = new Date(date);
+        d.setDate(d.getDate() + days);
+        return d;
+    }
+    addMonths(date, months) {
+        const d = new Date(date);
+        d.setMonth(d.getMonth() + months);
+        return d;
+    }
+    startOfMonth(date) {
+        return this.startOfDay(new Date(this.year(date), this.month(date), 1));
+    }
+    endOfMonth(date) {
+        return this.startOfDay(new Date(this.year(date), this.month(date) + 1, 0));
+    }
+    startOfYear(date) {
+        return this.startOfDay(new Date(this.year(date), 0, 1));
+    }
+    endOfYear(date) {
+        return this.startOfDay(new Date(this.year(date), 11, 31));
+    }
+    isSameDay(a, b) {
+        return this.year(a) === this.year(b) && this.month(a) === this.month(b) && this.date(a) === this.date(b);
+    }
+    isBeforeDay(a, b) {
+        return this.startOfDay(a).getTime() < this.startOfDay(b).getTime();
+    }
+    isAfterDay(a, b) {
+        return this.startOfDay(a).getTime() > this.startOfDay(b).getTime();
+    }
+    format(date, format, _locale) {
+        const dd = String(this.date(date)).padStart(2, '0');
+        const mm = String(this.month(date) + 1).padStart(2, '0');
+        const yyyy = String(this.year(date));
+        if (format === 'DD/MM/YYYY')
+            return `${dd}/${mm}/${yyyy}`;
+        if (format === 'MM/DD/YYYY')
+            return `${mm}/${dd}/${yyyy}`;
+        if (format === 'DD-MM-YYYY')
+            return `${dd}-${mm}-${yyyy}`;
+        if (format === 'MM-DD-YYYY')
+            return `${mm}-${dd}-${yyyy}`;
+        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        if (format === 'DD MMM YYYY')
+            return `${dd} ${months[this.month(date)]} ${yyyy}`;
+        return `${dd}/${mm}/${yyyy}`;
+    }
+    parse(text, format, _locale) {
+        const s = text.trim();
+        if (!s)
+            return null;
+        if (format === 'DD/MM/YYYY') {
+            const m = s.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+            if (!m)
+                return null;
+            const dd = Number(m[1]);
+            const mm = Number(m[2]);
+            const yyyy = Number(m[3]);
+            const d = new Date(yyyy, mm - 1, dd);
+            if (!this.isValid(d))
+                return null;
+            if (this.month(d) !== mm - 1 || this.date(d) !== dd)
+                return null;
+            return this.startOfDay(d);
+        }
+        if (format === 'MM/DD/YYYY') {
+            const m = s.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+            if (!m)
+                return null;
+            const mm = Number(m[1]);
+            const dd = Number(m[2]);
+            const yyyy = Number(m[3]);
+            const d = new Date(yyyy, mm - 1, dd);
+            if (!this.isValid(d))
+                return null;
+            if (this.month(d) !== mm - 1 || this.date(d) !== dd)
+                return null;
+            return this.startOfDay(d);
+        }
+        if (format === 'DD-MM-YYYY') {
+            const m = s.match(/^(\d{1,2})-(\d{1,2})-(\d{4})$/);
+            if (!m)
+                return null;
+            const dd = Number(m[1]);
+            const mm = Number(m[2]);
+            const yyyy = Number(m[3]);
+            const d = new Date(yyyy, mm - 1, dd);
+            if (!this.isValid(d))
+                return null;
+            if (this.month(d) !== mm - 1 || this.date(d) !== dd)
+                return null;
+            return this.startOfDay(d);
+        }
+        if (format === 'MM-DD-YYYY') {
+            const m = s.match(/^(\d{1,2})-(\d{1,2})-(\d{4})$/);
+            if (!m)
+                return null;
+            const mm = Number(m[1]);
+            const dd = Number(m[2]);
+            const yyyy = Number(m[3]);
+            const d = new Date(yyyy, mm - 1, dd);
+            if (!this.isValid(d))
+                return null;
+            if (this.month(d) !== mm - 1 || this.date(d) !== dd)
+                return null;
+            return this.startOfDay(d);
+        }
+        if (format === 'DD MMM YYYY') {
+            const m = s.match(/^(\d{1,2})\s+([A-Za-z]{3})\s+(\d{4})$/);
+            if (!m)
+                return null;
+            const dd = Number(m[1]);
+            const mon = m[2].toLowerCase();
+            const yyyy = Number(m[3]);
+            const map = {
+                jan: 0, feb: 1, mar: 2, apr: 3, may: 4, jun: 5,
+                jul: 6, aug: 7, sep: 8, oct: 9, nov: 10, dec: 11,
+            };
+            const month0 = map[mon];
+            if (month0 == null)
+                return null;
+            const d = new Date(yyyy, month0, dd);
+            if (this.month(d) !== month0 || this.date(d) !== dd)
+                return null;
+            return this.startOfDay(d);
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngNativeDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngNativeDateAdapter, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngNativeDateAdapter, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const TNG_DATE_ADAPTER = new InjectionToken('TNG_DATE_ADAPTER');
+
+const DATE_TOKENS = ['YYYY', 'YY', 'MMMM', 'MMM', 'MM', 'M', 'DD', 'D'];
+function tokenizeFormat(fmt) {
+    const parts = [];
+    let i = 0;
+    while (i < fmt.length) {
+        let matched = null;
+        for (const t of DATE_TOKENS) {
+            if (fmt.startsWith(t, i)) {
+                matched = t;
+                break;
+            }
+        }
+        if (matched) {
+            parts.push({ kind: 'token', token: matched });
+            i += matched.length;
+        }
+        else {
+            parts.push({ kind: 'lit', text: fmt[i] });
+            i += 1;
+        }
+    }
+    // merge adjacent literals
+    const merged = [];
+    for (const p of parts) {
+        const last = merged[merged.length - 1];
+        if (p.kind === 'lit' && last?.kind === 'lit')
+            last.text += p.text;
+        else
+            merged.push(p);
+    }
+    return merged;
+}
+function normalizeFormat(fmt) {
+    // Keep only date tokens in order, drop literals.
+    return tokenizeFormat(fmt)
+        .filter((p) => p.kind === 'token')
+        .map((p) => p.token)
+        .join('');
+}
+function normalizeInputAlphaNum(raw) {
+    return raw.replace(/[^a-zA-Z0-9]/g, '');
+}
+function hasLetters(raw) {
+    return /[a-zA-Z]/.test(raw);
+}
+function isLikelyPartial(raw) {
+    // Partial if:
+    // - ends with a separator-like char
+    // - contains letters but not enough letters for month names yet
+    // - too short overall
+    const t = raw.trim();
+    if (!t)
+        return true;
+    if (/[-/.\s]$/.test(t))
+        return true;
+    if (hasLetters(t) && t.length < 6)
+        return true;
+    if (normalizeInputAlphaNum(t).length < 6)
+        return true;
+    return false;
+}
+/**
+ * Smart parse:
+ * 1) Try strict parse of raw input using displayFormat (supports separators, MMM, etc.)
+ * 2) If fails, try normalized input + normalized format (removes literals),
+ *    e.g. "15-May-1981" -> "15May1981" with "DDMMMYYYY"
+ *
+ * Returns partial/invalid/valid.
+ */
+function parseSmartDate(raw, displayFormat, adapter, locale) {
+    const text = raw.trim();
+    if (!text)
+        return { kind: 'empty' };
+    // 1) strict as-is parse
+    const direct = adapter.parse(text, displayFormat, locale);
+    if (direct && adapter.isValid(direct)) {
+        return { kind: 'valid', date: adapter.startOfDay(direct) };
+    }
+    // If user is still typing, don't mark invalid aggressively
+    if (isLikelyPartial(text))
+        return { kind: 'partial' };
+    // 2) normalized parse (strip literals)
+    const normFmt = normalizeFormat(displayFormat);
+    const normInput = normalizeInputAlphaNum(text);
+    if (!normInput)
+        return { kind: 'empty' };
+    const normalized = adapter.parse(normInput, normFmt, locale);
+    if (normalized && adapter.isValid(normalized)) {
+        return { kind: 'valid', date: adapter.startOfDay(normalized) };
+    }
+    // If contains letters, assume month still being typed (Ma, May, etc.)
+    if (hasLetters(text) && text.length < 10)
+        return { kind: 'partial' };
+    return { kind: 'invalid' };
+}
+/**
+ * Format a Date using displayFormat and locale.
+ */
+function formatDate(date, displayFormat, adapter, locale) {
+    return adapter.format(date, displayFormat, locale);
+}
+/**
+ * Caret preservation:
+ * after we programmatically replace input.value, reposition caret to a logical place.
+ *
+ * Strategy:
+ * - Count alphanumeric characters before caret in the "before" string.
+ * - Find the position in "after" string that has the same count of alphanumerics.
+ */
+function computeNextCaretPos(before, beforeCaret, after) {
+    const countAlphaNum = (s) => (s.match(/[a-zA-Z0-9]/g) ?? []).length;
+    const beforeLeft = before.slice(0, beforeCaret);
+    const targetCount = countAlphaNum(beforeLeft);
+    if (targetCount === 0)
+        return 0;
+    let seen = 0;
+    for (let i = 0; i < after.length; i++) {
+        if (/[a-zA-Z0-9]/.test(after[i]))
+            seen++;
+        if (seen >= targetCount)
+            return i + 1;
+    }
+    return after.length;
+}
+
+const MONTHS = [
+    { index: 0, label: 'Jan' },
+    { index: 1, label: 'Feb' },
+    { index: 2, label: 'Mar' },
+    { index: 3, label: 'Apr' },
+    { index: 4, label: 'May' },
+    { index: 5, label: 'Jun' },
+    { index: 6, label: 'Jul' },
+    { index: 7, label: 'Aug' },
+    { index: 8, label: 'Sep' },
+    { index: 9, label: 'Oct' },
+    { index: 10, label: 'Nov' },
+    { index: 11, label: 'Dec' },
+];
+const YEAR_WINDOW_SIZE = 10;
+const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+class TngDatepicker {
+    /* =====================
+     * Inputs
+     * ===================== */
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    displayFormat = input('DD/MM/YYYY', ...(ngDevMode ? [{ debugName: "displayFormat" }] : []));
+    previewFormat = input('DD MMM YYYY', ...(ngDevMode ? [{ debugName: "previewFormat" }] : []));
+    /** Optional locale for month names (e.g. 'en', 'fr', 'de', 'ml') */
+    locale = input(null, ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    dateAdapter = input(null, ...(ngDevMode ? [{ debugName: "dateAdapter" }] : []));
+    /** Klass applied to the text input element */
+    inputKlass = input('', ...(ngDevMode ? [{ debugName: "inputKlass" }] : []));
+    toggleKlass = input('', ...(ngDevMode ? [{ debugName: "toggleKlass" }] : []));
+    hostKlass = input('', ...(ngDevMode ? [{ debugName: "hostKlass" }] : []));
+    disabledKlass = input('', ...(ngDevMode ? [{ debugName: "disabledKlass" }] : []));
+    fieldKlass = input('', ...(ngDevMode ? [{ debugName: "fieldKlass" }] : []));
+    toggleIconKlass = input('', ...(ngDevMode ? [{ debugName: "toggleIconKlass" }] : []));
+    panelKlass = input('', ...(ngDevMode ? [{ debugName: "panelKlass" }] : []));
+    panelFrameKlass = input('', ...(ngDevMode ? [{ debugName: "panelFrameKlass" }] : []));
+    panelLayoutKlass = input('', ...(ngDevMode ? [{ debugName: "panelLayoutKlass" }] : []));
+    monthRailKlass = input('', ...(ngDevMode ? [{ debugName: "monthRailKlass" }] : []));
+    monthListKlass = input('', ...(ngDevMode ? [{ debugName: "monthListKlass" }] : []));
+    monthItemKlass = input('', ...(ngDevMode ? [{ debugName: "monthItemKlass" }] : []));
+    calendarKlass = input('', ...(ngDevMode ? [{ debugName: "calendarKlass" }] : []));
+    titleKlass = input('', ...(ngDevMode ? [{ debugName: "titleKlass" }] : []));
+    weekdayRowKlass = input('', ...(ngDevMode ? [{ debugName: "weekdayRowKlass" }] : []));
+    weekdayCellKlass = input('', ...(ngDevMode ? [{ debugName: "weekdayCellKlass" }] : []));
+    dayGridKlass = input('', ...(ngDevMode ? [{ debugName: "dayGridKlass" }] : []));
+    dayCellKlass = input('', ...(ngDevMode ? [{ debugName: "dayCellKlass" }] : []));
+    previewTextKlass = input('', ...(ngDevMode ? [{ debugName: "previewTextKlass" }] : []));
+    actionBarKlass = input('', ...(ngDevMode ? [{ debugName: "actionBarKlass" }] : []));
+    cancelKlass = input('', ...(ngDevMode ? [{ debugName: "cancelKlass" }] : []));
+    confirmKlass = input('', ...(ngDevMode ? [{ debugName: "confirmKlass" }] : []));
+    yearRailKlass = input('', ...(ngDevMode ? [{ debugName: "yearRailKlass" }] : []));
+    yearNavPrevKlass = input('', ...(ngDevMode ? [{ debugName: "yearNavPrevKlass" }] : []));
+    yearListKlass = input('', ...(ngDevMode ? [{ debugName: "yearListKlass" }] : []));
+    yearItemKlass = input('', ...(ngDevMode ? [{ debugName: "yearItemKlass" }] : []));
+    yearNavNextKlass = input('', ...(ngDevMode ? [{ debugName: "yearNavNextKlass" }] : []));
+    inputEl;
+    /* =====================
+     * Overlay state
+     * ===================== */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    injectedAdapter = inject(TNG_DATE_ADAPTER, { optional: true });
+    nativeAdapter = inject(TngNativeDateAdapter);
+    adapter = computed(() => this.dateAdapter() ?? this.injectedAdapter ?? this.nativeAdapter, ...(ngDevMode ? [{ debugName: "adapter" }] : []));
+    /* =====================
+     * Klass (input theming)
+     * ===================== */
+    inputKlassFinal = computed(() => this.join('w-full rounded-md border border-border bg-bg px-3 py-2 pr-10 text-sm', 'focus:outline-none focus:ring-2 focus:ring-primary', this.inputKlass()), ...(ngDevMode ? [{ debugName: "inputKlassFinal" }] : []));
+    toggleKlassFinal = computed(() => this.join('absolute inset-y-0 right-0 flex w-10 items-center justify-center', 'rounded-r-md text-fg hover:bg-alternate-background', this.toggleKlass()), ...(ngDevMode ? [{ debugName: "toggleKlassFinal" }] : []));
+    hostKlassFinal = computed(() => this.join('relative', this.hostKlass()), ...(ngDevMode ? [{ debugName: "hostKlassFinal" }] : []));
+    disabledKlassFinal = computed(() => this.join(this.disabledKlass()), ...(ngDevMode ? [{ debugName: "disabledKlassFinal" }] : []));
+    fieldKlassFinal = computed(() => this.join('relative', this.fieldKlass()), ...(ngDevMode ? [{ debugName: "fieldKlassFinal" }] : []));
+    toggleIconKlassFinal = computed(() => this.join('h-5 w-5', this.toggleIconKlass()), ...(ngDevMode ? [{ debugName: "toggleIconKlassFinal" }] : []));
+    panelKlassFinal = computed(() => this.join('w-[372px] h-[322px] max-h-[322px] p-0', this.panelKlass()), ...(ngDevMode ? [{ debugName: "panelKlassFinal" }] : []));
+    panelFrameKlassFinal = computed(() => this.join('w-[370px] h-[320px] overflow-hidden rounded-lg', 'border border-border bg-bg shadow-lg', this.panelFrameKlass()), ...(ngDevMode ? [{ debugName: "panelFrameKlassFinal" }] : []));
+    panelLayoutKlassFinal = computed(() => this.join('grid h-full grid-cols-[64px_1fr_64px]', this.panelLayoutKlass()), ...(ngDevMode ? [{ debugName: "panelLayoutKlassFinal" }] : []));
+    monthRailKlassFinal = computed(() => this.join('bg-bg p-1 text-fg', this.monthRailKlass()), ...(ngDevMode ? [{ debugName: "monthRailKlassFinal" }] : []));
+    monthListKlassFinal = computed(() => this.join('space-y-0.5', this.monthListKlass()), ...(ngDevMode ? [{ debugName: "monthListKlassFinal" }] : []));
+    monthItemKlassFinal = computed(() => this.join('w-full rounded px-1 py-0.5 text-[11px] font-semibold transition', this.monthItemKlass()), ...(ngDevMode ? [{ debugName: "monthItemKlassFinal" }] : []));
+    calendarKlassFinal = computed(() => this.join('flex h-full flex-col p-2 border-r border-l border-border', this.calendarKlass()), ...(ngDevMode ? [{ debugName: "calendarKlassFinal" }] : []));
+    titleKlassFinal = computed(() => this.join('mb-1 text-center text-sm font-semibold', this.titleKlass()), ...(ngDevMode ? [{ debugName: "titleKlassFinal" }] : []));
+    weekdayRowKlassFinal = computed(() => this.join('grid grid-cols-7 gap-0.5 text-[10px] font-semibold text-disable', this.weekdayRowKlass()), ...(ngDevMode ? [{ debugName: "weekdayRowKlassFinal" }] : []));
+    weekdayCellKlassFinal = computed(() => this.join('text-center', this.weekdayCellKlass()), ...(ngDevMode ? [{ debugName: "weekdayCellKlassFinal" }] : []));
+    dayGridKlassFinal = computed(() => this.join('mt-1 grid grid-cols-7 gap-0.5', this.dayGridKlass()), ...(ngDevMode ? [{ debugName: "dayGridKlassFinal" }] : []));
+    dayCellKlassFinal = computed(() => this.join('h-7 rounded text-[11px] transition', this.dayCellKlass()), ...(ngDevMode ? [{ debugName: "dayCellKlassFinal" }] : []));
+    previewTextKlassFinal = computed(() => this.join('pt-2 text-center text-[11px] text-disable', this.previewTextKlass()), ...(ngDevMode ? [{ debugName: "previewTextKlassFinal" }] : []));
+    actionBarKlassFinal = computed(() => this.join('mt-auto flex items-center justify-end gap-2 pt-4', this.actionBarKlass()), ...(ngDevMode ? [{ debugName: "actionBarKlassFinal" }] : []));
+    cancelKlassFinal = computed(() => this.join('rounded-md border border-border bg-bg', 'px-3 py-1.5 text-[11px] font-semibold text-fg', 'shadow-sm hover:bg-alternate-background active:translate-y-[1px]', this.cancelKlass()), ...(ngDevMode ? [{ debugName: "cancelKlassFinal" }] : []));
+    confirmKlassFinal = computed(() => this.join('rounded-md bg-fg', 'px-3 py-1.5 text-[11px] font-semibold text-bg', 'shadow-sm hover:opacity-95 active:translate-y-[1px]', this.confirmKlass()), ...(ngDevMode ? [{ debugName: "confirmKlassFinal" }] : []));
+    yearRailKlassFinal = computed(() => this.join('bg-bg p-1 text-fg flex flex-col', this.yearRailKlass()), ...(ngDevMode ? [{ debugName: "yearRailKlassFinal" }] : []));
+    yearNavPrevKlassFinal = computed(() => this.join('mx-auto mb-1 flex h-6 w-6 items-center justify-center', 'rounded bg-bg/10 text-[12px] hover:bg-bg/15 disabled:opacity-40', this.yearNavPrevKlass()), ...(ngDevMode ? [{ debugName: "yearNavPrevKlassFinal" }] : []));
+    yearListKlassFinal = computed(() => this.join('space-y-0.5', this.yearListKlass()), ...(ngDevMode ? [{ debugName: "yearListKlassFinal" }] : []));
+    yearItemKlassFinal = computed(() => this.join('w-full rounded px-1 py-0.5 text-[11px] font-semibold transition', this.yearItemKlass()), ...(ngDevMode ? [{ debugName: "yearItemKlassFinal" }] : []));
+    yearNavNextKlassFinal = computed(() => this.join('mx-auto mt-1 flex h-6 w-6 items-center justify-center', 'rounded bg-bg/10 text-[12px] hover:bg-bg/15 disabled:opacity-40', this.yearNavNextKlass()), ...(ngDevMode ? [{ debugName: "yearNavNextKlassFinal" }] : []));
+    join(...parts) {
+        return parts.map((p) => (p ?? '').trim()).filter(Boolean).join(' ');
+    }
+    /* =====================
+     * Form values
+     * ===================== */
+    value = null;
+    draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : []));
+    inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    /* =====================
+     * UI constants
+     * ===================== */
+    months = MONTHS;
+    weekdays = WEEKDAYS;
+    focusedDate = signal(null, ...(ngDevMode ? [{ debugName: "focusedDate" }] : []));
+    /* =====================
+     * Derived bounds
+     * ===================== */
+    minD = computed(() => this.min() ? this.adapter().startOfDay(this.min()) : null, ...(ngDevMode ? [{ debugName: "minD" }] : []));
+    maxD = computed(() => this.max() ? this.adapter().startOfDay(this.max()) : null, ...(ngDevMode ? [{ debugName: "maxD" }] : []));
+    /* =====================
+     * View base
+     * ===================== */
+    view = computed(() => (this.draft() ?? this.value ?? this.adapter().startOfDay(new Date())), ...(ngDevMode ? [{ debugName: "view" }] : []));
+    selectedYear = computed(() => this.adapter().year(this.view()), ...(ngDevMode ? [{ debugName: "selectedYear" }] : []));
+    selectedMonth = computed(() => this.adapter().month(this.view()), ...(ngDevMode ? [{ debugName: "selectedMonth" }] : []));
+    yearBase = signal(Math.floor(this.adapter().year(new Date()) / YEAR_WINDOW_SIZE) * YEAR_WINDOW_SIZE, ...(ngDevMode ? [{ debugName: "yearBase" }] : []));
+    years = computed(() => {
+        const base = this.yearBase();
+        return Array.from({ length: YEAR_WINDOW_SIZE }, (_, i) => base + i);
+    }, ...(ngDevMode ? [{ debugName: "years" }] : []));
+    previewLabel = computed(() => {
+        const d = this.draft() ?? this.value;
+        if (!d)
+            return '—';
+        const loc = this.locale();
+        return loc ? this.adapter().format(d, this.previewFormat(), loc) : this.adapter().format(d, this.previewFormat());
+    }, ...(ngDevMode ? [{ debugName: "previewLabel" }] : []));
+    calendarCells = computed(() => {
+        const v = this.adapter().startOfMonth(this.view());
+        const startDow = this.adapter().day(v);
+        const gridStart = this.adapter().addDays(v, -startDow);
+        const cells = [];
+        for (let i = 0; i < 42; i++) {
+            const d = this.adapter().addDays(gridStart, i);
+            cells.push({
+                date: d,
+                label: String(this.adapter().date(d)),
+                isOutsideMonth: this.adapter().month(d) !== this.adapter().month(v),
+            });
+        }
+        return cells;
+    }, ...(ngDevMode ? [{ debugName: "calendarCells" }] : []));
+    canPrevYearWindow = computed(() => !this.isYearWindowBlocked(this.yearBase() - YEAR_WINDOW_SIZE), ...(ngDevMode ? [{ debugName: "canPrevYearWindow" }] : []));
+    canNextYearWindow = computed(() => !this.isYearWindowBlocked(this.yearBase() + YEAR_WINDOW_SIZE), ...(ngDevMode ? [{ debugName: "canNextYearWindow" }] : []));
+    isYearWindowBlocked(nextBase) {
+        const min = this.minD();
+        const max = this.maxD();
+        if (!min && !max)
+            return false;
+        const years = Array.from({ length: YEAR_WINDOW_SIZE }, (_, i) => nextBase + i);
+        return years.every((y) => this.isYearDisabled(y));
+    }
+    constructor() {
+        effect(() => {
+            this.isDisabled.set(this.disabled());
+            if (this.isDisabled())
+                this.close('programmatic');
+        });
+    }
+    prevYearWindow() {
+        if (this.isDisabled())
+            return;
+        const next = this.yearBase() - YEAR_WINDOW_SIZE;
+        if (this.isYearWindowBlocked(next))
+            return;
+        this.yearBase.set(next);
+    }
+    nextYearWindow() {
+        if (this.isDisabled())
+            return;
+        const next = this.yearBase() + YEAR_WINDOW_SIZE;
+        if (this.isYearWindowBlocked(next))
+            return;
+        this.yearBase.set(next);
+    }
+    /* =====================
+     * CVA
+     * ===================== */
+    writeValue(value) {
+        if (value == null) {
+            this.value = null;
+            this.draft.set(null);
+            this.inputValue.set('');
+            return;
+        }
+        const d = this.adapter().startOfDay(new Date(value));
+        if (!this.adapter().isValid(d))
+            return;
+        const clamped = this.clampToBounds(d);
+        this.value = clamped;
+        this.draft.set(clamped);
+        this.yearBase.set(Math.floor(this.adapter().year(clamped) / YEAR_WINDOW_SIZE) * YEAR_WINDOW_SIZE);
+        const formatted = this.adapter().format(clamped, this.displayFormat(), this.locale() ?? undefined);
+        this.inputValue.set(formatted);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+        if (isDisabled)
+            this.close('programmatic');
+    }
+    /* =====================
+     * Overlay control
+     * ===================== */
+    open(_reason) {
+        if (this.isDisabled())
+            return;
+        this.isOpen.set(true);
+        if (this.draft() == null)
+            this.draft.set(this.value ?? this.adapter().startOfDay(new Date()));
+        const current = (this.draft() ?? this.value ?? this.adapter().startOfDay(new Date()));
+        // year window sync (existing)
+        const y = this.adapter().year(current);
+        this.yearBase.set(Math.floor(y / YEAR_WINDOW_SIZE) * YEAR_WINDOW_SIZE);
+        // keyboard focus starts from current draft/value
+        this.focusedDate.set(current);
+    }
+    close(_reason) {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+    }
+    onOverlayOpenChange(open) {
+        if (this.isDisabled()) {
+            this.isOpen.set(false);
+            return;
+        }
+        open ? this.open('programmatic') : this.close('programmatic');
+    }
+    onOverlayClosed(reason) {
+        this.close(reason);
+    }
+    toggleOverlay() {
+        if (this.isDisabled())
+            return;
+        this.isOpen.update((v) => !v);
+        if (this.isOpen())
+            this.open('programmatic');
+        queueMicrotask(() => this.inputEl.nativeElement.focus());
+    }
+    /* =====================
+     * Input handling (smart)
+     * ===================== */
+    onInput(ev) {
+        if (this.isDisabled())
+            return;
+        const input = ev.target;
+        const raw = input.value ?? '';
+        const before = raw;
+        const beforeCaret = input.selectionStart ?? before.length;
+        const res = parseSmartDate(raw, this.displayFormat(), this.adapter(), this.locale() ?? undefined);
+        // Keep what user typed while partial/invalid; don't hard-clear.
+        if (res.kind === 'empty') {
+            this.inputValue.set('');
+            this.draft.set(null);
+            this.onChange(null);
+            this.onTouched();
+            return;
+        }
+        if (res.kind === 'partial') {
+            this.inputValue.set(raw);
+            // do not emit null onChange while user is mid-typing
+            this.onTouched();
+            return;
+        }
+        if (res.kind === 'invalid') {
+            this.inputValue.set(raw);
+            this.onChange(null);
+            this.onTouched();
+            return;
+        }
+        // valid
+        const clamped = this.clampToBounds(res.date);
+        this.draft.set(clamped);
+        const formatted = this.adapter().format(clamped, this.displayFormat(), this.locale() ?? undefined);
+        this.inputValue.set(formatted);
+        // Apply formatting back to input while preserving caret
+        if (formatted !== raw) {
+            input.value = formatted;
+            const nextCaret = computeNextCaretPos(before, beforeCaret, formatted);
+            queueMicrotask(() => input.setSelectionRange(nextCaret, nextCaret));
+        }
+        // don’t commit until day click/confirm (your current UX), but
+        // we can still emit null/valid? You already treat typing as draft.
+        // Keep existing behavior: do NOT call onChange here.
+        this.onTouched();
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    setFocusedDate(next) {
+        const d = this.adapter().startOfDay(next);
+        // clamp to bounds
+        const clamped = this.clampToBounds(d);
+        this.focusedDate.set(clamped);
+        // If user navigates to another month/year, update draft to keep calendar view in sync
+        this.draft.set(clamped);
+        // Keep year window aligned
+        this.yearBase.set(Math.floor(this.adapter().year(clamped) / YEAR_WINDOW_SIZE) * YEAR_WINDOW_SIZE);
+    }
+    moveFocusedByDays(delta) {
+        const base = (this.focusedDate() ?? this.draft() ?? this.value ?? this.adapter().startOfDay(new Date()));
+        this.setFocusedDate(this.adapter().addDays(base, delta));
+    }
+    moveFocusedByMonths(delta) {
+        const base = (this.focusedDate() ?? this.draft() ?? this.value ?? this.adapter().startOfDay(new Date()));
+        this.setFocusedDate(this.adapter().addMonths(base, delta));
+    }
+    moveFocusedToStartOfMonth() {
+        const base = (this.focusedDate() ?? this.draft() ?? this.value ?? this.adapter().startOfDay(new Date()));
+        this.setFocusedDate(this.adapter().startOfMonth(base));
+    }
+    moveFocusedToEndOfMonth() {
+        const base = (this.focusedDate() ?? this.draft() ?? this.value ?? this.adapter().startOfDay(new Date()));
+        this.setFocusedDate(this.adapter().endOfMonth(base));
+    }
+    isCellFocused(cell) {
+        const f = this.focusedDate();
+        if (!f)
+            return false;
+        return this.adapter().isSameDay(cell.date, f);
+    }
+    onKeydown(ev) {
+        if (this.isDisabled())
+            return;
+        // ---- TAB / SHIFT+TAB -> close popup ----
+        if (ev.key === 'Tab' && this.isOpen()) {
+            // Do NOT preventDefault -> allow normal focus navigation
+            this.close('blur');
+            return;
+        }
+        // Escape closes without commit
+        if (ev.key === 'Escape' && this.isOpen()) {
+            ev.preventDefault();
+            this.close('escape');
+            return;
+        }
+        // Open when closed
+        if (!this.isOpen() && (ev.key === 'ArrowDown' || ev.key === 'Enter')) {
+            ev.preventDefault();
+            this.open('programmatic');
+            return;
+        }
+        // Keyboard navigation only when open
+        if (!this.isOpen())
+            return;
+        switch (ev.key) {
+            case 'ArrowLeft':
+                ev.preventDefault();
+                this.moveFocusedByDays(-1);
+                return;
+            case 'ArrowRight':
+                ev.preventDefault();
+                this.moveFocusedByDays(1);
+                return;
+            case 'ArrowUp':
+                ev.preventDefault();
+                this.moveFocusedByDays(-7);
+                return;
+            case 'ArrowDown':
+                ev.preventDefault();
+                this.moveFocusedByDays(7);
+                return;
+            case 'PageUp':
+                ev.preventDefault();
+                this.moveFocusedByMonths(-1);
+                return;
+            case 'PageDown':
+                ev.preventDefault();
+                this.moveFocusedByMonths(1);
+                return;
+            case 'Home':
+                ev.preventDefault();
+                this.moveFocusedToStartOfMonth();
+                return;
+            case 'End':
+                ev.preventDefault();
+                this.moveFocusedToEndOfMonth();
+                return;
+            case 'Enter': {
+                ev.preventDefault();
+                const f = this.focusedDate();
+                if (!f)
+                    return;
+                const clamped = this.clampToBounds(f);
+                this.draft.set(clamped);
+                this.value = clamped;
+                this.inputValue.set(this.adapter().format(clamped, this.displayFormat(), this.locale() ?? undefined));
+                this.onChange(clamped);
+                this.onTouched();
+                this.close('selection');
+                return;
+            }
+        }
+    }
+    /* =====================
+     * Calendar actions
+     * ===================== */
+    selectMonth(monthIndex0) {
+        if (this.isDisabled())
+            return;
+        const base = this.draft() ?? this.value ?? this.adapter().startOfDay(new Date());
+        const day = this.adapter().date(base);
+        const m = this.adapter().setMonth(base, monthIndex0);
+        const nextDay = Math.min(day, this.adapter().daysInMonth(m));
+        this.draft.set(this.clampToBounds(this.adapter().setDate(m, nextDay)));
+    }
+    selectYear(year) {
+        if (this.isDisabled())
+            return;
+        const base = this.draft() ?? this.value ?? this.adapter().startOfDay(new Date());
+        const day = this.adapter().date(base);
+        const y = this.adapter().setYear(base, year);
+        const nextDay = Math.min(day, this.adapter().daysInMonth(y));
+        this.draft.set(this.clampToBounds(this.adapter().setDate(y, nextDay)));
+    }
+    // day click commits + closes (as you requested)
+    selectDay(cell) {
+        if (this.isDisabled())
+            return;
+        const d = this.adapter().startOfDay(cell.date);
+        if (!this.isWithinBounds(d))
+            return;
+        const clamped = this.clampToBounds(d);
+        this.draft.set(clamped);
+        this.value = clamped;
+        const formatted = this.adapter().format(clamped, this.displayFormat(), this.locale() ?? undefined);
+        this.inputValue.set(formatted);
+        this.onChange(clamped);
+        this.onTouched();
+        this.close('selection');
+    }
+    cancel() {
+        if (this.isDisabled())
+            return;
+        this.draft.set(this.value);
+        const formatted = this.value
+            ? this.adapter().format(this.value, this.displayFormat(), this.locale() ?? undefined)
+            : '';
+        this.inputValue.set(formatted);
+        this.close('blur');
+        this.onTouched();
+    }
+    confirm() {
+        if (this.isDisabled())
+            return;
+        const d = this.draft();
+        if (!d) {
+            this.value = null;
+            this.inputValue.set('');
+            this.onChange(null);
+            this.onTouched();
+            this.close('selection');
+            return;
+        }
+        const clamped = this.clampToBounds(d);
+        this.value = clamped;
+        const formatted = this.adapter().format(clamped, this.displayFormat(), this.locale() ?? undefined);
+        this.inputValue.set(formatted);
+        this.onChange(clamped);
+        this.onTouched();
+        this.close('selection');
+    }
+    /* =====================
+     * Selection helpers
+     * ===================== */
+    isMonthSelected(monthIndex0) {
+        return this.selectedMonth() === monthIndex0;
+    }
+    isYearSelected(year) {
+        return this.selectedYear() === year;
+    }
+    isCellSelected(cell) {
+        const d = this.draft() ?? this.value;
+        return !!d && this.adapter().isSameDay(cell.date, d);
+    }
+    isCellDisabled(cell) {
+        return !this.isWithinBounds(cell.date);
+    }
+    isMonthDisabled(monthIndex0) {
+        const min = this.minD();
+        const max = this.maxD();
+        if (!min && !max)
+            return false;
+        const y = this.selectedYear();
+        const start = this.adapter().startOfDay(this.adapter().setYear(this.adapter().setMonth(new Date(), monthIndex0), y));
+        const end = this.adapter().endOfMonth(start);
+        if (min && this.adapter().isBeforeDay(end, min))
+            return true;
+        if (max && this.adapter().isAfterDay(start, max))
+            return true;
+        return false;
+    }
+    isYearDisabled(year) {
+        const min = this.minD();
+        const max = this.maxD();
+        if (!min && !max)
+            return false;
+        const start = this.adapter().startOfDay(this.adapter().setYear(this.adapter().setMonth(new Date(), 0), year));
+        const end = this.adapter().endOfYear(start);
+        if (min && this.adapter().isBeforeDay(end, min))
+            return true;
+        if (max && this.adapter().isAfterDay(start, max))
+            return true;
+        return false;
+    }
+    /* =====================
+     * Internals
+     * ===================== */
+    clampToBounds(d) {
+        const min = this.minD();
+        const max = this.maxD();
+        if (min && this.adapter().isBeforeDay(d, min))
+            return min;
+        if (max && this.adapter().isAfterDay(d, max))
+            return max;
+        return d;
+    }
+    isWithinBounds(d) {
+        const min = this.minD();
+        const max = this.maxD();
+        if (min && this.adapter().isBeforeDay(d, min))
+            return false;
+        if (max && this.adapter().isAfterDay(d, max))
+            return false;
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngDatepicker, isStandalone: true, selector: "tng-datepicker", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, previewFormat: { classPropertyName: "previewFormat", publicName: "previewFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateAdapter: { classPropertyName: "dateAdapter", publicName: "dateAdapter", isSignal: true, isRequired: false, transformFunction: null }, inputKlass: { classPropertyName: "inputKlass", publicName: "inputKlass", isSignal: true, isRequired: false, transformFunction: null }, toggleKlass: { classPropertyName: "toggleKlass", publicName: "toggleKlass", isSignal: true, isRequired: false, transformFunction: null }, hostKlass: { classPropertyName: "hostKlass", publicName: "hostKlass", isSignal: true, isRequired: false, transformFunction: null }, disabledKlass: { classPropertyName: "disabledKlass", publicName: "disabledKlass", isSignal: true, isRequired: false, transformFunction: null }, fieldKlass: { classPropertyName: "fieldKlass", publicName: "fieldKlass", isSignal: true, isRequired: false, transformFunction: null }, toggleIconKlass: { classPropertyName: "toggleIconKlass", publicName: "toggleIconKlass", isSignal: true, isRequired: false, transformFunction: null }, panelKlass: { classPropertyName: "panelKlass", publicName: "panelKlass", isSignal: true, isRequired: false, transformFunction: null }, panelFrameKlass: { classPropertyName: "panelFrameKlass", publicName: "panelFrameKlass", isSignal: true, isRequired: false, transformFunction: null }, panelLayoutKlass: { classPropertyName: "panelLayoutKlass", publicName: "panelLayoutKlass", isSignal: true, isRequired: false, transformFunction: null }, monthRailKlass: { classPropertyName: "monthRailKlass", publicName: "monthRailKlass", isSignal: true, isRequired: false, transformFunction: null }, monthListKlass: { classPropertyName: "monthListKlass", publicName: "monthListKlass", isSignal: true, isRequired: false, transformFunction: null }, monthItemKlass: { classPropertyName: "monthItemKlass", publicName: "monthItemKlass", isSignal: true, isRequired: false, transformFunction: null }, calendarKlass: { classPropertyName: "calendarKlass", publicName: "calendarKlass", isSignal: true, isRequired: false, transformFunction: null }, titleKlass: { classPropertyName: "titleKlass", publicName: "titleKlass", isSignal: true, isRequired: false, transformFunction: null }, weekdayRowKlass: { classPropertyName: "weekdayRowKlass", publicName: "weekdayRowKlass", isSignal: true, isRequired: false, transformFunction: null }, weekdayCellKlass: { classPropertyName: "weekdayCellKlass", publicName: "weekdayCellKlass", isSignal: true, isRequired: false, transformFunction: null }, dayGridKlass: { classPropertyName: "dayGridKlass", publicName: "dayGridKlass", isSignal: true, isRequired: false, transformFunction: null }, dayCellKlass: { classPropertyName: "dayCellKlass", publicName: "dayCellKlass", isSignal: true, isRequired: false, transformFunction: null }, previewTextKlass: { classPropertyName: "previewTextKlass", publicName: "previewTextKlass", isSignal: true, isRequired: false, transformFunction: null }, actionBarKlass: { classPropertyName: "actionBarKlass", publicName: "actionBarKlass", isSignal: true, isRequired: false, transformFunction: null }, cancelKlass: { classPropertyName: "cancelKlass", publicName: "cancelKlass", isSignal: true, isRequired: false, transformFunction: null }, confirmKlass: { classPropertyName: "confirmKlass", publicName: "confirmKlass", isSignal: true, isRequired: false, transformFunction: null }, yearRailKlass: { classPropertyName: "yearRailKlass", publicName: "yearRailKlass", isSignal: true, isRequired: false, transformFunction: null }, yearNavPrevKlass: { classPropertyName: "yearNavPrevKlass", publicName: "yearNavPrevKlass", isSignal: true, isRequired: false, transformFunction: null }, yearListKlass: { classPropertyName: "yearListKlass", publicName: "yearListKlass", isSignal: true, isRequired: false, transformFunction: null }, yearItemKlass: { classPropertyName: "yearItemKlass", publicName: "yearItemKlass", isSignal: true, isRequired: false, transformFunction: null }, yearNavNextKlass: { classPropertyName: "yearNavNextKlass", publicName: "yearNavNextKlass", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngDatepicker),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }], ngImport: i0, template: "<div [class]=\"hostKlassFinal()\">\n  <!-- =====================\n       Input + calendar icon\n       ===================== -->\n  <div [class]=\"disabledKlassFinal()\" [class.opacity-60]=\"isDisabled()\" [class.pointer-events-none]=\"isDisabled()\">\n    <div [class]=\"fieldKlassFinal()\">\n      <input\n        #inputEl\n        type=\"text\"\n        [class]=\"inputKlassFinal()\"\n        [value]=\"inputValue()\"\n        [placeholder]=\"displayFormat()\"\n        [disabled]=\"isDisabled()\"\n        (input)=\"onInput($event)\"\n        (focus)=\"open('programmatic')\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeydown($event)\"\n        autocomplete=\"off\"\n      />\n\n      <!-- Calendar icon -->\n      <button\n        type=\"button\"\n        [class]=\"toggleKlassFinal()\"\n        (click)=\"toggleOverlay()\"\n        aria-label=\"Open calendar\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [class]=\"toggleIconKlassFinal()\"\n          fill=\"currentColor\"\n        >\n          <path\n            d=\"M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1.5A2.5 2.5 0 0 1 22 6.5v14\n               A2.5 2.5 0 0 1 19.5 23h-15A2.5 2.5 0 0 1 2 20.5v-14\n               A2.5 2.5 0 0 1 4.5 4H6V3a1 1 0 0 1 1-1Zm12.5 8h-15a.5.5 0 0 0-.5.5v10\n               a.5.5 0 0 0 .5.5h15a.5.5 0 0 0 .5-.5v-10a.5.5 0 0 0-.5-.5Z\"\n          />\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- =====================\n       Overlay\n       ===================== -->\n  <tng-overlay-ref\n    #overlayRef=\"tngOverlayRef\"\n    [open]=\"isOpen()\"\n    (openChange)=\"onOverlayOpenChange($event)\"\n    (closed)=\"onOverlayClosed($event)\"\n  >\n    <tng-connected-overlay\n      [open]=\"overlayRef.isOpen()\"\n      [anchor]=\"inputEl\"\n      placement=\"bottom-start\"\n      width=\"content\"\n      [closeOnInsideClick]=\"false\"\n      (closed)=\"overlayRef.close($event)\"\n    >\n      <tng-overlay-panel [klass]=\"panelKlassFinal()\">\n        <!-- Popup frame -->\n        <div [class]=\"panelFrameKlassFinal()\">\n          <!-- =====================\n               Body layout\n               ===================== -->\n          <div [class]=\"panelLayoutKlassFinal()\">\n\n            <!-- ========= Months ========= -->\n            <div [class]=\"monthRailKlassFinal()\">\n              <div [class]=\"monthListKlassFinal()\">\n                @for (m of months; track m.index) {\n                  <button\n                    type=\"button\"\n                    [class]=\"monthItemKlassFinal()\"\n                    [class.bg-fg]=\"isMonthSelected(m.index)\"\n                    [class.text-bg]=\"isMonthSelected(m.index)\"\n                    [class.opacity-40]=\"isMonthDisabled(m.index)\"\n                    [disabled]=\"isMonthDisabled(m.index)\"\n                    (click)=\"selectMonth(m.index)\"\n                  >\n                    {{ m.label }}\n                  </button>\n                }\n              </div>\n            </div>\n\n            <!-- ========= Calendar ========= -->\n            <div [class]=\"calendarKlassFinal()\">\n              <div [class]=\"titleKlassFinal()\">\n                Select Date\n              </div>\n\n              <!-- Weekdays -->\n              <div [class]=\"weekdayRowKlassFinal()\">\n                @for (d of weekdays; track d) {\n                  <div [class]=\"weekdayCellKlassFinal()\">{{ d }}</div>\n                }\n              </div>\n\n              <!-- Days -->\n              <div [class]=\"dayGridKlassFinal()\">\n                @for (cell of calendarCells(); track $index) {\n                  <button\n                    type=\"button\"\n                    [class]=\"dayCellKlassFinal()\"\n                    [class.text-fg]=\"cell.isOutsideMonth\"\n                    [class.hover:bg-fg]=\"!isCellDisabled(cell) && !isCellSelected(cell)\"\n                    [class.hover:text-bg]=\"!isCellDisabled(cell) && !isCellSelected(cell)\"\n                    [class.bg-fg]=\"isCellSelected(cell)\"\n                    [class.text-bg]=\"isCellSelected(cell)\"\n                    [class.opacity-40]=\"isCellDisabled(cell)\"\n                    [class.ring-2]=\"isCellFocused(cell) && !isCellSelected(cell)\"\n                    [class.ring-border]=\"isCellFocused(cell) && !isCellSelected(cell)\"\n                    [disabled]=\"isCellDisabled(cell)\"\n                    (click)=\"selectDay(cell)\"\n                  >\n                    {{ cell.label }}\n                  </button>\n                }\n              </div>\n\n              <!-- Preview -->\n              <div [class]=\"previewTextKlassFinal()\">\n                {{ previewLabel() }}\n              </div>\n\n              <!-- Actions -->\n              <div [class]=\"actionBarKlassFinal()\">\n                <button\n                  type=\"button\"\n                  [class]=\"cancelKlassFinal()\"\n                  (click)=\"cancel()\"\n                >\n                  Cancel\n                </button>\n\n                <button\n                  type=\"button\"\n                  [class]=\"confirmKlassFinal()\"\n                  (click)=\"confirm()\"\n                >\n                  Confirm\n                </button>\n              </div>\n            </div>\n\n            <!-- ========= Years (10 at a time) ========= -->\n            <div [class]=\"yearRailKlassFinal()\">\n\n              <!-- Up -->\n              <button\n                type=\"button\"\n                [class]=\"yearNavPrevKlassFinal()\"\n                (click)=\"prevYearWindow()\"\n                [disabled]=\"!canPrevYearWindow()\"\n                aria-label=\"Previous 10 years\"\n              >\n                \u25B2\n              </button>\n\n              <!-- Year list -->\n              <div [class]=\"yearListKlassFinal()\">\n                @for (y of years(); track (yearBase() + ':' + y)) {\n                  <button\n                    type=\"button\"\n                    [class]=\"yearItemKlassFinal()\"\n                    [class.bg-fg]=\"isYearSelected(y)\"\n                    [class.text-bg]=\"isYearSelected(y)\"\n                    [class.opacity-40]=\"isYearDisabled(y)\"\n                    [disabled]=\"isYearDisabled(y)\"\n                    (click)=\"selectYear(y)\"\n                  >\n                    {{ y }}\n                  </button>\n                }\n              </div>\n              \n              <!-- Down -->\n              <button\n                type=\"button\"\n                [class]=\"yearNavNextKlassFinal()\"\n                (click)=\"nextYearWindow()\"\n                [disabled]=\"!canNextYearWindow()\"\n                aria-label=\"Next 10 years\"\n              >\n                \u25BC\n              </button>\n            </div>\n\n          </div>\n        </div>\n      </tng-overlay-panel>\n    </tng-connected-overlay>\n  </tng-overlay-ref>\n</div>\n", dependencies: [{ kind: "component", type: TngOverlayRef, selector: "tng-overlay-ref", inputs: ["open"], outputs: ["openChange", "opened", "closed"], exportAs: ["tngOverlayRef"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngDatepicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-datepicker', standalone: true, imports: [
+                        TngOverlayRef,
+                        TngConnectedOverlay,
+                        TngOverlayPanel,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngDatepicker),
+                            multi: true,
+                        },
+                    ], template: "<div [class]=\"hostKlassFinal()\">\n  <!-- =====================\n       Input + calendar icon\n       ===================== -->\n  <div [class]=\"disabledKlassFinal()\" [class.opacity-60]=\"isDisabled()\" [class.pointer-events-none]=\"isDisabled()\">\n    <div [class]=\"fieldKlassFinal()\">\n      <input\n        #inputEl\n        type=\"text\"\n        [class]=\"inputKlassFinal()\"\n        [value]=\"inputValue()\"\n        [placeholder]=\"displayFormat()\"\n        [disabled]=\"isDisabled()\"\n        (input)=\"onInput($event)\"\n        (focus)=\"open('programmatic')\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeydown($event)\"\n        autocomplete=\"off\"\n      />\n\n      <!-- Calendar icon -->\n      <button\n        type=\"button\"\n        [class]=\"toggleKlassFinal()\"\n        (click)=\"toggleOverlay()\"\n        aria-label=\"Open calendar\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [class]=\"toggleIconKlassFinal()\"\n          fill=\"currentColor\"\n        >\n          <path\n            d=\"M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1.5A2.5 2.5 0 0 1 22 6.5v14\n               A2.5 2.5 0 0 1 19.5 23h-15A2.5 2.5 0 0 1 2 20.5v-14\n               A2.5 2.5 0 0 1 4.5 4H6V3a1 1 0 0 1 1-1Zm12.5 8h-15a.5.5 0 0 0-.5.5v10\n               a.5.5 0 0 0 .5.5h15a.5.5 0 0 0 .5-.5v-10a.5.5 0 0 0-.5-.5Z\"\n          />\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- =====================\n       Overlay\n       ===================== -->\n  <tng-overlay-ref\n    #overlayRef=\"tngOverlayRef\"\n    [open]=\"isOpen()\"\n    (openChange)=\"onOverlayOpenChange($event)\"\n    (closed)=\"onOverlayClosed($event)\"\n  >\n    <tng-connected-overlay\n      [open]=\"overlayRef.isOpen()\"\n      [anchor]=\"inputEl\"\n      placement=\"bottom-start\"\n      width=\"content\"\n      [closeOnInsideClick]=\"false\"\n      (closed)=\"overlayRef.close($event)\"\n    >\n      <tng-overlay-panel [klass]=\"panelKlassFinal()\">\n        <!-- Popup frame -->\n        <div [class]=\"panelFrameKlassFinal()\">\n          <!-- =====================\n               Body layout\n               ===================== -->\n          <div [class]=\"panelLayoutKlassFinal()\">\n\n            <!-- ========= Months ========= -->\n            <div [class]=\"monthRailKlassFinal()\">\n              <div [class]=\"monthListKlassFinal()\">\n                @for (m of months; track m.index) {\n                  <button\n                    type=\"button\"\n                    [class]=\"monthItemKlassFinal()\"\n                    [class.bg-fg]=\"isMonthSelected(m.index)\"\n                    [class.text-bg]=\"isMonthSelected(m.index)\"\n                    [class.opacity-40]=\"isMonthDisabled(m.index)\"\n                    [disabled]=\"isMonthDisabled(m.index)\"\n                    (click)=\"selectMonth(m.index)\"\n                  >\n                    {{ m.label }}\n                  </button>\n                }\n              </div>\n            </div>\n\n            <!-- ========= Calendar ========= -->\n            <div [class]=\"calendarKlassFinal()\">\n              <div [class]=\"titleKlassFinal()\">\n                Select Date\n              </div>\n\n              <!-- Weekdays -->\n              <div [class]=\"weekdayRowKlassFinal()\">\n                @for (d of weekdays; track d) {\n                  <div [class]=\"weekdayCellKlassFinal()\">{{ d }}</div>\n                }\n              </div>\n\n              <!-- Days -->\n              <div [class]=\"dayGridKlassFinal()\">\n                @for (cell of calendarCells(); track $index) {\n                  <button\n                    type=\"button\"\n                    [class]=\"dayCellKlassFinal()\"\n                    [class.text-fg]=\"cell.isOutsideMonth\"\n                    [class.hover:bg-fg]=\"!isCellDisabled(cell) && !isCellSelected(cell)\"\n                    [class.hover:text-bg]=\"!isCellDisabled(cell) && !isCellSelected(cell)\"\n                    [class.bg-fg]=\"isCellSelected(cell)\"\n                    [class.text-bg]=\"isCellSelected(cell)\"\n                    [class.opacity-40]=\"isCellDisabled(cell)\"\n                    [class.ring-2]=\"isCellFocused(cell) && !isCellSelected(cell)\"\n                    [class.ring-border]=\"isCellFocused(cell) && !isCellSelected(cell)\"\n                    [disabled]=\"isCellDisabled(cell)\"\n                    (click)=\"selectDay(cell)\"\n                  >\n                    {{ cell.label }}\n                  </button>\n                }\n              </div>\n\n              <!-- Preview -->\n              <div [class]=\"previewTextKlassFinal()\">\n                {{ previewLabel() }}\n              </div>\n\n              <!-- Actions -->\n              <div [class]=\"actionBarKlassFinal()\">\n                <button\n                  type=\"button\"\n                  [class]=\"cancelKlassFinal()\"\n                  (click)=\"cancel()\"\n                >\n                  Cancel\n                </button>\n\n                <button\n                  type=\"button\"\n                  [class]=\"confirmKlassFinal()\"\n                  (click)=\"confirm()\"\n                >\n                  Confirm\n                </button>\n              </div>\n            </div>\n\n            <!-- ========= Years (10 at a time) ========= -->\n            <div [class]=\"yearRailKlassFinal()\">\n\n              <!-- Up -->\n              <button\n                type=\"button\"\n                [class]=\"yearNavPrevKlassFinal()\"\n                (click)=\"prevYearWindow()\"\n                [disabled]=\"!canPrevYearWindow()\"\n                aria-label=\"Previous 10 years\"\n              >\n                \u25B2\n              </button>\n\n              <!-- Year list -->\n              <div [class]=\"yearListKlassFinal()\">\n                @for (y of years(); track (yearBase() + ':' + y)) {\n                  <button\n                    type=\"button\"\n                    [class]=\"yearItemKlassFinal()\"\n                    [class.bg-fg]=\"isYearSelected(y)\"\n                    [class.text-bg]=\"isYearSelected(y)\"\n                    [class.opacity-40]=\"isYearDisabled(y)\"\n                    [disabled]=\"isYearDisabled(y)\"\n                    (click)=\"selectYear(y)\"\n                  >\n                    {{ y }}\n                  </button>\n                }\n              </div>\n              \n              <!-- Down -->\n              <button\n                type=\"button\"\n                [class]=\"yearNavNextKlassFinal()\"\n                (click)=\"nextYearWindow()\"\n                [disabled]=\"!canNextYearWindow()\"\n                aria-label=\"Next 10 years\"\n              >\n                \u25BC\n              </button>\n            </div>\n\n          </div>\n        </div>\n      </tng-overlay-panel>\n    </tng-connected-overlay>\n  </tng-overlay-ref>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], previewFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewFormat", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateAdapter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateAdapter", required: false }] }], inputKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputKlass", required: false }] }], toggleKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleKlass", required: false }] }], hostKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hostKlass", required: false }] }], disabledKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledKlass", required: false }] }], fieldKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldKlass", required: false }] }], toggleIconKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleIconKlass", required: false }] }], panelKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelKlass", required: false }] }], panelFrameKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelFrameKlass", required: false }] }], panelLayoutKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLayoutKlass", required: false }] }], monthRailKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthRailKlass", required: false }] }], monthListKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthListKlass", required: false }] }], monthItemKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthItemKlass", required: false }] }], calendarKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarKlass", required: false }] }], titleKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKlass", required: false }] }], weekdayRowKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayRowKlass", required: false }] }], weekdayCellKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayCellKlass", required: false }] }], dayGridKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayGridKlass", required: false }] }], dayCellKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayCellKlass", required: false }] }], previewTextKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewTextKlass", required: false }] }], actionBarKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionBarKlass", required: false }] }], cancelKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelKlass", required: false }] }], confirmKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmKlass", required: false }] }], yearRailKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearRailKlass", required: false }] }], yearNavPrevKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearNavPrevKlass", required: false }] }], yearListKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearListKlass", required: false }] }], yearItemKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearItemKlass", required: false }] }], yearNavNextKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearNavNextKlass", required: false }] }], inputEl: [{
+                type: ViewChild,
+                args: ['inputEl', { static: true }]
+            }] } });
+
+class TngFileDropzone {
+    /** Disable drag/drop interactions */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Optional: allow dropping multiple files */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    /** Optional: accept filter like input accept attribute (e.g. "image/*,.pdf") */
+    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    /** Emits when valid files dropped */
+    filesDropped = output();
+    /** Emits drag active state changes (optional hook) */
+    dragActiveChange = output();
+    _dragActive = signal(false, ...(ngDevMode ? [{ debugName: "_dragActive" }] : []));
+    dragActive = computed(() => this._dragActive(), ...(ngDevMode ? [{ debugName: "dragActive" }] : []));
+    setActive(next) {
+        if (this._dragActive() === next)
+            return;
+        this._dragActive.set(next);
+        this.dragActiveChange.emit(next);
+    }
+    acceptMatches(file) {
+        const accept = (this.accept() ?? '').trim();
+        if (!accept)
+            return true;
+        // accept can be: "image/*,.pdf,application/json"
+        const parts = accept
+            .split(',')
+            .map((p) => p.trim())
+            .filter(Boolean);
+        if (!parts.length)
+            return true;
+        const name = file.name.toLowerCase();
+        const type = (file.type || '').toLowerCase();
+        return parts.some((p) => {
+            const token = p.toLowerCase();
+            if (token === '*/*')
+                return true;
+            // extension: ".pdf"
+            if (token.startsWith('.'))
+                return name.endsWith(token);
+            // wildcard mime: "image/*"
+            if (token.endsWith('/*')) {
+                const prefix = token.slice(0, token.length - 1); // keep trailing '/'
+                return type.startsWith(prefix);
+            }
+            // exact mime: "application/pdf"
+            return type === token;
+        });
+    }
+    filterFiles(files) {
+        const accepted = files.filter((f) => this.acceptMatches(f));
+        return this.multiple() ? accepted : accepted.slice(0, 1);
+    }
+    extractFiles(dt) {
+        if (!dt)
+            return [];
+        // Prefer items (better in some browsers)
+        const items = dt.items;
+        if (items && items.length) {
+            const picked = [];
+            for (const item of Array.from(items)) {
+                if (item.kind !== 'file')
+                    continue;
+                const file = item.getAsFile();
+                if (file)
+                    picked.push(file);
+            }
+            return this.filterFiles(picked);
+        }
+        const files = dt.files ? Array.from(dt.files) : [];
+        return this.filterFiles(files);
+    }
+    onDragEnter(ev) {
+        if (this.disabled())
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setActive(true);
+    }
+    onDragOver(ev) {
+        if (this.disabled())
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setActive(true);
+        if (ev.dataTransfer)
+            ev.dataTransfer.dropEffect = 'copy';
+    }
+    onDragLeave(ev) {
+        if (this.disabled())
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setActive(false);
+    }
+    onDrop(ev) {
+        if (this.disabled())
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setActive(false);
+        const files = this.extractFiles(ev.dataTransfer ?? null);
+        if (files.length)
+            this.filesDropped.emit(files);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngFileDropzone, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: TngFileDropzone, isStandalone: true, selector: "[tngFileDropzone]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesDropped: "filesDropped", dragActiveChange: "dragActiveChange" }, host: { listeners: { "dragenter": "onDragEnter($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, exportAs: ["tngFileDropzone"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngFileDropzone, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngFileDropzone]',
+                    standalone: true,
+                    exportAs: 'tngFileDropzone',
+                }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], filesDropped: [{ type: i0.Output, args: ["filesDropped"] }], dragActiveChange: [{ type: i0.Output, args: ["dragActiveChange"] }], onDragEnter: [{
+                type: HostListener,
+                args: ['dragenter', ['$event']]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class TngFileUpload {
+    fileInput;
+    // config
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    // texts
+    title = input('Upload files', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    subtitle = input('Drag & drop here or click to browse', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
+    // theming hooks (section-wise)
+    rootKlass = input('w-full', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    dropzoneKlass = input('', ...(ngDevMode ? [{ debugName: "dropzoneKlass" }] : [])); // outer box
+    titleKlass = input('text-sm font-medium text-fg', ...(ngDevMode ? [{ debugName: "titleKlass" }] : []));
+    subtitleKlass = input('text-xs text-disable', ...(ngDevMode ? [{ debugName: "subtitleKlass" }] : []));
+    hintKlass = input('text-xs text-disable', ...(ngDevMode ? [{ debugName: "hintKlass" }] : []));
+    fileListKlass = input('mt-2 space-y-1', ...(ngDevMode ? [{ debugName: "fileListKlass" }] : []));
+    fileItemKlass = input('flex items-center justify-between rounded-md border border-border bg-bg px-3 py-2 text-sm text-fg', ...(ngDevMode ? [{ debugName: "fileItemKlass" }] : []));
+    clearButtonKlass = input('text-xs text-danger hover:text-danger-hover', ...(ngDevMode ? [{ debugName: "clearButtonKlass" }] : []));
+    // optional outputs (non-form usage)
+    valueChange = output();
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : []));
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    // visual state
+    dragActive = signal(false, ...(ngDevMode ? [{ debugName: "dragActive" }] : []));
+    writeValue(value) {
+        this._value.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    // computed classes
+    dropzoneClasses = computed(() => {
+        const base = 'relative w-full rounded-md border px-4 py-4 transition ' +
+            'bg-bg text-fg border-border ' +
+            'focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 focus-within:ring-offset-background';
+        const disabled = this.isDisabled() ? ' opacity-60 pointer-events-none' : ' cursor-pointer';
+        const active = this.dragActive()
+            ? ' border-primary ring-2 ring-primary ring-offset-2 ring-offset-background'
+            : '';
+        return `${base} ${disabled} ${active} ${this.dropzoneKlass()}`.trim();
+    }, ...(ngDevMode ? [{ debugName: "dropzoneClasses" }] : []));
+    openPicker() {
+        if (this.isDisabled())
+            return;
+        this.fileInput.nativeElement.click();
+    }
+    setFiles(next) {
+        this._value.set(next);
+        this.onChange(next);
+        this.valueChange.emit(next);
+    }
+    onNativeChange(event) {
+        if (this.isDisabled())
+            return;
+        const files = event.target.files;
+        const list = files ? Array.from(files) : [];
+        this.setFiles(list.length ? list : null);
+    }
+    onDropped(files) {
+        if (this.isDisabled())
+            return;
+        this.setFiles(files.length ? files : null);
+        // reset native input so selecting same file again still triggers change
+        this.fileInput.nativeElement.value = '';
+    }
+    clear() {
+        if (this.isDisabled())
+            return;
+        this.setFiles(null);
+        this.fileInput.nativeElement.value = '';
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    onDragActiveChange(active) {
+        this.dragActive.set(active);
+    }
+    trackByName = (_, f) => `${f.name}-${f.size}-${f.lastModified}`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngFileUpload, isStandalone: true, selector: "tng-file-upload", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, dropzoneKlass: { classPropertyName: "dropzoneKlass", publicName: "dropzoneKlass", isSignal: true, isRequired: false, transformFunction: null }, titleKlass: { classPropertyName: "titleKlass", publicName: "titleKlass", isSignal: true, isRequired: false, transformFunction: null }, subtitleKlass: { classPropertyName: "subtitleKlass", publicName: "subtitleKlass", isSignal: true, isRequired: false, transformFunction: null }, hintKlass: { classPropertyName: "hintKlass", publicName: "hintKlass", isSignal: true, isRequired: false, transformFunction: null }, fileListKlass: { classPropertyName: "fileListKlass", publicName: "fileListKlass", isSignal: true, isRequired: false, transformFunction: null }, fileItemKlass: { classPropertyName: "fileItemKlass", publicName: "fileItemKlass", isSignal: true, isRequired: false, transformFunction: null }, clearButtonKlass: { classPropertyName: "clearButtonKlass", publicName: "clearButtonKlass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngFileUpload),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<div [class]=\"rootKlass()\">\n  <!-- Hidden native input -->\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"sr-only\"\n    [disabled]=\"isDisabled()\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    (change)=\"onNativeChange($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Dropzone -->\n  <div\n    tngFileDropzone\n    [disabled]=\"isDisabled()\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    (filesDropped)=\"onDropped($event)\"\n    (dragActiveChange)=\"onDragActiveChange($event)\"\n    [class]=\"dropzoneClasses()\"\n    role=\"button\"\n    tabindex=\"0\"\n    (click)=\"openPicker()\"\n    (keydown.enter)=\"openPicker()\"\n    (keydown.space)=\"openPicker()\"\n  >\n    <div class=\"flex items-start justify-between gap-4\">\n      <div class=\"space-y-1\">\n        <div [class]=\"titleKlass()\">{{ title() }}</div>\n        <div [class]=\"subtitleKlass()\">{{ subtitle() }}</div>\n      </div>\n\n      @if (value()?.length) {\n        <button\n          type=\"button\"\n          [class]=\"clearButtonKlass()\"\n          (click)=\"$event.stopPropagation(); clear()\"\n        >\n          Clear\n        </button>\n      }\n    </div>\n\n    @if (accept()) {\n      <div class=\"mt-2\" [class]=\"hintKlass()\">\n        Accepted: {{ accept() }}\n      </div>\n    }\n  </div>\n\n  <!-- File list -->\n  @if (value()?.length) {\n    <div [class]=\"fileListKlass()\">\n      @for (f of value()!; track trackByName($index, f)) {\n        <div [class]=\"fileItemKlass()\">\n          <span class=\"truncate\">{{ f.name }}</span>\n          <span class=\"ml-3 text-xs text-disable\">\n            {{ (f.size / 1024).toFixed(1) }} KB\n          </span>\n        </div>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: TngFileDropzone, selector: "[tngFileDropzone]", inputs: ["disabled", "multiple", "accept"], outputs: ["filesDropped", "dragActiveChange"], exportAs: ["tngFileDropzone"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngFileUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-file-upload', standalone: true, imports: [TngFileDropzone], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngFileUpload),
+                            multi: true,
+                        },
+                    ], template: "<div [class]=\"rootKlass()\">\n  <!-- Hidden native input -->\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"sr-only\"\n    [disabled]=\"isDisabled()\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    (change)=\"onNativeChange($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Dropzone -->\n  <div\n    tngFileDropzone\n    [disabled]=\"isDisabled()\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    (filesDropped)=\"onDropped($event)\"\n    (dragActiveChange)=\"onDragActiveChange($event)\"\n    [class]=\"dropzoneClasses()\"\n    role=\"button\"\n    tabindex=\"0\"\n    (click)=\"openPicker()\"\n    (keydown.enter)=\"openPicker()\"\n    (keydown.space)=\"openPicker()\"\n  >\n    <div class=\"flex items-start justify-between gap-4\">\n      <div class=\"space-y-1\">\n        <div [class]=\"titleKlass()\">{{ title() }}</div>\n        <div [class]=\"subtitleKlass()\">{{ subtitle() }}</div>\n      </div>\n\n      @if (value()?.length) {\n        <button\n          type=\"button\"\n          [class]=\"clearButtonKlass()\"\n          (click)=\"$event.stopPropagation(); clear()\"\n        >\n          Clear\n        </button>\n      }\n    </div>\n\n    @if (accept()) {\n      <div class=\"mt-2\" [class]=\"hintKlass()\">\n        Accepted: {{ accept() }}\n      </div>\n    }\n  </div>\n\n  <!-- File list -->\n  @if (value()?.length) {\n    <div [class]=\"fileListKlass()\">\n      @for (f of value()!; track trackByName($index, f)) {\n        <div [class]=\"fileItemKlass()\">\n          <span class=\"truncate\">{{ f.name }}</span>\n          <span class=\"ml-3 text-xs text-disable\">\n            {{ (f.size / 1024).toFixed(1) }} KB\n          </span>\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput', { static: true }]
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], dropzoneKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropzoneKlass", required: false }] }], titleKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKlass", required: false }] }], subtitleKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitleKlass", required: false }] }], hintKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKlass", required: false }] }], fileListKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileListKlass", required: false }] }], fileItemKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileItemKlass", required: false }] }], clearButtonKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonKlass", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+class TngFormField {
+    // Get NgControl from projected child (input/select/custom CVA)
+    ngControl = contentChild(NgControl, { ...(ngDevMode ? { debugName: "ngControl" } : {}), descendants: true });
+    destroyRef = inject(DestroyRef);
+    /**
+     * Bridge Angular Forms mutable state (touched/dirty/errors) into signals world.
+     * We bump this tick on any control event so all computed() re-evaluate.
+     */
+    _tick = signal(0, ...(ngDevMode ? [{ debugName: "_tick" }] : []));
+    bump() {
+        this._tick.update((v) => v + 1);
+    }
+    /* =====================
+     * Content
+     * ===================== */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    /**
+     * Manual overrides:
+     * If provided, they take precedence over NgControl state.
+     */
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : [])); // manual error text (wins)
+    invalid = input(null, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    disabled = input(null, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Required mark:
+     * Reliable + explicit. (Auto-detecting Validators.required is not stable.)
+     */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /* =====================
+     * Variants
+     * ===================== */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /* =====================
+     * Theming / class hooks (section-wise)
+     * ===================== */
+    rootKlass = input('w-full', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    labelKlass = input('text-sm font-medium text-fg', ...(ngDevMode ? [{ debugName: "labelKlass" }] : []));
+    requiredMarkKlass = input('text-danger', ...(ngDevMode ? [{ debugName: "requiredMarkKlass" }] : []));
+    hintKlass = input('text-xs text-disable', ...(ngDevMode ? [{ debugName: "hintKlass" }] : []));
+    errorKlass = input('text-xs text-danger', ...(ngDevMode ? [{ debugName: "errorKlass" }] : []));
+    /** Wrapper around projected control */
+    controlShellKlass = input('', ...(ngDevMode ? [{ debugName: "controlShellKlass" }] : []));
+    prefixKlass = input('text-disable', ...(ngDevMode ? [{ debugName: "prefixKlass" }] : []));
+    suffixKlass = input('text-disable', ...(ngDevMode ? [{ debugName: "suffixKlass" }] : []));
+    footerKlass = input('mt-1 flex items-start justify-between gap-3', ...(ngDevMode ? [{ debugName: "footerKlass" }] : []));
+    /* =====================
+     * Control wiring
+     * ===================== */
+    ctrl = computed(() => this.ngControl()?.control ?? null, ...(ngDevMode ? [{ debugName: "ctrl" }] : []));
+    constructor() {
+        // Subscribe to control events and bump tick whenever form state changes.
+        effect(() => {
+            const c = this.ngControl()?.control;
+            if (!c)
+                return;
+            // Angular 17+ provides `events` stream (touched/dirty/etc). Fallback to value/status.
+            const anyCtrl = c;
+            const events$ = anyCtrl.events ?? merge(c.valueChanges ?? of(null), c.statusChanges ?? of(null));
+            events$
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.bump());
+            // initial bump so computed picks up current state
+            this.bump();
+        });
+    }
+    /* =====================
+     * Auto state from control
+     * ===================== */
+    autoDisabled = computed(() => {
+        this._tick();
+        return !!this.ctrl()?.disabled;
+    }, ...(ngDevMode ? [{ debugName: "autoDisabled" }] : []));
+    autoInvalid = computed(() => {
+        this._tick();
+        const c = this.ctrl();
+        if (!c)
+            return false;
+        // typical UX: show errors after touched or dirty
+        return !!c.invalid && (c.touched || c.dirty);
+    }, ...(ngDevMode ? [{ debugName: "autoInvalid" }] : []));
+    /** Prefer explicit inputs; fall back to form control. */
+    isDisabled = computed(() => this.disabled() ?? this.autoDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isInvalid = computed(() => this.invalid() ?? this.autoInvalid(), ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
+    isRequired = computed(() => this.required(), ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
+    /**
+     * Auto error message:
+     * - manual [error] wins
+     * - otherwise derive from control.errors
+     */
+    errorText = computed(() => {
+        this._tick();
+        const manual = this.error();
+        if (manual)
+            return manual;
+        const c = this.ctrl();
+        if (!c || !this.isInvalid())
+            return '';
+        const errors = c.errors ?? {};
+        if (errors['required'])
+            return 'This field is required';
+        if (errors['email'])
+            return 'Please enter a valid email';
+        if (errors['minlength']?.requiredLength)
+            return `Minimum ${errors['minlength'].requiredLength} characters`;
+        if (errors['maxlength']?.requiredLength)
+            return `Maximum ${errors['maxlength'].requiredLength} characters`;
+        if (errors['min']?.min != null)
+            return `Minimum value is ${errors['min'].min}`;
+        if (errors['max']?.max != null)
+            return `Maximum value is ${errors['max'].max}`;
+        return 'Invalid value';
+    }, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
+    showHint = computed(() => !!this.hint() && !this.errorText(), ...(ngDevMode ? [{ debugName: "showHint" }] : []));
+    showError = computed(() => !!this.errorText(), ...(ngDevMode ? [{ debugName: "showError" }] : []));
+    /* =====================
+     * Classes
+     * ===================== */
+    sizeShell = computed(() => {
+        switch (this.size()) {
+            case 'sm':
+                return 'px-2 py-1 text-sm';
+            case 'lg':
+                return 'px-4 py-3 text-base';
+            case 'md':
+            default:
+                return 'px-3 py-2 text-sm';
+        }
+    }, ...(ngDevMode ? [{ debugName: "sizeShell" }] : []));
+    sizeLabel = computed(() => {
+        switch (this.size()) {
+            case 'sm':
+                return 'text-xs';
+            case 'lg':
+                return 'text-base';
+            case 'md':
+            default:
+                return 'text-sm';
+        }
+    }, ...(ngDevMode ? [{ debugName: "sizeLabel" }] : []));
+    appearanceShell = computed(() => {
+        return this.appearance() === 'filled'
+            ? 'bg-alternate-background border-border'
+            : 'bg-bg border-border';
+    }, ...(ngDevMode ? [{ debugName: "appearanceShell" }] : []));
+    controlShellClasses = computed(() => {
+        // ensure this recomputes when form state changes
+        this._tick();
+        const base = 'w-full flex items-center gap-2 rounded-md border transition text-fg ' +
+            'focus-within:ring-2 focus-within:ring-primary ' +
+            'focus-within:ring-offset-2 focus-within:ring-offset-background';
+        const border = this.isInvalid() ? ' border-danger' : '';
+        const ring = this.isInvalid() ? ' focus-within:ring-danger' : '';
+        const disabled = this.isDisabled() ? ' opacity-60 pointer-events-none' : '';
+        return `${base} ${this.sizeShell()} ${this.appearanceShell()}${border}${ring}${disabled} ${this.controlShellKlass()}`.trim();
+    }, ...(ngDevMode ? [{ debugName: "controlShellClasses" }] : []));
+    labelClasses = computed(() => `${this.labelKlass()} ${this.sizeLabel()}`.trim(), ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngFormField, isStandalone: true, selector: "tng-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, labelKlass: { classPropertyName: "labelKlass", publicName: "labelKlass", isSignal: true, isRequired: false, transformFunction: null }, requiredMarkKlass: { classPropertyName: "requiredMarkKlass", publicName: "requiredMarkKlass", isSignal: true, isRequired: false, transformFunction: null }, hintKlass: { classPropertyName: "hintKlass", publicName: "hintKlass", isSignal: true, isRequired: false, transformFunction: null }, errorKlass: { classPropertyName: "errorKlass", publicName: "errorKlass", isSignal: true, isRequired: false, transformFunction: null }, controlShellKlass: { classPropertyName: "controlShellKlass", publicName: "controlShellKlass", isSignal: true, isRequired: false, transformFunction: null }, prefixKlass: { classPropertyName: "prefixKlass", publicName: "prefixKlass", isSignal: true, isRequired: false, transformFunction: null }, suffixKlass: { classPropertyName: "suffixKlass", publicName: "suffixKlass", isSignal: true, isRequired: false, transformFunction: null }, footerKlass: { classPropertyName: "footerKlass", publicName: "footerKlass", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"rootKlass()\">\n  @if (label()) {\n    <label class=\"mb-1 block\" [class]=\"labelClasses()\">\n      {{ label() }}\n      @if (isRequired()) {\n        <span [class]=\"requiredMarkKlass()\">&nbsp;*</span>\n      }\n    </label>\n  }\n\n  <div [class]=\"controlShellClasses()\">\n    <span [class]=\"prefixKlass()\">\n      <ng-content select=\"[tngPrefix]\" />\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <ng-content />\n    </div>\n\n    <span [class]=\"suffixKlass()\">\n      <ng-content select=\"[tngSuffix]\" />\n    </span>\n  </div>\n\n  @if (showHint() || showError()) {\n    <div [class]=\"footerKlass()\">\n      @if (showError()) {\n        <div [class]=\"errorKlass()\">{{ errorText() }}</div>\n      } @else {\n        <div [class]=\"hintKlass()\">{{ hint() }}</div>\n      }\n    </div>\n  }\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngFormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-form-field', standalone: true, template: "<div [class]=\"rootKlass()\">\n  @if (label()) {\n    <label class=\"mb-1 block\" [class]=\"labelClasses()\">\n      {{ label() }}\n      @if (isRequired()) {\n        <span [class]=\"requiredMarkKlass()\">&nbsp;*</span>\n      }\n    </label>\n  }\n\n  <div [class]=\"controlShellClasses()\">\n    <span [class]=\"prefixKlass()\">\n      <ng-content select=\"[tngPrefix]\" />\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <ng-content />\n    </div>\n\n    <span [class]=\"suffixKlass()\">\n      <ng-content select=\"[tngSuffix]\" />\n    </span>\n  </div>\n\n  @if (showHint() || showError()) {\n    <div [class]=\"footerKlass()\">\n      @if (showError()) {\n        <div [class]=\"errorKlass()\">{{ errorText() }}</div>\n      } @else {\n        <div [class]=\"hintKlass()\">{{ hint() }}</div>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { ...{ descendants: true }, isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], labelKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKlass", required: false }] }], requiredMarkKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredMarkKlass", required: false }] }], hintKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKlass", required: false }] }], errorKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKlass", required: false }] }], controlShellKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlShellKlass", required: false }] }], prefixKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixKlass", required: false }] }], suffixKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixKlass", required: false }] }], footerKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerKlass", required: false }] }] } });
+
+class TngNumberInput {
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    klass = input('', ...(ngDevMode ? [{ debugName: "klass" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    // For mobile keypad experience
+    inputmode = input('decimal', ...(ngDevMode ? [{ debugName: "inputmode" }] : []));
+    autocomplete = input('off', ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
+    // numeric constraints
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    step = input(null, ...(ngDevMode ? [{ debugName: "step" }] : [])); // e.g. 1, 0.01, 'any'
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    writeValue(value) {
+        this._value.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    classes = computed(() => (`h-10 w-full rounded-md px-3 text-sm ` +
+        `border border-border bg-bg text-foreground ` +
+        `placeholder:text-muted ` +
+        `focus-visible:outline-none ` +
+        `focus-visible:ring-2 focus-visible:ring-primary ` +
+        `focus-visible:ring-offset-2 focus-visible:ring-offset-background ` +
+        `disabled:opacity-50 disabled:pointer-events-none ` +
+        `read-only:bg-muted/30 read-only:text-muted ` +
+        this.klass()).trim(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    onInput(event) {
+        const raw = event.target.value;
+        // empty means null
+        if (raw === '') {
+            this._value.set(null);
+            this.onChange(null);
+            return;
+        }
+        const next = Number(raw);
+        // protect forms from NaN
+        if (Number.isNaN(next)) {
+            this._value.set(null);
+            this.onChange(null);
+            return;
+        }
+        this._value.set(next);
+        this.onChange(next);
+    }
+    onBlur() {
+        // optional clamp on blur (Material doesn't clamp automatically, but it's often nice)
+        const v = this._value();
+        if (v !== null) {
+            const min = this.min();
+            const max = this.max();
+            let clamped = v;
+            if (min !== null)
+                clamped = Math.max(min, clamped);
+            if (max !== null)
+                clamped = Math.min(max, clamped);
+            if (clamped !== v) {
+                this._value.set(clamped);
+                this.onChange(clamped);
+            }
+        }
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngNumberInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TngNumberInput, isStandalone: true, selector: "tng-number-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, klass: { classPropertyName: "klass", publicName: "klass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngNumberInput),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<input\n  type=\"number\"\n  [id]=\"id() || null\"\n  [name]=\"name() || null\"\n  [disabled]=\"isDisabled()\"\n  [readOnly]=\"readonly()\"\n  [class]=\"classes()\"\n  [value]=\"value() ?? ''\"\n  [attr.placeholder]=\"placeholder() || null\"\n  [attr.autocomplete]=\"autocomplete() || null\"\n  [attr.inputmode]=\"inputmode() || null\"\n  [attr.min]=\"min() ?? null\"\n  [attr.max]=\"max() ?? null\"\n  [attr.step]=\"step() ?? null\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n/>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngNumberInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-number-input', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngNumberInput),
+                            multi: true,
+                        },
+                    ], template: "<input\n  type=\"number\"\n  [id]=\"id() || null\"\n  [name]=\"name() || null\"\n  [disabled]=\"isDisabled()\"\n  [readOnly]=\"readonly()\"\n  [class]=\"classes()\"\n  [value]=\"value() ?? ''\"\n  [attr.placeholder]=\"placeholder() || null\"\n  [attr.autocomplete]=\"autocomplete() || null\"\n  [attr.inputmode]=\"inputmode() || null\"\n  [attr.min]=\"min() ?? null\"\n  [attr.max]=\"max() ?? null\"\n  [attr.step]=\"step() ?? null\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n/>\n" }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], klass: [{ type: i0.Input, args: [{ isSignal: true, alias: "klass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
+
+class TngRadioButton {
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /* =====================
+     * Theming / class hooks (section-wise)
+     * ===================== */
+    /** Root <label> */
+    rootKlass = input('inline-flex items-center gap-2 cursor-pointer select-none', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    /** <input type="radio"> */
+    inputKlass = input('', ...(ngDevMode ? [{ debugName: "inputKlass" }] : []));
+    /** Label <span> */
+    labelKlass = input('text-sm text-fg', ...(ngDevMode ? [{ debugName: "labelKlass" }] : []));
+    _formValue = signal(null, ...(ngDevMode ? [{ debugName: "_formValue" }] : []));
+    isChecked = computed(() => this._formValue() === this.value(), ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    writeValue(value) {
+        this._formValue.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    /** Final classes */
+    classes = computed(() => (
+    // size + shape
+    `h-4 w-4 rounded-full ` +
+        // theme tokens
+        `border border-border bg-bg ` +
+        `accent-primary ` +
+        // focus ring
+        `focus-visible:outline-none ` +
+        `focus-visible:ring-2 focus-visible:ring-primary ` +
+        `focus-visible:ring-offset-2 focus-visible:ring-offset-background ` +
+        // disabled
+        `disabled:opacity-50 disabled:pointer-events-none ` +
+        // user override
+        this.inputKlass()).trim(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    onSelect(event) {
+        if (this.isDisabled())
+            return;
+        const checked = event.target.checked;
+        if (checked) {
+            this._formValue.set(this.value());
+            this.onChange(this.value());
+            this.onTouched();
+        }
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngRadioButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngRadioButton, isStandalone: true, selector: "tng-radio-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, inputKlass: { classPropertyName: "inputKlass", publicName: "inputKlass", isSignal: true, isRequired: false, transformFunction: null }, labelKlass: { classPropertyName: "labelKlass", publicName: "labelKlass", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngRadioButton),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label [class]=\"rootKlass()\">\n  <input\n    type=\"radio\"\n    [id]=\"id() || null\"\n    [name]=\"name() || null\"\n    [value]=\"value()\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [class]=\"classes()\"\n    (change)=\"onSelect($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (label()) {\n    <span [class]=\"labelKlass()\">\n      {{ label() }}\n    </span>\n  }\n</label>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngRadioButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-radio-button', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngRadioButton),
+                            multi: true,
+                        },
+                    ], template: "<label [class]=\"rootKlass()\">\n  <input\n    type=\"radio\"\n    [id]=\"id() || null\"\n    [name]=\"name() || null\"\n    [value]=\"value()\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [class]=\"classes()\"\n    (change)=\"onSelect($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (label()) {\n    <span [class]=\"labelKlass()\">\n      {{ label() }}\n    </span>\n  }\n</label>\n" }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], inputKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputKlass", required: false }] }], labelKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKlass", required: false }] }] } });
+
+class TngSelect {
+    /* =====================
+     * Projected templates
+     * ===================== */
+    optionTpl;
+    valueTpl;
+    triggerEl;
+    // Delegate list navigation keys to OptionList
+    optionList;
+    /* =====================
+     * Inputs / Outputs
+     * ===================== */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    displayWith = input((v) => String(v), ...(ngDevMode ? [{ debugName: "displayWith" }] : []));
+    selected = output();
+    closed = output();
+    /* =====================
+     * Theming
+     * ===================== */
+    rootKlass = input('relative', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    triggerKlass = input([
+        'w-full',
+        'flex items-center justify-between',
+        'border border-border rounded-md',
+        'px-3 py-2',
+        'text-sm',
+        'bg-bg text-fg',
+        'focus:outline-none',
+        'focus:ring-2 focus:ring-primary',
+    ].join(' '), ...(ngDevMode ? [{ debugName: "triggerKlass" }] : []));
+    valueKlass = input('truncate text-left', ...(ngDevMode ? [{ debugName: "valueKlass" }] : []));
+    placeholderKlass = input('text-disable', ...(ngDevMode ? [{ debugName: "placeholderKlass" }] : []));
+    iconKlass = input('ml-2 text-disable', ...(ngDevMode ? [{ debugName: "iconKlass" }] : []));
+    /* =====================
+     * State
+     * ===================== */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    selectedValue = signal(null, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
+    usingCva = false;
+    /* =====================
+     * CVA
+     * ===================== */
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        effect(() => {
+            this.isDisabled.set(this.disabled());
+            if (this.isDisabled())
+                this.close('programmatic');
+        });
+        effect(() => {
+            const v = this.value();
+            if (this.usingCva)
+                return;
+            this.selectedValue.set(v);
+        });
+    }
+    writeValue(value) {
+        this.usingCva = true;
+        this.selectedValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.usingCva = true;
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+        if (isDisabled)
+            this.close('programmatic');
+    }
+    /* =====================
+     * Helpers
+     * ===================== */
+    display(item) {
+        return item == null ? '' : this.displayWith()(item);
+    }
+    currentValue() {
+        return this.selectedValue();
+    }
+    triggerClasses = computed(() => (this.triggerKlass() + (this.isDisabled() ? ' opacity-60 pointer-events-none' : '')).trim(), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
+    /* =====================
+     * Overlay state
+     * ===================== */
+    open(_reason) {
+        if (this.isDisabled())
+            return;
+        this.isOpen.set(true);
+        const current = this.selectedValue();
+        if (current != null) {
+            const idx = this.options().indexOf(current);
+            this.activeIndex.set(idx >= 0 ? idx : 0);
+        }
+        else {
+            this.activeIndex.set(this.options().length ? 0 : -1);
+        }
+        void _reason;
+    }
+    close(reason) {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.activeIndex.set(-1);
+        this.closed.emit(reason);
+        queueMicrotask(() => {
+            this.triggerEl.nativeElement.focus();
+        });
+    }
+    onOverlayOpenChange(open) {
+        if (this.isDisabled()) {
+            this.isOpen.set(false);
+            return;
+        }
+        if (open)
+            this.open('programmatic');
+        else
+            this.close('programmatic');
+    }
+    onOverlayClosed(reason) {
+        this.close(reason);
+    }
+    /* =====================
+     * UI Events
+     * ===================== */
+    onTriggerClick() {
+        if (this.isDisabled())
+            return;
+        this.isOpen() ? this.close('programmatic') : this.open('programmatic');
+    }
+    onBlur() {
+        this.onTouched();
+        // minimal safer blur (prevents weird immediate refocus issues)
+        queueMicrotask(() => {
+            if (document.activeElement === this.triggerEl.nativeElement)
+                return;
+            this.close('blur');
+        });
+    }
+    onKeydown(ev) {
+        if (this.isDisabled())
+            return;
+        // Escape closes
+        if (ev.key === 'Escape' && this.isOpen()) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.close('escape');
+            return;
+        }
+        // Open on ArrowDown/ArrowUp when closed (and delegate once mounted)
+        if (!this.isOpen() && (ev.key === 'ArrowDown' || ev.key === 'ArrowUp')) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.open('programmatic');
+            requestAnimationFrame(() => {
+                const replay = this.cloneKeyboardEvent(ev);
+                this.optionList?.onKeydown(replay);
+            });
+            return;
+        }
+        if (!this.isOpen())
+            return;
+        // Delegate list-navigation keys to OptionList (including Enter)
+        if (!this.isListNavigationKey(ev))
+            return;
+        // WARNING: DO NOT preventDefault here — OptionList ignores defaultPrevented events
+        ev.stopPropagation();
+        this.optionList?.onKeydown(ev);
+    }
+    isListNavigationKey(ev) {
+        switch (ev.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+            case 'Home':
+            case 'End':
+            case 'PageDown':
+            case 'PageUp':
+            case 'Enter':
+                return true;
+            default:
+                return false;
+        }
+    }
+    cloneKeyboardEvent(ev) {
+        return new KeyboardEvent(ev.type, {
+            key: ev.key,
+            code: ev.code,
+            location: ev.location,
+            repeat: ev.repeat,
+            ctrlKey: ev.ctrlKey,
+            shiftKey: ev.shiftKey,
+            altKey: ev.altKey,
+            metaKey: ev.metaKey,
+            bubbles: true,
+            cancelable: true,
+        });
+    }
+    /* =====================
+     * OptionList wiring
+     * ===================== */
+    onActiveIndexChange(i) {
+        this.activeIndex.set(i);
+    }
+    requestSelectActive() {
+        const i = this.activeIndex();
+        const item = this.options()[i];
+        if (item !== undefined)
+            this.select(item);
+    }
+    /* =====================
+     * Selection
+     * ===================== */
+    select(item) {
+        if (this.isDisabled())
+            return;
+        this.selectedValue.set(item);
+        this.onChange(item);
+        this.onTouched();
+        this.selected.emit(item);
+        this.close('selection');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngSelect, isStandalone: true, selector: "tng-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", 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 }, valueKlass: { classPropertyName: "valueKlass", publicName: "valueKlass", isSignal: true, isRequired: false, transformFunction: null }, placeholderKlass: { classPropertyName: "placeholderKlass", publicName: "placeholderKlass", isSignal: true, isRequired: false, transformFunction: null }, iconKlass: { classPropertyName: "iconKlass", publicName: "iconKlass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", closed: "closed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngSelect),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "optionTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }, { propertyName: "valueTpl", first: true, predicate: ["valueTpl"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, static: true }, { propertyName: "optionList", first: true, predicate: TngOptionList, descendants: true }], ngImport: i0, template: "<div [class]=\"rootKlass()\">\n  <!-- Trigger -->\n  <button\n    #triggerEl\n    type=\"button\"\n    [class]=\"triggerClasses()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"onTriggerClick()\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n  >\n    <span [class]=\"valueKlass()\">\n      @if (currentValue()) {\n        @if (valueTpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"valueTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: currentValue()! }\"\n          />\n        } @else {\n          {{ display(currentValue()) }}\n        }\n      } @else {\n        <span [class]=\"placeholderKlass()\">{{ placeholder() }}</span>\n      }\n    </span>\n\n    <span [class]=\"iconKlass()\">\u25BE</span>\n  </button>\n\n  <!-- Overlay -->\n  <tng-overlay-ref\n    #overlayRef=\"tngOverlayRef\"\n    [open]=\"isOpen()\"\n    (openChange)=\"onOverlayOpenChange($event)\"\n    (closed)=\"onOverlayClosed($event)\"\n  >\n    <tng-connected-overlay\n      [open]=\"overlayRef.isOpen()\"\n      [anchor]=\"triggerEl\"\n      placement=\"bottom-start\"\n      width=\"anchor\"\n      (closed)=\"overlayRef.close($event)\"\n    >\n      <tng-overlay-panel>\n        <tng-option-list\n          [items]=\"options()\"\n          [activeIndex]=\"activeIndex()\"\n          [displayWith]=\"displayWith()\"\n          [optionTemplate]=\"optionTpl ?? null\"\n          [loop]=\"false\"\n          [typeahead]=\"false\"\n          (activeIndexChange)=\"onActiveIndexChange($event)\"\n          (requestSelectActive)=\"requestSelectActive()\"\n          (optionMouseDown)=\"select($event.item)\"\n          (optionHover)=\"activeIndex.set($event)\"\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: TngOptionList, selector: "tng-option-list", inputs: ["modal", "panelKlass", "restoreFocus", "autoCapture", "deferCaptureElements", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "tabindex", "optionTemplate", "items", "activeIndex", "displayWith", "emptyText", "containerKlass", "optionKlass", "optionActiveKlass", "optionInactiveKlass", "emptyKlass", "propagateKeys", "keyboard", "loop", "selectOnEnter", "typeahead", "typeaheadMode", "typeaheadResetMs", "pageJumpSize"], outputs: ["optionMouseDown", "optionHover", "activeIndexChange", "requestSelectActive", "requestTypeaheadMatch", "keyStroke"] }, { 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: TngSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-select', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        TngConnectedOverlay,
+                        TngOverlayPanel,
+                        TngOptionList,
+                        TngOverlayRef,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngSelect),
+                            multi: true,
+                        },
+                    ], template: "<div [class]=\"rootKlass()\">\n  <!-- Trigger -->\n  <button\n    #triggerEl\n    type=\"button\"\n    [class]=\"triggerClasses()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"onTriggerClick()\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n  >\n    <span [class]=\"valueKlass()\">\n      @if (currentValue()) {\n        @if (valueTpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"valueTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: currentValue()! }\"\n          />\n        } @else {\n          {{ display(currentValue()) }}\n        }\n      } @else {\n        <span [class]=\"placeholderKlass()\">{{ placeholder() }}</span>\n      }\n    </span>\n\n    <span [class]=\"iconKlass()\">\u25BE</span>\n  </button>\n\n  <!-- Overlay -->\n  <tng-overlay-ref\n    #overlayRef=\"tngOverlayRef\"\n    [open]=\"isOpen()\"\n    (openChange)=\"onOverlayOpenChange($event)\"\n    (closed)=\"onOverlayClosed($event)\"\n  >\n    <tng-connected-overlay\n      [open]=\"overlayRef.isOpen()\"\n      [anchor]=\"triggerEl\"\n      placement=\"bottom-start\"\n      width=\"anchor\"\n      (closed)=\"overlayRef.close($event)\"\n    >\n      <tng-overlay-panel>\n        <tng-option-list\n          [items]=\"options()\"\n          [activeIndex]=\"activeIndex()\"\n          [displayWith]=\"displayWith()\"\n          [optionTemplate]=\"optionTpl ?? null\"\n          [loop]=\"false\"\n          [typeahead]=\"false\"\n          (activeIndexChange)=\"onActiveIndexChange($event)\"\n          (requestSelectActive)=\"requestSelectActive()\"\n          (optionMouseDown)=\"select($event.item)\"\n          (optionHover)=\"activeIndex.set($event)\"\n        />\n      </tng-overlay-panel>\n    </tng-connected-overlay>\n  </tng-overlay-ref>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { optionTpl: [{
+                type: ContentChild,
+                args: ['optionTpl', { read: TemplateRef }]
+            }], valueTpl: [{
+                type: ContentChild,
+                args: ['valueTpl', { read: TemplateRef }]
+            }], triggerEl: [{
+                type: ViewChild,
+                args: ['triggerEl', { static: true }]
+            }], optionList: [{
+                type: ViewChild,
+                args: [TngOptionList]
+            }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], closed: [{ type: i0.Output, args: ["closed"] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], triggerKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerKlass", required: false }] }], valueKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKlass", required: false }] }], placeholderKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKlass", required: false }] }], iconKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconKlass", required: false }] }] } });
+
+class TngSlider {
+    // ids
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    // label / accessibility
+    ariaLabel = input('Slider', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    // slider config
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+    // disabled
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Controlled usage (Angular 21 signals):
+     * <tng-slider [value]="v()" (valueChange)="v.set($event)" />
+     *
+     * When `value` is provided (not null), it becomes the source of truth.
+     */
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    valueChange = output();
+    // theming / section-wise klass hooks
+    rootKlass = input('w-full', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    labelKlass = input('text-sm text-fg', ...(ngDevMode ? [{ debugName: "labelKlass" }] : []));
+    trackKlass = input('', ...(ngDevMode ? [{ debugName: "trackKlass" }] : [])); // base track
+    fillKlass = input('', ...(ngDevMode ? [{ debugName: "fillKlass" }] : [])); // filled part
+    thumbKlass = input('', ...(ngDevMode ? [{ debugName: "thumbKlass" }] : [])); // thumb
+    rangeKlass = input('', ...(ngDevMode ? [{ debugName: "rangeKlass" }] : [])); // native input
+    _value = signal(0, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    /** effective value: controlled `value` wins when provided */
+    currentValue = computed(() => {
+        const controlled = this.value();
+        return controlled ?? this._value();
+    }, ...(ngDevMode ? [{ debugName: "currentValue" }] : []));
+    clampedValue = computed(() => {
+        const min = this.min();
+        const max = this.max();
+        const v = this.currentValue();
+        return Math.min(max, Math.max(min, v));
+    }, ...(ngDevMode ? [{ debugName: "clampedValue" }] : []));
+    percent = computed(() => {
+        const min = this.min();
+        const max = this.max();
+        const v = this.clampedValue();
+        const span = max - min;
+        if (span <= 0)
+            return 0;
+        return ((v - min) / span) * 100;
+    }, ...(ngDevMode ? [{ debugName: "percent" }] : []));
+    // classes (Tailng theme tokens)
+    trackClasses = computed(() => {
+        const base = 'relative h-2 w-full rounded-full border border-primary bg-on-primary';
+        const disabled = this.isDisabled() ? ' opacity-60 pointer-events-none' : '';
+        return `${base}${disabled} ${this.trackKlass()}`.trim();
+    }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : []));
+    fillClasses = computed(() => {
+        const base = 'absolute left-0 top-0 h-full rounded-full bg-primary';
+        return `${base} ${this.fillKlass()}`.trim();
+    }, ...(ngDevMode ? [{ debugName: "fillClasses" }] : []));
+    thumbClasses = computed(() => {
+        const base = 'absolute top-1/2 -translate-y-1/2 h-4 w-4 rounded-full bg-primary border border-primary ' +
+            'shadow transition-transform';
+        const disabled = this.isDisabled() ? ' opacity-60 pointer-events-none' : '';
+        return `${base}${disabled} ${this.thumbKlass()}`.trim();
+    }, ...(ngDevMode ? [{ debugName: "thumbClasses" }] : []));
+    rangeClasses = computed(() => {
+        // make native range invisible but still interactive + keyboard accessible
+        const base = 'absolute inset-0 h-full w-full cursor-pointer opacity-0 ' +
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ' +
+            'focus-visible:ring-offset-2 focus-visible:ring-offset-background';
+        const disabled = this.isDisabled() ? ' cursor-not-allowed' : '';
+        return `${base}${disabled} ${this.rangeKlass()}`.trim();
+    }, ...(ngDevMode ? [{ debugName: "rangeClasses" }] : []));
+    /* =====================
+     * CVA
+     * ===================== */
+    writeValue(value) {
+        this._value.set(value ?? this.min());
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    /* =====================
+     * Events
+     * ===================== */
+    onInput(ev) {
+        if (this.isDisabled())
+            return;
+        const raw = ev.target.value;
+        const next = Number(raw);
+        // internal (CVA path)
+        this._value.set(next);
+        this.onChange(next);
+        // controlled (signal) path
+        this.valueChange.emit(next);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TngSlider, isStandalone: true, selector: "tng-slider", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, labelKlass: { classPropertyName: "labelKlass", publicName: "labelKlass", isSignal: true, isRequired: false, transformFunction: null }, trackKlass: { classPropertyName: "trackKlass", publicName: "trackKlass", isSignal: true, isRequired: false, transformFunction: null }, fillKlass: { classPropertyName: "fillKlass", publicName: "fillKlass", isSignal: true, isRequired: false, transformFunction: null }, thumbKlass: { classPropertyName: "thumbKlass", publicName: "thumbKlass", isSignal: true, isRequired: false, transformFunction: null }, rangeKlass: { classPropertyName: "rangeKlass", publicName: "rangeKlass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngSlider),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div [class]=\"rootKlass()\">\n  <!-- Visual slider -->\n  <div class=\"relative w-full h-6\">\n    <!-- Track -->\n    <div [class]=\"trackClasses()\">\n      <!-- Fill -->\n      <div\n        [class]=\"fillClasses()\"\n        [style.width.%]=\"percent()\"\n      ></div>\n\n      <!-- Thumb -->\n      <div\n        [class]=\"thumbClasses()\"\n        [style.left.%]=\"percent()\"\n        style=\"transform: translate(-50%, -50%);\"\n      ></div>\n\n      <!-- Native range (interactive) -->\n      <input\n        type=\"range\"\n        [id]=\"id() || null\"\n        [name]=\"name() || null\"\n        [min]=\"min()\"\n        [max]=\"max()\"\n        [step]=\"step()\"\n        [value]=\"clampedValue()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [class]=\"rangeClasses()\"\n        (input)=\"onInput($event)\"\n        (blur)=\"onBlur()\"\n      />\n    </div>\n  </div>\n\n  <!-- Value (optional simple display; remove if you don't want it) -->\n  <div class=\"mt-1 text-xs text-disable\">\n    {{ clampedValue() }}\n  </div>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSlider, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-slider', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngSlider),
+                            multi: true,
+                        },
+                    ], template: "<div [class]=\"rootKlass()\">\n  <!-- Visual slider -->\n  <div class=\"relative w-full h-6\">\n    <!-- Track -->\n    <div [class]=\"trackClasses()\">\n      <!-- Fill -->\n      <div\n        [class]=\"fillClasses()\"\n        [style.width.%]=\"percent()\"\n      ></div>\n\n      <!-- Thumb -->\n      <div\n        [class]=\"thumbClasses()\"\n        [style.left.%]=\"percent()\"\n        style=\"transform: translate(-50%, -50%);\"\n      ></div>\n\n      <!-- Native range (interactive) -->\n      <input\n        type=\"range\"\n        [id]=\"id() || null\"\n        [name]=\"name() || null\"\n        [min]=\"min()\"\n        [max]=\"max()\"\n        [step]=\"step()\"\n        [value]=\"clampedValue()\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [class]=\"rangeClasses()\"\n        (input)=\"onInput($event)\"\n        (blur)=\"onBlur()\"\n      />\n    </div>\n  </div>\n\n  <!-- Value (optional simple display; remove if you don't want it) -->\n  <div class=\"mt-1 text-xs text-disable\">\n    {{ clampedValue() }}\n  </div>\n</div>\n" }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], labelKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKlass", required: false }] }], trackKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackKlass", required: false }] }], fillKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillKlass", required: false }] }], thumbKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbKlass", required: false }] }], rangeKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeKlass", required: false }] }] } });
+
+class TngSlideToggle {
+    // ids
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    // texts
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    // allow controlled usage (signals) in addition to CVA
+    checked = input(null, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    checkedChange = output();
+    // theming / class hooks (section-wise)
+    rootKlass = input('inline-flex items-center gap-2 select-none', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    trackKlass = input('', ...(ngDevMode ? [{ debugName: "trackKlass" }] : []));
+    thumbKlass = input('', ...(ngDevMode ? [{ debugName: "thumbKlass" }] : []));
+    labelKlass = input('text-sm text-fg', ...(ngDevMode ? [{ debugName: "labelKlass" }] : []));
+    inputKlass = input('sr-only', ...(ngDevMode ? [{ debugName: "inputKlass" }] : []));
+    _value = signal(false, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    /** effective value: controlled `checked` wins when provided */
+    value = computed(() => (this.checked() ?? this._value()), ...(ngDevMode ? [{ debugName: "value" }] : []));
+    writeValue(value) {
+        this._value.set(value ?? false);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    trackClasses = computed(() => {
+        const base = 'relative inline-flex h-6 w-11 items-center rounded-full border transition-colors duration-200 ' +
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ' +
+            'focus-visible:ring-offset-2 focus-visible:ring-offset-background';
+        const stateOn = 'bg-primary border-primary';
+        const stateOff = 'bg-on-primary border-primary';
+        const disabled = this.isDisabled() ? ' opacity-60 pointer-events-none' : '';
+        const state = this.value() ? stateOn : stateOff;
+        return `${base} ${state}${disabled} ${this.trackKlass()}`.trim();
+    }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : []));
+    thumbClasses = computed(() => {
+        const base = 'inline-block h-5 w-5 rounded-full shadow transition-transform duration-200';
+        const posOn = 'translate-x-5';
+        const posOff = 'translate-x-1';
+        const colorOn = 'bg-on-primary';
+        const colorOff = 'bg-primary';
+        const pos = this.value() ? posOn : posOff;
+        const color = this.value() ? colorOn : colorOff;
+        return `${base} ${pos} ${color} ${this.thumbKlass()}`.trim();
+    }, ...(ngDevMode ? [{ debugName: "thumbClasses" }] : []));
+    onToggle(ev) {
+        if (this.isDisabled())
+            return;
+        const next = ev.target.checked;
+        // internal (CVA path)
+        this._value.set(next);
+        this.onChange(next);
+        this.onTouched();
+        // controlled usage (signal binding path)
+        this.checkedChange.emit(next);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSlideToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TngSlideToggle, isStandalone: true, selector: "tng-slide-toggle", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, trackKlass: { classPropertyName: "trackKlass", publicName: "trackKlass", isSignal: true, isRequired: false, transformFunction: null }, thumbKlass: { classPropertyName: "thumbKlass", publicName: "thumbKlass", isSignal: true, isRequired: false, transformFunction: null }, labelKlass: { classPropertyName: "labelKlass", publicName: "labelKlass", isSignal: true, isRequired: false, transformFunction: null }, inputKlass: { classPropertyName: "inputKlass", publicName: "inputKlass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngSlideToggle),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label [class]=\"rootKlass()\">\n  <input\n    type=\"checkbox\"\n    [id]=\"id() || null\"\n    [name]=\"name() || null\"\n    [checked]=\"value()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [class]=\"inputKlass()\"\n    (change)=\"onToggle($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <span [class]=\"trackClasses()\" role=\"switch\" [attr.aria-checked]=\"value()\">\n    <span [class]=\"thumbClasses()\"></span>\n  </span>\n\n  @if (label()) {\n    <span [class]=\"labelKlass()\">\n      {{ label() }}\n    </span>\n  }\n</label>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngSlideToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-slide-toggle', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngSlideToggle),
+                            multi: true,
+                        },
+                    ], template: "<label [class]=\"rootKlass()\">\n  <input\n    type=\"checkbox\"\n    [id]=\"id() || null\"\n    [name]=\"name() || null\"\n    [checked]=\"value()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [class]=\"inputKlass()\"\n    (change)=\"onToggle($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <span [class]=\"trackClasses()\" role=\"switch\" [attr.aria-checked]=\"value()\">\n    <span [class]=\"thumbClasses()\"></span>\n  </span>\n\n  @if (label()) {\n    <span [class]=\"labelKlass()\">\n      {{ label() }}\n    </span>\n  }\n</label>\n" }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], trackKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackKlass", required: false }] }], thumbKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbKlass", required: false }] }], labelKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKlass", required: false }] }], inputKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputKlass", required: false }] }] } });
+
+class TngTextarea {
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    klass = input('', ...(ngDevMode ? [{ debugName: "klass" }] : []));
+    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this._value.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    classes = computed(() => (`w-full rounded-md border border-gray-300 px-3 py-2 text-sm ` +
+        `focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary ` +
+        `disabled:opacity-50 disabled:pointer-events-none ${this.klass()}`).trim(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    onInput(event) {
+        const next = event.target.value;
+        this._value.set(next);
+        this.onChange(next);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TngTextarea, isStandalone: true, selector: "tng-textarea", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, klass: { classPropertyName: "klass", publicName: "klass", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngTextarea),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<textarea\n  [disabled]=\"isDisabled()\"\n  [placeholder]=\"placeholder()\"\n  [rows]=\"rows()\"\n  [class]=\"classes()\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n></textarea>\n\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngTextarea, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-textarea', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngTextarea),
+                            multi: true,
+                        },
+                    ], template: "<textarea\n  [disabled]=\"isDisabled()\"\n  [placeholder]=\"placeholder()\"\n  [rows]=\"rows()\"\n  [class]=\"classes()\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n></textarea>\n\n" }]
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], klass: [{ type: i0.Input, args: [{ isSignal: true, alias: "klass", required: false }] }] } });
+
+class TngTextInput {
+    /* ─────────────────────────
+     * Inputs (public API)
+     * ───────────────────────── */
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    autocomplete = input('off', ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
+    inputmode = input('text', ...(ngDevMode ? [{ debugName: "inputmode" }] : []));
+    minlength = input(null, ...(ngDevMode ? [{ debugName: "minlength" }] : []));
+    maxlength = input(null, ...(ngDevMode ? [{ debugName: "maxlength" }] : []));
+    pattern = input(null, ...(ngDevMode ? [{ debugName: "pattern" }] : []));
+    /**
+     * Prefix: non-clickable by default (safer UX).
+     * If you want clickable prefix, set prefixClickable=true and use a <button tngPrefix>.
+     */
+    prefixClickable = input(false, ...(ngDevMode ? [{ debugName: "prefixClickable" }] : []));
+    /* ─────────────────────────
+     * Klass hooks (theming)
+     * ───────────────────────── */
+    rootKlass = input('', ...(ngDevMode ? [{ debugName: "rootKlass" }] : []));
+    inputKlass = input('', ...(ngDevMode ? [{ debugName: "inputKlass" }] : []));
+    prefixKlass = input('', ...(ngDevMode ? [{ debugName: "prefixKlass" }] : []));
+    suffixKlass = input('', ...(ngDevMode ? [{ debugName: "suffixKlass" }] : []));
+    /* ─────────────────────────
+     * Internal value handling
+     * ───────────────────────── */
+    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    /* ─────────────────────────
+     * Disabled state (forms + input)
+     * ───────────────────────── */
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    /* ─────────────────────────
+     * ControlValueAccessor
+     * ───────────────────────── */
+    writeValue(value) {
+        this._value.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /* ─────────────────────────
+     * Klass finals (defaults + overrides)
+     * ───────────────────────── */
+    rootKlassFinal = computed(() => this.join('flex h-10 w-full items-center rounded-md border border-border bg-bg text-foreground', 'focus-within:border-transparent', 'focus-within:ring-2 focus-within:ring-primary', 'focus-within:ring-offset-1 focus-within:ring-offset-background', this.isDisabled() ? 'pointer-events-none opacity-50' : '', this.readonly() ? 'bg-muted/30 text-muted' : '', this.rootKlass()), ...(ngDevMode ? [{ debugName: "rootKlassFinal" }] : []));
+    inputKlassFinal = computed(() => this.join('h-full min-w-0 flex-1 bg-transparent px-3 text-sm outline-none placeholder:text-muted', this.inputKlass()), ...(ngDevMode ? [{ debugName: "inputKlassFinal" }] : []));
+    prefixKlassFinal = computed(() => this.join(
+    // spacing is provided by projected element classes; wrapper stays minimal
+    this.prefixClickable() ? '' : 'pointer-events-none', this.prefixKlass()), ...(ngDevMode ? [{ debugName: "prefixKlassFinal" }] : []));
+    suffixKlassFinal = computed(() => this.join(this.suffixKlass()), ...(ngDevMode ? [{ debugName: "suffixKlassFinal" }] : []));
+    /* ─────────────────────────
+     * IME-safe input handling
+     * ───────────────────────── */
+    composing = false;
+    onCompositionStart() {
+        this.composing = true;
+    }
+    onCompositionEnd(event) {
+        this.composing = false;
+        this.commitValue(event);
+    }
+    onInput(event) {
+        if (this.composing)
+            return;
+        this.commitValue(event);
+    }
+    commitValue(event) {
+        const next = event.target.value;
+        this._value.set(next);
+        this.onChange(next);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    join(...parts) {
+        return parts.map((p) => (p ?? '').trim()).filter(Boolean).join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngTextInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TngTextInput, isStandalone: true, selector: "tng-text-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, prefixClickable: { classPropertyName: "prefixClickable", publicName: "prefixClickable", isSignal: true, isRequired: false, transformFunction: null }, rootKlass: { classPropertyName: "rootKlass", publicName: "rootKlass", isSignal: true, isRequired: false, transformFunction: null }, inputKlass: { classPropertyName: "inputKlass", publicName: "inputKlass", isSignal: true, isRequired: false, transformFunction: null }, prefixKlass: { classPropertyName: "prefixKlass", publicName: "prefixKlass", isSignal: true, isRequired: false, transformFunction: null }, suffixKlass: { classPropertyName: "suffixKlass", publicName: "suffixKlass", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngTextInput),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div [class]=\"rootKlassFinal()\">\n  <span [class]=\"prefixKlassFinal()\">\n    <ng-content select=\"[tngPrefix]\"></ng-content>\n  </span>\n\n  <input\n    [id]=\"id() || null\"\n    [name]=\"name() || null\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"readonly()\"\n    [placeholder]=\"placeholder()\"\n    [autocomplete]=\"autocomplete()\"\n    [class]=\"inputKlassFinal()\"\n    [value]=\"value()\"\n    [attr.inputmode]=\"inputmode() || null\"\n    [attr.minlength]=\"minlength() ?? null\"\n    [attr.maxlength]=\"maxlength() ?? null\"\n    [attr.pattern]=\"pattern() ?? null\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    (compositionstart)=\"onCompositionStart()\"\n    (compositionend)=\"onCompositionEnd($event)\"\n  />\n\n  <span [class]=\"suffixKlassFinal()\">\n    <ng-content select=\"[tngSuffix]\"></ng-content>\n  </span>\n</div>" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngTextInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-text-input', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TngTextInput),
+                            multi: true,
+                        },
+                    ], template: "<div [class]=\"rootKlassFinal()\">\n  <span [class]=\"prefixKlassFinal()\">\n    <ng-content select=\"[tngPrefix]\"></ng-content>\n  </span>\n\n  <input\n    [id]=\"id() || null\"\n    [name]=\"name() || null\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"readonly()\"\n    [placeholder]=\"placeholder()\"\n    [autocomplete]=\"autocomplete()\"\n    [class]=\"inputKlassFinal()\"\n    [value]=\"value()\"\n    [attr.inputmode]=\"inputmode() || null\"\n    [attr.minlength]=\"minlength() ?? null\"\n    [attr.maxlength]=\"maxlength() ?? null\"\n    [attr.pattern]=\"pattern() ?? null\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    (compositionstart)=\"onCompositionStart()\"\n    (compositionend)=\"onCompositionEnd($event)\"\n  />\n\n  <span [class]=\"suffixKlassFinal()\">\n    <ng-content select=\"[tngSuffix]\"></ng-content>\n  </span>\n</div>" }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], prefixClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixClickable", required: false }] }], rootKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootKlass", required: false }] }], inputKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputKlass", required: false }] }], prefixKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixKlass", required: false }] }], suffixKlass: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixKlass", required: false }] }] } });
+
+class TngTimepicker {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngTimepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TngTimepicker, isStandalone: true, selector: "tng-timepicker", ngImport: i0, template: "<div class=\"p-4 border border-gray-200 rounded-md\">\n  <p class=\"text-gray-600\">Welcome hello component - Timepicker</p>\n</div>\n\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TngTimepicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'tng-timepicker', standalone: true, template: "<div class=\"p-4 border border-gray-200 rounded-md\">\n  <p class=\"text-gray-600\">Welcome hello component - Timepicker</p>\n</div>\n\n" }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
+
+export { TNG_DATE_ADAPTER, TngAutocomplete, TngButtonToggle, TngCheckbox, TngChips, TngDatepicker, TngFileDropzone, TngFileUpload, TngFormField, TngNativeDateAdapter, TngNumberInput, TngRadioButton, TngSelect, TngSlideToggle, TngSlider, TngTextInput, TngTextarea, TngTimepicker, computeNextCaretPos, formatDate, parseSmartDate };
 //# sourceMappingURL=tociva-tailng-ui-form-controls.mjs.map