@latitude-ui/widgets 0.0.26 → 0.0.28

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

@@ -1,186 +1,40 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, numberAttribute, booleanAttribute, computed, linkedSignal, signal, Directive, contentChild, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
-import { noop, uid } from '@latitude-ui/widgets/core';
-import { NgControl } from '@angular/forms';
+import { computed, inject, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { HTMLFormControlContainer, ARIA_LABELLEDBY, ARIA_ERRORMESSAGE } from '@latitude-ui/widgets/core';
 
-const INPUT_OPTIONS = new InjectionToken(ngDevMode ? 'INPUT_OPTIONS' : '', {
-    factory: () => {
-        return {
-            size: 'md',
-            variant: 'default',
-        };
-    }
-});
-
-class HTMLInputDirective {
-    options = inject(INPUT_OPTIONS);
-    dir = inject(NgControl, { self: true });
-    input = inject((InputComponent), { host: true, optional: true });
-    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
-    size = input(this.options.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
-    variant = input(this.options.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : {}), transform: numberAttribute });
-    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
-    required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
-    autofocus = input(undefined, { ...(ngDevMode ? { debugName: "autofocus" } : {}), transform: booleanAttribute });
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
-    value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : []));
-    control = computed(() => this._control(), ...(ngDevMode ? [{ debugName: "control" }] : []));
-    valueAsString = linkedSignal({ ...(ngDevMode ? { debugName: "valueAsString" } : {}), source: () => this._value(),
-        computation: (value) => this.valueStringify(value) });
-    status = computed(() => this._control()?.['statusReactive'](), ...(ngDevMode ? [{ debugName: "status" }] : []));
-    touched = computed(() => this._control()?.['touchedReactive'](), ...(ngDevMode ? [{ debugName: "touched" }] : []));
-    pristine = computed(() => this._control()?.['pristineReactive'](), ...(ngDevMode ? [{ debugName: "pristine" }] : []));
-    valid = computed(() => this.status() === 'VALID', ...(ngDevMode ? [{ debugName: "valid" }] : []));
-    invalid = computed(() => this.status() === 'INVALID', ...(ngDevMode ? [{ debugName: "invalid" }] : []));
-    pending = computed(() => this.status() === 'PENDING', ...(ngDevMode ? [{ debugName: "pending" }] : []));
-    disabled = computed(() => this.status() === 'DISABLED', ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    dirty = computed(() => !this.pristine(), ...(ngDevMode ? [{ debugName: "dirty" }] : []));
-    errors = computed(() => {
-        this.value();
-        this.status();
-        const control = this.control();
-        return control ? control.errors : null;
-    }, ...(ngDevMode ? [{ debugName: "errors" }] : []));
-    labelId = computed(() => this.input ? this.input.labelId() : undefined, ...(ngDevMode ? [{ debugName: "labelId" }] : []));
-    inputId = computed(() => this.input ? this.input.inputId() : this.id(), ...(ngDevMode ? [{ debugName: "inputId" }] : []));
-    inputSize = computed(() => this.input ? this.input.size() : this.size(), ...(ngDevMode ? [{ debugName: "inputSize" }] : []));
-    inputVariant = computed(() => this.input ? this.input.variant() : this.variant(), ...(ngDevMode ? [{ debugName: "inputVariant" }] : []));
-    outputId = computed(() => this.input ? this.input.outputId() : undefined, ...(ngDevMode ? [{ debugName: "outputId" }] : []));
-    /** @internal */
-    _value = signal(this.dir.value, ...(ngDevMode ? [{ debugName: "_value" }] : []));
-    /** @internal */
-    _control = signal(null, ...(ngDevMode ? [{ debugName: "_control" }] : []));
-    constructor() {
-        this.dir.valueAccessor = {
-            writeValue: (value) => {
-                this._writeValue(value);
-            },
-            registerOnChange: (callback) => {
-                this._markAsChanged = () => callback(this._value());
-                // FIXME: while FromControlNameDirective not register, underline control is undefined
-                Promise.resolve().then(() => {
-                    this._control.update(() => this.dir.control);
-                });
-            },
-            registerOnTouched: (callback) => {
-                this._markAsTouched = () => callback();
-            }
-        };
-    }
-    /**
-     * Sets the "value" property on the input element.
-     */
-    writeValue(value) {
-        if (this._writeValue(value)) {
-            this._markAsChanged();
-        }
-    }
-    /**
-     * Marks the control as `dirty`.
-     */
-    markAsChanged() {
-        this._markAsChanged();
-    }
-    /**
-     * Marks the control as `touched`.
-     */
-    markAsTouched() {
-        this._markAsTouched();
-    }
-    /** @internal */
-    valueEquality(value0, value1) {
-        return Object.is(value0, value1);
-    }
-    /** @internal */
-    valueStringify(value) {
-        return value !== null && value !== undefined ? value.toString() : '';
-    }
-    /** @internal */
-    _writeValue(input) {
-        const value = this._value();
-        if (this.valueEquality(value, input)) {
-            return false;
-        }
-        this._value.set(input);
-        return true;
-    }
-    /** @internal */
-    _markAsTouched = noop;
-    /** @internal */
-    _markAsChanged = noop;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: HTMLInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: HTMLInputDirective, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "attr.size": "inputSize() || undefined", "attr.variant": "inputVariant() || undefined", "attr.data-id": "inputId() || undefined", "attr.data-label": "labelId() || undefined", "attr.data-output": "outputId() || undefined", "attr.data-dirty": "dirty() || undefined", "attr.data-invalid": "invalid() || undefined", "attr.data-pristine": "pristine() || undefined", "attr.data-disabled": "disabled() || undefined", "attr.data-readonly": "readonly() || undefined", "attr.data-required": "required() || undefined" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: HTMLInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    host: {
-                        role: 'presentation',
-                        '[attr.size]': 'inputSize() || undefined',
-                        '[attr.variant]': 'inputVariant() || undefined',
-                        '[attr.data-id]': 'inputId() || undefined',
-                        '[attr.data-label]': 'labelId() || undefined',
-                        '[attr.data-output]': 'outputId() || undefined',
-                        '[attr.data-dirty]': 'dirty() || undefined',
-                        '[attr.data-invalid]': 'invalid() || undefined',
-                        '[attr.data-pristine]': 'pristine() || undefined',
-                        '[attr.data-disabled]': 'disabled() || undefined',
-                        '[attr.data-readonly]': 'readonly() || undefined',
-                        '[attr.data-required]': 'required() || undefined'
-                    }
-                }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
-
-class InputComponent {
-    options = inject(INPUT_OPTIONS);
-    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
-    size = input(this.options.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
-    variant = input(this.options.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    input = contentChild.required((HTMLInputDirective));
-    htmlId = computed(() => this.id() ?? uid(), ...(ngDevMode ? [{ debugName: "htmlId" }] : []));
+class InputComponent extends HTMLFormControlContainer {
     labelId = computed(() => `lat-label-${this.htmlId()}`, ...(ngDevMode ? [{ debugName: "labelId" }] : []));
-    inputId = computed(() => `lat-input-${this.htmlId()}`, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
     outputId = computed(() => `lat-output-${this.htmlId()}`, ...(ngDevMode ? [{ debugName: "outputId" }] : []));
-    value = computed(() => this.input().value(), ...(ngDevMode ? [{ debugName: "value" }] : []));
-    valueAsString = computed(() => this.input().valueAsString(), ...(ngDevMode ? [{ debugName: "valueAsString" }] : []));
-    status = computed(() => this.input().status(), ...(ngDevMode ? [{ debugName: "status" }] : []));
-    touched = computed(() => this.input().touched(), ...(ngDevMode ? [{ debugName: "touched" }] : []));
-    dirty = computed(() => this.input().dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : []));
-    valid = computed(() => this.input().valid(), ...(ngDevMode ? [{ debugName: "valid" }] : []));
-    errors = computed(() => this.input().errors(), ...(ngDevMode ? [{ debugName: "errors" }] : []));
-    invalid = computed(() => this.input().invalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : []));
-    pending = computed(() => this.input().pending(), ...(ngDevMode ? [{ debugName: "pending" }] : []));
-    pristine = computed(() => this.input().pristine(), ...(ngDevMode ? [{ debugName: "pristine" }] : []));
-    disabled = computed(() => this.input().disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    readonly = computed(() => this.input().readonly(), ...(ngDevMode ? [{ debugName: "readonly" }] : []));
-    required = computed(() => this.input().required(), ...(ngDevMode ? [{ debugName: "required" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: InputComponent, isStandalone: true, selector: "lat-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "attr.id": "htmlId()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-label": "labelId()", "attr.data-input": "inputId()", "attr.data-output": "outputId()", "attr.data-dirty": "dirty() || undefined", "attr.data-invalid": "invalid() || undefined", "attr.data-pristine": "pristine() || undefined", "attr.data-disabled": "disabled() || undefined", "attr.data-readonly": "readonly() || undefined", "attr.data-required": "required() || undefined" } }, queries: [{ propertyName: "input", first: true, predicate: (HTMLInputDirective), descendants: true, isSignal: true }], exportAs: ["latInput"], ngImport: i0, template: "<ng-content select=\"lat-label\" />\r\n\r\n<ng-content />\r\n\r\n@if (dirty() && errors()) {\r\n  <ng-content select=\"lat-output\" />\r\n}\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: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: InputComponent, isStandalone: true, selector: "lat-input", providers: [
+            {
+                provide: ARIA_LABELLEDBY,
+                useFactory: () => inject(InputComponent, { self: true }).labelId
+            },
+            {
+                provide: ARIA_ERRORMESSAGE,
+                useFactory: () => inject(InputComponent, { self: true }).outputId
+            },
+        ], exportAs: ["latInput"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"lat-label\" />\r\n\r\n<ng-content />\r\n\r\n@if (dirty() && errors()) {\r\n  <ng-content select=\"lat-output\" />\r\n}\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ exportAs: 'latInput', selector: 'lat-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        role: 'presentation',
-                        '[attr.id]': 'htmlId()',
-                        '[attr.data-size]': 'size()',
-                        '[attr.data-variant]': 'variant()',
-                        '[attr.data-label]': 'labelId()',
-                        '[attr.data-input]': 'inputId()',
-                        '[attr.data-output]': 'outputId()',
-                        '[attr.data-dirty]': 'dirty() || undefined',
-                        '[attr.data-invalid]': 'invalid() || undefined',
-                        '[attr.data-pristine]': 'pristine() || undefined',
-                        '[attr.data-disabled]': 'disabled() || undefined',
-                        '[attr.data-readonly]': 'readonly() || undefined',
-                        '[attr.data-required]': 'required() || undefined'
-                    }, template: "<ng-content select=\"lat-label\" />\r\n\r\n<ng-content />\r\n\r\n@if (dirty() && errors()) {\r\n  <ng-content select=\"lat-output\" />\r\n}\r\n" }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HTMLInputDirective), { isSignal: true }] }] } });
+            args: [{ exportAs: 'latInput', selector: 'lat-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: ARIA_LABELLEDBY,
+                            useFactory: () => inject(InputComponent, { self: true }).labelId
+                        },
+                        {
+                            provide: ARIA_ERRORMESSAGE,
+                            useFactory: () => inject(InputComponent, { self: true }).outputId
+                        },
+                    ], template: "<ng-content select=\"lat-label\" />\r\n\r\n<ng-content />\r\n\r\n@if (dirty() && errors()) {\r\n  <ng-content select=\"lat-output\" />\r\n}\r\n" }]
+        }] });
 
 class LabelComponent {
     input = inject((InputComponent), { host: true });
     id = computed(() => this.input.labelId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
-    htmlFor = computed(() => this.input.inputId(), ...(ngDevMode ? [{ debugName: "htmlFor" }] : []));
+    htmlFor = computed(() => this.input.controlId(), ...(ngDevMode ? [{ debugName: "htmlFor" }] : []));
     required = computed(() => this.input.required(), ...(ngDevMode ? [{ debugName: "required" }] : []));
     readonly = computed(() => this.input.readonly(), ...(ngDevMode ? [{ debugName: "readonly" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -197,7 +51,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 class OutputComponent {
     input = inject((InputComponent), { host: true });
     id = computed(() => this.input.outputId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
-    htmlFor = computed(() => this.input.inputId(), ...(ngDevMode ? [{ debugName: "htmlFor" }] : []));
+    htmlFor = computed(() => this.input.controlId(), ...(ngDevMode ? [{ debugName: "htmlFor" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: OutputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: OutputComponent, isStandalone: true, selector: "lat-output", host: { attributes: { "role": "presentation" }, properties: { "attr.id": "null" } }, exportAs: ["latOutput"], ngImport: i0, template: "<output [attr.id]=\"id()\" [attr.for]=\"htmlFor()\">\r\n  <ng-content></ng-content>\r\n</output>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -213,5 +67,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { HTMLInputDirective, INPUT_OPTIONS, InputComponent, LabelComponent, OutputComponent };
+export { InputComponent, LabelComponent, OutputComponent };
 //# sourceMappingURL=latitude-ui-widgets-input.mjs.map

package/fesm2022/latitude-ui-widgets-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"latitude-ui-widgets-input.mjs","sources":["../../../../packages/widgets/input/lib/input.options.ts","../../../../packages/widgets/input/lib/input.directive.ts","../../../../packages/widgets/input/lib/input.component.ts","../../../../packages/widgets/input/lib/input.component.html","../../../../packages/widgets/input/lib/label.component.ts","../../../../packages/widgets/input/lib/label.component.html","../../../../packages/widgets/input/lib/output.component.ts","../../../../packages/widgets/input/lib/output.component.html","../../../../packages/widgets/input/latitude-ui-widgets-input.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\n\r\nimport { BoxSize } from '@latitude-ui/widgets/core';\r\n\r\n\r\nexport type InputOptions = {\r\n  size: BoxSize;\r\n  variant: 'default' | 'inherit' | ({} & string);\r\n}\r\n\r\nexport const INPUT_OPTIONS = new InjectionToken<InputOptions>(\r\n  ngDevMode ? 'INPUT_OPTIONS' : '',\r\n  {\r\n    factory: () => {\r\n      return {\r\n        size: 'md',\r\n        variant: 'default',\r\n      }\r\n    }\r\n  }\r\n);\r\n","import {\r\n  booleanAttribute,\r\n  computed,\r\n  Directive,\r\n  inject,\r\n  input,\r\n  linkedSignal,\r\n  numberAttribute,\r\n  signal\r\n} from '@angular/core';\r\nimport { AbstractControl, FormControlStatus, NgControl } from '@angular/forms';\r\n\r\nimport { noop } from '@latitude-ui/widgets/core';\r\n\r\nimport { InputComponent } from './input.component';\r\nimport { InputOptions, INPUT_OPTIONS } from './input.options';\r\n\r\n\r\n@Directive({\r\n  host: {\r\n    role: 'presentation',\r\n    '[attr.size]': 'inputSize() || undefined',\r\n    '[attr.variant]': 'inputVariant() || undefined',\r\n    '[attr.data-id]': 'inputId() || undefined',\r\n    '[attr.data-label]': 'labelId() || undefined',\r\n    '[attr.data-output]': 'outputId() || undefined',\r\n    '[attr.data-dirty]': 'dirty() || undefined',\r\n    '[attr.data-invalid]': 'invalid() || undefined',\r\n    '[attr.data-pristine]': 'pristine() || undefined',\r\n    '[attr.data-disabled]': 'disabled() || undefined',\r\n    '[attr.data-readonly]': 'readonly() || undefined',\r\n    '[attr.data-required]': 'required() || undefined'\r\n  }\r\n})\r\nexport class HTMLInputDirective<T> {\r\n  readonly options = inject(INPUT_OPTIONS);\r\n\r\n  readonly dir = inject(NgControl, { self: true });\r\n  readonly input = inject(InputComponent<T>, { host: true, optional: true });\r\n\r\n  readonly id = input<string>();\r\n  readonly size = input<InputOptions['size']>(this.options.size);\r\n  readonly variant = input<InputOptions['variant']>(this.options.variant);\r\n  readonly tabindex = input<number, unknown>(0, { transform: numberAttribute });\r\n  readonly readonly = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  readonly required = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  readonly autofocus = input<boolean, unknown>(undefined, { transform: booleanAttribute });\r\n  readonly placeholder = input<string>();\r\n\r\n  readonly value = computed(() => this._value());\r\n  readonly control = computed(() => this._control());\r\n\r\n  readonly valueAsString = linkedSignal({\r\n    source: () => this._value(),\r\n    computation: (value) => this.valueStringify(value)\r\n  });\r\n\r\n  readonly status = computed(() => this._control()?.['statusReactive']() as FormControlStatus);\r\n  readonly touched = computed(() => this._control()?.['touchedReactive']() as boolean);\r\n  readonly pristine = computed(() => this._control()?.['pristineReactive']() as boolean);\r\n\r\n  readonly valid = computed(() => this.status() === 'VALID');\r\n  readonly invalid = computed(() => this.status() === 'INVALID');\r\n  readonly pending = computed(() => this.status() === 'PENDING');\r\n  readonly disabled = computed(() => this.status() === 'DISABLED');\r\n\r\n  readonly dirty = computed(() => !this.pristine());\r\n  readonly errors = computed(() => {\r\n    this.value();\r\n    this.status();\r\n\r\n    const control = this.control();\r\n\r\n    return control ? control.errors : null;\r\n  });\r\n\r\n  readonly labelId = computed(() => this.input ? this.input.labelId() : undefined);\r\n  readonly inputId = computed(() => this.input ? this.input.inputId() : this.id());\r\n  readonly inputSize = computed(() => this.input ? this.input.size() : this.size());\r\n  readonly inputVariant = computed(() => this.input ? this.input.variant() : this.variant());\r\n  readonly outputId = computed(() => this.input ? this.input.outputId() : undefined);\r\n\r\n  /** @internal */\r\n  readonly _value = signal<T | null>(this.dir.value);\r\n\r\n  /** @internal */\r\n  readonly _control = signal<AbstractControl | null>(null);\r\n\r\n  constructor() {\r\n    this.dir.valueAccessor = {\r\n      writeValue: (value: T | null) => {\r\n        this._writeValue(value);\r\n      },\r\n      registerOnChange: (callback: (value: T | null) => void) => {\r\n        this._markAsChanged = () => callback(this._value());\r\n\r\n        // FIXME: while FromControlNameDirective not register, underline control is undefined\r\n        Promise.resolve().then(() => {\r\n          this._control.update(() => this.dir.control);\r\n        });\r\n      },\r\n      registerOnTouched: (callback: () => void) => {\r\n        this._markAsTouched = () => callback();\r\n      }\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Sets the \"value\" property on the input element.\r\n   */\r\n  writeValue(value: T | null): void {\r\n    if (this._writeValue(value)) {\r\n      this._markAsChanged();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Marks the control as `dirty`.\r\n   */\r\n  markAsChanged(): void {\r\n    this._markAsChanged();\r\n  }\r\n\r\n  /**\r\n   * Marks the control as `touched`.\r\n   */\r\n  markAsTouched(): void {\r\n    this._markAsTouched();\r\n  }\r\n\r\n  /** @internal */\r\n  valueEquality(value0: T | null, value1: unknown): boolean {\r\n    return Object.is(value0, value1);\r\n  }\r\n\r\n  /** @internal */\r\n  valueStringify(value: unknown): string {\r\n    return value !== null && value !== undefined ? value.toString() : '';\r\n  }\r\n\r\n  /** @internal */\r\n  _writeValue(input: T | null): boolean {\r\n    const value = this._value();\r\n\r\n    if (this.valueEquality(value, input)) {\r\n      return false;\r\n    }\r\n\r\n    this._value.set(input);\r\n\r\n    return true;\r\n  }\r\n\r\n  /** @internal */\r\n  _markAsTouched: VoidFunction = noop;\r\n\r\n  /** @internal */\r\n  _markAsChanged: VoidFunction = noop;\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  contentChild,\r\n  inject,\r\n  input,\r\n  ViewEncapsulation\r\n} from '@angular/core';\r\n\r\nimport { uid } from '@latitude-ui/widgets/core';\r\n\r\nimport { HTMLInputDirective } from './input.directive';\r\nimport { InputOptions, INPUT_OPTIONS } from './input.options';\r\n\r\n@Component({\r\n  exportAs: 'latInput',\r\n  selector: 'lat-input',\r\n  templateUrl: './input.component.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    role: 'presentation',\r\n    '[attr.id]': 'htmlId()',\r\n    '[attr.data-size]': 'size()',\r\n    '[attr.data-variant]': 'variant()',\r\n    '[attr.data-label]': 'labelId()',\r\n    '[attr.data-input]': 'inputId()',\r\n    '[attr.data-output]': 'outputId()',\r\n    '[attr.data-dirty]': 'dirty() || undefined',\r\n    '[attr.data-invalid]': 'invalid() || undefined',\r\n    '[attr.data-pristine]': 'pristine() || undefined',\r\n    '[attr.data-disabled]': 'disabled() || undefined',\r\n    '[attr.data-readonly]': 'readonly() || undefined',\r\n    '[attr.data-required]': 'required() || undefined'\r\n  }\r\n})\r\nexport class InputComponent<T> {\r\n  readonly options = inject(INPUT_OPTIONS);\r\n\r\n  readonly id = input<string>();\r\n  readonly size = input<InputOptions['size']>(this.options.size);\r\n  readonly variant = input<InputOptions['variant']>(this.options.variant);\r\n\r\n  readonly input = contentChild.required(HTMLInputDirective<T>);\r\n\r\n  readonly htmlId = computed(() => this.id() ?? uid());\r\n  readonly labelId = computed(() => `lat-label-${this.htmlId()}`);\r\n  readonly inputId = computed(() => `lat-input-${this.htmlId()}`);\r\n  readonly outputId = computed(() => `lat-output-${this.htmlId()}`);\r\n\r\n  readonly value = computed(() => this.input().value());\r\n  readonly valueAsString = computed(() => this.input().valueAsString());\r\n\r\n  readonly status = computed(() => this.input().status());\r\n  readonly touched = computed(() => this.input().touched());\r\n\r\n  readonly dirty = computed(() => this.input().dirty());\r\n  readonly valid = computed(() => this.input().valid());\r\n  readonly errors = computed(() => this.input().errors());\r\n  readonly invalid = computed(() => this.input().invalid());\r\n  readonly pending = computed(() => this.input().pending());\r\n  readonly pristine = computed(() => this.input().pristine());\r\n  readonly disabled = computed(() => this.input().disabled());\r\n  readonly readonly = computed(() => this.input().readonly());\r\n  readonly required = computed(() => this.input().required());\r\n}\r\n","<ng-content select=\"lat-label\" />\r\n\r\n<ng-content />\r\n\r\n@if (dirty() && errors()) {\r\n  <ng-content select=\"lat-output\" />\r\n}\r\n","import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from '@angular/core';\r\nimport { InputComponent } from './input.component';\r\n\r\n@Component({\r\n  exportAs: 'latLabel',\r\n  selector: 'lat-label',\r\n  templateUrl: './label.component.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    role: 'presentation',\r\n    '[attr.id]': 'null'\r\n  }\r\n})\r\nexport class LabelComponent<T = unknown> {\r\n  readonly input = inject(InputComponent<T>, { host: true });\r\n\r\n  readonly id = computed(() => this.input.labelId());\r\n  readonly htmlFor = computed(() => this.input.inputId());\r\n  readonly required = computed(() => this.input.required());\r\n  readonly readonly = computed(() => this.input.readonly());\r\n}\r\n","<label [attr.id]=\"id()\" [attr.for]=\"htmlFor()\">\r\n  <ng-content></ng-content>\r\n  @if (!readonly() && required()) {\r\n    <span class=\"lat-label-asterix\" aria-hidden=\"true\" title=\"required\">*</span>\r\n  }\r\n</label>\r\n","import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from '@angular/core';\r\nimport { InputComponent } from './input.component';\r\n\r\n@Component({\r\n  exportAs: 'latOutput',\r\n  selector: 'lat-output',\r\n  templateUrl: './output.component.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    role: 'presentation',\r\n    '[attr.id]': 'null'\r\n  }\r\n})\r\nexport class OutputComponent<T = unknown> {\r\n  readonly input = inject(InputComponent<T>, { host: true });\r\n\r\n  readonly id = computed(() => this.input.outputId());\r\n  readonly htmlFor = computed(() => this.input.inputId());\r\n}\r\n","<output [attr.id]=\"id()\" [attr.for]=\"htmlFor()\">\r\n  <ng-content></ng-content>\r\n</output>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"latitude-ui-widgets-input.mjs","sources":["../../../../packages/widgets/input/lib/input.component.ts","../../../../packages/widgets/input/lib/input.component.html","../../../../packages/widgets/input/lib/label.component.ts","../../../../packages/widgets/input/lib/label.component.html","../../../../packages/widgets/input/lib/output.component.ts","../../../../packages/widgets/input/lib/output.component.html","../../../../packages/widgets/input/latitude-ui-widgets-input.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from '@angular/core';\r\n\r\nimport { ARIA_ERRORMESSAGE, ARIA_LABELLEDBY, HTMLFormControlContainer } from '@latitude-ui/widgets/core';\r\n\r\n\r\n@Component({\r\n  exportAs: 'latInput',\r\n  selector: 'lat-input',\r\n  templateUrl: './input.component.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  providers: [\r\n    {\r\n      provide: ARIA_LABELLEDBY,\r\n      useFactory: () => inject(InputComponent, { self: true }).labelId\r\n    },\r\n    {\r\n      provide: ARIA_ERRORMESSAGE,\r\n      useFactory: () => inject(InputComponent, { self: true }).outputId\r\n    },\r\n  ]\r\n})\r\nexport class InputComponent<T> extends HTMLFormControlContainer<T> {\r\n  readonly labelId = computed(() => `lat-label-${this.htmlId()}`);\r\n  readonly outputId = computed(() => `lat-output-${this.htmlId()}`);\r\n}\r\n","<ng-content select=\"lat-label\" />\r\n\r\n<ng-content />\r\n\r\n@if (dirty() && errors()) {\r\n  <ng-content select=\"lat-output\" />\r\n}\r\n","import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from '@angular/core';\r\nimport { InputComponent } from './input.component';\r\n\r\n@Component({\r\n  exportAs: 'latLabel',\r\n  selector: 'lat-label',\r\n  templateUrl: './label.component.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    role: 'presentation',\r\n    '[attr.id]': 'null'\r\n  }\r\n})\r\nexport class LabelComponent<T = unknown> {\r\n  readonly input = inject(InputComponent<T>, { host: true });\r\n\r\n  readonly id = computed(() => this.input.labelId());\r\n  readonly htmlFor = computed(() => this.input.controlId());\r\n  readonly required = computed(() => this.input.required());\r\n  readonly readonly = computed(() => this.input.readonly());\r\n}\r\n","<label [attr.id]=\"id()\" [attr.for]=\"htmlFor()\">\r\n  <ng-content></ng-content>\r\n  @if (!readonly() && required()) {\r\n    <span class=\"lat-label-asterix\" aria-hidden=\"true\" title=\"required\">*</span>\r\n  }\r\n</label>\r\n","import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from '@angular/core';\r\nimport { InputComponent } from './input.component';\r\n\r\n@Component({\r\n  exportAs: 'latOutput',\r\n  selector: 'lat-output',\r\n  templateUrl: './output.component.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    role: 'presentation',\r\n    '[attr.id]': 'null'\r\n  }\r\n})\r\nexport class OutputComponent<T = unknown> {\r\n  readonly input = inject(InputComponent<T>, { host: true });\r\n\r\n  readonly id = computed(() => this.input.outputId());\r\n  readonly htmlFor = computed(() => this.input.controlId());\r\n}\r\n","<output [attr.id]=\"id()\" [attr.for]=\"htmlFor()\">\r\n  <ng-content></ng-content>\r\n</output>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,49 @@
+import * as i0 from '@angular/core';
+import { input, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { HTMLFormControl } from '@latitude-ui/widgets/core';
+import { ButtonComponent } from '@latitude-ui/widgets/button';
+import { IconComponent } from '@latitude-ui/widgets/icons';
+
+const DEFAULT_POPOVER = () => {
+    throw new Error('[lat-lookup]: PopoverOverlay() is not implemented');
+};
+const DEFAULT_STRINGIFY = (value) => value.toString();
+class LookupComponent extends HTMLFormControl {
+    popover = input(DEFAULT_POPOVER, ...(ngDevMode ? [{ debugName: "popover" }] : []));
+    stringify = input(DEFAULT_STRINGIFY, ...(ngDevMode ? [{ debugName: "stringify" }] : []));
+    onSelect() {
+        const taskFn = this.popover();
+        taskFn().subscribe((value) => this.writeValue(value));
+    }
+    /** @internal */
+    valueStringify(value) {
+        const stringify = this.stringify();
+        return value !== null && value !== undefined ? stringify(value) : '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LookupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: LookupComponent, isStandalone: true, selector: "lat-lookup", inputs: { popover: { classPropertyName: "popover", publicName: "popover", isSignal: true, isRequired: false, transformFunction: null }, stringify: { classPropertyName: "stringify", publicName: "stringify", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox" }, listeners: { "click": "onSelect()" } }, providers: [
+            {
+                provide: HTMLFormControl,
+                useExisting: forwardRef(() => LookupComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"lat-lookup-values\">\r\n  @if(value()) {\r\n    <span class=\"lat-lookup-value\">{{ valueAsString() }}</span>\r\n  } @else if(placeholder()) {\r\n    <span class=\"lat-lookup-palceholder\">{{ placeholder() }}</span>\r\n  }\r\n</div>\r\n\r\n@if (!readonly()) {\r\n  <div class=\"lat-lookup-controls\">\r\n    <lat-button tabindex=\"-1\" variant=\"inherit\" [size]=\"size()\" [disabled]=\"disabled()\">\r\n      <lat-icon name=\"link\"/>\r\n    </lat-button>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "lat-button", 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: "21.1.3", ngImport: i0, type: LookupComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [ButtonComponent, IconComponent], selector: 'lat-lookup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: HTMLFormControl,
+                            useExisting: forwardRef(() => LookupComponent),
+                        },
+                    ], host: {
+                        role: 'combobox',
+                        '(click)': "onSelect()"
+                    }, template: "<div class=\"lat-lookup-values\">\r\n  @if(value()) {\r\n    <span class=\"lat-lookup-value\">{{ valueAsString() }}</span>\r\n  } @else if(placeholder()) {\r\n    <span class=\"lat-lookup-palceholder\">{{ placeholder() }}</span>\r\n  }\r\n</div>\r\n\r\n@if (!readonly()) {\r\n  <div class=\"lat-lookup-controls\">\r\n    <lat-button tabindex=\"-1\" variant=\"inherit\" [size]=\"size()\" [disabled]=\"disabled()\">\r\n      <lat-icon name=\"link\"/>\r\n    </lat-button>\r\n  </div>\r\n}\r\n" }]
+        }], propDecorators: { popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover", required: false }] }], stringify: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringify", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_POPOVER, DEFAULT_STRINGIFY, LookupComponent };
+//# sourceMappingURL=latitude-ui-widgets-lookup.mjs.map

package/fesm2022/latitude-ui-widgets-lookup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"latitude-ui-widgets-lookup.mjs","sources":["../../../../packages/widgets/lookup/lib/lookup.component.ts","../../../../packages/widgets/lookup/lib/lookup.component.html","../../../../packages/widgets/lookup/latitude-ui-widgets-lookup.ts"],"sourcesContent":["import { Observable } from 'rxjs';\r\n\r\nimport { ChangeDetectionStrategy, Component, forwardRef, input, ViewEncapsulation } from '@angular/core';\r\n\r\nimport { HTMLFormControl } from '@latitude-ui/widgets/core';\r\nimport { ButtonComponent } from '@latitude-ui/widgets/button';\r\nimport { IconComponent } from '@latitude-ui/widgets/icons';\r\n\r\nexport type ValueStringify = (value: any) => string;\r\nexport type PopoverOverlay = () => Observable<any | null>;\r\n\r\nexport const DEFAULT_POPOVER: PopoverOverlay = () => {\r\n  throw new Error('[lat-lookup]: PopoverOverlay() is not implemented');\r\n};\r\n\r\nexport const DEFAULT_STRINGIFY: ValueStringify = (value) => value.toString();\r\n\r\n@Component({\r\n  imports: [ButtonComponent, IconComponent],\r\n  selector: 'lat-lookup',\r\n  templateUrl: './lookup.component.html',\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  providers: [\r\n    {\r\n      provide: HTMLFormControl,\r\n      useExisting: forwardRef(() => LookupComponent),\r\n    },\r\n  ],\r\n  host: {\r\n    role: 'combobox',\r\n    '(click)': \"onSelect()\"\r\n  },\r\n})\r\nexport class LookupComponent<T = any> extends HTMLFormControl<T> {\r\n  readonly popover = input<PopoverOverlay>(DEFAULT_POPOVER);\r\n  readonly stringify = input<ValueStringify>(DEFAULT_STRINGIFY);\r\n\r\n  onSelect() {\r\n    const taskFn = this.popover();\r\n\r\n    taskFn().subscribe((value) => this.writeValue(value));\r\n  }\r\n\r\n  /** @internal */\r\n  override valueStringify(value: unknown): string {\r\n    const stringify = this.stringify();\r\n\r\n    return value !== null && value !== undefined ? stringify(value) : '';\r\n  }\r\n\r\n}\r\n","<div class=\"lat-lookup-values\">\r\n  @if(value()) {\r\n    <span class=\"lat-lookup-value\">{{ valueAsString() }}</span>\r\n  } @else if(placeholder()) {\r\n    <span class=\"lat-lookup-palceholder\">{{ placeholder() }}</span>\r\n  }\r\n</div>\r\n\r\n@if (!readonly()) {\r\n  <div class=\"lat-lookup-controls\">\r\n    <lat-button tabindex=\"-1\" variant=\"inherit\" [size]=\"size()\" [disabled]=\"disabled()\">\r\n      <lat-icon name=\"link\"/>\r\n    </lat-button>\r\n  </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -2,7 +2,7 @@ import { switchMap, of, delay } from 'rxjs';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i0 from '@angular/core';
 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 { HTMLFormControl } from '@latitude-ui/widgets/core';
 import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -43,7 +43,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Directive
         }] });
 
-class SelectDirective extends HTMLInputDirective {
+class SelectDirective extends HTMLFormControl {
+    mode = input('popover', ...(ngDevMode ? [{ debugName: "mode" }] : []));
     searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : {}), transform: booleanAttribute });
     contentChildren = contentChildren(SelectOptionDirective, ...(ngDevMode ? [{ debugName: "contentChildren" }] : []));
     /** @internal */
@@ -128,11 +129,11 @@ class SelectDirective extends HTMLInputDirective {
         });
     }
     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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.3", type: SelectDirective, isStandalone: true, inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, 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: "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 }] }] } });
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], 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);
@@ -167,15 +168,15 @@ class SelectTriggerComponent {
         });
     }
     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 });
