tecnualng 21.1.9 → 21.1.10

package/fesm2022/tecnualng.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, model, signal, computed, ElementRef, DestroyRef, effect, HostListener, Directive, contentChild, forwardRef, viewChild, TemplateRef, contentChildren, Injectable, createComponent, Input, output, ContentChildren, ViewContainerRef, booleanAttribute } from '@angular/core';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, model, signal, computed, ElementRef, DestroyRef, effect, HostListener, Directive, contentChild, forwardRef, viewChild, TemplateRef, contentChildren, Injectable, createComponent, Input, output, ContentChildren, ViewContainerRef, booleanAttribute, untracked } from '@angular/core';
 import * as i1$2 from '@angular/forms';
 import { NgControl, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/common';
@@ -1780,17 +1780,18 @@ class TngSelectPanelComponent {
         this.optionSelected.emit(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngSelectPanelComponent, isStandalone: true, selector: "tng-select-panel", outputs: { optionSelected: "optionSelected", searchQueryChanged: "searchQueryChanged", closeRequested: "closeRequested" }, ngImport: i0, template: "<div class=\"tng-select-panel\" \n     role=\"listbox\"\n     [attr.aria-multiselectable]=\"enableMulti()\">\n  \n  @if (enableSearch()) {\n    <div class=\"tng-select-search\">\n      <input \n        type=\"text\"\n        class=\"tng-select-search-input\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        placeholder=\"Search...\"\n        aria-label=\"Search options\"\n        (click)=\"$event.stopPropagation()\"\n      />\n      <i class=\"fa fa-search tng-select-search-icon\"></i>\n    </div>\n  }\n  \n  <div class=\"tng-select-options\" role=\"list\">\n    @if (options().length === 0) {\n      <div class=\"tng-select-no-results\">\n        No options found\n      </div>\n    }\n    \n    @for (option of options(); track $index) {\n      <div \n        class=\"tng-select-option\"\n        [class.selected]=\"isSelected($index)\"\n        [class.disabled]=\"option.disabled\"\n        role=\"option\"\n        [attr.aria-selected]=\"isSelected($index)\"\n        [attr.aria-disabled]=\"option.disabled\"\n        (click)=\"onOptionClick($index, option)\"\n      >\n        @if (enableMulti()) {\n          <input \n            type=\"checkbox\"\n            class=\"tng-select-checkbox\"\n            [checked]=\"isSelected($index)\"\n            [disabled]=\"option.disabled\"\n            tabindex=\"-1\"\n          />\n        }\n        <span class=\"tng-select-option-label\">{{ option.label }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.tng-select-panel{background:var(--tng-surface, #ffffff);border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px);box-shadow:var(--tng-shadow-md, 0 4px 8px rgba(0, 0, 0, .12));overflow:hidden;animation:slideDown .2s cubic-bezier(.4,0,.2,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.tng-select-search{position:relative;padding:.75rem;border-bottom:1px solid var(--tng-border, #e0e0e0)}.tng-select-search-input{width:100%;padding:.5rem 2rem .5rem .75rem;border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px);font-size:.9rem;color:var(--tng-text, #333);outline:none;transition:border-color .2s ease}.tng-select-search-input:focus{border-color:var(--tng-primary, #00f2ff)}.tng-select-search-icon{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);color:var(--tng-text-secondary, #757575);pointer-events:none}.tng-select-options{max-height:300px;overflow-y:auto;padding:.25rem 0}.tng-select-options::-webkit-scrollbar{width:8px}.tng-select-options::-webkit-scrollbar-track{background:var(--tng-background, #fafafa)}.tng-select-options::-webkit-scrollbar-thumb{background:var(--tng-border, #e0e0e0);border-radius:4px}.tng-select-options::-webkit-scrollbar-thumb:hover{background:var(--tng-text-secondary, #757575)}.tng-select-option{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;transition:background-color .15s ease;-webkit-user-select:none;user-select:none}.tng-select-option:hover:not(.disabled){background:var(--tng-background, #fafafa)}.tng-select-option.selected{background:#00f2ff1a;color:var(--tng-primary, #00f2ff)}.tng-select-option.disabled{opacity:.5;cursor:not-allowed}.tng-select-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;min-width:18px;min-height:18px;border:2px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1);margin:0;pointer-events:none}.tng-select-checkbox:checked{background-color:var(--tng-primary, #00f2ff);border-color:var(--tng-primary, #00f2ff)}.tng-select-checkbox:checked:before{content:\"\";position:absolute;width:4px;height:8px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg);top:2px;left:5px}.tng-select-checkbox:disabled{opacity:.5;cursor:not-allowed}.tng-select-option-label{flex:1;font-size:.95rem}.tng-select-no-results{padding:1.5rem 1rem;text-align:center;color:var(--tng-text-secondary, #757575);font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngSelectPanelComponent, isStandalone: true, selector: "tng-select-panel", outputs: { optionSelected: "optionSelected", searchQueryChanged: "searchQueryChanged", closeRequested: "closeRequested" }, ngImport: i0, template: "<div class=\"tng-select-panel\" \n     role=\"listbox\"\n     [attr.aria-multiselectable]=\"enableMulti()\">\n  \n  @if (enableSearch()) {\n    <div class=\"tng-select-search\">\n      <input \n        type=\"text\"\n        class=\"tng-select-search-input\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        placeholder=\"Search...\"\n        aria-label=\"Search options\"\n        (click)=\"$event.stopPropagation()\"\n      />\n      <i class=\"fa fa-search tng-select-search-icon\"></i>\n    </div>\n  }\n  \n  <div class=\"tng-select-options\" role=\"list\">\n    @if (options().length === 0) {\n      <div class=\"tng-select-no-results\">\n        No options found\n      </div>\n    }\n    \n    @for (option of options(); track $index) {\n      <div \n        class=\"tng-select-option\"\n        [class.selected]=\"isSelected($index)\"\n        [class.disabled]=\"option.disabled\"\n        role=\"option\"\n        [attr.aria-selected]=\"isSelected($index)\"\n        [attr.aria-disabled]=\"option.disabled\"\n        (click)=\"onOptionClick($index, option)\"\n      >\n        @if (enableMulti()) {\n          <input \n            type=\"checkbox\"\n            class=\"tng-select-checkbox\"\n            [checked]=\"isSelected($index)\"\n            [disabled]=\"option.disabled\"\n            tabindex=\"-1\"\n          />\n        }\n        <span class=\"tng-select-option-label\">{{ option.label }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.tng-select-panel{background:var(--tng-surface, #ffffff);border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px);box-shadow:var(--tng-shadow-md, 0 4px 8px rgba(0, 0, 0, .12));overflow:hidden;animation:slideDown .2s cubic-bezier(.4,0,.2,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.tng-select-search{position:relative;padding:.75rem;border-bottom:1px solid var(--tng-border, #e0e0e0)}.tng-select-search-input{width:100%;padding:.5rem 2rem .5rem .75rem;border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px);font-size:.9rem;color:var(--tng-text, #333);background-color:var(--tng-surface, #ffffff);outline:none;transition:border-color .2s ease}.tng-select-search-input:focus{border-color:var(--tng-primary, #00f2ff)}.tng-select-search-icon{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);color:var(--tng-text-secondary, #757575);pointer-events:none}.tng-select-options{max-height:300px;overflow-y:auto;padding:.25rem 0}.tng-select-options::-webkit-scrollbar{width:8px}.tng-select-options::-webkit-scrollbar-track{background:var(--tng-background, #fafafa)}.tng-select-options::-webkit-scrollbar-thumb{background:var(--tng-border, #e0e0e0);border-radius:4px}.tng-select-options::-webkit-scrollbar-thumb:hover{background:var(--tng-text-secondary, #757575)}.tng-select-option{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;transition:background-color .15s ease;-webkit-user-select:none;user-select:none}.tng-select-option:hover:not(.disabled){background:var(--tng-background, #fafafa)}.tng-select-option.selected{background:#00f2ff1a;color:var(--tng-primary, #00f2ff)}.tng-select-option.disabled{opacity:.5;cursor:not-allowed}.tng-select-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;min-width:18px;min-height:18px;border:2px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1);margin:0;pointer-events:none}.tng-select-checkbox:checked{background-color:var(--tng-primary, #00f2ff);border-color:var(--tng-primary, #00f2ff)}.tng-select-checkbox:checked:before{content:\"\";position:absolute;width:4px;height:8px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg);top:2px;left:5px}.tng-select-checkbox:disabled{opacity:.5;cursor:not-allowed}.tng-select-option-label{flex:1;font-size:.95rem}.tng-select-no-results{padding:1.5rem 1rem;text-align:center;color:var(--tng-text-secondary, #757575);font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSelectPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tng-select-panel', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tng-select-panel\" \n     role=\"listbox\"\n     [attr.aria-multiselectable]=\"enableMulti()\">\n  \n  @if (enableSearch()) {\n    <div class=\"tng-select-search\">\n      <input \n        type=\"text\"\n        class=\"tng-select-search-input\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        placeholder=\"Search...\"\n        aria-label=\"Search options\"\n        (click)=\"$event.stopPropagation()\"\n      />\n      <i class=\"fa fa-search tng-select-search-icon\"></i>\n    </div>\n  }\n  \n  <div class=\"tng-select-options\" role=\"list\">\n    @if (options().length === 0) {\n      <div class=\"tng-select-no-results\">\n        No options found\n      </div>\n    }\n    \n    @for (option of options(); track $index) {\n      <div \n        class=\"tng-select-option\"\n        [class.selected]=\"isSelected($index)\"\n        [class.disabled]=\"option.disabled\"\n        role=\"option\"\n        [attr.aria-selected]=\"isSelected($index)\"\n        [attr.aria-disabled]=\"option.disabled\"\n        (click)=\"onOptionClick($index, option)\"\n      >\n        @if (enableMulti()) {\n          <input \n            type=\"checkbox\"\n            class=\"tng-select-checkbox\"\n            [checked]=\"isSelected($index)\"\n            [disabled]=\"option.disabled\"\n            tabindex=\"-1\"\n          />\n        }\n        <span class=\"tng-select-option-label\">{{ option.label }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.tng-select-panel{background:var(--tng-surface, #ffffff);border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px);box-shadow:var(--tng-shadow-md, 0 4px 8px rgba(0, 0, 0, .12));overflow:hidden;animation:slideDown .2s cubic-bezier(.4,0,.2,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.tng-select-search{position:relative;padding:.75rem;border-bottom:1px solid var(--tng-border, #e0e0e0)}.tng-select-search-input{width:100%;padding:.5rem 2rem .5rem .75rem;border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px);font-size:.9rem;color:var(--tng-text, #333);outline:none;transition:border-color .2s ease}.tng-select-search-input:focus{border-color:var(--tng-primary, #00f2ff)}.tng-select-search-icon{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);color:var(--tng-text-secondary, #757575);pointer-events:none}.tng-select-options{max-height:300px;overflow-y:auto;padding:.25rem 0}.tng-select-options::-webkit-scrollbar{width:8px}.tng-select-options::-webkit-scrollbar-track{background:var(--tng-background, #fafafa)}.tng-select-options::-webkit-scrollbar-thumb{background:var(--tng-border, #e0e0e0);border-radius:4px}.tng-select-options::-webkit-scrollbar-thumb:hover{background:var(--tng-text-secondary, #757575)}.tng-select-option{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;transition:background-color .15s ease;-webkit-user-select:none;user-select:none}.tng-select-option:hover:not(.disabled){background:var(--tng-background, #fafafa)}.tng-select-option.selected{background:#00f2ff1a;color:var(--tng-primary, #00f2ff)}.tng-select-option.disabled{opacity:.5;cursor:not-allowed}.tng-select-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;min-width:18px;min-height:18px;border:2px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1);margin:0;pointer-events:none}.tng-select-checkbox:checked{background-color:var(--tng-primary, #00f2ff);border-color:var(--tng-primary, #00f2ff)}.tng-select-checkbox:checked:before{content:\"\";position:absolute;width:4px;height:8px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg);top:2px;left:5px}.tng-select-checkbox:disabled{opacity:.5;cursor:not-allowed}.tng-select-option-label{flex:1;font-size:.95rem}.tng-select-no-results{padding:1.5rem 1rem;text-align:center;color:var(--tng-text-secondary, #757575);font-size:.9rem}\n"] }]
