@latitude-ui/widgets 0.0.22 → 0.0.24

package/fesm2022/latitude-ui-widgets-select.mjs

@@ -1,56 +1,55 @@
 import { switchMap, of, delay } from 'rxjs';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, computed, Directive, contentChildren, signal, output, viewChild, untracked, afterRenderEffect, ElementRef, numberAttribute } from '@angular/core';
-import { BuildInInputValueAccessor } from '@latitude-ui/widgets/input';
+import { input, booleanAttribute, ChangeDetectionStrategy, ViewEncapsulation, Component, forwardRef, inject, computed, Directive, contentChildren, signal, output, untracked, ElementRef, afterRenderEffect, numberAttribute } from '@angular/core';
+import { HTMLInputDirective } from '@latitude-ui/widgets/input';
 import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
-import * as i2 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { IconComponent } from '@latitude-ui/widgets/icons';
-import * as i1 from '@latitude-ui/widgets/listbox';
-import { ListBoxModule } from '@latitude-ui/widgets/listbox';
+import { ListBoxComponent, OptionComponent } from '@latitude-ui/widgets/listbox';
 import { TextBoxComponent } from '@latitude-ui/widgets/textbox';
 import { ButtonComponent } from '@latitude-ui/widgets/button';
 
 class SelectOptionComponent {
-    value = input.required();
-    label = input.required();
-    hidden = input(false, { transform: booleanAttribute });
-    disabled = input(false, { transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SelectOptionComponent, isStandalone: true, selector: "lat-select-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["latSelectOption"], hostDirectives: [{ directive: i0.forwardRef(() => SelectOptionDirective) }], ngImport: i0, template: "\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: SelectOptionComponent, isStandalone: true, selector: "lat-select-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["latSelectOption"], hostDirectives: [{ directive: i0.forwardRef(() => SelectOptionDirective) }], ngImport: i0, template: "\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectOptionComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'latSelectOption', selector: 'lat-select-option', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: forwardRef(() => SelectOptionDirective),
                         },
-                    ], template: "\r\n" }]
-        }] });
+                    ], template: "\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class SelectOptionDirective {
     select = inject((SelectDirective));
     option = inject((SelectOptionComponent), { host: true });
-    value = computed(() => this.option.value());
-    label = computed(() => this.option.label());
-    hidden = computed(() => this.option.hidden());
-    disabled = computed(() => this.option.disabled());
-    selected = computed(() => this.select.selected().includes(this.value()));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: SelectOptionDirective, isStandalone: true, ngImport: i0 });
+    value = computed(() => this.option.value(), ...(ngDevMode ? [{ debugName: "value" }] : []));
+    label = computed(() => this.option.label(), ...(ngDevMode ? [{ debugName: "label" }] : []));
+    hidden = computed(() => this.option.hidden(), ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+    disabled = computed(() => this.option.disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    selected = computed(() => this.select.selected().includes(this.value()), ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: SelectOptionDirective, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectOptionDirective, decorators: [{
             type: Directive
         }] });
 
-class SelectDirective extends BuildInInputValueAccessor {
-    searchable = input(false, { transform: booleanAttribute });
-    contentChildren = contentChildren(SelectOptionDirective);
+class SelectDirective extends HTMLInputDirective {
+    searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : {}), transform: booleanAttribute });
+    contentChildren = contentChildren(SelectOptionDirective, ...(ngDevMode ? [{ debugName: "contentChildren" }] : []));
     /** @internal */
-    _overlayWidth = signal(0);
+    _overlayWidth = signal(0, ...(ngDevMode ? [{ debugName: "_overlayWidth" }] : []));
     /** @internal */
