npm - @ardium-ui/ui - Versions diffs - 3.3.0-alpha.1 → 3.3.0-alpha.4 - Mend

@ardium-ui/ui 3.3.0-alpha.1 → 3.3.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/fesm2022/ardium-ui-ui.mjs CHANGED Viewed

@@ -6,7 +6,7 @@ import * as i4 from '@ardium-ui/devkit';
 import { coerceBooleanProperty, coerceNumberProperty, coerceArrayProperty, ArdiumClickOutsideEventModule, ArdiumInnerHTMLModule, ArdiumFilesizePipeModule, ArdiumFilenamePipeModule, ArdiumFileextPipeModule, ArdiumHoldEventModule } from '@ardium-ui/devkit';
 import { map, Subject, merge, takeUntil, startWith, BehaviorSubject } from 'rxjs';
 import { TakeChance } from 'take-chance';
-import { isArray, isAnyString, isNull, isNumber, isFunction, isRegExp, isDefined, any, isPrimitive, isString, evaluate, isObject, isPromise } from 'simple-bool';
+import { isAnyString, isNull, isArray, isNumber, isFunction, isRegExp, isDefined, any, isPrimitive, isString, evaluate, isObject, isPromise } from 'simple-bool';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, DecimalPipe, AsyncPipe } from '@angular/common';
 import { Overlay, ScrollStrategyOptions, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
@@ -95,7 +95,8 @@ class _FocusableComponentBase extends _DisablableComponentBase {
         /**
          * Whether the component is currently focused.
          */
-        this.isFocused = false;
+        this.isFocused = signal(false);
+        this.wasTouched = signal(false);
     }
     /**
      * Focuses the correct element in the component.
@@ -126,7 +127,7 @@ class _FocusableComponentBase extends _DisablableComponentBase {
      * @param event The focus event to emit.
      */
     onFocus(event) {
-        this.isFocused = true;
+        this.isFocused.set(true);
         this.focusEvent.emit(event);
     }
     /**
@@ -134,7 +135,8 @@ class _FocusableComponentBase extends _DisablableComponentBase {
      * @param event The focus event to emit.
      */
     onBlur(event) {
-        this.isFocused = false;
+        this.wasTouched.set(true);
+        this.isFocused.set(false);
         this.blurEvent.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FocusableComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
@@ -214,12 +216,14 @@ class _FormFieldComponentBase extends _NgModelComponentBase {
             alias: 'hasError',
         });
         this._hasErrorInControl = signal(false);
-        this.hasError = computed(() => this._hasError() ?? this._hasErrorInControl());
+        this.hasError = computed(() => this._hasError() ?? (this.wasTouched() && this._hasErrorInControl()));
+        this.isSuccess = input(false, { transform: v => coerceBooleanProperty(v) });
     }
     ngOnInit() {
         this._ngControl = this._injector.get(NgControl, null);
         if (this._ngControl) {
             this._ngControl.valueAccessor = this;
+            this._hasErrorInControl.set(this._ngControl.status === 'INVALID');
             this._statusChangesSub = this._ngControl.statusChanges
                 ?.pipe(map(v => v === 'INVALID'))
                 .subscribe(v => this._hasErrorInControl.set(v));
@@ -232,7 +236,7 @@ class _FormFieldComponentBase extends _NgModelComponentBase {
         this._statusChangesSub?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FormFieldComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: _FormFieldComponentBase, inputs: { _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, _hasError: { classPropertyName: "_hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: _FormFieldComponentBase, inputs: { _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, _hasError: { classPropertyName: "_hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, isSuccess: { classPropertyName: "isSuccess", publicName: "isSuccess", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FormFieldComponentBase, decorators: [{
             type: Directive
@@ -371,13 +375,23 @@ class DigitInputModel {
         return !!this.value()?.[index];
     }
     writeValue(v) {
-        if (!isArray(v) && !isAnyString(v) && !isNull(v)) {
-            //warn when using non-string value
-            console.warn(new Error(`ARD-WA0020: Trying to set <ard-digit-input>'s value to "${v}" (of type ${typeof v}), expected string or array of strings.`));
-            //normalize the value
-            v = v?.toString?.() ?? String(v);
+        if (this._ardHost.outputAsString()) {
+            if (!isAnyString(v) && !isNull(v)) {
+                throw new Error(`ARD-FT0040b: Trying to set <ard-digit-input>'s value to "${v}" (of type ${typeof v}), but the input uses [outputAsString]="true", and thus expects string or null.`);
+            }
+            const vArray = v?.split('') ?? [];
+            if (vArray.length > this._configArrayNoStatics().length) {
+                console.warn(`ARD-WA0041: Value provided to <ard-digit-input> is too long. Got ${vArray.length} characters, but expected a maximum of ${this._configArrayNoStatics().length} characters.`);
+            }
+            return this._writeValue(vArray);
+        }
+        if (!isAnyString(v) && !isNull(v) && !isArray(v)) {
+            throw new Error(`ARD-FT0041: Trying to set <ard-digit-input>'s value to "${v}" (of type ${typeof v}), expected string or array of characters.`);
         }
         const vArray = coerceArrayProperty(v);
+        if (vArray.length > this._configArrayNoStatics().length) {
+            console.warn(`ARD-WA0041: Value provided to <ard-digit-input> is too long. Got ${vArray.length} characters, but expected a maximum of ${this._configArrayNoStatics().length} characters.`);
+        }
         const problemIndex = vArray.findIndex(el => !isAnyString(el) || el.length > 1);
         if (problemIndex !== -1) {
             throw new Error(`ARD-FT0042: Array passed to <ard-digit-input>'s value must only contain strings of length 1 or 0. Element "${vArray[problemIndex]}" at index ${problemIndex} does not match those requirements.`);
@@ -385,17 +399,19 @@ class DigitInputModel {
         return this._writeValue(vArray);
     }
     _writeValue(v) {
-        const oldVal = this.value();
+        const isOldValueTheSame = this.value() ? this.value().every((ch, i) => ch === v?.[i]) : !v;
+        if (isOldValueTheSame)
+            return false;
         this.value.set(v && v.map(el => el || null));
         this.validateValueAndUpdate();
         this._updateInputElements();
-        return oldVal !== v;
+        return true;
     }
     _updateInputElements() {
-        const value = this.value ?? [];
+        const v = this.value() ?? [];
         let i = 0;
         for (const inputEl of this._ardHost.inputs()) {
-            inputEl.nativeElement.value = value()?.[i] ?? '';
+            inputEl.nativeElement.value = v[i] ?? '';
             i++;
         }
     }
@@ -471,7 +487,7 @@ class DigitInputModel {
         //get the corresponding HTML input element
         const inputEl = this._ardHost.inputs()[index];
         if (!inputEl) {
-            throw new Error("ARD-IS0048: <ard-digit-input>'s value changed, but its corresponding input element could not be found. This is error is fatal to the functioning of Ardium UI. Please report this issue to the creators.");
+            throw new Error("ARD-IS0048: <ard-digit-input>'s value changed, but its corresponding input element could not be found. If you are reading this, you probably experienced a problem with Ardium UI. Please report this issue to the creators.");
         }
         //update the input element and value array
         const newVal = inputChar ?? before;
@@ -561,6 +577,7 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
             this._oldConfigArrayDataLength = this.configArrayData().length;
             this._emitChange();
         });
+        this._wasViewInit = false;
         //! value two-way binding
         this.outputAsString = input(this._DEFAULTS.outputAsString, { transform: v => coerceBooleanProperty(v) });
         this.outputControlValueAccessorOnFinish = input(false, { transform: v => coerceBooleanProperty(v) });
@@ -583,13 +600,22 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
     isInputEmpty(index) {
         return !this.model.isDefinedAtIndex(index);
     }
-    //! control value accessor's write value implementation
     writeValue(v) {
+        if (!this._wasViewInit) {
+            this._valueBeforeViewInit = v;
+            return;
+        }
         this._writeValue(v);
     }
     _writeValue(v) {
         return this.model.writeValue(v);
     }
+    ngAfterViewInit() {
+        this._wasViewInit = true;
+        if (this._valueBeforeViewInit) {
+            this._writeValue(this._valueBeforeViewInit);
+        }
+    }
     set value(v) {
         this.writeValue(v);
     }
@@ -688,7 +714,7 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
                 provide: _FormFieldComponentBase,
                 useExisting: ArdiumDigitInputComponent,
             },
-        ], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-digit-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n  <div\r\n    class=\"ard-digit-input__item\"\r\n    [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n  >\r\n    @if (data.type === 'input') {\r\n    <input\r\n      #input\r\n      #focusableElement\r\n      class=\"ard-digit-input__input\"\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [readonly]=\"data.readonly\"\r\n      [placeholder]=\"data.placeholder\"\r\n      [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n      [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n      (paste)=\"onPaste($event, data.index!)\"\r\n      (input)=\"onInput($event, data.index!)\"\r\n      (focus)=\"onFocusMaster($event, data.index!)\"\r\n      (blur)=\"onBlurMaster($event, data.index!)\"\r\n      (keydown)=\"onKeydown($event, data.index!)\"\r\n    />\r\n    } @else {\r\n    <div class=\"ard-digit-input__static\">\r\n      {{ data.char }}\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-digit-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n  <div\r\n    class=\"ard-digit-input__item\"\r\n    [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n  >\r\n    @if (data.type === 'input') {\r\n    <input\r\n      #input\r\n      #focusableElement\r\n      class=\"ard-digit-input__input\"\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [readonly]=\"data.readonly\"\r\n      [placeholder]=\"data.placeholder\"\r\n      [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n      [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n      (paste)=\"onPaste($event, data.index!)\"\r\n      (input)=\"onInput($event, data.index!)\"\r\n      (focus)=\"onFocusMaster($event, data.index!)\"\r\n      (blur)=\"onBlurMaster($event, data.index!)\"\r\n      (keydown)=\"onKeydown($event, data.index!)\"\r\n    />\r\n    } @else {\r\n    <div class=\"ard-digit-input__static\">\r\n      {{ data.char }}\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDigitInputComponent, decorators: [{
             type: Component,
@@ -702,7 +728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             useExisting: ArdiumDigitInputComponent,
                         },
-                    ], template: "<div\r\n  class=\"ard-digit-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n  <div\r\n    class=\"ard-digit-input__item\"\r\n    [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n  >\r\n    @if (data.type === 'input') {\r\n    <input\r\n      #input\r\n      #focusableElement\r\n      class=\"ard-digit-input__input\"\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [readonly]=\"data.readonly\"\r\n      [placeholder]=\"data.placeholder\"\r\n      [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n      [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n      (paste)=\"onPaste($event, data.index!)\"\r\n      (input)=\"onInput($event, data.index!)\"\r\n      (focus)=\"onFocusMaster($event, data.index!)\"\r\n      (blur)=\"onBlurMaster($event, data.index!)\"\r\n      (keydown)=\"onKeydown($event, data.index!)\"\r\n    />\r\n    } @else {\r\n    <div class=\"ard-digit-input__static\">\r\n      {{ data.char }}\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n" }]
+                    ], template: "<div\r\n  class=\"ard-digit-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n  <div\r\n    class=\"ard-digit-input__item\"\r\n    [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n  >\r\n    @if (data.type === 'input') {\r\n    <input\r\n      #input\r\n      #focusableElement\r\n      class=\"ard-digit-input__input\"\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [readonly]=\"data.readonly\"\r\n      [placeholder]=\"data.placeholder\"\r\n      [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n      [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n      (paste)=\"onPaste($event, data.index!)\"\r\n      (input)=\"onInput($event, data.index!)\"\r\n      (focus)=\"onFocusMaster($event, data.index!)\"\r\n      (blur)=\"onBlurMaster($event, data.index!)\"\r\n      (keydown)=\"onKeydown($event, data.index!)\"\r\n    />\r\n    } @else {\r\n    <div class=\"ard-digit-input__static\">\r\n      {{ data.char }}\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DIGIT_INPUT_DEFAULTS]
@@ -938,8 +964,7 @@ class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
     constructor(defaults) {
         super(defaults);
         this.hasError = input(false, { transform: v => coerceBooleanProperty(v) });
-        //! focused state
-        this.isFocused = false;
+        this.isSuccess = input(false, { transform: v => coerceBooleanProperty(v) });
         //! appearance
         /**
          * The appearance of the component, aka the styling.
@@ -958,7 +983,8 @@ class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
             `ard-variant-${this.variant()}`,
             this.compact() ? 'ard-compact' : '',
             this.hasError() ? 'ard-has-error' : '',
-            this.isFocused ? 'ard-focused' : 'ard-unfocused',
+            this.isSuccess() ? 'ard-is-success' : '',
+            this.isFocused() ? 'ard-focused' : 'ard-unfocused',
         ].join(' '));
         //! prefix & suffix
         this.prefixTemplateInput = input(undefined, { alias: 'prefixTemplate' });
@@ -966,8 +992,12 @@ class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
         this.prefixTemplate = contentChild(ArdFormFieldPrefixTemplateDirective);
         this.suffixTemplate = contentChild(ArdFormFieldSuffixTemplateDirective);
     }
+    //! focused state
+    set _setIsFocused(v) {
+        this.isFocused.set(v);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldFrameComponent, deps: [{ token: ARD_FORM_FIELD_FRAME_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: { hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, prefixTemplateInput: { classPropertyName: "prefixTemplateInput", publicName: "prefixTemplate", isSignal: true, isRequired: false, transformFunction: null }, suffixTemplateInput: { classPropertyName: "suffixTemplateInput", publicName: "suffixTemplate", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdFormFieldPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFormFieldSuffixTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-form-field-frame\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-form-field-overlay\"></div>\n  @if (prefixTemplateInput() ?? prefixTemplate()) {\n    <div class=\"ard-form-field-prefix-container\">\n      <ng-template [ngTemplateOutlet]=\"prefixTemplateInput() ?? prefixTemplate()?.template ?? null\"></ng-template>\n    </div>\n  }\n  <div class=\"ard-form-field-content-container\">\n    <ng-content></ng-content>\n  </div>\n  @if (suffixTemplateInput() ?? suffixTemplate()) {\n    <div class=\"ard-form-field-suffix-container\">\n      <ng-template [ngTemplateOutlet]=\"suffixTemplateInput() ?? suffixTemplate()?.template ?? null\"></ng-template>\n    </div>\n  }\n</div>\n", styles: [".ard-form-field-frame{position:relative}.ard-form-field-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: { hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, isSuccess: { classPropertyName: "isSuccess", publicName: "isSuccess", isSignal: true, isRequired: false, transformFunction: null }, _setIsFocused: { classPropertyName: "_setIsFocused", publicName: "isFocused", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, prefixTemplateInput: { classPropertyName: "prefixTemplateInput", publicName: "prefixTemplate", isSignal: true, isRequired: false, transformFunction: null }, suffixTemplateInput: { classPropertyName: "suffixTemplateInput", publicName: "suffixTemplate", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdFormFieldPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFormFieldSuffixTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-form-field-frame\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-form-field-overlay\"></div>\n  @if (prefixTemplateInput() ?? prefixTemplate()) {\n    <div class=\"ard-form-field-prefix-container\">\n      <ng-template [ngTemplateOutlet]=\"prefixTemplateInput() ?? prefixTemplate()?.template ?? null\"></ng-template>\n    </div>\n  }\n  <div class=\"ard-form-field-content-container\">\n    <ng-content></ng-content>\n  </div>\n  @if (suffixTemplateInput() ?? suffixTemplate()) {\n    <div class=\"ard-form-field-suffix-container\">\n      <ng-template [ngTemplateOutlet]=\"suffixTemplateInput() ?? suffixTemplate()?.template ?? null\"></ng-template>\n    </div>\n  }\n</div>\n", styles: [".ard-form-field-frame{position:relative}.ard-form-field-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldFrameComponent, decorators: [{
             type: Component,
@@ -975,8 +1005,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_FORM_FIELD_FRAME_DEFAULTS]
-                }] }], propDecorators: { isFocused: [{
-                type: Input
+                }] }], propDecorators: { _setIsFocused: [{
+                type: Input,
+                args: [{ alias: 'isFocused' }]
             }] } });
 class ArdiumFormFieldFrameModule {
@@ -1854,7 +1885,7 @@ class ArdiumInputComponent extends _SimpleInputComponentBase {
                 provide: _FormFieldComponentBase,
                 useExisting: ArdiumInputComponent,
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionTemplate", first: true, predicate: ArdInputSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdInputLoadingTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownHost", first: true, predicate: ["suggestionsHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["suggestionsTemplate"], descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused\"\r\n  [hasError]=\"hasError()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-input\"\r\n    #suggestionsHost\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayAutocomplete()) {\r\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n      }\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n    role=\"listbox\"\r\n    [compact]=\"compact\"\r\n    aria-label=\"Suggestions\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"shouldDisplaySuggestions()\"\r\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n  >\r\n    @for (item of suggestionItems(); track item.index) {\r\n      <div\r\n        class=\"ard-option\"\r\n        role=\"option\"\r\n        [class.ard-option-selected]=\"item.selected()\"\r\n        [class.ard-option-highlighted]=\"item.highlighted()\"\r\n        [attr.aria-selected]=\"item.selected()\"\r\n        (click)=\"selectSuggestion(item, $event)\"\r\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n      >\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ item.label() }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"getOptionContext(item)\"\r\n          ></ng-template>\r\n        </span>\r\n      </div>\r\n    }\r\n    @if (areSuggestionsLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionTemplate", first: true, predicate: ArdInputSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suggestionLoadingTemplate", first: true, predicate: ArdInputLoadingTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownHost", first: true, predicate: ["suggestionsHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["suggestionsTemplate"], descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-input\"\r\n    #suggestionsHost\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayAutocomplete()) {\r\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n      }\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n    role=\"listbox\"\r\n    [compact]=\"compact\"\r\n    aria-label=\"Suggestions\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"shouldDisplaySuggestions()\"\r\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n  >\r\n    @for (item of suggestionItems(); track item.index) {\r\n      <div\r\n        class=\"ard-option\"\r\n        role=\"option\"\r\n        [class.ard-option-selected]=\"item.selected()\"\r\n        [class.ard-option-highlighted]=\"item.highlighted()\"\r\n        [attr.aria-selected]=\"item.selected()\"\r\n        (click)=\"selectSuggestion(item, $event)\"\r\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n      >\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ item.label() }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"getOptionContext(item)\"\r\n          ></ng-template>\r\n        </span>\r\n      </div>\r\n    }\r\n    @if (areSuggestionsLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumInputComponent, decorators: [{
             type: Component,
@@ -1868,7 +1899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             useExisting: ArdiumInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused\"\r\n  [hasError]=\"hasError()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-input\"\r\n    #suggestionsHost\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayAutocomplete()) {\r\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n      }\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n    role=\"listbox\"\r\n    [compact]=\"compact\"\r\n    aria-label=\"Suggestions\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"shouldDisplaySuggestions()\"\r\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n  >\r\n    @for (item of suggestionItems(); track item.index) {\r\n      <div\r\n        class=\"ard-option\"\r\n        role=\"option\"\r\n        [class.ard-option-selected]=\"item.selected()\"\r\n        [class.ard-option-highlighted]=\"item.highlighted()\"\r\n        [attr.aria-selected]=\"item.selected()\"\r\n        (click)=\"selectSuggestion(item, $event)\"\r\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n      >\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ item.label() }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"getOptionContext(item)\"\r\n          ></ng-template>\r\n        </span>\r\n      </div>\r\n    }\r\n    @if (areSuggestionsLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-input\"\r\n    #suggestionsHost\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayAutocomplete()) {\r\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\r\n      }\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #suggestionsTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\r\n    role=\"listbox\"\r\n    [compact]=\"compact\"\r\n    aria-label=\"Suggestions\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"shouldDisplaySuggestions()\"\r\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n  >\r\n    @for (item of suggestionItems(); track item.index) {\r\n      <div\r\n        class=\"ard-option\"\r\n        role=\"option\"\r\n        [class.ard-option-selected]=\"item.selected()\"\r\n        [class.ard-option-highlighted]=\"item.highlighted()\"\r\n        [attr.aria-selected]=\"item.selected()\"\r\n        (click)=\"selectSuggestion(item, $event)\"\r\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\r\n      >\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ item.label() }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"getOptionContext(item)\"\r\n          ></ng-template>\r\n        </span>\r\n      </div>\r\n    }\r\n    @if (areSuggestionsLoading()) {\r\n      <ng-template #defaultLoadingPlaceholderTemplate>\r\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-autocomplete{position:absolute}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_INPUT_DEFAULTS]
@@ -2218,7 +2249,7 @@ class ArdiumPasswordInputComponent extends _FormFieldComponentBase {
                 provide: _FormFieldComponentBase,
                 useExisting: ArdiumPasswordInputComponent,
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdPasswordInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdPasswordInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdPasswordInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "revealTemplate", first: true, predicate: ArdPasswordInputRevealButtonTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused\"\r\n  [hasError]=\"hasError()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-password-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value()\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n        [class.ard-revealed]=\"revealable() && revealed()\"\r\n      />\r\n    </div>\r\n\r\n    @if (revealable()) {\r\n      <button\r\n        class=\"ard-reveal-button\"\r\n        type=\"button\"\r\n        (click)=\"!holdToReveal() && toggleReveal()\"\r\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\r\n      >\r\n        <ng-template\r\n          #defaultRevealTemplate\r\n          let-revealed\r\n        >\r\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n        />\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdPasswordInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdPasswordInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdPasswordInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "revealTemplate", first: true, predicate: ArdPasswordInputRevealButtonTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-password-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value()\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n        [class.ard-revealed]=\"revealable() && revealed()\"\r\n      />\r\n    </div>\r\n\r\n    @if (revealable()) {\r\n      <button\r\n        class=\"ard-reveal-button\"\r\n        type=\"button\"\r\n        (click)=\"!holdToReveal() && toggleReveal()\"\r\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\r\n      >\r\n        <ng-template\r\n          #defaultRevealTemplate\r\n          let-revealed\r\n        >\r\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n        />\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumPasswordInputComponent, decorators: [{
             type: Component,
@@ -2232,7 +2263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             useExisting: ArdiumPasswordInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused\"\r\n  [hasError]=\"hasError()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-password-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value()\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n        [class.ard-revealed]=\"revealable() && revealed()\"\r\n      />\r\n    </div>\r\n\r\n    @if (revealable()) {\r\n      <button\r\n        class=\"ard-reveal-button\"\r\n        type=\"button\"\r\n        (click)=\"!holdToReveal() && toggleReveal()\"\r\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\r\n      >\r\n        <ng-template\r\n          #defaultRevealTemplate\r\n          let-revealed\r\n        >\r\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n        />\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n" }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-password-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value()\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n        [class.ard-revealed]=\"revealable() && revealed()\"\r\n      />\r\n    </div>\r\n\r\n    @if (revealable()) {\r\n      <button\r\n        class=\"ard-reveal-button\"\r\n        type=\"button\"\r\n        (click)=\"!holdToReveal() && toggleReveal()\"\r\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\r\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\r\n      >\r\n        <ng-template\r\n          #defaultRevealTemplate\r\n          let-revealed\r\n        >\r\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n        />\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_PASSWORD_INPUT_DEFAULTS]
@@ -2361,7 +2392,7 @@ class ArdiumSimpleInputComponent extends _SimpleInputComponentBase {
                 provide: _FormFieldComponentBase,
                 useExisting: ArdiumSimpleInputComponent
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdSimpleInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSimpleInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSimpleInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused\"\r\n  [hasError]=\"hasError()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-simple-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdSimpleInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSimpleInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSimpleInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-simple-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSimpleInputComponent, decorators: [{
             type: Component,
@@ -2375,7 +2406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             useExisting: ArdiumSimpleInputComponent
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused\"\r\n  [hasError]=\"hasError()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-simple-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-simple-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-has-value]=\"value\"\r\n    (click)=\"focus()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-center input,.ard-text-align-center .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SIMPLE_INPUT_DEFAULTS]
@@ -4093,7 +4124,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
                 provide: _FormFieldComponentBase,
                 useExisting: ArdiumSelectComponent,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: ArdOptgroupTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: ArdValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSelectPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: ArdLoadingSpinnerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingPlaceholderTemplate", first: true, predicate: ArdLoadingPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownHeaderTemplate", first: true, predicate: ArdDropdownHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownFooterTemplate", first: true, predicate: ArdDropdownFooterTemplateDirective, descendants: true, isSignal: true }, { propertyName: "noItemsFoundTemplate", first: true, predicate: ArdNoItemsFoundTemplateDirective, descendants: true, isSignal: true }, { propertyName: "addCustomTemplate", first: true, predicate: ArdAddCustomTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemLimitReachedTemplate", first: true, predicate: ArdItemLimitReachedTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemDisplayLimitTemplate", first: true, predicate: ArdItemDisplayLimitTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdSelectPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSelectSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionComponents", predicate: ArdiumOptionComponent }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, read: ElementRef }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused\"\r\n  [hasError]=\"hasError()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n      <div\r\n        class=\"ard-select-value\"\r\n        [class.ard-value-disabled]=\"item.disabled()\"\r\n        [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n      >\r\n        <ng-template\r\n          *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n        />\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-item\r\n      >\r\n        <div\r\n          [ardInnerHTML]=\"item.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined-strong\"\r\n        >\r\n          <div\r\n            [ardInnerHTML]=\"item.label()\"\r\n            [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n          ></div>\r\n          <!-- TODO check if can remove div -->\r\n        </ard-deletable-chip>\r\n      </ng-template>\r\n      } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n      <div class=\"ard-overflow-indicator\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n          [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n        />\r\n\r\n        <ng-template\r\n          #defaultItemDisplayLimitTemplate\r\n          let-count=\"overflowCount\"\r\n        >\r\n          <div>{{ count }} more...</div>\r\n        </ng-template>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (blur)=\"onSearchInputBlur()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n      <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-simple-spinner\"></div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      } @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"handleClearButtonClick($event)\"\r\n      />\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n      >\r\n        <span class=\"ard-dropdown-arrow\"></span>\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n    <div\r\n      class=\"ard-optgroup\"\r\n      role=\"group\"\r\n      [class.ard-group-disabled]=\"group.disabled()\"\r\n      [class.ard-group-selected]=\"group.selected()\"\r\n      [class.ard-group-highlighted]=\"group.highlighted()\"\r\n      (mouseover)=\"onGroupMouseover(group)\"\r\n      (click)=\"onGroupClick(group)\"\r\n    >\r\n      @if (group.label() !== '' && group.label() !== undefined) {\r\n      <ng-template\r\n        #defaultOptgroupTemplate\r\n        let-group\r\n      >\r\n        <span\r\n          class=\"ard-optgroup-label\"\r\n          [ardInnerHTML]=\"group.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n        ></span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n        [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n      />\r\n      }\r\n\r\n      <div class=\"ard-optgroup-children\">\r\n        @for (option of group.children(); track option.index) {\r\n        <div\r\n          class=\"ard-option\"\r\n          role=\"option\"\r\n          [class.ard-option-disabled]=\"option.disabled()\"\r\n          [class.ard-option-selected]=\"option.selected()\"\r\n          [class.ard-option-highlighted]=\"option.highlighted()\"\r\n          [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n          [attr.aria-selected]=\"option.selected()\"\r\n          [attr.id]=\"htmlId() + '-' + option.index\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n          (mouseover)=\"onItemMouseOver($event)\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n        >\r\n          <div class=\"ard-option-label\">\r\n            <ng-template\r\n              #defaultOptionTemplate\r\n              let-option\r\n            >\r\n              <span\r\n                [ardInnerHTML]=\"option.label()\"\r\n                [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n              ></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n            />\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    } } @if (shouldShowNoItemsFound()) {\r\n    <ng-template #defaultNoItemsFoundTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    } @if (shouldShowAddCustom()) {\r\n    <ng-template\r\n      #defaultAddCustomTemplate\r\n      let-searchTerm\r\n    >\r\n      <div\r\n        class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n        (click)=\"addCustomOption(searchTerm)\"\r\n      >\r\n        <span class=\"ard-add-custom-label\">Add option</span>\r\n        <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n      [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n    />\r\n    } @if (isLoading()) {\r\n    <ng-template #defaultLoadingPlaceholderTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "component", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: ["deleteButtonTitle", "contentAlignment", "appearance", "variant", "color", "compact", "wrapperClasses"], outputs: ["delete"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "directive", type: i4.ArdiumInnerHTMLDirective, selector: "[ardInnerHTML]", inputs: ["ardInnerHTML", "ardEscapeInnerHTML"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: ArdOptgroupTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: ArdValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdSelectPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: ArdLoadingSpinnerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingPlaceholderTemplate", first: true, predicate: ArdLoadingPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownHeaderTemplate", first: true, predicate: ArdDropdownHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dropdownFooterTemplate", first: true, predicate: ArdDropdownFooterTemplateDirective, descendants: true, isSignal: true }, { propertyName: "noItemsFoundTemplate", first: true, predicate: ArdNoItemsFoundTemplateDirective, descendants: true, isSignal: true }, { propertyName: "addCustomTemplate", first: true, predicate: ArdAddCustomTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemLimitReachedTemplate", first: true, predicate: ArdItemLimitReachedTemplateDirective, descendants: true, isSignal: true }, { propertyName: "itemDisplayLimitTemplate", first: true, predicate: ArdItemDisplayLimitTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdSelectPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdSelectSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionComponents", predicate: ArdiumOptionComponent }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, read: ElementRef }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n      <div\r\n        class=\"ard-select-value\"\r\n        [class.ard-value-disabled]=\"item.disabled()\"\r\n        [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n      >\r\n        <ng-template\r\n          *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n        />\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-item\r\n      >\r\n        <div\r\n          [ardInnerHTML]=\"item.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined-strong\"\r\n        >\r\n          <div\r\n            [ardInnerHTML]=\"item.label()\"\r\n            [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n          ></div>\r\n          <!-- TODO check if can remove div -->\r\n        </ard-deletable-chip>\r\n      </ng-template>\r\n      } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n      <div class=\"ard-overflow-indicator\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n          [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n        />\r\n\r\n        <ng-template\r\n          #defaultItemDisplayLimitTemplate\r\n          let-count=\"overflowCount\"\r\n        >\r\n          <div>{{ count }} more...</div>\r\n        </ng-template>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (blur)=\"onSearchInputBlur()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n      <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-simple-spinner\"></div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      } @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"handleClearButtonClick($event)\"\r\n      />\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n      >\r\n        <span class=\"ard-dropdown-arrow\"></span>\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n    <div\r\n      class=\"ard-optgroup\"\r\n      role=\"group\"\r\n      [class.ard-group-disabled]=\"group.disabled()\"\r\n      [class.ard-group-selected]=\"group.selected()\"\r\n      [class.ard-group-highlighted]=\"group.highlighted()\"\r\n      (mouseover)=\"onGroupMouseover(group)\"\r\n      (click)=\"onGroupClick(group)\"\r\n    >\r\n      @if (group.label() !== '' && group.label() !== undefined) {\r\n      <ng-template\r\n        #defaultOptgroupTemplate\r\n        let-group\r\n      >\r\n        <span\r\n          class=\"ard-optgroup-label\"\r\n          [ardInnerHTML]=\"group.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n        ></span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n        [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n      />\r\n      }\r\n\r\n      <div class=\"ard-optgroup-children\">\r\n        @for (option of group.children(); track option.index) {\r\n        <div\r\n          class=\"ard-option\"\r\n          role=\"option\"\r\n          [class.ard-option-disabled]=\"option.disabled()\"\r\n          [class.ard-option-selected]=\"option.selected()\"\r\n          [class.ard-option-highlighted]=\"option.highlighted()\"\r\n          [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n          [attr.aria-selected]=\"option.selected()\"\r\n          [attr.id]=\"htmlId() + '-' + option.index\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n          (mouseover)=\"onItemMouseOver($event)\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n        >\r\n          <div class=\"ard-option-label\">\r\n            <ng-template\r\n              #defaultOptionTemplate\r\n              let-option\r\n            >\r\n              <span\r\n                [ardInnerHTML]=\"option.label()\"\r\n                [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n              ></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n            />\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    } } @if (shouldShowNoItemsFound()) {\r\n    <ng-template #defaultNoItemsFoundTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    } @if (shouldShowAddCustom()) {\r\n    <ng-template\r\n      #defaultAddCustomTemplate\r\n      let-searchTerm\r\n    >\r\n      <div\r\n        class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n        (click)=\"addCustomOption(searchTerm)\"\r\n      >\r\n        <span class=\"ard-add-custom-label\">Add option</span>\r\n        <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n      [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n    />\r\n    } @if (isLoading()) {\r\n    <ng-template #defaultLoadingPlaceholderTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "component", type: ArdiumDeletableChipComponent, selector: "ard-deletable-chip", inputs: ["deleteButtonTitle", "contentAlignment", "appearance", "variant", "color", "compact", "wrapperClasses"], outputs: ["delete"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "directive", type: i4.ArdiumInnerHTMLDirective, selector: "[ardInnerHTML]", inputs: ["ardInnerHTML", "ardEscapeInnerHTML"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSelectComponent, decorators: [{
             type: Component,
@@ -4107,7 +4138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             useExisting: ArdiumSelectComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused\"\r\n  [hasError]=\"hasError()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n      <div\r\n        class=\"ard-select-value\"\r\n        [class.ard-value-disabled]=\"item.disabled()\"\r\n        [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n      >\r\n        <ng-template\r\n          *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n        />\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-item\r\n      >\r\n        <div\r\n          [ardInnerHTML]=\"item.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined-strong\"\r\n        >\r\n          <div\r\n            [ardInnerHTML]=\"item.label()\"\r\n            [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n          ></div>\r\n          <!-- TODO check if can remove div -->\r\n        </ard-deletable-chip>\r\n      </ng-template>\r\n      } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n      <div class=\"ard-overflow-indicator\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n          [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n        />\r\n\r\n        <ng-template\r\n          #defaultItemDisplayLimitTemplate\r\n          let-count=\"overflowCount\"\r\n        >\r\n          <div>{{ count }} more...</div>\r\n        </ng-template>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (blur)=\"onSearchInputBlur()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n      <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-simple-spinner\"></div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      } @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"handleClearButtonClick($event)\"\r\n      />\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n      >\r\n        <span class=\"ard-dropdown-arrow\"></span>\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n    <div\r\n      class=\"ard-optgroup\"\r\n      role=\"group\"\r\n      [class.ard-group-disabled]=\"group.disabled()\"\r\n      [class.ard-group-selected]=\"group.selected()\"\r\n      [class.ard-group-highlighted]=\"group.highlighted()\"\r\n      (mouseover)=\"onGroupMouseover(group)\"\r\n      (click)=\"onGroupClick(group)\"\r\n    >\r\n      @if (group.label() !== '' && group.label() !== undefined) {\r\n      <ng-template\r\n        #defaultOptgroupTemplate\r\n        let-group\r\n      >\r\n        <span\r\n          class=\"ard-optgroup-label\"\r\n          [ardInnerHTML]=\"group.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n        ></span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n        [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n      />\r\n      }\r\n\r\n      <div class=\"ard-optgroup-children\">\r\n        @for (option of group.children(); track option.index) {\r\n        <div\r\n          class=\"ard-option\"\r\n          role=\"option\"\r\n          [class.ard-option-disabled]=\"option.disabled()\"\r\n          [class.ard-option-selected]=\"option.selected()\"\r\n          [class.ard-option-highlighted]=\"option.highlighted()\"\r\n          [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n          [attr.aria-selected]=\"option.selected()\"\r\n          [attr.id]=\"htmlId() + '-' + option.index\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n          (mouseover)=\"onItemMouseOver($event)\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n        >\r\n          <div class=\"ard-option-label\">\r\n            <ng-template\r\n              #defaultOptionTemplate\r\n              let-option\r\n            >\r\n              <span\r\n                [ardInnerHTML]=\"option.label()\"\r\n                [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n              ></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n            />\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    } } @if (shouldShowNoItemsFound()) {\r\n    <ng-template #defaultNoItemsFoundTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    } @if (shouldShowAddCustom()) {\r\n    <ng-template\r\n      #defaultAddCustomTemplate\r\n      let-searchTerm\r\n    >\r\n      <div\r\n        class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n        (click)=\"addCustomOption(searchTerm)\"\r\n      >\r\n        <span class=\"ard-add-custom-label\">Add option</span>\r\n        <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n      [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n    />\r\n    } @if (isLoading()) {\r\n    <ng-template #defaultLoadingPlaceholderTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-select\"\r\n    #dropdownHost\r\n    (click)=\"handleAnywhereClick($event)\"\r\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-select-value-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      } @if (shouldDisplayValue()) { @for (item of itemStorage.selectedItems(); track item.index) {\r\n      <div\r\n        class=\"ard-select-value\"\r\n        [class.ard-value-disabled]=\"item.disabled()\"\r\n        [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\r\n      >\r\n        <ng-template\r\n          *ngIf=\"isValueWithinDisplayLimit($index)\"\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n        />\r\n      </div>\r\n      }\r\n\r\n      <ng-template\r\n        #defaultValueTemplate\r\n        let-item\r\n      >\r\n        <div\r\n          [ardInnerHTML]=\"item.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n        ></div>\r\n      </ng-template>\r\n      <ng-template\r\n        #defaultMultiValueTemplate\r\n        let-item\r\n        let-unselect=\"unselect\"\r\n      >\r\n        <ard-deletable-chip\r\n          (delete)=\"unselect(item)\"\r\n          [variant]=\"variant()\"\r\n          compact\r\n          appearance=\"outlined-strong\"\r\n        >\r\n          <div\r\n            [ardInnerHTML]=\"item.label()\"\r\n            [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n          ></div>\r\n          <!-- TODO check if can remove div -->\r\n        </ard-deletable-chip>\r\n      </ng-template>\r\n      } @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\r\n      <div class=\"ard-overflow-indicator\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\r\n          [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\r\n        />\r\n\r\n        <ng-template\r\n          #defaultItemDisplayLimitTemplate\r\n          let-count=\"overflowCount\"\r\n        >\r\n          <div>{{ count }} more...</div>\r\n        </ng-template>\r\n      </div>\r\n      }\r\n\r\n      <div\r\n        class=\"ard-search-input\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n      >\r\n        <input\r\n          #searchInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          [attr.id]=\"searchInputId()\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [readonly]=\"isInputElementReadonly()\"\r\n          [disabled]=\"disabled()\"\r\n          [value]=\"searchTerm()\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"filter(searchInput.value)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onFocus($event)\"\r\n          (focus)=\"onSearchInputFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (blur)=\"onSearchInputBlur()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"ard-select-controls\">\r\n      @if (isLoading()) {\r\n      <ng-template #defaultLoadingSpinnerTemplate>\r\n        <div class=\"ard-simple-spinner\"></div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\r\n      } @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"handleClearButtonClick($event)\"\r\n      />\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"ard-dropdown-arrow-wrapper\"\r\n        (click)=\"handleDropdownArrowClick($event)\"\r\n      >\r\n        <span class=\"ard-dropdown-arrow\"></span>\r\n        <div class=\"ard-hitbox\"></div>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\r\n    role=\"listbox\"\r\n    aria-label=\"Options list\"\r\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\r\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [filterValue]=\"searchTerm()\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"handleOutsideClick($event)\"\r\n    (mousemove)=\"onMouseMove()\"\r\n    (scroll)=\"scrollEvent.emit($event)\"\r\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\r\n  >\r\n    @if (!shouldShowNoItemsFound()) { @for (group of itemStorage.groups(); track $index) {\r\n    <div\r\n      class=\"ard-optgroup\"\r\n      role=\"group\"\r\n      [class.ard-group-disabled]=\"group.disabled()\"\r\n      [class.ard-group-selected]=\"group.selected()\"\r\n      [class.ard-group-highlighted]=\"group.highlighted()\"\r\n      (mouseover)=\"onGroupMouseover(group)\"\r\n      (click)=\"onGroupClick(group)\"\r\n    >\r\n      @if (group.label() !== '' && group.label() !== undefined) {\r\n      <ng-template\r\n        #defaultOptgroupTemplate\r\n        let-group\r\n      >\r\n        <span\r\n          class=\"ard-optgroup-label\"\r\n          [ardInnerHTML]=\"group.label()\"\r\n          [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n        ></span>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\r\n        [ngTemplateOutletContext]=\"getGroupContext(group)\"\r\n      />\r\n      }\r\n\r\n      <div class=\"ard-optgroup-children\">\r\n        @for (option of group.children(); track option.index) {\r\n        <div\r\n          class=\"ard-option\"\r\n          role=\"option\"\r\n          [class.ard-option-disabled]=\"option.disabled()\"\r\n          [class.ard-option-selected]=\"option.selected()\"\r\n          [class.ard-option-highlighted]=\"option.highlighted()\"\r\n          [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\r\n          [attr.aria-selected]=\"option.selected()\"\r\n          [attr.id]=\"htmlId() + '-' + option.index\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n          (mouseover)=\"onItemMouseOver($event)\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n        >\r\n          <div class=\"ard-option-label\">\r\n            <ng-template\r\n              #defaultOptionTemplate\r\n              let-option\r\n            >\r\n              <span\r\n                [ardInnerHTML]=\"option.label()\"\r\n                [ardEscapeInnerHTML]=\"isItemsInputUsed\"\r\n              ></span>\r\n            </ng-template>\r\n\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n            />\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    } } @if (shouldShowNoItemsFound()) {\r\n    <ng-template #defaultNoItemsFoundTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    } @if (shouldShowAddCustom()) {\r\n    <ng-template\r\n      #defaultAddCustomTemplate\r\n      let-searchTerm\r\n    >\r\n      <div\r\n        class=\"ard-option ard-option-highlighted ard-add-custom\"\r\n        (click)=\"addCustomOption(searchTerm)\"\r\n      >\r\n        <span class=\"ard-add-custom-label\">Add option</span>\r\n        <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\r\n      [ngTemplateOutletContext]=\"getCustomOptionContext()\"\r\n    />\r\n    } @if (isLoading()) {\r\n    <ng-template #defaultLoadingPlaceholderTemplate>\r\n      <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\r\n      [ngTemplateOutletContext]=\"getSearchContext()\"\r\n    />\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-select .ard-select-container{display:flex;cursor:pointer}.ard-select .ard-placeholder,.ard-select .ard-value,.ard-select .ard-dropdown-arrow-wrapper,.ard-select .ard-clear-btn-wrapper{-webkit-user-select:none;user-select:none}.ard-select .ard-clear-btn,.ard-select .ard-dropdown-arrow{border:none;background:transparent;padding:0;box-sizing:content-box}.ard-select .ard-option-disabled{pointer-events:none}.ard-select .ard-select-value{display:block}.ard-select .ard-select-value[hidden=true]{display:none}.ard-select .ard-searchable .ard-select-value-container{cursor:text}.ard-select .ard-dropdown-arrow-wrapper{position:relative}.ard-select .ard-dropdown-arrow-wrapper .ard-hitbox{position:absolute;left:-4px;right:-4px;aspect-ratio:1}.ard-select-dropdown-panel .ard-optgroup,.ard-select-dropdown-panel .ard-option{-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SELECT_DEFAULTS]
@@ -5076,7 +5107,7 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
                 useExisting: forwardRef(() => ArdiumFileInputComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\n  class=\"ard-file-input-form-field-frame\"\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate\"\n  [suffixTemplate]=\"suffixTemplate\"\n  (dragover)=\"onDragover($event)\"\n  (dragleave)=\"onDragleave()\"\n  (drop)=\"onDrop($event)\"\n  (ardClickOutside)=\"onDragleave()\"\n>\n  <div\n    class=\"ard-file-input\"\n    [ngClass]=\"ngClasses()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n      }\n\n      <div class=\"ard-file-input__value\">\n        @if (currentViewState() === 'idle') {\n          <ng-template\n            [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n            [ngTemplateOutletContext]=\"getIdleContext()\"\n          />\n        }\n        @if (currentViewState() === 'dragover') {\n          <ng-template\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\n          />\n        }\n        @if (currentViewState() === 'uploaded') {\n          <ng-template\n            [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n            [ngTemplateOutletContext]=\"getUploadedContext()\"\n          />\n        }\n      </div>\n    </div>\n\n    @if (shouldShowClearButton) {\n      <ard-clear-button\n        #focusableElement\n        [title]=\"clearButtonTitle()\"\n        (mouseup)=\"onClearButtonClick($event)\"\n      />\n    }\n    @if (!shouldBeBlocked) {\n      <button\n        #focusableElement\n        type=\"button\"\n        class=\"ard-browse-button\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"openBrowseDialog()\"\n      >\n        <div class=\"ard-focus-overlay\"></div>\n        <ard-icon>folder</ard-icon>\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n\n<input\n  #fileInput\n  class=\"ard-file-input__input\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [attr.id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <span class=\"ard-file-input__idle\">\n    @if (multiple()) {\n      <span>Upload a file</span>\n    } @else {\n      <span>Upload files</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\n  @if (multiple()) {\n    <span class=\"ard-file-input__dragover-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n  } @else {\n    <span class=\"ard-file-input__dragover-amount\"> a file </span>\n  }\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n>\n  <div class=\"ard-file-input__uploaded\">\n    <span class=\"ard-file-input__uploaded-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n  </div>\n</ng-template>\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\n  class=\"ard-file-input-form-field-frame\"\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [prefixTemplate]=\"prefixTemplate\"\n  [suffixTemplate]=\"suffixTemplate\"\n  (dragover)=\"onDragover($event)\"\n  (dragleave)=\"onDragleave()\"\n  (drop)=\"onDrop($event)\"\n  (ardClickOutside)=\"onDragleave()\"\n>\n  <div\n    class=\"ard-file-input\"\n    [ngClass]=\"ngClasses()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n      }\n\n      <div class=\"ard-file-input__value\">\n        @if (currentViewState() === 'idle') {\n          <ng-template\n            [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n            [ngTemplateOutletContext]=\"getIdleContext()\"\n          />\n        }\n        @if (currentViewState() === 'dragover') {\n          <ng-template\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\n          />\n        }\n        @if (currentViewState() === 'uploaded') {\n          <ng-template\n            [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n            [ngTemplateOutletContext]=\"getUploadedContext()\"\n          />\n        }\n      </div>\n    </div>\n\n    @if (shouldShowClearButton) {\n      <ard-clear-button\n        #focusableElement\n        [title]=\"clearButtonTitle()\"\n        (mouseup)=\"onClearButtonClick($event)\"\n      />\n    }\n    @if (!shouldBeBlocked) {\n      <button\n        #focusableElement\n        type=\"button\"\n        class=\"ard-browse-button\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"openBrowseDialog()\"\n      >\n        <div class=\"ard-focus-overlay\"></div>\n        <ard-icon>folder</ard-icon>\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n\n<input\n  #fileInput\n  class=\"ard-file-input__input\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [attr.id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <span class=\"ard-file-input__idle\">\n    @if (multiple()) {\n      <span>Upload a file</span>\n    } @else {\n      <span>Upload files</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\n  @if (multiple()) {\n    <span class=\"ard-file-input__dragover-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n  } @else {\n    <span class=\"ard-file-input__dragover-amount\"> a file </span>\n  }\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n>\n  <div class=\"ard-file-input__uploaded\">\n    <span class=\"ard-file-input__uploaded-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n  </div>\n</ng-template>\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileInputComponent, decorators: [{
             type: Component,
@@ -5086,7 +5117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumFileInputComponent),
                             multi: true,
                         },
-                    ], template: "<ard-form-field-frame\n  class=\"ard-file-input-form-field-frame\"\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate\"\n  [suffixTemplate]=\"suffixTemplate\"\n  (dragover)=\"onDragover($event)\"\n  (dragleave)=\"onDragleave()\"\n  (drop)=\"onDrop($event)\"\n  (ardClickOutside)=\"onDragleave()\"\n>\n  <div\n    class=\"ard-file-input\"\n    [ngClass]=\"ngClasses()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n      }\n\n      <div class=\"ard-file-input__value\">\n        @if (currentViewState() === 'idle') {\n          <ng-template\n            [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n            [ngTemplateOutletContext]=\"getIdleContext()\"\n          />\n        }\n        @if (currentViewState() === 'dragover') {\n          <ng-template\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\n          />\n        }\n        @if (currentViewState() === 'uploaded') {\n          <ng-template\n            [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n            [ngTemplateOutletContext]=\"getUploadedContext()\"\n          />\n        }\n      </div>\n    </div>\n\n    @if (shouldShowClearButton) {\n      <ard-clear-button\n        #focusableElement\n        [title]=\"clearButtonTitle()\"\n        (mouseup)=\"onClearButtonClick($event)\"\n      />\n    }\n    @if (!shouldBeBlocked) {\n      <button\n        #focusableElement\n        type=\"button\"\n        class=\"ard-browse-button\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"openBrowseDialog()\"\n      >\n        <div class=\"ard-focus-overlay\"></div>\n        <ard-icon>folder</ard-icon>\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n\n<input\n  #fileInput\n  class=\"ard-file-input__input\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [attr.id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <span class=\"ard-file-input__idle\">\n    @if (multiple()) {\n      <span>Upload a file</span>\n    } @else {\n      <span>Upload files</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\n  @if (multiple()) {\n    <span class=\"ard-file-input__dragover-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n  } @else {\n    <span class=\"ard-file-input__dragover-amount\"> a file </span>\n  }\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n>\n  <div class=\"ard-file-input__uploaded\">\n    <span class=\"ard-file-input__uploaded-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n  </div>\n</ng-template>\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
+                    ], template: "<ard-form-field-frame\n  class=\"ard-file-input-form-field-frame\"\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [prefixTemplate]=\"prefixTemplate\"\n  [suffixTemplate]=\"suffixTemplate\"\n  (dragover)=\"onDragover($event)\"\n  (dragleave)=\"onDragleave()\"\n  (drop)=\"onDrop($event)\"\n  (ardClickOutside)=\"onDragleave()\"\n>\n  <div\n    class=\"ard-file-input\"\n    [ngClass]=\"ngClasses()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n      }\n\n      <div class=\"ard-file-input__value\">\n        @if (currentViewState() === 'idle') {\n          <ng-template\n            [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n            [ngTemplateOutletContext]=\"getIdleContext()\"\n          />\n        }\n        @if (currentViewState() === 'dragover') {\n          <ng-template\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\n          />\n        }\n        @if (currentViewState() === 'uploaded') {\n          <ng-template\n            [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n            [ngTemplateOutletContext]=\"getUploadedContext()\"\n          />\n        }\n      </div>\n    </div>\n\n    @if (shouldShowClearButton) {\n      <ard-clear-button\n        #focusableElement\n        [title]=\"clearButtonTitle()\"\n        (mouseup)=\"onClearButtonClick($event)\"\n      />\n    }\n    @if (!shouldBeBlocked) {\n      <button\n        #focusableElement\n        type=\"button\"\n        class=\"ard-browse-button\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"openBrowseDialog()\"\n      >\n        <div class=\"ard-focus-overlay\"></div>\n        <ard-icon>folder</ard-icon>\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n\n<input\n  #fileInput\n  class=\"ard-file-input__input\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [attr.id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <span class=\"ard-file-input__idle\">\n    @if (multiple()) {\n      <span>Upload a file</span>\n    } @else {\n      <span>Upload files</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\n  @if (multiple()) {\n    <span class=\"ard-file-input__dragover-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n  } @else {\n    <span class=\"ard-file-input__dragover-amount\"> a file </span>\n  }\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n>\n  <div class=\"ard-file-input__uploaded\">\n    <span class=\"ard-file-input__uploaded-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n  </div>\n</ng-template>\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_FILE_INPUT_DEFAULTS]
@@ -5433,7 +5464,7 @@ class ArdiumHexInputComponent extends _FormFieldComponentBase {
                 provide: _FormFieldComponentBase,
                 useExisting: forwardRef(() => ArdiumHexInputComponent),
             },
-        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdHexInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdHexInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdHexInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [hasError]=\"hasError()\"\r\n  [isFocused]=\"isFocused\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-hex-input\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mouseup)=\"onMouseup()\"\r\n  >\r\n    <div\r\n      class=\"ard-hash-container\"\r\n      *ngIf=\"showHash\"\r\n    >\r\n      #\r\n    </div>\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "prefixTemplate", first: true, predicate: ArdHexInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdHexInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: ArdHexInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textInputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-hex-input\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mouseup)=\"onMouseup()\"\r\n  >\r\n    <div\r\n      class=\"ard-hash-container\"\r\n      *ngIf=\"showHash\"\r\n    >\r\n      #\r\n    </div>\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHexInputComponent, decorators: [{
             type: Component,
@@ -5447,7 +5478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             useExisting: forwardRef(() => ArdiumHexInputComponent),
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [hasError]=\"hasError()\"\r\n  [isFocused]=\"isFocused\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-hex-input\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mouseup)=\"onMouseup()\"\r\n  >\r\n    <div\r\n      class=\"ard-hash-container\"\r\n      *ngIf=\"showHash\"\r\n    >\r\n      #\r\n    </div>\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-hex-input\"\r\n    [class.ard-has-value]=\"value\"\r\n    (mouseup)=\"onMouseup()\"\r\n  >\r\n    <div\r\n      class=\"ard-hash-container\"\r\n      *ngIf=\"showHash\"\r\n    >\r\n      #\r\n    </div>\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template #defaultPlaceholderTemplate>\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_HEX_INPUT_DEFAULTS]
@@ -5718,7 +5749,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
                 provide: _FormFieldComponentBase,
                 useExisting: ArdiumNumberInputComponent,
             },
-        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button decrement\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canDecrement()\"\r\n    [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n    (click)=\"onQuickChangeButtonClick(-1, $event)\"\r\n    (ardHold)=\"onQuickChangeButtonClick(-1)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    -\r\n  </ard-button>\r\n  }\r\n  <div class=\"ard-input-container\">\r\n    @if (shouldDisplayPlaceholder()) {\r\n    <ng-template\r\n      #defaultPlaceholderTemplate\r\n      let-plchldr\r\n    >\r\n      <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n    }\r\n\r\n    <input\r\n      #textInput\r\n      #focusableElement\r\n      type=\"text\"\r\n      [attr.id]=\"inputId()\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [readonly]=\"readonly()\"\r\n      [disabled]=\"disabled()\"\r\n      (input)=\"onInput(textInput.value)\"\r\n      (focus)=\"onFocusMaster($event)\"\r\n      (blur)=\"onBlurMaster($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n      (mouseup)=\"$event.stopPropagation()\"\r\n      (copy)=\"onCopy($event)\"\r\n    />\r\n  </div>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button increment\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canIncrement()\"\r\n    [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n    (click)=\"onQuickChangeButtonClick(1, $event)\"\r\n    (ardHold)=\"onQuickChangeButtonClick(1)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    +\r\n  </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.HoldDirective, selector: "[ardHold]", inputs: ["disabled", "readonly", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button decrement\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canDecrement()\"\r\n    [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n    (click)=\"onQuickChangeButtonClick(-1, $event)\"\r\n    (ardHold)=\"onQuickChangeButtonClick(-1)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    -\r\n  </ard-button>\r\n  }\r\n  <div class=\"ard-input-container\">\r\n    @if (shouldDisplayPlaceholder()) {\r\n    <ng-template\r\n      #defaultPlaceholderTemplate\r\n      let-plchldr\r\n    >\r\n      <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n    }\r\n\r\n    <input\r\n      #textInput\r\n      #focusableElement\r\n      type=\"text\"\r\n      [attr.id]=\"inputId()\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [readonly]=\"readonly()\"\r\n      [disabled]=\"disabled()\"\r\n      (input)=\"onInput(textInput.value)\"\r\n      (focus)=\"onFocusMaster($event)\"\r\n      (blur)=\"onBlurMaster($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n      (mouseup)=\"$event.stopPropagation()\"\r\n      (copy)=\"onCopy($event)\"\r\n    />\r\n  </div>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button increment\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canIncrement()\"\r\n    [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n    (click)=\"onQuickChangeButtonClick(1, $event)\"\r\n    (ardHold)=\"onQuickChangeButtonClick(1)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    +\r\n  </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.HoldDirective, selector: "[ardHold]", inputs: ["disabled", "readonly", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumNumberInputComponent, decorators: [{
             type: Component,
@@ -5732,7 +5763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: _FormFieldComponentBase,
                             useExisting: ArdiumNumberInputComponent,
                         },
-                    ], template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button decrement\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canDecrement()\"\r\n    [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n    (click)=\"onQuickChangeButtonClick(-1, $event)\"\r\n    (ardHold)=\"onQuickChangeButtonClick(-1)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    -\r\n  </ard-button>\r\n  }\r\n  <div class=\"ard-input-container\">\r\n    @if (shouldDisplayPlaceholder()) {\r\n    <ng-template\r\n      #defaultPlaceholderTemplate\r\n      let-plchldr\r\n    >\r\n      <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n    }\r\n\r\n    <input\r\n      #textInput\r\n      #focusableElement\r\n      type=\"text\"\r\n      [attr.id]=\"inputId()\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [readonly]=\"readonly()\"\r\n      [disabled]=\"disabled()\"\r\n      (input)=\"onInput(textInput.value)\"\r\n      (focus)=\"onFocusMaster($event)\"\r\n      (blur)=\"onBlurMaster($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n      (mouseup)=\"$event.stopPropagation()\"\r\n      (copy)=\"onCopy($event)\"\r\n    />\r\n  </div>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button increment\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canIncrement()\"\r\n    [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n    (click)=\"onQuickChangeButtonClick(1, $event)\"\r\n    (ardHold)=\"onQuickChangeButtonClick(1)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    +\r\n  </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"] }]
+                    ], template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button decrement\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canDecrement()\"\r\n    [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n    (click)=\"onQuickChangeButtonClick(-1, $event)\"\r\n    (ardHold)=\"onQuickChangeButtonClick(-1)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    -\r\n  </ard-button>\r\n  }\r\n  <div class=\"ard-input-container\">\r\n    @if (shouldDisplayPlaceholder()) {\r\n    <ng-template\r\n      #defaultPlaceholderTemplate\r\n      let-plchldr\r\n    >\r\n      <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n    }\r\n\r\n    <input\r\n      #textInput\r\n      #focusableElement\r\n      type=\"text\"\r\n      [attr.id]=\"inputId()\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [readonly]=\"readonly()\"\r\n      [disabled]=\"disabled()\"\r\n      (input)=\"onInput(textInput.value)\"\r\n      (focus)=\"onFocusMaster($event)\"\r\n      (blur)=\"onBlurMaster($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n      (mouseup)=\"$event.stopPropagation()\"\r\n      (copy)=\"onCopy($event)\"\r\n    />\r\n  </div>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button increment\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canIncrement()\"\r\n    [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n    (click)=\"onQuickChangeButtonClick(1, $event)\"\r\n    (ardHold)=\"onQuickChangeButtonClick(1)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    +\r\n  </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_NUMBER_INPUT_DEFAULTS]
@@ -6731,7 +6762,7 @@ class _SelectableListComponentBase extends _NgModelComponentBase {
         }
     }
     _toggleHighlightedItems(event) {
-        if (!this.isFocused)
+        if (!this.isFocused())
             return;
         event.preventDefault();
         const highlightedItems = this.highlightedItems();
@@ -6743,28 +6774,28 @@ class _SelectableListComponentBase extends _NgModelComponentBase {
         }
     }
     _highlightPrevious(event) {
-        if (!this.isFocused)
+        if (!this.isFocused())
             return;
         event.preventDefault();
         this.isMouseBeingUsed.set(false);
         this.itemStorage.highlightNextItem(-1, event.shiftKey);
     }
     _highlightNext(event) {
-        if (!this.isFocused)
+        if (!this.isFocused())
             return;
         event.preventDefault();
         this.isMouseBeingUsed.set(false);
         this.itemStorage.highlightNextItem(+1, event.shiftKey);
     }
     _highlightFirst(event) {
-        if (!this.isFocused)
+        if (!this.isFocused())
             return;
         event.preventDefault();
         this.isMouseBeingUsed.set(false);
         this.itemStorage.highlightFirstItem();
     }
     _highlightLast(event) {
-        if (!this.isFocused)
+        if (!this.isFocused())
             return;
         event.preventDefault();
         this.isMouseBeingUsed.set(false);
@@ -6933,11 +6964,11 @@ class ArdiumSegmentComponent extends _SelectableListComponentBase {
         this.itemStorage.unhighlightAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSegmentComponent, deps: [{ token: ARD_SEGMENT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumSegmentComponent, selector: "ard-segment", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, iconBased: { classPropertyName: "iconBased", publicName: "iconBased", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, uniformWidths: { classPropertyName: "uniformWidths", publicName: "uniformWidths", isSignal: true, isRequired: false, transformFunction: null }, itemsPerRow: { classPropertyName: "itemsPerRow", publicName: "itemsPerRow", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #focusableElement\n  class=\"ard-segment-container\"\n  [class.ard-disabled]=\"disabled()\"\n  [ariaDisabled]=\"disabled()\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-focus-visible]=\"isFocused && !isMouseBeingUsed\"\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n  [attr.tabindex]=\"tabIndex()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  @for (row of itemRows(); track $index) {\n    <div\n      class=\"ard-segment-row\"\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n    >\n      @for (option of row.options; track $index) {\n        <button\n          type=\"button\"\n          class=\"ard-segment-option\"\n          tabindex=\"-1\"\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n          [class.ard-option-selected]=\"option.selected()\"\n          [class.ard-option-highlighted]=\"option.highlighted()\"\n          [ariaSelected]=\"option.selected()\"\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\n          (click)=\"onItemClick(option, $event)\"\n        >\n          <div class=\"ard-focus-overlay\"></div>\n          <div class=\"ard-button-content\">\n            <span class=\"ard-option-label\">\n              <ng-template #defaultOptionTemplate>\n                {{ option.label() }}\n              </ng-template>\n\n              <ng-template\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\n              />\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumSegmentComponent, selector: "ard-segment", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, iconBased: { classPropertyName: "iconBased", publicName: "iconBased", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, uniformWidths: { classPropertyName: "uniformWidths", publicName: "uniformWidths", isSignal: true, isRequired: false, transformFunction: null }, itemsPerRow: { classPropertyName: "itemsPerRow", publicName: "itemsPerRow", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #focusableElement\n  class=\"ard-segment-container\"\n  [class.ard-disabled]=\"disabled()\"\n  [ariaDisabled]=\"disabled()\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n  [attr.tabindex]=\"tabIndex()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  @for (row of itemRows(); track $index) {\n    <div\n      class=\"ard-segment-row\"\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n    >\n      @for (option of row.options; track $index) {\n        <button\n          type=\"button\"\n          class=\"ard-segment-option\"\n          tabindex=\"-1\"\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n          [class.ard-option-selected]=\"option.selected()\"\n          [class.ard-option-highlighted]=\"option.highlighted()\"\n          [ariaSelected]=\"option.selected()\"\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\n          (click)=\"onItemClick(option, $event)\"\n        >\n          <div class=\"ard-focus-overlay\"></div>\n          <div class=\"ard-button-content\">\n            <span class=\"ard-option-label\">\n              <ng-template #defaultOptionTemplate>\n                {{ option.label() }}\n              </ng-template>\n\n              <ng-template\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\n              />\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSegmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-segment', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #focusableElement\n  class=\"ard-segment-container\"\n  [class.ard-disabled]=\"disabled()\"\n  [ariaDisabled]=\"disabled()\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-focus-visible]=\"isFocused && !isMouseBeingUsed\"\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n  [attr.tabindex]=\"tabIndex()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  @for (row of itemRows(); track $index) {\n    <div\n      class=\"ard-segment-row\"\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n    >\n      @for (option of row.options; track $index) {\n        <button\n          type=\"button\"\n          class=\"ard-segment-option\"\n          tabindex=\"-1\"\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n          [class.ard-option-selected]=\"option.selected()\"\n          [class.ard-option-highlighted]=\"option.highlighted()\"\n          [ariaSelected]=\"option.selected()\"\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\n          (click)=\"onItemClick(option, $event)\"\n        >\n          <div class=\"ard-focus-overlay\"></div>\n          <div class=\"ard-button-content\">\n            <span class=\"ard-option-label\">\n              <ng-template #defaultOptionTemplate>\n                {{ option.label() }}\n              </ng-template>\n\n              <ng-template\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\n              />\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
+            args: [{ selector: 'ard-segment', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #focusableElement\n  class=\"ard-segment-container\"\n  [class.ard-disabled]=\"disabled()\"\n  [ariaDisabled]=\"disabled()\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n  [attr.tabindex]=\"tabIndex()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  @for (row of itemRows(); track $index) {\n    <div\n      class=\"ard-segment-row\"\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n    >\n      @for (option of row.options; track $index) {\n        <button\n          type=\"button\"\n          class=\"ard-segment-option\"\n          tabindex=\"-1\"\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n          [class.ard-option-selected]=\"option.selected()\"\n          [class.ard-option-highlighted]=\"option.highlighted()\"\n          [ariaSelected]=\"option.selected()\"\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\n          (click)=\"onItemClick(option, $event)\"\n        >\n          <div class=\"ard-focus-overlay\"></div>\n          <div class=\"ard-button-content\">\n            <span class=\"ard-option-label\">\n              <ng-template #defaultOptionTemplate>\n                {{ option.label() }}\n              </ng-template>\n\n              <ng-template\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\n              />\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SEGMENT_DEFAULTS]
@@ -8746,7 +8777,6 @@ class ArdiumFormFieldComponent {
         this._DEFAULTS = inject(ARD_FORM_FIELD_DEFAULTS);
         this.alignHintToLeftByDefault = this._DEFAULTS.defaultHintAlign === SimpleOneAxisAlignment.Left;
         this.control = contentChild(_FormFieldComponentBase);
-        this.controlId = computed(() => this.control()?.htmlId());
         this.label = contentChild(ArdiumLabelComponent);
         this.hints = contentChildren(ArdiumHintDirective);
         this.errors = contentChildren(ArdiumErrorDirective);
@@ -8759,11 +8789,11 @@ class ArdiumFormFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFormFieldComponent, selector: "ard-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n>\r\n  <label\r\n    class=\"ard-label\"\r\n    [attr.for]=\"controlId()\"\r\n  >\r\n    <ng-content select=\"ard-label, [ard-label]\" />\r\n  </label>\r\n  <div class=\"ard-form-field__input\">\r\n    <ng-content />\r\n  </div>\r\n  <div\r\n    class=\"ard-form-field__hints\"\r\n    [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n    [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n  >\r\n    @if (hasAnyError()) {\r\n    <div class=\"ard-form-field__error\">\r\n      <ng-content select=\"ard-error, [ard-error]\" />\r\n    </div>\r\n    } @else {\r\n    <div class=\"ard-form-field__hints-left\">\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n      </div>\r\n      <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n    </div>\r\n    <div class=\"ard-form-field__hints-right\">\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n      </div>\r\n      <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFormFieldComponent, selector: "ard-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n  [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n  [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n  <label\r\n    class=\"ard-label\"\r\n    [attr.for]=\"control()?.htmlId()\"\r\n  >\r\n    <ng-content select=\"ard-label, [ard-label]\" />\r\n  </label>\r\n  <div class=\"ard-form-field__input\">\r\n    <ng-content />\r\n  </div>\r\n  <div\r\n    class=\"ard-form-field__hints\"\r\n    [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n    [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n  >\r\n    @if (hasAnyError()) {\r\n    <div class=\"ard-form-field__error\">\r\n      <ng-content select=\"ard-error, [ard-error]\" />\r\n    </div>\r\n    } @else {\r\n    <div class=\"ard-form-field__hints-left\">\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n      </div>\r\n      <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n    </div>\r\n    <div class=\"ard-form-field__hints-right\">\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n      </div>\r\n      <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n>\r\n  <label\r\n    class=\"ard-label\"\r\n    [attr.for]=\"controlId()\"\r\n  >\r\n    <ng-content select=\"ard-label, [ard-label]\" />\r\n  </label>\r\n  <div class=\"ard-form-field__input\">\r\n    <ng-content />\r\n  </div>\r\n  <div\r\n    class=\"ard-form-field__hints\"\r\n    [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n    [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n  >\r\n    @if (hasAnyError()) {\r\n    <div class=\"ard-form-field__error\">\r\n      <ng-content select=\"ard-error, [ard-error]\" />\r\n    </div>\r\n    } @else {\r\n    <div class=\"ard-form-field__hints-left\">\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n      </div>\r\n      <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n    </div>\r\n    <div class=\"ard-form-field__hints-right\">\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n      </div>\r\n      <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'ard-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n  [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n  [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n  <label\r\n    class=\"ard-label\"\r\n    [attr.for]=\"control()?.htmlId()\"\r\n  >\r\n    <ng-content select=\"ard-label, [ard-label]\" />\r\n  </label>\r\n  <div class=\"ard-form-field__input\">\r\n    <ng-content />\r\n  </div>\r\n  <div\r\n    class=\"ard-form-field__hints\"\r\n    [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n    [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n  >\r\n    @if (hasAnyError()) {\r\n    <div class=\"ard-form-field__error\">\r\n      <ng-content select=\"ard-error, [ard-error]\" />\r\n    </div>\r\n    } @else {\r\n    <div class=\"ard-form-field__hints-left\">\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n      </div>\r\n      <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n    </div>\r\n    <div class=\"ard-form-field__hints-right\">\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n      </div>\r\n      <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"] }]
         }] });
 class ArdiumHintComponent {
@@ -8784,7 +8814,6 @@ class ArdiumHorizontalFormFieldComponent {
         this._DEFAULTS = inject(ARD_FORM_FIELD_DEFAULTS);
         this.alignHintToLeftByDefault = this._DEFAULTS.defaultHintAlign === SimpleOneAxisAlignment.Left;
         this.control = contentChild(_FormFieldComponentBase);
-        this.controlId = computed(() => this.control()?.htmlId());
         this.label = contentChild(ArdiumLabelComponent);
         this.hints = contentChildren(ArdiumHintDirective);
         this.errors = contentChildren(ArdiumErrorDirective);
@@ -8797,11 +8826,11 @@ class ArdiumHorizontalFormFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumHorizontalFormFieldComponent, selector: "ard-horizontal-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-label\"\r\n      [attr.for]=\"controlId()\"\r\n    >\r\n      <ng-content select=\"ard-label, [ard-label]\" />\r\n    </label>\r\n  </div>\r\n  <div class=\"ard-form-field__non-label\">\r\n    <div class=\"ard-form-field__input\">\r\n      <ng-content />\r\n    </div>\r\n    <div\r\n      class=\"ard-form-field__hints\"\r\n      [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n      [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n    >\r\n      @if (hasAnyError()) {\r\n      <div class=\"ard-form-field__error\">\r\n        <ng-content select=\"ard-error, [ard-error]\" />\r\n      </div>\r\n      } @else {\r\n      <div class=\"ard-form-field__hints-left\">\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n        </div>\r\n        <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n      </div>\r\n      <div class=\"ard-form-field__hints-right\">\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n        </div>\r\n        <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumHorizontalFormFieldComponent, selector: "ard-horizontal-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n  [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n  [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-label\"\r\n      [attr.for]=\"control()?.htmlId()\"\r\n    >\r\n      <ng-content select=\"ard-label, [ard-label]\" />\r\n    </label>\r\n  </div>\r\n  <div class=\"ard-form-field__non-label\">\r\n    <div class=\"ard-form-field__input\">\r\n      <ng-content />\r\n    </div>\r\n    <div\r\n      class=\"ard-form-field__hints\"\r\n      [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n      [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n    >\r\n      @if (hasAnyError()) {\r\n      <div class=\"ard-form-field__error\">\r\n        <ng-content select=\"ard-error, [ard-error]\" />\r\n      </div>\r\n      } @else {\r\n      <div class=\"ard-form-field__hints-left\">\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n        </div>\r\n        <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n      </div>\r\n      <div class=\"ard-form-field__hints-right\">\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n        </div>\r\n        <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-horizontal-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-label\"\r\n      [attr.for]=\"controlId()\"\r\n    >\r\n      <ng-content select=\"ard-label, [ard-label]\" />\r\n    </label>\r\n  </div>\r\n  <div class=\"ard-form-field__non-label\">\r\n    <div class=\"ard-form-field__input\">\r\n      <ng-content />\r\n    </div>\r\n    <div\r\n      class=\"ard-form-field__hints\"\r\n      [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n      [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n    >\r\n      @if (hasAnyError()) {\r\n      <div class=\"ard-form-field__error\">\r\n        <ng-content select=\"ard-error, [ard-error]\" />\r\n      </div>\r\n      } @else {\r\n      <div class=\"ard-form-field__hints-left\">\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n        </div>\r\n        <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n      </div>\r\n      <div class=\"ard-form-field__hints-right\">\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n        </div>\r\n        <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'ard-horizontal-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n  [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n  [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-label\"\r\n      [attr.for]=\"control()?.htmlId()\"\r\n    >\r\n      <ng-content select=\"ard-label, [ard-label]\" />\r\n    </label>\r\n  </div>\r\n  <div class=\"ard-form-field__non-label\">\r\n    <div class=\"ard-form-field__input\">\r\n      <ng-content />\r\n    </div>\r\n    <div\r\n      class=\"ard-form-field__hints\"\r\n      [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n      [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n    >\r\n      @if (hasAnyError()) {\r\n      <div class=\"ard-form-field__error\">\r\n        <ng-content select=\"ard-error, [ard-error]\" />\r\n      </div>\r\n      } @else {\r\n      <div class=\"ard-form-field__hints-left\">\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n        </div>\r\n        <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n      </div>\r\n      <div class=\"ard-form-field__hints-right\">\r\n        <div class=\"ard-form-field__default-hint\">\r\n          <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n        </div>\r\n        <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"] }]
         }] });
 class ArdiumFormFieldModule {