+    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.size": "select.size()" } }, exportAs: ["latSelectTrigger"], ngImport: i0, template: "<ng-content select=\"lat-select-values\" />\n\n@if (!select.readonly()) {\n  <div class=\"lat-select-control\">\n    <lat-button tabindex=\"-1\" variant=\"inherit\" [size]=\"select.size()\" [disabled]=\"select.disabled()\">\n      <lat-icon [name]=\"select._overlayState() ? 'chevron-up' : 'chevron-down'\"/>\n    </lat-button>\n  </div>\n}\n\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "lat-button", 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: "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',
-                        '[attr.data-size]': 'select.size()',
+                        '[attr.size]': 'select.size()',
                         '(click)': 'select.toggle()',
-                    }, 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" }]
+                    }, template: "<ng-content select=\"lat-select-values\" />\n\n@if (!select.readonly()) {\n  <div class=\"lat-select-control\">\n    <lat-button tabindex=\"-1\" variant=\"inherit\" [size]=\"select.size()\" [disabled]=\"select.disabled()\">\n      <lat-icon [name]=\"select._overlayState() ? 'chevron-up' : 'chevron-down'\"/>\n    </lat-button>\n  </div>\n}\n\n" }]
         }], ctorParameters: () => [] });
 
 class SelectValueComponent {
@@ -223,16 +224,16 @@ class SelectMultipleComponent extends SelectDirective {
         this.writeValue(selected);
     }
     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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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: HTMLInputDirective,
+                provide: HTMLFormControl,
                 useExisting: forwardRef(() => SelectMultipleComponent),
             },