+            args: [{ selector: 'tng-select-panel', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tng-select-panel\" \n     role=\"listbox\"\n     [attr.aria-multiselectable]=\"enableMulti()\">\n  \n  @if (enableSearch()) {\n    <div class=\"tng-select-search\">\n      <input \n        type=\"text\"\n        class=\"tng-select-search-input\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        placeholder=\"Search...\"\n        aria-label=\"Search options\"\n        (click)=\"$event.stopPropagation()\"\n      />\n      <i class=\"fa fa-search tng-select-search-icon\"></i>\n    </div>\n  }\n  \n  <div class=\"tng-select-options\" role=\"list\">\n    @if (options().length === 0) {\n      <div class=\"tng-select-no-results\">\n        No options found\n      </div>\n    }\n    \n    @for (option of options(); track $index) {\n      <div \n        class=\"tng-select-option\"\n        [class.selected]=\"isSelected($index)\"\n        [class.disabled]=\"option.disabled\"\n        role=\"option\"\n        [attr.aria-selected]=\"isSelected($index)\"\n        [attr.aria-disabled]=\"option.disabled\"\n        (click)=\"onOptionClick($index, option)\"\n      >\n        @if (enableMulti()) {\n          <input \n            type=\"checkbox\"\n            class=\"tng-select-checkbox\"\n            [checked]=\"isSelected($index)\"\n            [disabled]=\"option.disabled\"\n            tabindex=\"-1\"\n          />\n        }\n        <span class=\"tng-select-option-label\">{{ option.label }}</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.tng-select-panel{background:var(--tng-surface, #ffffff);border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px);box-shadow:var(--tng-shadow-md, 0 4px 8px rgba(0, 0, 0, .12));overflow:hidden;animation:slideDown .2s cubic-bezier(.4,0,.2,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.tng-select-search{position:relative;padding:.75rem;border-bottom:1px solid var(--tng-border, #e0e0e0)}.tng-select-search-input{width:100%;padding:.5rem 2rem .5rem .75rem;border:1px solid var(--tng-border, #e0e0e0);border-radius:var(--tng-border-radius, 4px);font-size:.9rem;color:var(--tng-text, #333);background-color:var(--tng-surface, #ffffff);outline:none;transition:border-color .2s ease}.tng-select-search-input:focus{border-color:var(--tng-primary, #00f2ff)}.tng-select-search-icon{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);color:var(--tng-text-secondary, #757575);pointer-events:none}.tng-select-options{max-height:300px;overflow-y:auto;padding:.25rem 0}.tng-select-options::-webkit-scrollbar{width:8px}.tng-select-options::-webkit-scrollbar-track{background:var(--tng-background, #fafafa)}.tng-select-options::-webkit-scrollbar-thumb{background:var(--tng-border, #e0e0e0);border-radius:4px}.tng-select-options::-webkit-scrollbar-thumb:hover{background:var(--tng-text-secondary, #757575)}.tng-select-option{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;transition:background-color .15s ease;-webkit-user-select:none;user-select:none}.tng-select-option:hover:not(.disabled){background:var(--tng-background, #fafafa)}.tng-select-option.selected{background:#00f2ff1a;color:var(--tng-primary, #00f2ff)}.tng-select-option.disabled{opacity:.5;cursor:not-allowed}.tng-select-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;min-width:18px;min-height:18px;border:2px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background-color:var(--tng-surface, #ffffff);cursor:pointer;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1);margin:0;pointer-events:none}.tng-select-checkbox:checked{background-color:var(--tng-primary, #00f2ff);border-color:var(--tng-primary, #00f2ff)}.tng-select-checkbox:checked:before{content:\"\";position:absolute;width:4px;height:8px;border:solid var(--tng-primary-contrast, #000000);border-width:0 2px 2px 0;transform:rotate(45deg);top:2px;left:5px}.tng-select-checkbox:disabled{opacity:.5;cursor:not-allowed}.tng-select-option-label{flex:1;font-size:.95rem}.tng-select-no-results{padding:1.5rem 1rem;text-align:center;color:var(--tng-text-secondary, #757575);font-size:.9rem}\n"] }]
         }], propDecorators: { optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], searchQueryChanged: [{ type: i0.Output, args: ["searchQueryChanged"] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }] } });
 
 class TngSelectDirective {
     el = inject((ElementRef));
     viewContainerRef = inject(ViewContainerRef);
     ngControl = inject(NgControl, { optional: true, self: true });
+    destroyRef = inject(DestroyRef);
     // Inputs
     enableMulti = input(false, ...(ngDevMode ? [{ debugName: "enableMulti" }] : []));
     // Support native multiple attribute
@@ -1805,7 +1806,23 @@ class TngSelectDirective {
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
     _options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : []));