-    _overlayState = signal(false);
+    _overlayState = signal(false, ...(ngDevMode ? [{ debugName: "_overlayState" }] : []));
     /** @internal */
     _overlayExpanded = toSignal(toObservable(this._overlayState).pipe(switchMap((state) => {
         return state ? of(state) : of(state).pipe(delay(100));
@@ -61,34 +60,34 @@ class SelectDirective extends BuildInInputValueAccessor {
             originX: 'start',
             originY: 'bottom',
             overlayX: 'start',
-            overlayY: 'top',
+            overlayY: 'top'
         },
         {
             originX: 'end',
             originY: 'bottom',
             overlayX: 'end',
-            overlayY: 'top',
+            overlayY: 'top'
         },
         {
             originX: 'start',
             originY: 'top',
             overlayX: 'start',
-            overlayY: 'bottom',
+            overlayY: 'bottom'
         },
         {
             originX: 'end',
             originY: 'top',
             overlayX: 'end',
-            overlayY: 'bottom',
-        },
-    ]);
+            overlayY: 'bottom'
+        }
+    ], ...(ngDevMode ? [{ debugName: "_overlayPositions" }] : []));
     /** @internal */
-    _overlayPositionSide = signal('bottom');
+    _overlayPositionSide = signal('bottom', ...(ngDevMode ? [{ debugName: "_overlayPositionSide" }] : []));
     /** @internal */
     _indexes = computed(() => {
         const children = this.contentChildren();
         return new Map(children.map((option) => [option.value(), option]));
-    });
+    }, ...(ngDevMode ? [{ debugName: "_indexes" }] : []));
     /** @internal */
     _selected = computed(() => {
         const selected = this.selected();
@@ -96,7 +95,7 @@ class SelectDirective extends BuildInInputValueAccessor {
         return selected
             .filter((value) => indexes.has(value))
             .map((value) => indexes.get(value));
-    });
+    }, ...(ngDevMode ? [{ debugName: "_selected" }] : []));
     hide() {
         if (!this._overlayState()) {
             return void 0;
@@ -128,36 +127,32 @@ class SelectDirective extends BuildInInputValueAccessor {
                 : connectionPair.originY;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.6", type: SelectDirective, isStandalone: true, inputs: { searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "contentChildren", predicate: SelectOptionDirective, isSignal: true }], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.3", type: SelectDirective, isStandalone: true, inputs: { searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "contentChildren", predicate: SelectOptionDirective, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectDirective, decorators: [{
             type: Directive
-        }] });
+        }], propDecorators: { searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], contentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectOptionDirective), { isSignal: true }] }] } });
 
 class SelectDropDownComponent {
     dir = inject(SelectDirective);
     selection = output();
-    textbox = viewChild(TextBoxComponent);
-    search = signal('');
+    search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : []));
     options = computed(() => {
         const options = this.dir.contentChildren();
         const search = this.search();
         const searchRegExp = search.length ? new RegExp(`.*${search}*.`, 'i') : null;
         return untracked(() => (searchRegExp ? options.filter((option) => option.label().match(searchRegExp)) : options));
-    });
-    constructor() {
-        afterRenderEffect(() => this.textbox()?.focus());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectDropDownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SelectDropDownComponent, isStandalone: true, selector: "lat-select-dropdown", outputs: { selection: "selection" }, host: { properties: { "attr.data-side": "dir._overlayPositionSide()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }], exportAs: ["latSelectDropDown"], ngImport: i0, template: "@if (dir.searchable()) {\r\n  <lat-textbox [(ngModel)]=\"search\" />\r\n}\r\n\r\n<lat-listbox [style.width.px]=\"dir._overlayWidth()\" [attr.data-side]=\"dir._overlayPositionSide()\">\r\n  @for (option of options(); track option.value()) {\r\n    <lat-option\r\n      [value]=\"option.value()\"\r\n      [disabled]=\"option.disabled()\"\r\n      [setsize]=\"$count\"\r\n      [posinset]=\"$index\"\r\n      (click)=\"selection.emit(option)\"\r\n    >\r\n      @if (option.selected()) {\r\n        <lat-icon name=\"check\" />\r\n      }\r\n      <span>{{ option.label() }}</span>\r\n    </lat-option>\r\n  }\r\n</lat-listbox>\r\n", dependencies: [{ kind: "component", type: IconComponent, selector: "lat-icon", inputs: ["url", "name"], exportAs: ["latIcon"] }, { kind: "component", type: i1.ListBoxOptionComponent, selector: "lat-listbox-option, lat-option", inputs: ["value", "setsize", "posinset", "selected", "disabled", "checkbox"], exportAs: ["latListBoxOption"] }, { kind: "component", type: i1.ListBoxComponent, selector: "lat-listbox", exportAs: ["latListBox"] }, { kind: "component", type: TextBoxComponent, selector: "lat-textbox:not([type]), lat-textbox[type=\"text\"]", inputs: ["rows", "maxlength", "minlength"], exportAs: ["latTextBox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    }, ...(ngDevMode ? [{ debugName: "options" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectDropDownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SelectDropDownComponent, isStandalone: true, selector: "lat-select-dropdown", outputs: { selection: "selection" }, host: { properties: { "attr.data-side": "dir._overlayPositionSide()" } }, exportAs: ["latSelectDropDown"], ngImport: i0, template: "@if (dir.searchable()) {\n  <lat-textbox [autofocus]=\"true\" [(ngModel)]=\"search\" />\n}\n\n<lat-listbox [style.width.px]=\"dir._overlayWidth()\" [attr.data-side]=\"dir._overlayPositionSide()\">\n  @for (option of options(); track option.value()) {\n    <lat-option\n      [label]=\"option.label()\"\n      [value]=\"option.value()\"\n      [disabled]=\"option.disabled()\"\n      [setsize]=\"$count\"\n      [posinset]=\"$index\"\n      (click)=\"selection.emit(option)\"\n    >\n      @if (option.selected()) {\n        <lat-icon name=\"check\" />\n      }\n      <span>{{ option.label() }}</span>\n    </lat-option>\n  }\n</lat-listbox>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "lat-icon", inputs: ["url", "name"], exportAs: ["latIcon"] }, { kind: "component", type: ListBoxComponent, selector: "lat-listbox", exportAs: ["latListBox"] }, { kind: "component", type: OptionComponent, selector: "lat-option, lat-listbox-option", inputs: ["label", "value", "setsize", "posinset", "selected", "disabled", "checkbox"], exportAs: ["latOption"] }, { kind: "component", type: TextBoxComponent, selector: "lat-textbox:not([type]), lat-textbox[type=\"text\"]", inputs: ["rows", "maxlength", "minlength"], exportAs: ["latTextBox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectDropDownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectDropDownComponent, decorators: [{
             type: Component,
-            args: [{ imports: [IconComponent, ListBoxModule, TextBoxComponent, FormsModule], exportAs: 'latSelectDropDown', selector: 'lat-select-dropdown', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ imports: [IconComponent, ListBoxComponent, OptionComponent, TextBoxComponent, FormsModule], exportAs: 'latSelectDropDown', selector: 'lat-select-dropdown', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-side]': 'dir._overlayPositionSide()',
-                    }, template: "@if (dir.searchable()) {\r\n  <lat-textbox [(ngModel)]=\"search\" />\r\n}\r\n\r\n<lat-listbox [style.width.px]=\"dir._overlayWidth()\" [attr.data-side]=\"dir._overlayPositionSide()\">\r\n  @for (option of options(); track option.value()) {\r\n    <lat-option\r\n      [value]=\"option.value()\"\r\n      [disabled]=\"option.disabled()\"\r\n      [setsize]=\"$count\"\r\n      [posinset]=\"$index\"\r\n      (click)=\"selection.emit(option)\"\r\n    >\r\n      @if (option.selected()) {\r\n        <lat-icon name=\"check\" />\r\n      }\r\n      <span>{{ option.label() }}</span>\r\n    </lat-option>\r\n  }\r\n</lat-listbox>\r\n" }]
-        }], ctorParameters: () => [] });
+                    }, template: "@if (dir.searchable()) {\n  <lat-textbox [autofocus]=\"true\" [(ngModel)]=\"search\" />\n}\n\n<lat-listbox [style.width.px]=\"dir._overlayWidth()\" [attr.data-side]=\"dir._overlayPositionSide()\">\n  @for (option of options(); track option.value()) {\n    <lat-option\n      [label]=\"option.label()\"\n      [value]=\"option.value()\"\n      [disabled]=\"option.disabled()\"\n      [setsize]=\"$count\"\n      [posinset]=\"$index\"\n      (click)=\"selection.emit(option)\"\n    >\n      @if (option.selected()) {\n        <lat-icon name=\"check\" />\n      }\n      <span>{{ option.label() }}</span>\n    </lat-option>\n  }\n</lat-listbox>\n" }]
+        }], propDecorators: { selection: [{ type: i0.Output, args: ["selection"] }] } });
 
 class SelectTriggerComponent {
     el = inject((ElementRef)).nativeElement;
@@ -171,10 +166,10 @@ class SelectTriggerComponent {
             onCleanup(() => observer.disconnect());
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SelectTriggerComponent, isStandalone: true, selector: "lat-select-trigger", host: { attributes: { "role": "combobox" }, listeners: { "click": "select.toggle()" }, properties: { "attr.data-size": "select.size()" } }, exportAs: ["latSelectTrigger"], ngImport: i0, template: "<ng-content select=\"lat-select-values\" />\n\n@if (!select.readonly()) {\n  <section class=\"lat-select-control\">\n    <lat-button tabindex=\"-1\" variant=\"subtle\" [size]=\"select.size()\" [disabled]=\"select.disabled()\">\n      <lat-icon [name]=\"select._overlayState() ? 'chevron-up' : 'chevron-down'\"/>\n    </lat-button>\n  </section>\n}\n\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "lat-button", inputs: ["size", "variant", "tabindex", "disabled"], exportAs: ["latButton"] }, { kind: "component", type: IconComponent, selector: "lat-icon", inputs: ["url", "name"], exportAs: ["latIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SelectTriggerComponent, isStandalone: true, selector: "lat-select-trigger", host: { attributes: { "role": "combobox" }, listeners: { "click": "select.toggle()" }, properties: { "attr.data-size": "select.size()" } }, exportAs: ["latSelectTrigger"], ngImport: i0, template: "<ng-content select=\"lat-select-values\" />\n\n@if (!select.readonly()) {\n  <section class=\"lat-select-control\">\n    <lat-button tabindex=\"-1\" variant=\"subtle\" [size]=\"select.size()\" [disabled]=\"select.disabled()\">\n      <lat-icon [name]=\"select._overlayState() ? 'chevron-up' : 'chevron-down'\"/>\n    </lat-button>\n  </section>\n}\n\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "lat-button, a[latButton],button[latButton]", inputs: ["role", "size", "variant", "disabled", "tabindex"], exportAs: ["latButton"] }, { kind: "component", type: IconComponent, selector: "lat-icon", inputs: ["url", "name"], exportAs: ["latIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectTriggerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectTriggerComponent, decorators: [{
             type: Component,
             args: [{ imports: [ButtonComponent, IconComponent], exportAs: 'latSelectTrigger', selector: 'lat-select-trigger', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'combobox',
@@ -185,34 +180,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 class SelectValueComponent {
     select = inject(SelectDirective);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SelectValueComponent, isStandalone: true, selector: "lat-select-value", host: { attributes: { "role": "listitem" } }, exportAs: ["latSelectValue"], ngImport: i0, template: "<span>\r\n  <ng-content />\r\n</span>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: SelectValueComponent, isStandalone: true, selector: "lat-select-value", host: { attributes: { "role": "listitem" } }, exportAs: ["latSelectValue"], ngImport: i0, template: "<span>\n  <ng-content />\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectValueComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'latSelectValue', selector: 'lat-select-value', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'listitem'
-                    }, template: "<span>\r\n  <ng-content />\r\n</span>\r\n" }]
+                    }, template: "<span>\n  <ng-content />\n</span>\n" }]
         }] });
 
 class SelectValuesComponent {
     select = inject(SelectDirective);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SelectValuesComponent, isStandalone: true, selector: "lat-select-values", host: { attributes: { "role": "list" } }, exportAs: ["latSelectValues"], ngImport: i0, template: "@for (option of select._selected(); track option.value()) {\r\n  <lat-select-value>\r\n    {{ option.label() }}\r\n  </lat-select-value>\r\n} @empty {\r\n  {{ select.placeholder() }}\r\n}\r\n", dependencies: [{ kind: "component", type: SelectValueComponent, selector: "lat-select-value", exportAs: ["latSelectValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SelectValuesComponent, isStandalone: true, selector: "lat-select-values", host: { attributes: { "role": "list" } }, exportAs: ["latSelectValues"], ngImport: i0, template: "@for (option of select._selected(); track option.value()) {\n  <lat-select-value>\n    {{ option.label() }}\n  </lat-select-value>\n} @empty {\n  {{ select.placeholder() }}\n}\n", dependencies: [{ kind: "component", type: SelectValueComponent, selector: "lat-select-value", exportAs: ["latSelectValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectValuesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectValuesComponent, decorators: [{
             type: Component,
             args: [{ imports: [SelectValueComponent], exportAs: 'latSelectValues', selector: 'lat-select-values', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'list'
-                    }, template: "@for (option of select._selected(); track option.value()) {\r\n  <lat-select-value>\r\n    {{ option.label() }}\r\n  </lat-select-value>\r\n} @empty {\r\n  {{ select.placeholder() }}\r\n}\r\n" }]
+                    }, template: "@for (option of select._selected(); track option.value()) {\n  <lat-select-value>\n    {{ option.label() }}\n  </lat-select-value>\n} @empty {\n  {{ select.placeholder() }}\n}\n" }]
         }] });
 
 class SelectMultipleComponent extends SelectDirective {
-    maxlength = input(Number.MAX_SAFE_INTEGER, { transform: numberAttribute });
+    maxlength = input(Number.MAX_SAFE_INTEGER, { ...(ngDevMode ? { debugName: "maxlength" } : {}), transform: numberAttribute });
     selected = computed(() => {
         const value = this.value();
         return (value ? (Array.isArray(value) ? value : [value]) : []);
-    });
+    }, ...(ngDevMode ? [{ debugName: "selected" }] : []));
     select(option) {
         const selected = this.selected().slice();
         if (selected.length >= this.maxlength()) {
@@ -227,19 +222,19 @@ class SelectMultipleComponent extends SelectDirective {
         }
         this.writeValue(selected);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectMultipleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SelectMultipleComponent, isStandalone: true, selector: "lat-select[type=\"multiple\"]", inputs: { maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectMultipleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: SelectMultipleComponent, isStandalone: true, selector: "lat-select[type=\"multiple\"]", inputs: { maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: SelectDirective,
                 useExisting: forwardRef(() => SelectMultipleComponent),
             },
             {
-                provide: BuildInInputValueAccessor,
+                provide: HTMLInputDirective,
                 useExisting: forwardRef(() => SelectMultipleComponent),
             },
-        ], exportAs: ["latSelect"], usesInheritance: true, ngImport: i0, template: "<lat-select-trigger cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n  <lat-select-values />\r\n</lat-select-trigger>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  cdkConnectedOverlayHasBackdrop\r\n  cdkConnectedOverlayLockPosition\r\n  cdkConnectedOverlayPanelClass=\"lat-select-dropdown\"\r\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"_overlayExpanded()\"\r\n  [cdkConnectedOverlayWidth]=\"_overlayWidth() > 0 ? _overlayWidth() : 'auto'\"\r\n  [cdkConnectedOverlayPositions]=\"_overlayPositions()\"\r\n  (detach)=\"hide()\"\r\n  (backdropClick)=\"hide()\"\r\n  (positionChange)=\"updateOverlayPositionSide($event)\"\r\n>\r\n  <lat-select-dropdown (selection)=\"select($event)\" />\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: SelectDropDownComponent, selector: "lat-select-dropdown", outputs: ["selection"], exportAs: ["latSelectDropDown"] }, { kind: "component", type: SelectTriggerComponent, selector: "lat-select-trigger", exportAs: ["latSelectTrigger"] }, { kind: "component", type: SelectValuesComponent, selector: "lat-select-values", exportAs: ["latSelectValues"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], exportAs: ["latSelect"], usesInheritance: true, ngImport: i0, template: "<lat-select-trigger cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <lat-select-values />\n</lat-select-trigger>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayLockPosition\n  cdkConnectedOverlayPanelClass=\"lat-select-dropdown\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"_overlayExpanded()\"\n  [cdkConnectedOverlayWidth]=\"_overlayWidth() > 0 ? _overlayWidth() : 'auto'\"\n  [cdkConnectedOverlayPositions]=\"_overlayPositions()\"\n  (detach)=\"hide()\"\n  (backdropClick)=\"hide()\"\n  (positionChange)=\"updateOverlayPositionSide($event)\"\n>\n  <lat-select-dropdown (selection)=\"select($event)\" />\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: SelectDropDownComponent, selector: "lat-select-dropdown", outputs: ["selection"], exportAs: ["latSelectDropDown"] }, { kind: "component", type: SelectTriggerComponent, selector: "lat-select-trigger", exportAs: ["latSelectTrigger"] }, { kind: "component", type: SelectValuesComponent, selector: "lat-select-values", exportAs: ["latSelectValues"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectMultipleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectMultipleComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         CdkOverlayOrigin,
@@ -253,36 +248,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                             useExisting: forwardRef(() => SelectMultipleComponent),
                         },
                         {
-                            provide: BuildInInputValueAccessor,
+                            provide: HTMLInputDirective,
                             useExisting: forwardRef(() => SelectMultipleComponent),
                         },
-                    ], template: "<lat-select-trigger cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n  <lat-select-values />\r\n</lat-select-trigger>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  cdkConnectedOverlayHasBackdrop\r\n  cdkConnectedOverlayLockPosition\r\n  cdkConnectedOverlayPanelClass=\"lat-select-dropdown\"\r\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"_overlayExpanded()\"\r\n  [cdkConnectedOverlayWidth]=\"_overlayWidth() > 0 ? _overlayWidth() : 'auto'\"\r\n  [cdkConnectedOverlayPositions]=\"_overlayPositions()\"\r\n  (detach)=\"hide()\"\r\n  (backdropClick)=\"hide()\"\r\n  (positionChange)=\"updateOverlayPositionSide($event)\"\r\n>\r\n  <lat-select-dropdown (selection)=\"select($event)\" />\r\n</ng-template>\r\n" }]
-        }] });
+                    ], template: "<lat-select-trigger cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <lat-select-values />\n</lat-select-trigger>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayLockPosition\n  cdkConnectedOverlayPanelClass=\"lat-select-dropdown\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"_overlayExpanded()\"\n  [cdkConnectedOverlayWidth]=\"_overlayWidth() > 0 ? _overlayWidth() : 'auto'\"\n  [cdkConnectedOverlayPositions]=\"_overlayPositions()\"\n  (detach)=\"hide()\"\n  (backdropClick)=\"hide()\"\n  (positionChange)=\"updateOverlayPositionSide($event)\"\n>\n  <lat-select-dropdown (selection)=\"select($event)\" />\n</ng-template>\n" }]
+        }], propDecorators: { maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }] } });
 
 class SelectSingleComponent extends SelectDirective {
-    nullable = input(true, { transform: booleanAttribute });
+    nullable = input(true, { ...(ngDevMode ? { debugName: "nullable" } : {}), transform: booleanAttribute });
     selected = computed(() => {
         const value = this.value();
         return (value === undefined ? [] : [value]);
-    });
+    }, ...(ngDevMode ? [{ debugName: "selected" }] : []));
     select(option) {
         const value = this.nullable() ? (option.selected() ? null : option.value()) : option.value();
         this.writeValue(value);
         this.hide();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectSingleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SelectSingleComponent, isStandalone: true, selector: "lat-select[type=\"single\"]", inputs: { nullable: { classPropertyName: "nullable", publicName: "nullable", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectSingleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: SelectSingleComponent, isStandalone: true, selector: "lat-select[type=\"single\"]", inputs: { nullable: { classPropertyName: "nullable", publicName: "nullable", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: SelectDirective,
                 useExisting: forwardRef(() => SelectSingleComponent),
             },
             {
-                provide: BuildInInputValueAccessor,
+                provide: HTMLInputDirective,
                 useExisting: forwardRef(() => SelectSingleComponent),
             },
-        ], exportAs: ["latSelect"], usesInheritance: true, ngImport: i0, template: "<lat-select-trigger cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n  <lat-select-values />\r\n</lat-select-trigger>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  cdkConnectedOverlayHasBackdrop\r\n  cdkConnectedOverlayLockPosition\r\n  cdkConnectedOverlayPanelClass=\"lat-select-dropdown\"\r\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"_overlayExpanded()\"\r\n  [cdkConnectedOverlayWidth]=\"_overlayWidth() > 0 ? _overlayWidth() : 'auto'\"\r\n  [cdkConnectedOverlayPositions]=\"_overlayPositions()\"\r\n  (detach)=\"hide()\"\r\n  (backdropClick)=\"hide()\"\r\n  (positionChange)=\"updateOverlayPositionSide($event)\"\r\n>\r\n  <lat-select-dropdown (selection)=\"select($event)\" />\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: SelectDropDownComponent, selector: "lat-select-dropdown", outputs: ["selection"], exportAs: ["latSelectDropDown"] }, { kind: "component", type: SelectTriggerComponent, selector: "lat-select-trigger", exportAs: ["latSelectTrigger"] }, { kind: "component", type: SelectValuesComponent, selector: "lat-select-values", exportAs: ["latSelectValues"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], exportAs: ["latSelect"], usesInheritance: true, ngImport: i0, template: "<lat-select-trigger cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <lat-select-values />\n</lat-select-trigger>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayLockPosition\n  cdkConnectedOverlayPanelClass=\"lat-select-dropdown\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"_overlayExpanded()\"\n  [cdkConnectedOverlayWidth]=\"_overlayWidth() > 0 ? _overlayWidth() : 'auto'\"\n  [cdkConnectedOverlayPositions]=\"_overlayPositions()\"\n  (detach)=\"hide()\"\n  (backdropClick)=\"hide()\"\n  (positionChange)=\"updateOverlayPositionSide($event)\"\n>\n  <lat-select-dropdown (selection)=\"select($event)\" />\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: SelectDropDownComponent, selector: "lat-select-dropdown", outputs: ["selection"], exportAs: ["latSelectDropDown"] }, { kind: "component", type: SelectTriggerComponent, selector: "lat-select-trigger", exportAs: ["latSelectTrigger"] }, { kind: "component", type: SelectValuesComponent, selector: "lat-select-values", exportAs: ["latSelectValues"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectSingleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SelectSingleComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         CdkOverlayOrigin,
@@ -296,21 +291,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                             useExisting: forwardRef(() => SelectSingleComponent),
                         },
                         {
-                            provide: BuildInInputValueAccessor,
+                            provide: HTMLInputDirective,
                             useExisting: forwardRef(() => SelectSingleComponent),
                         },
-                    ], template: "<lat-select-trigger cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n  <lat-select-values />\r\n</lat-select-trigger>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  cdkConnectedOverlayHasBackdrop\r\n  cdkConnectedOverlayLockPosition\r\n  cdkConnectedOverlayPanelClass=\"lat-select-dropdown\"\r\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"_overlayExpanded()\"\r\n  [cdkConnectedOverlayWidth]=\"_overlayWidth() > 0 ? _overlayWidth() : 'auto'\"\r\n  [cdkConnectedOverlayPositions]=\"_overlayPositions()\"\r\n  (detach)=\"hide()\"\r\n  (backdropClick)=\"hide()\"\r\n  (positionChange)=\"updateOverlayPositionSide($event)\"\r\n>\r\n  <lat-select-dropdown (selection)=\"select($event)\" />\r\n</ng-template>\r\n" }]
-        }] });
-
-const SelectModule = [
-    SelectOptionComponent,
-    SelectMultipleComponent,
-    SelectSingleComponent
-];
+                    ], template: "<lat-select-trigger cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <lat-select-values />\n</lat-select-trigger>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayLockPosition\n  cdkConnectedOverlayPanelClass=\"lat-select-dropdown\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"_overlayExpanded()\"\n  [cdkConnectedOverlayWidth]=\"_overlayWidth() > 0 ? _overlayWidth() : 'auto'\"\n  [cdkConnectedOverlayPositions]=\"_overlayPositions()\"\n  (detach)=\"hide()\"\n  (backdropClick)=\"hide()\"\n  (positionChange)=\"updateOverlayPositionSide($event)\"\n>\n  <lat-select-dropdown (selection)=\"select($event)\" />\n</ng-template>\n" }]
+        }], propDecorators: { nullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullable", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SelectDirective, SelectModule, SelectMultipleComponent, SelectOptionComponent, SelectOptionDirective, SelectSingleComponent };
+export { SelectDirective, SelectMultipleComponent, SelectOptionComponent, SelectOptionDirective, SelectSingleComponent };
 //# sourceMappingURL=latitude-ui-widgets-select.mjs.map