-        ], 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 });
+        ], exportAs: ["latSelect"], usesInheritance: true, ngImport: i0, template: "@if(mode() === 'popover') {\n  <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} @else {\n  <lat-select-trigger>\n    <lat-select-values />\n  </lat-select-trigger>\n}\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: "21.1.3", ngImport: i0, type: SelectMultipleComponent, decorators: [{
             type: Component,
@@ -248,10 +249,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             useExisting: forwardRef(() => SelectMultipleComponent),
                         },
                         {
-                            provide: HTMLInputDirective,
+                            provide: HTMLFormControl,
                             useExisting: forwardRef(() => SelectMultipleComponent),
                         },
-                    ], 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" }]
+                    ], template: "@if(mode() === 'popover') {\n  <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} @else {\n  <lat-select-trigger>\n    <lat-select-values />\n  </lat-select-trigger>\n}\n" }]
         }], propDecorators: { maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }] } });
 
 class SelectSingleComponent extends SelectDirective {
@@ -266,16 +267,16 @@ class SelectSingleComponent extends SelectDirective {
         this.hide();
     }
     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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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: HTMLInputDirective,
+                provide: HTMLFormControl,
                 useExisting: forwardRef(() => SelectSingleComponent),
             },
-        ], 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 });
+        ], exportAs: ["latSelect"], usesInheritance: true, ngImport: i0, template: "@if(mode() === 'popover') {\n  <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} @else {\n  <lat-select-trigger>\n    <lat-select-values />\n  </lat-select-trigger>\n}\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: "21.1.3", ngImport: i0, type: SelectSingleComponent, decorators: [{
             type: Component,
@@ -291,10 +292,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             useExisting: forwardRef(() => SelectSingleComponent),
                         },
                         {
-                            provide: HTMLInputDirective,
+                            provide: HTMLFormControl,
                             useExisting: forwardRef(() => 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" }]
+                    ], template: "@if(mode() === 'popover') {\n  <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} @else {\n  <lat-select-trigger>\n    <lat-select-values />\n  </lat-select-trigger>\n}\n" }]
         }], propDecorators: { nullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullable", required: false }] }] } });
 
 /**