-    _selectedIndices = signal([], ...(ngDevMode ? [{ debugName: "_selectedIndices" }] : []));
+    _selectedIndices = signal([], ...(ngDevMode ? [{ debugName: "_selectedIndices", equal: (a, b) => {
+                if (a === b)
+                    return true;
+                if (a.length !== b.length)
+                    return false;
+                const sortedA = [...a].sort();
+                const sortedB = [...b].sort();
+                return sortedA.every((val, index) => val === sortedB[index]);
+            } }] : [{ equal: (a, b) => {
+                if (a === b)
+                    return true;
+                if (a.length !== b.length)
+                    return false;
+                const sortedA = [...a].sort();
+                const sortedB = [...b].sort();
+                return sortedA.every((val, index) => val === sortedB[index]);
+            } }]));
     // Component reference for the panel
     panelRef = null;
     // Generated trigger element
@@ -1837,16 +1854,29 @@ class TngSelectDirective {
         return selected.map(opt => opt.label).join(', ');
     }, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
     constructor() {
-        // Sync selected values with model
+        // Sync selected values with model (Output)
         effect(() => {
             const selected = this.selectedOptions();
+            // Use untracked to avoid loop if selectedValues write triggers immediate read dependency? No.
             this.selectedValues.set(selected.map(opt => opt.value));
         });
+        // Sync model with internal (Input)
+        effect(() => {
+            const values = this.selectedValues();
+            // Avoid infinite loop by checking if values actally represent a change
+            const currentSelected = untracked(() => this.selectedOptions());
+            const currentValues = currentSelected.map(o => o.value);
+            // Simple equality check (value-based)
+            if (values.length !== currentValues.length || !values.every((v, i) => v == currentValues[i])) { // weak eq
+                this.updateSelectionFromValue(values);
+            }
+        });
         // Update form control value
         effect(() => {
             if (this.ngControl?.control) {
                 const values = this.selectedValues();
                 const newValue = this.isMulti() ? values : (values[0] ?? null);
+                // Only setValue if changed? internal control handles checks usually
                 this.ngControl.control.setValue(newValue, { emitEvent: false });
             }
         });
@@ -1874,6 +1904,33 @@ class TngSelectDirective {
             }
         });
     }
+    ngOnInit() {
+        if (this.ngControl) {
+            this.ngControl.valueChanges?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((val) => {
+                // Find indices matching value
+                this.updateSelectionFromValue(val);
+            });
+        }
+    }
+    updateSelectionFromValue(value) {
+        const opts = this._options();
+        const indices = [];
+        if (this.isMulti()) {
+            const valArray = Array.isArray(value) ? value : (value ? [value] : []);
+            valArray.forEach((v) => {
+                const idx = opts.findIndex(o => o.value == v); // weak equality for numbers/strings?
+                if (idx !== -1)
+                    indices.push(idx);
+            });
+        }
+        else {
+            const idx = opts.findIndex(o => o.value == value);
+            if (idx !== -1)
+                indices.push(idx);
+        }
+        this._selectedIndices.set(indices);
+        this.updateNativeSelect(false);
+    }
     ngAfterViewInit() {
         this.loadOptionsFromSelect();
         this.loadInitialSelection();
@@ -2078,7 +2135,7 @@ class TngSelectDirective {
         // Update native select
         this.updateNativeSelect();
     }
-    updateNativeSelect() {
+    updateNativeSelect(emitEvents = true) {
         const selectEl = this.el.nativeElement;
         const selectedIndices = this._selectedIndices();
         // Clear all selections
@@ -2091,10 +2148,12 @@ class TngSelectDirective {
                 selectEl.options[idx].selected = true;
             }
         });
-        // Trigger change event
-        selectEl.dispatchEvent(new Event('change', { bubbles: true }));
-        // Also trigger input event for some frameworks
-        selectEl.dispatchEvent(new Event('input', { bubbles: true }));
+        if (emitEvents) {
+            // Trigger change event
+            selectEl.dispatchEvent(new Event('change', { bubbles: true }));
+            // Also trigger input event for some frameworks
+            selectEl.dispatchEvent(new Event('input', { bubbles: true }));
+        }
     }
     onDocumentClick = (event) => {
         const target = event.target;
@@ -2136,6 +2195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             }] } });
 
 class TngSelectComponent {
+    ngControl = inject(NgControl, { optional: true, self: true });
     // Inputs
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
@@ -2167,18 +2227,20 @@ class TngSelectComponent {
     onChange = () => { };
     onTouched = () => { };
     constructor() {
-        // Sync model changes to CVA
-        effect(() => {
-            const val = this.value();
-            // Avoid circular updates if possible, but for now just emit
-            if (this.enableMulti()) {
-                this.onChange(val);
-            }
-            else {
-                this.onChange(val.length > 0 ? val[0] : null);
-            }
-            this.onTouched();
-        });
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    onSelectionChange(newValues) {
+        this.value.set(newValues);
+        // Avoid circular updates if possible, but for now just emit
+        if (this.enableMulti()) {
+            this.onChange(newValues);
+        }
+        else {
+            this.onChange(newValues.length > 0 ? newValues[0] : null);
+        }
+        this.onTouched();
     }
     onDisplayClick(event) {
         if (this.effectiveDisabled())
@@ -2211,23 +2273,11 @@ class TngSelectComponent {
         this.cvaDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngSelectComponent, isStandalone: true, selector: "tng-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, enableMulti: { classPropertyName: "enableMulti", publicName: "enableMulti", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", 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 }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => TngSelectComponent),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "selectDirective", first: true, predicate: TngSelectDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tng-select-wrapper\" [class.tng-select-open]=\"selectDirective()?.isOpen()\">\n  @if (label()) {\n  <label class=\"tng-select-label\" [attr.for]=\"selectId()\">\n    {{ label() }}\n  </label>\n  }\n\n  <div class=\"tng-select-container\">\n    <select\n      [id]=\"selectId()\"\n      tngSelect\n      [enableMulti]=\"enableMulti()\"\n      [enableSearch]=\"enableSearch()\"\n      [placeholder]=\"placeholder()\"\n      [customTrigger]=\"true\"\n      [multiple]=\"enableMulti()\"\n      [triggerRef]=\"triggerDisplay\"\n      [(selectedValues)]=\"value\"\n      [disabled]=\"effectiveDisabled()\"\n      [attr.aria-label]=\"ariaLabel() || label()\"\n    >\n      @for (option of options(); track option.value) {\n      <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n        {{ option.label }}\n      </option>\n      }\n    </select>\n\n    <div\n      class=\"tng-select-display\"\n      #triggerDisplay\n      [class.disabled]=\"effectiveDisabled()\"\n      (click)=\"onDisplayClick($event)\"\n    >\n      <span class=\"tng-select-display-text\">\n        {{ displayText() }}\n      </span>\n      <i class=\"fa fa-chevron-down tng-select-arrow\"></i>\n    </div>\n  </div>\n\n  @if (hint()) {\n  <div class=\"tng-select-hint\">\n    {{ hint() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-select-wrapper{width:100%}.tng-select-label{display:block;margin-bottom:.5rem;font-size:.9rem;font-weight:500;color:var(--tng-text, #333)}.tng-select-container{position:relative}.tng-select-display{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background:var(--tng-surface, #ffffff);cursor:pointer;transition:all .2s ease;min-height:48px;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-select-display:hover:not(.disabled){border-color:var(--tng-text-secondary, #757575)}.tng-select-display.disabled{opacity:.6;cursor:not-allowed;background:var(--tng-background, #fafafa)}.tng-select-wrapper.tng-select-open .tng-select-display,.tng-select-display.tng-select-open{border-color:var(--tng-primary, #00f2ff);border-width:2px;padding:calc(.75rem - 1px) calc(1rem - 1px)}.tng-select-display-text{flex:1;color:var(--tng-text, #333);font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tng-select-display-text:empty:before{content:attr(data-placeholder);color:var(--tng-text-secondary, #757575)}.tng-select-arrow{color:var(--tng-text-secondary, #757575);transition:transform .2s ease;font-size:.8rem}.tng-select-wrapper.tng-select-open .tng-select-arrow,.tng-select-display.tng-select-open .tng-select-arrow{transform:rotate(180deg)}.tng-select-hint{margin-top:.25rem;font-size:.85rem;color:var(--tng-text-secondary, #757575)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: TngSelectDirective, selector: "select[tngSelect]", inputs: ["enableMulti", "multiple", "enableSearch", "placeholder", "customTrigger", "triggerRef", "selectedValues"], outputs: ["selectedValuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TngSelectComponent, isStandalone: true, selector: "tng-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, enableMulti: { classPropertyName: "enableMulti", publicName: "enableMulti", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", 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 }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "selectDirective", first: true, predicate: TngSelectDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tng-select-wrapper\" [class.tng-select-open]=\"selectDirective()?.isOpen()\">\n  @if (label()) {\n  <label class=\"tng-select-label\" [attr.for]=\"selectId()\">\n    {{ label() }}\n  </label>\n  }\n\n  <div class=\"tng-select-container\">\n    <select\n      [id]=\"selectId()\"\n      tngSelect\n      [enableMulti]=\"enableMulti()\"\n      [enableSearch]=\"enableSearch()\"\n      [placeholder]=\"placeholder()\"\n      [customTrigger]=\"true\"\n      [multiple]=\"enableMulti()\"\n      [triggerRef]=\"triggerDisplay\"\n      [selectedValues]=\"value()\"\n      (selectedValuesChange)=\"onSelectionChange($event)\"\n      [disabled]=\"effectiveDisabled()\"\n      [attr.aria-label]=\"ariaLabel() || label()\"\n    >\n      @for (option of options(); track option.value) {\n      <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n        {{ option.label }}\n      </option>\n      }\n    </select>\n\n    <div\n      class=\"tng-select-display\"\n      #triggerDisplay\n      [class.disabled]=\"effectiveDisabled()\"\n      (click)=\"onDisplayClick($event)\"\n    >\n      <span class=\"tng-select-display-text\">\n        {{ displayText() }}\n      </span>\n      <i class=\"fa fa-chevron-down tng-select-arrow\"></i>\n    </div>\n  </div>\n\n  @if (hint()) {\n  <div class=\"tng-select-hint\">\n    {{ hint() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-select-wrapper{width:100%}.tng-select-label{display:block;margin-bottom:.5rem;font-size:.9rem;font-weight:500;color:var(--tng-text, #333)}.tng-select-container{position:relative}.tng-select-display{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background:var(--tng-surface, #ffffff);cursor:pointer;transition:all .2s ease;min-height:48px;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-select-display:hover:not(.disabled){border-color:var(--tng-text-secondary, #757575)}.tng-select-display.disabled{opacity:.6;cursor:not-allowed;background:var(--tng-background, #fafafa)}.tng-select-wrapper.tng-select-open .tng-select-display,.tng-select-display.tng-select-open{border-color:var(--tng-primary, #00f2ff);border-width:2px;padding:calc(.75rem - 1px) calc(1rem - 1px)}.tng-select-display-text{flex:1;color:var(--tng-text, #333);font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tng-select-display-text:empty:before{content:attr(data-placeholder);color:var(--tng-text-secondary, #757575)}.tng-select-arrow{color:var(--tng-text-secondary, #757575);transition:transform .2s ease;font-size:.8rem}.tng-select-wrapper.tng-select-open .tng-select-arrow,.tng-select-display.tng-select-open .tng-select-arrow{transform:rotate(180deg)}.tng-select-hint{margin-top:.25rem;font-size:.85rem;color:var(--tng-text-secondary, #757575)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: TngSelectDirective, selector: "select[tngSelect]", inputs: ["enableMulti", "multiple", "enableSearch", "placeholder", "customTrigger", "triggerRef", "selectedValues"], outputs: ["selectedValuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TngSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tng-select', standalone: true, imports: [CommonModule, FormsModule, TngSelectDirective], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => TngSelectComponent),
-                            multi: true
-                        }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"tng-select-wrapper\" [class.tng-select-open]=\"selectDirective()?.isOpen()\">\n  @if (label()) {\n  <label class=\"tng-select-label\" [attr.for]=\"selectId()\">\n    {{ label() }}\n  </label>\n  }\n\n  <div class=\"tng-select-container\">\n    <select\n      [id]=\"selectId()\"\n      tngSelect\n      [enableMulti]=\"enableMulti()\"\n      [enableSearch]=\"enableSearch()\"\n      [placeholder]=\"placeholder()\"\n      [customTrigger]=\"true\"\n      [multiple]=\"enableMulti()\"\n      [triggerRef]=\"triggerDisplay\"\n      [(selectedValues)]=\"value\"\n      [disabled]=\"effectiveDisabled()\"\n      [attr.aria-label]=\"ariaLabel() || label()\"\n    >\n      @for (option of options(); track option.value) {\n      <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n        {{ option.label }}\n      </option>\n      }\n    </select>\n\n    <div\n      class=\"tng-select-display\"\n      #triggerDisplay\n      [class.disabled]=\"effectiveDisabled()\"\n      (click)=\"onDisplayClick($event)\"\n    >\n      <span class=\"tng-select-display-text\">\n        {{ displayText() }}\n      </span>\n      <i class=\"fa fa-chevron-down tng-select-arrow\"></i>\n    </div>\n  </div>\n\n  @if (hint()) {\n  <div class=\"tng-select-hint\">\n    {{ hint() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-select-wrapper{width:100%}.tng-select-label{display:block;margin-bottom:.5rem;font-size:.9rem;font-weight:500;color:var(--tng-text, #333)}.tng-select-container{position:relative}.tng-select-display{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background:var(--tng-surface, #ffffff);cursor:pointer;transition:all .2s ease;min-height:48px;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-select-display:hover:not(.disabled){border-color:var(--tng-text-secondary, #757575)}.tng-select-display.disabled{opacity:.6;cursor:not-allowed;background:var(--tng-background, #fafafa)}.tng-select-wrapper.tng-select-open .tng-select-display,.tng-select-display.tng-select-open{border-color:var(--tng-primary, #00f2ff);border-width:2px;padding:calc(.75rem - 1px) calc(1rem - 1px)}.tng-select-display-text{flex:1;color:var(--tng-text, #333);font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tng-select-display-text:empty:before{content:attr(data-placeholder);color:var(--tng-text-secondary, #757575)}.tng-select-arrow{color:var(--tng-text-secondary, #757575);transition:transform .2s ease;font-size:.8rem}.tng-select-wrapper.tng-select-open .tng-select-arrow,.tng-select-display.tng-select-open .tng-select-arrow{transform:rotate(180deg)}.tng-select-hint{margin-top:.25rem;font-size:.85rem;color:var(--tng-text-secondary, #757575)}\n"] }]
+            args: [{ selector: 'tng-select', standalone: true, imports: [CommonModule, FormsModule, TngSelectDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"tng-select-wrapper\" [class.tng-select-open]=\"selectDirective()?.isOpen()\">\n  @if (label()) {\n  <label class=\"tng-select-label\" [attr.for]=\"selectId()\">\n    {{ label() }}\n  </label>\n  }\n\n  <div class=\"tng-select-container\">\n    <select\n      [id]=\"selectId()\"\n      tngSelect\n      [enableMulti]=\"enableMulti()\"\n      [enableSearch]=\"enableSearch()\"\n      [placeholder]=\"placeholder()\"\n      [customTrigger]=\"true\"\n      [multiple]=\"enableMulti()\"\n      [triggerRef]=\"triggerDisplay\"\n      [selectedValues]=\"value()\"\n      (selectedValuesChange)=\"onSelectionChange($event)\"\n      [disabled]=\"effectiveDisabled()\"\n      [attr.aria-label]=\"ariaLabel() || label()\"\n    >\n      @for (option of options(); track option.value) {\n      <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n        {{ option.label }}\n      </option>\n      }\n    </select>\n\n    <div\n      class=\"tng-select-display\"\n      #triggerDisplay\n      [class.disabled]=\"effectiveDisabled()\"\n      (click)=\"onDisplayClick($event)\"\n    >\n      <span class=\"tng-select-display-text\">\n        {{ displayText() }}\n      </span>\n      <i class=\"fa fa-chevron-down tng-select-arrow\"></i>\n    </div>\n  </div>\n\n  @if (hint()) {\n  <div class=\"tng-select-hint\">\n    {{ hint() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1.5rem;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-select-wrapper{width:100%}.tng-select-label{display:block;margin-bottom:.5rem;font-size:.9rem;font-weight:500;color:var(--tng-text, #333)}.tng-select-container{position:relative}.tng-select-display{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--tng-border, #999);border-radius:var(--tng-border-radius, 4px);background:var(--tng-surface, #ffffff);cursor:pointer;transition:all .2s ease;min-height:48px;font-family:var(--tng-font-family, \"Inter\", sans-serif)}.tng-select-display:hover:not(.disabled){border-color:var(--tng-text-secondary, #757575)}.tng-select-display.disabled{opacity:.6;cursor:not-allowed;background:var(--tng-background, #fafafa)}.tng-select-wrapper.tng-select-open .tng-select-display,.tng-select-display.tng-select-open{border-color:var(--tng-primary, #00f2ff);border-width:2px;padding:calc(.75rem - 1px) calc(1rem - 1px)}.tng-select-display-text{flex:1;color:var(--tng-text, #333);font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tng-select-display-text:empty:before{content:attr(data-placeholder);color:var(--tng-text-secondary, #757575)}.tng-select-arrow{color:var(--tng-text-secondary, #757575);transition:transform .2s ease;font-size:.8rem}.tng-select-wrapper.tng-select-open .tng-select-arrow,.tng-select-display.tng-select-open .tng-select-arrow{transform:rotate(180deg)}.tng-select-hint{margin-top:.25rem;font-size:.85rem;color:var(--tng-text-secondary, #757575)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], enableMulti: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMulti", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TngSelectDirective), { isSignal: true }] }] } });
 
 class TngSliderComponent {