@ardium-ui/ui 3.3.0-alpha1 → 3.4.1

package/fesm2022/ardium-ui-ui.mjs

@@ -1,12 +1,14 @@
 import 'first-last';
+import { AutofillMonitor, CdkAutofill } from '@angular/cdk/text-field';
 import * as i0 from '@angular/core';
-import { input, signal, Directive, Input, HostBinding, computed, output, ViewChildren, inject, Injector, InjectionToken, effect, viewChildren, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, NgModule, viewChild, contentChild, ViewContainerRef, TemplateRef, HostListener, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, ViewChild, ContentChild, contentChildren, Renderer2, Injectable } from '@angular/core';
+import { input, signal, Directive, Input, HostBinding, computed, output, ViewChildren, inject, Injector, runInInjectionContext, InjectionToken, effect, viewChildren, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, NgModule, viewChild, contentChild, ViewContainerRef, TemplateRef, HostListener, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, ViewChild, ContentChild, contentChildren, Renderer2, Injectable } from '@angular/core';
 import { NgControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i4 from '@ardium-ui/devkit';
 import { coerceBooleanProperty, coerceNumberProperty, coerceArrayProperty, ArdiumClickOutsideEventModule, ArdiumInnerHTMLModule, ArdiumFilesizePipeModule, ArdiumFilenamePipeModule, ArdiumFileextPipeModule, ArdiumHoldEventModule } from '@ardium-ui/devkit';
+import { toObservable } from '@angular/core/rxjs-interop';
 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 +97,7 @@ class _FocusableComponentBase extends _DisablableComponentBase {
         /**
          * Whether the component is currently focused.
          */
-        this.isFocused = false;
+        this.isFocused = signal(false);
     }
     /**
      * Focuses the correct element in the component.
@@ -126,7 +128,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 +136,7 @@ class _FocusableComponentBase extends _DisablableComponentBase {
      * @param event The focus event to emit.
      */
     onBlur(event) {
-        this.isFocused = false;
+        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 }); }
@@ -157,6 +159,22 @@ const _ngModelComponentDefaults = {
  * **Warning**: `writeValue` function should be implemented on the child component!
  */
 class _NgModelComponentBase extends _FocusableComponentBase {
+    constructor() {
+        super(...arguments);
+        //! event handlers
+        this.wasTouched = signal(false);
+        this._shouldEmitTouched = false;
+        //! form field related
+        this._injector = inject(Injector);
+        this._ngControl = null;
+        this.htmlId = input(TakeChance.id());
+        this._hasError = input(undefined, {
+            transform: v => coerceBooleanProperty(v),
+            alias: 'hasError',
+        });
+        this._hasErrorInControl = signal(false);
+        this.hasError = computed(() => this._hasError() ?? (this.wasTouched() && this._hasErrorInControl()));
+    }
     /**
      * Registers a function to handle touched state. Required by ControlValueAccessor.
      * @param fn The function to register.
@@ -178,13 +196,44 @@ class _NgModelComponentBase extends _FocusableComponentBase {
     setDisabledState(isDisabled) {
         this.disabled.set(isDisabled);
     }
-    //! event handlers
+    onFocus(event) {
+        super.onFocus(event);
+        this._shouldEmitTouched = false;
+    }
     onBlur(event) {
+        this._shouldEmitTouched = true;
         super.onBlur(event);
-        this._onTouchedRegistered?.();
+        setTimeout(() => {
+            if (!this._shouldEmitTouched)
+                return;
+            this.wasTouched.set(true);
+            this._onTouchedRegistered?.();
+        }, 0);
+    }
+    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));
+            if (!this._ngControl.control)
+                return;
+            runInInjectionContext(this._injector, () => {
+                // do not read the next line of code if you are easily frightened
+                // I'm not proud of this part, but it had to be done. God please forgive me
+                // I didn't find any other feasible way to detect when the control changes its touched state
+                // so it had to be hacked like this
+                toObservable(this._ngControl?.control?.touchedReactive)?.subscribe(v => this.wasTouched.set(v));
+            });
+        }
+    }
+    ngOnDestroy() {
+        this._statusChangesSub?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _NgModelComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: _NgModelComponentBase, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: _NgModelComponentBase, inputs: { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _NgModelComponentBase, decorators: [{
             type: Directive
@@ -202,37 +251,17 @@ const _formFieldComponentDefaults = {
 class _FormFieldComponentBase extends _NgModelComponentBase {
     constructor() {
         super(...arguments);
-        this._injector = inject(Injector);
-        this._ngControl = null;
         this._required = input(undefined, {
             transform: v => coerceBooleanProperty(v),
             alias: 'required',
         });
-        this.htmlId = input(TakeChance.id());
-        this._hasError = input(undefined, {
-            transform: v => coerceBooleanProperty(v),
-            alias: 'hasError',
-        });
-        this._hasErrorInControl = signal(false);
-        this.hasError = computed(() => this._hasError() ?? this._hasErrorInControl());
-    }
-    ngOnInit() {
-        this._ngControl = this._injector.get(NgControl, null);
-        if (this._ngControl) {
-            this._ngControl.valueAccessor = this;
-            this._statusChangesSub = this._ngControl.statusChanges
-                ?.pipe(map(v => v === 'INVALID'))
-                .subscribe(v => this._hasErrorInControl.set(v));
-        }
+        this.isSuccess = input(false, { transform: v => coerceBooleanProperty(v) });
     }
     get required() {
         return this._required() ?? !!this._ngControl?.control?.hasValidator(Validators.required);
     }
-    ngOnDestroy() {
-        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 }, 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
@@ -308,6 +337,9 @@ const _digitInputDefaults = {
     shape: DigitInputShape.Square,
     compact: false,
     outputAsString: false,
+    transform: null,
+    inputAttrs: {},
+    autoFillParseFn: v => v,
 };
 const ARD_DIGIT_INPUT_DEFAULTS = new InjectionToken('ard-digit-input-defaults', {
     factory: () => ({
@@ -331,8 +363,7 @@ class DigitInputModel {
         this._ardHost = _ardHost;
         this._configArray = signal([]);
         this.configArrayData = computed(() => {
-            let inputIndex = 0;
-            return this._configArray().map(v => {
+            return this._configArray().map((v, i) => {
                 if ('static' in v) {
                     return {
                         type: DigitInputConfigDataType.Static,
@@ -341,29 +372,32 @@ class DigitInputModel {
                 }
                 return {
                     type: DigitInputConfigDataType.Input,
-                    index: inputIndex++,
+                    index: i,
                     readonly: v.readonly,
                     placeholder: v.placeholder ?? '',
                 };
             });
         });
-        this._configArrayNoStatics = computed(() => this._configArray().filter(v => !('static' in v)));
         this.isConfigDefined = computed(() => this._configArray().length > 0);
         this.value = signal(null);
         this.stringValue = computed(() => this.value()
             ?.map(v => v ?? ' ')
-            .join('')
-            .trimEnd() ?? '');
-        this.isValueFull = computed(() => this.value()?.filter(v => v).length === this._configArrayNoStatics().length);
+            .join('') ?? '');
+        this.isValueFull = computed(() => this.value()?.filter(v => v).length === this._configArray().length);
         //set the value array to be the same length
         effect(() => {
-            const length = this.configArrayData().length;
+            const configArr = this.configArrayData();
+            const length = configArr.length;
             this.value.update(arr => {
                 if (!arr)
-                    return new Array(length).fill(null);
-                if (arr.length >= length)
-                    return arr.slice(0, length);
-                return [...arr, ...new Array(length - arr.length).fill(null)];
+                    arr = [];
+                const newArr = [];
+                for (let i = 0; i < length; i++) {
+                    const curr = arr[i];
+                    const config = configArr[i];
+                    newArr.push(config.type === DigitInputConfigDataType.Static ? config.char : curr ?? null);
+                }
+                return newArr;
             });
         }, { allowSignalWrites: true });
     }
@@ -371,13 +405,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._configArray().length) {
+                console.warn(`ARD-WA0041: Value provided to <ard-digit-input> is too long. Got ${vArray.length} characters, but expected a maximum of ${this._configArray().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._configArray().length) {
+            console.warn(`ARD-WA0041: Value provided to <ard-digit-input> is too long. Got ${vArray.length} characters, but expected a maximum of ${this._configArray().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 +429,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++;
         }
     }
@@ -446,9 +492,32 @@ class DigitInputModel {
             }
         }));
     }
+    resetInputValue(index) {
+        if (index < 0 || index > this._configArray().length)
+            return;
+        const config = this._configArray()[index];
+        let newValue = '';
+        if ('static' in config) {
+            newValue = config.static;
+        }
+        //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. 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
+        inputEl.nativeElement.value = newValue;
+        this.value.update(arr => {
+            if (!arr)
+                arr = [];
+            const newArr = [...arr];
+            newArr[index] = newValue || null;
+            return newArr;
+        });
+    }
     //! validate against the config
     validateInputAndSetValue(input, index) {
-        if (index < 0 || index > this._configArrayNoStatics().length)
+        if (index < 0 || index > this._configArray().length)
             return null;
         let v = this.value();
         //prepare the value array if does not exist
@@ -467,11 +536,11 @@ class DigitInputModel {
         const lastChar = input.charAt(input.length - 1);
         input = firstChar === before ? lastChar : firstChar;
         //validate and transform, if necessary
-        const inputChar = this._validateSingleChar(input, before, this._configArrayNoStatics()[index]);
+        const inputChar = this._validateSingleChar(input, before, this._configArray()[index]);
         //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;
@@ -484,7 +553,7 @@ class DigitInputModel {
             return newArr;
         });
         //return changes marker and validated value
-        return { wasChanged: newVal !== before, resultChar: inputChar };
+        return { wasChanged: newVal !== before, wasValidChar: !isNull(inputChar), resultChar: inputChar };
     }
     validateValueAndUpdate() {
         const v = this.value();
@@ -492,39 +561,49 @@ class DigitInputModel {
             return;
         let before = '';
         const newValue = [];
-        for (let i = 0; i < Math.min(this._configArrayNoStatics().length, v.length); i++) {
+        for (let i = 0; i < Math.min(this._configArray().length, v.length); i++) {
             const char = v[i];
             before += char ?? ' ';
             if (!char) {
                 newValue.push(char);
                 continue;
             }
-            const config = this._configArrayNoStatics()[i];
-            const newChar = this._validateSingleChar(char, before, config);
+            const newChar = this._validateSingleChar(char, before, this._configArray()[i]);
             newValue.push(newChar);
         }
         this.value.set(newValue);
     }
     _validateSingleChar(char, before, config) {
+        // return the character if it is static
+        if ('static' in config)
+            return config.static;
+        // for peace of mind protect against modifying read-only fields
         if (config.readonly) {
             throw new Error(`ARD-IS0049R: trying to set value of a <ard-digit-input>'s readonly field. This is error is fatal to the functioning of Ardium UI. Please report this issue to the creators.`);
         }
+        // process regex or convert string into regex
         if (!isFunction(config.accept)) {
             const regExp = isRegExp(config.accept) ? config.accept : new RegExp(`[${_sanitizeRegExpString(config.accept)}]`);
             config.accept = str => regExp.test(str);
         }
         if (!char)
             return char;
+        // check if input fits the criteria
         const canAccept = config.accept(char, before);
         if (!canAccept)
             return null;
-        if (config.transform) {
-            if (config.transform === TransformType.Lowercase) {
+        // transform if needed
+        const transform = config.transform ?? this._ardHost.transform();
+        if (transform) {
+            if (transform === TransformType.Lowercase) {
                 return char.toLowerCase();
             }
-            if (config.transform === TransformType.Uppercase) {
+            if (transform === TransformType.Uppercase) {
                 return char.toUpperCase();
             }
+            if (isFunction(transform)) {
+                return transform(char).charAt(0);
+            }
             console.warn(`ARD-IS0049T: <ard-digit-input>'s value validator encountered an unexpected value of the config's "transform" property. Ardium UI was able to handle this issue, but please report it to the creators.`);
         }
         return char;
@@ -534,8 +613,15 @@ class DigitInputModel {
 class ArdiumDigitInputComponent extends _FormFieldComponentBase {
     constructor(defaults) {
         super(defaults);
+        this._autoFillMonitor = inject(AutofillMonitor);
         //! inputs ref
         this.inputs = viewChildren('input');
+        this.inputAttrs = input(this._DEFAULTS.inputAttrs);
+        //! auto-fill
+        this.autoFillParseFn = input(this._DEFAULTS.autoFillParseFn);
+        this.isAutofilled = signal(false);
+        this._wasAutofillValueRead = signal(false);
+        this._autoFillSubs = [];
         //! data model
         this.model = new DigitInputModel(this);
         //! appearance
@@ -548,12 +634,14 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
             `ard-variant-${this.variant()}`,
             `ard-shape-${this.shape()}`,
             this.compact() ? 'ard-compact' : '',
+            this.isAutofilled() ? 'ard-autofilled' : '',
         ].join(' '));
         //! model access points
         this.config = input.required({
             transform: v => this.model.setConfig(v),
         });
         this.configArrayData = this.model.configArrayData;
+        this.transform = input(this._DEFAULTS.transform);
         this._oldConfigArrayDataLength = -1;
         this.configArrayDataEffect = effect(() => {
             if (this.configArrayData().length === this._oldConfigArrayDataLength)
@@ -561,6 +649,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) });
@@ -576,6 +665,43 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
         this.focusIndexEvent = output({ alias: 'focusIndex' });
         this.blurIndexEvent = output({ alias: 'blurIndex' });
     }
+    _setInputAttributes() {
+        const inputs = this.inputs();
+        for (const input of inputs) {
+            const inputEl = input.nativeElement;
+            const attributes = {
+                autocorrect: 'off',
+                autocapitalize: 'off',
+                autocomplete: 'postal-code',
+                ...this.inputAttrs(),
+            };
+            for (const key of Object.keys(attributes)) {
+                inputEl.setAttribute(key, attributes[key]);
+            }
+        }
+    }
+    _subscribeToAutoFillOnInputs() {
+        const inputs = this.inputs();
+        for (const input of inputs) {
+            const sub = this._autoFillMonitor.monitor(input).subscribe(event => {
+                this.isAutofilled.set(event.isAutofilled);
+            });
+            this._autoFillSubs.push(sub);
+        }
+    }
+    _unsubscribeFromAutoFill() {
+        const inputs = this.inputs();
+        for (const input of inputs) {
+            this._autoFillMonitor.stopMonitoring(input);
+        }
+        for (const sub of this._autoFillSubs) {
+            sub.unsubscribe();
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._unsubscribeFromAutoFill();
+    }
     ngOnInit() {
         super.ngOnInit();
         this._oldConfigArrayDataLength = this.configArrayData().length;
@@ -583,13 +709,24 @@ 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);
+        }
+        this._setInputAttributes();
+        this._subscribeToAutoFillOnInputs();
+    }
     set value(v) {
         this.writeValue(v);
     }
@@ -600,30 +737,44 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
         event.preventDefault();
         if (!value)
             return;
-        const maxLength = this.inputs().length - index;
+        this._handleMultiDigitChange(value, index);
+    }
+    onInput(event, index) {
+        const value = event.target.value;
+        if (this.isAutofilled()) {
+            if (!this._wasAutofillValueRead()) {
+                this._wasAutofillValueRead.set(true);
+                setTimeout(() => {
+                    this._wasAutofillValueRead.set(false);
+                    const parsedValue = this.autoFillParseFn()(value);
+                    this._handleMultiDigitChange(parsedValue, 0);
+                }, 0);
+            }
+            return;
+        }
+        const wasValidCharacter = this._updateSingleInputValue(value, index);
+        if (!wasValidCharacter)
+            return;
+        this.focusByIndex(index + 1);
+    }
+    _handleMultiDigitChange(value, startIndex) {
+        const maxLength = this.inputs().length - startIndex;
         value
             .slice(0, maxLength)
             .split('')
             .forEach((char, i) => {
-            this.model.validateInputAndSetValue(char, index + i);
+            this.model.resetInputValue(startIndex + i);
+            this.model.validateInputAndSetValue(char, startIndex + i);
         });
-        this.focusByIndex(index - 1 + Math.min(value.length, maxLength));
-    }
-    onInput(event, index) {
-        const wasChanged = this._updateSingleInputValue(event.target.value, index);
-        if (!wasChanged)
-            return;
-        this.focusByIndex(index + 1);
+        this.focusByIndex(startIndex - 1 + Math.min(value.length, maxLength));
+        this._emitChange();
     }
     _updateSingleInputValue(value, index) {
         const changeResult = this.model.validateInputAndSetValue(value, index);
-        if (!changeResult?.wasChanged)
-            return false;
-        this._emitChange();
-        if (this.model.isValueFull()) {
-            this.blur();
+        if (changeResult?.wasChanged) {
+            this._emitChange();
         }
-        return true;
+        return changeResult?.wasValidChar ?? false;
     }
     focusByIndex(index, tryFocusingNext, direction) {
         if (index < 0 || index >= this.inputs().length)
@@ -631,6 +782,9 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
         const nextEl = this.inputs()[index]?.nativeElement;
         if (!nextEl)
             return false;
+        if (nextEl.getAttribute('data-ard-static') !== null) {
+            return this.focusByIndex(index + (direction ?? 1));
+        }
         nextEl.focus();
         if (tryFocusingNext && direction && document.activeElement !== nextEl) {
             return this.focusByIndex(index + direction);
@@ -640,6 +794,7 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
     //focus, blur, change
     onFocusMaster(event, index) {
         this.focusIndexEvent.emit(index);
+        event.target.setSelectionRange(0, 1);
         this.onFocus(event);
     }
     onBlurMaster(event, index) {
@@ -678,7 +833,7 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDigitInputComponent, deps: [{ token: ARD_DIGIT_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumDigitInputComponent, selector: "ard-digit-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, outputAsString: { classPropertyName: "outputAsString", publicName: "outputAsString", isSignal: true, isRequired: false, transformFunction: null }, outputControlValueAccessorOnFinish: { classPropertyName: "outputControlValueAccessorOnFinish", publicName: "outputControlValueAccessorOnFinish", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", finishedValue: "finishedValue", focusIndexEvent: "focusIndex", blurIndexEvent: "blurIndex" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumDigitInputComponent, selector: "ard-digit-input", inputs: { inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, autoFillParseFn: { classPropertyName: "autoFillParseFn", publicName: "autoFillParseFn", isSignal: true, 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 }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, outputAsString: { classPropertyName: "outputAsString", publicName: "outputAsString", isSignal: true, isRequired: false, transformFunction: null }, outputControlValueAccessorOnFinish: { classPropertyName: "outputControlValueAccessorOnFinish", publicName: "outputControlValueAccessorOnFinish", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", finishedValue: "finishedValue", focusIndexEvent: "focusIndex", blurIndexEvent: "blurIndex" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumDigitInputComponent),
@@ -688,7 +843,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      [readonly]=\"data.readonly\"\r\n      [placeholder]=\"data.placeholder\"\r\n      [attr.tabindex]=\"tabIndex()\"\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    <input\r\n      #input\r\n      type=\"text\"\r\n      class=\"ard-digit-input__static-input\"\r\n      data-ard-static\r\n      autocomplete=\"off\"\r\n      tabindex=\"-1\"\r\n      aria-hidden=\"true\"\r\n      [value]=\"data.char\"\r\n    />\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-digit-input__static-input{position:absolute;opacity:0;appearance:none;pointer-events:none;width:0;height:0}@keyframes cdk-text-field-autofill-start{}@keyframes cdk-text-field-autofill-end{}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}\n"], 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 +857,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      [readonly]=\"data.readonly\"\r\n      [placeholder]=\"data.placeholder\"\r\n      [attr.tabindex]=\"tabIndex()\"\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    <input\r\n      #input\r\n      type=\"text\"\r\n      class=\"ard-digit-input__static-input\"\r\n      data-ard-static\r\n      autocomplete=\"off\"\r\n      tabindex=\"-1\"\r\n      aria-hidden=\"true\"\r\n      [value]=\"data.char\"\r\n    />\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-digit-input__static-input{position:absolute;opacity:0;appearance:none;pointer-events:none;width:0;height:0}@keyframes cdk-text-field-autofill-start{}@keyframes cdk-text-field-autofill-end{}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DIGIT_INPUT_DEFAULTS]
@@ -712,14 +867,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class ArdiumDigitInputModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDigitInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDigitInputModule, declarations: [ArdiumDigitInputComponent], imports: [CommonModule], exports: [ArdiumDigitInputComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDigitInputModule, declarations: [ArdiumDigitInputComponent], imports: [CommonModule, CdkAutofill], exports: [ArdiumDigitInputComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDigitInputModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDigitInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ArdiumDigitInputComponent],
-                    imports: [CommonModule],
+                    imports: [CommonModule, CdkAutofill],
                     exports: [ArdiumDigitInputComponent],
                 }]
         }] });
@@ -938,8 +1093,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 +1112,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 +1121,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 +1134,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 +2014,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 +2028,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 +2378,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 +2392,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 +2521,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 +2535,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]
@@ -3616,7 +3776,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
     }
     //! change & touch event emitters
     _emitChange() {
-        const value = this.itemStorage.value();
+        const value = this.multiselectable() ? this.itemStorage.value() : this.itemStorage.value()[0];
         this._onChangeRegistered?.(value);
         this.changeEvent.emit(value);
         this.valueChange.emit(value);
@@ -4093,7 +4253,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        </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        [attr.tabindex]=\"tabIndex()\"\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 +4267,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        </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        [attr.tabindex]=\"tabIndex()\"\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]
@@ -4440,7 +4600,6 @@ class _FileInputComponentBase extends _NgModelComponentBase {
     constructor() {
         super(...arguments);
         this.fileInputEl = viewChild('fileInput');
-        this.htmlId = input(TakeChance.id());
         this.name = input('');
         this._wasViewInit = false;
         //! appearance
@@ -4462,6 +4621,7 @@ class _FileInputComponentBase extends _NgModelComponentBase {
         this._beforeDragoverState = 'idle';
     }
     ngOnInit() {
+        super.ngOnInit();
         if (!(window.File && window.FileReader && window.Blob)) {
             console.error(new Error(`ARD-${this.componentId}0: Cannot use Ardium UI file features because this browser does not support file handling!`));
         }
@@ -4576,7 +4736,7 @@ class _FileInputComponentBase extends _NgModelComponentBase {
         inputEl.files = dataTransfer.files;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FileInputComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: _FileInputComponentBase, inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, blockAfterUpload: { classPropertyName: "blockAfterUpload", publicName: "blockAfterUpload", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change", dragFilesEvent: "dragFiles" }, viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: _FileInputComponentBase, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, blockAfterUpload: { classPropertyName: "blockAfterUpload", publicName: "blockAfterUpload", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change", dragFilesEvent: "dragFiles" }, viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FileInputComponentBase, decorators: [{
             type: Directive
@@ -5076,7 +5236,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\r\n  class=\"ard-file-input-form-field-frame\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [prefixTemplate]=\"prefixTemplate\"\r\n  [suffixTemplate]=\"suffixTemplate\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (drop)=\"onDrop($event)\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n>\r\n  <div\r\n    class=\"ard-file-input\"\r\n    [ngClass]=\"ngClasses()\"\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 || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <div class=\"ard-file-input__value\">\r\n        @if (currentViewState() === 'idle') {\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\r\n            [ngTemplateOutletContext]=\"getIdleContext()\"\r\n          />\r\n        }\r\n        @if (currentViewState() === 'dragover') {\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n          />\r\n        }\r\n        @if (currentViewState() === 'uploaded') {\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\r\n            [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (shouldShowClearButton) {\r\n      <ard-clear-button\r\n        #focusableElement\r\n        [title]=\"clearButtonTitle()\"\r\n        (mouseup)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n    @if (!shouldBeBlocked) {\r\n      <button\r\n        #focusableElement\r\n        type=\"button\"\r\n        class=\"ard-browse-button\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (click)=\"openBrowseDialog()\"\r\n      >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <ard-icon>folder</ard-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-input__input\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [attr.id]=\"htmlId()\"\r\n  (change)=\"onInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <span class=\"ard-file-input__idle\">\r\n    @if (multiple()) {\r\n      <span>Upload a file</span>\r\n    } @else {\r\n      <span>Upload files</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n  @if (multiple()) {\r\n    <span class=\"ard-file-input__dragover-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n  } @else {\r\n    <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n  }\r\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <div class=\"ard-file-input__uploaded\">\r\n    <span class=\"ard-file-input__uploaded-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n  </div>\r\n</ng-template>\r\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 +5246,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\r\n  class=\"ard-file-input-form-field-frame\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [prefixTemplate]=\"prefixTemplate\"\r\n  [suffixTemplate]=\"suffixTemplate\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (drop)=\"onDrop($event)\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n>\r\n  <div\r\n    class=\"ard-file-input\"\r\n    [ngClass]=\"ngClasses()\"\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 || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <div class=\"ard-file-input__value\">\r\n        @if (currentViewState() === 'idle') {\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\r\n            [ngTemplateOutletContext]=\"getIdleContext()\"\r\n          />\r\n        }\r\n        @if (currentViewState() === 'dragover') {\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\r\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n          />\r\n        }\r\n        @if (currentViewState() === 'uploaded') {\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\r\n            [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n          />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (shouldShowClearButton) {\r\n      <ard-clear-button\r\n        #focusableElement\r\n        [title]=\"clearButtonTitle()\"\r\n        (mouseup)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n    @if (!shouldBeBlocked) {\r\n      <button\r\n        #focusableElement\r\n        type=\"button\"\r\n        class=\"ard-browse-button\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (click)=\"openBrowseDialog()\"\r\n      >\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <ard-icon>folder</ard-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-input__input\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [attr.id]=\"htmlId()\"\r\n  (change)=\"onInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <span class=\"ard-file-input__idle\">\r\n    @if (multiple()) {\r\n      <span>Upload a file</span>\r\n    } @else {\r\n      <span>Upload files</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n  @if (multiple()) {\r\n    <span class=\"ard-file-input__dragover-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n  } @else {\r\n    <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n  }\r\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <div class=\"ard-file-input__uploaded\">\r\n    <span class=\"ard-file-input__uploaded-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n  </div>\r\n</ng-template>\r\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 +5593,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 +5607,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 +5878,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 +5892,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]
@@ -5878,7 +6038,6 @@ const CheckboxState = {
 class ArdiumCheckboxComponent extends _BooleanComponentBase {
     constructor(defaults) {
         super(defaults);
-        this.htmlId = input('');
         //! appearance
         this.color = input(this._DEFAULTS.color);
         this.unselectedColor = input(this._DEFAULTS.unselectedColor);
@@ -5902,7 +6061,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
         this._emitChange();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxComponent, deps: [{ token: ARD_CHECKBOX_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, unselectedColor: { classPropertyName: "unselectedColor", publicName: "unselectedColor", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { state: "stateChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, unselectedColor: { classPropertyName: "unselectedColor", publicName: "unselectedColor", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { state: "stateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumCheckboxComponent),
@@ -5939,7 +6098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 const _radioDefaults = {
-    ..._booleanComponentDefaults,
+    ..._focusableComponentDefaults,
     color: SimpleComponentColor.Primary,
 };
 const ARD_RADIO_DEFAULTS = new InjectionToken('ard-radio-defaults', {
@@ -5951,11 +6110,31 @@ function provideRadioDefaults(config) {
     return { provide: ARD_RADIO_DEFAULTS, useValue: { ..._radioDefaults, ...config } };
 }
 
-class ArdiumRadioComponent extends _BooleanComponentBase {
+class ArdiumRadioComponent extends _FocusableComponentBase {
     constructor(defaults) {
         super(defaults);
         this._changeDetector = inject(ChangeDetectorRef);
         this.htmlId = input(TakeChance.id());
+        //! events
+        /**
+         * The event emitter responsible for firing `select` events. Fired when the `selected` state is set to true.
+         */
+        this.selectEvent = output({ alias: 'select' });
+        /**
+         * The event emitter responsible for firing `unselect` events. Fired when the `selected` state is set to false.
+         */
+        this.unselectEvent = output({ alias: 'unselect' });
+        /**
+         * The event emitter responsible for firing `change` events. Fired when the `selected` state is changed.
+         */
+        this.changeEvent = output({ alias: 'change' });
+        //! [(selected)] two-way binding
+        // can be set using a no-value argument
+        this.selected = signal(false);
+        /**
+         * The event emitter responsible for firing `selectedChange` events. Fired when the `selected` state is changed.
+         */
+        this.selectedChange = output();
         this.value = input();
         //! appearance
         this.color = input(this._DEFAULTS.color);
@@ -5963,6 +6142,47 @@ class ArdiumRadioComponent extends _BooleanComponentBase {
         //! radio-group access points
         this.name = signal(null);
     }
+    /**
+     * Emits all select-state-related events.
+     */
+    _emitChange() {
+        if (this.selected())
+            this.selectEvent.emit(null);
+        else
+            this.unselectEvent.emit(null);
+        this.selectedChange.emit(this.selected());
+        this.changeEvent.emit(this.selected());
+    }
+    /**
+     * The selection state of the component. Coercible into a boolean.
+     */
+    set _selected(v) {
+        this.selected.set(coerceBooleanProperty(v));
+    }
+    get _selectedHostAttribute() {
+        return this.selected();
+    }
+    /**
+     * Toggles the selected state. Emits all appropriate events.
+     */
+    toggleSelected() {
+        this.selected.update(v => !v);
+        this._emitChange();
+    }
+    /**
+     * Sets the state to "selected". Emits all appropriate events only if the state changes.
+     */
+    select() {
+        this.selected.set(true);
+        this._emitChange();
+    }
+    /**
+     * Sets the state to "unselected". Emits all appropriate events only if the state changes.
+     */
+    unselect() {
+        this.selected.set(false);
+        this._emitChange();
+    }
     //! event handlers
     onMousedown() {
         this.focus();
@@ -5983,7 +6203,7 @@ class ArdiumRadioComponent extends _BooleanComponentBase {
         this._changeDetector.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRadioComponent, deps: [{ token: ARD_RADIO_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumRadioComponent, selector: "ard-radio", inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<button\n  #focusableElement\n  class=\"ard-radio\"\n  type=\"button\"\n  [ngClass]=\"ngClasses()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  (mousedown)=\"onMousedown()\"\n  (mouseup)=\"onMouseup()\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-radio-circles\">\n    <div class=\"ard-radio-outer-circle\"></div>\n    <div class=\"ard-radio-inner-circle\"></div>\n    <div class=\"ard-focus-overlay\"></div>\n    <div class=\"ard-hitbox\"></div>\n  </div>\n  <label [for]=\"htmlId()\">\n    <ng-content></ng-content>\n  </label>\n</button>\n\n<input\n  class=\"ard-radio-input-element\"\n  type=\"radio\"\n  [name]=\"name()\"\n  [id]=\"htmlId()\"\n  [checked]=\"selected()\"\n  #radio\n/>\n", styles: [".ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumRadioComponent, selector: "ard-radio", inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectEvent: "select", unselectEvent: "unselect", changeEvent: "change", selectedChange: "selectedChange" }, host: { properties: { "attr.selected": "this._selectedHostAttribute", "class.ard-selected": "this._selectedHostAttribute" } }, usesInheritance: true, ngImport: i0, template: "<button\n  #focusableElement\n  class=\"ard-radio\"\n  type=\"button\"\n  [ngClass]=\"ngClasses()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  (mousedown)=\"onMousedown()\"\n  (mouseup)=\"onMouseup()\"\n  [tabindex]=\"tabIndex()\"\n>\n  <div class=\"ard-radio-circles\">\n    <div class=\"ard-radio-outer-circle\"></div>\n    <div class=\"ard-radio-inner-circle\"></div>\n    <div class=\"ard-focus-overlay\"></div>\n    <div class=\"ard-hitbox\"></div>\n  </div>\n  <label [for]=\"htmlId()\">\n    <ng-content></ng-content>\n  </label>\n</button>\n\n<input\n  class=\"ard-radio-input-element\"\n  type=\"radio\"\n  [name]=\"name()\"\n  [id]=\"htmlId()\"\n  [checked]=\"selected()\"\n  #radio\n/>\n", styles: [".ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}\n"], 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: ArdiumRadioComponent, decorators: [{
             type: Component,
@@ -5991,7 +6211,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_RADIO_DEFAULTS]
-                }] }] });
+                }] }], propDecorators: { _selected: [{
+                type: Input,
+                args: ['selected']
+            }], _selectedHostAttribute: [{
+                type: HostBinding,
+                args: ['attr.selected']
+            }, {
+                type: HostBinding,
+                args: ['class.ard-selected']
+            }] } });
 
 class ArdiumRadioGroupComponent extends _NgModelComponentBase {
     get _htmlIdHostAttribute() {
@@ -6000,7 +6229,6 @@ class ArdiumRadioGroupComponent extends _NgModelComponentBase {
     constructor() {
         super(_ngModelComponentDefaults); // no need for injecting a token with default values
         this._radios = contentChildren(ArdiumRadioComponent, { descendants: true });
-        this.htmlId = input('');
         this.valueChange = output();
         this.changeEvent = output({ alias: 'change' });
         /**
@@ -6135,6 +6363,7 @@ class ArdiumRadioGroupComponent extends _NgModelComponentBase {
         }
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this._destroyChildSubscriptions();
     }
     _destroyChildSubscriptions() {
@@ -6144,7 +6373,7 @@ class ArdiumRadioGroupComponent extends _NgModelComponentBase {
         this._childEventSubs = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ArdiumRadioGroupComponent, selector: "ard-radio-group", inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change", selected: "selectedChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.id": "this._htmlIdHostAttribute" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ArdiumRadioGroupComponent, selector: "ard-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change", selected: "selectedChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.id": "this._htmlIdHostAttribute" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumRadioGroupComponent),
@@ -6331,6 +6560,9 @@ class SimpleItemStorage {
      * @returns true if all items are valid, otherwise false.
      */
     _validateWriteValue(ngModel) {
+        if (!isArray(ngModel)) {
+            throw new Error(`ARD-FT${this._ardParentComp._componentId}0: <ard-${this._ardParentComp._componentName}> expects its value to be an array, got "${ngModel}".`);
+        }
         return ngModel.every(item => {
             if (!isDefined(this._ardParentComp.compareWith()) && isObject(item) && this._ardParentComp.valueFrom()) {
                 console.warn(`ARD-FT${this._ardParentComp._componentId}0: Setting object(${JSON.stringify(item)}) as your model with [valueFrom] is not allowed unless [compareWith] is used.`);
@@ -6536,7 +6768,7 @@ class SimpleItemStorage {
 }
 
 const _selectableListComponentDefaults = {
-    ..._ngModelComponentDefaults,
+    ..._formFieldComponentDefaults,
     valueFrom: 'value',
     labelFrom: 'label',
     disabledFrom: 'disabled',
@@ -6546,12 +6778,11 @@ const _selectableListComponentDefaults = {
     invertDisabled: false,
     maxSelectedItems: undefined,
 };
-class _SelectableListComponentBase extends _NgModelComponentBase {
+class _SelectableListComponentBase extends _FormFieldComponentBase {
     constructor() {
         super(...arguments);
         //! public constants
         this.itemStorage = new SimpleItemStorage(this);
-        this.htmlId = TakeChance.id();
         this.DEFAULTS = this._DEFAULTS;
         this._cd = inject(ChangeDetectorRef);
         //! binding-related inputs
@@ -6615,7 +6846,7 @@ class _SelectableListComponentBase extends _NgModelComponentBase {
         return this.touched();
     }
     _emitChange() {
-        const value = this.itemStorage.value();
+        const value = this.singleselectable() ? this.itemStorage.value()[0] : this.itemStorage.value();
         this._onChangeRegistered?.(value);
         this.changeEvent.emit(value);
         this.valueChange.emit(value);
@@ -6731,7 +6962,7 @@ class _SelectableListComponentBase extends _NgModelComponentBase {
         }
     }
     _toggleHighlightedItems(event) {
-        if (!this.isFocused)
+        if (!this.isFocused())
             return;
         event.preventDefault();
         const highlightedItems = this.highlightedItems();
@@ -6743,28 +6974,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 +7164,31 @@ 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 } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ArdiumSegmentComponent),
+                multi: true,
+            },
+            {
+                provide: _FormFieldComponentBase,
+                useExisting: ArdiumSegmentComponent,
+            },
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n    <div\r\n      class=\"ard-segment-row\"\r\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n    >\r\n      @for (option of row.options; track $index) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-segment-option\"\r\n          tabindex=\"-1\"\r\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\r\n          [class.ard-option-selected]=\"option.selected()\"\r\n          [class.ard-option-highlighted]=\"option.highlighted()\"\r\n          [ariaSelected]=\"option.selected()\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <span class=\"ard-option-label\">\r\n              <ng-template #defaultOptionTemplate>\r\n                {{ option.label() }}\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            </span>\r\n          </div>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\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, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ArdiumSegmentComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: _FormFieldComponentBase,
+                            useExisting: ArdiumSegmentComponent,
+                        },
+                    ], template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n    <div\r\n      class=\"ard-segment-row\"\r\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n    >\r\n      @for (option of row.options; track $index) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-segment-option\"\r\n          tabindex=\"-1\"\r\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\r\n          [class.ard-option-selected]=\"option.selected()\"\r\n          [class.ard-option-highlighted]=\"option.highlighted()\"\r\n          [ariaSelected]=\"option.selected()\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <span class=\"ard-option-label\">\r\n              <ng-template #defaultOptionTemplate>\r\n                {{ option.label() }}\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            </span>\r\n          </div>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\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]
@@ -7318,6 +7569,7 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
         this.currentHandle = signal(null);
     }
     ngOnInit() {
+        super.ngOnInit();
         if (this._value.low !== -Infinity && this._value.high !== Infinity)
             return;
         this.writeValue({ low: this.min(), high: this.max() });
@@ -8088,7 +8340,6 @@ function provideCheckboxListDefaults(config) {
 class ArdiumCheckboxListComponent extends _NgModelComponentBase {
     constructor(defaults) {
         super(defaults);
-        this.htmlId = input(TakeChance.id());
         this.DEFAULTS = this._DEFAULTS;
         // static values. Not meant to be changed.
         this.multiselectable = signal(true);
@@ -8173,7 +8424,7 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
         this.selectItem(v);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxListComponent, deps: [{ token: ARD_CHECKBOX_LIST_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumCheckboxListComponent, selector: "ard-checkbox-list", inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", 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 }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change" }, host: { properties: { "attr.id": "this._htmlIdHostAttribute" } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-checkbox-list\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (item of items; track item.index) {\n    <div\n      class=\"ard-checkbox-list__item\"\n      [class.ard-item-highlighted]=\"item.highlighted()\"\n      [class.ard-item-disabled]=\"item.disabled()\"\n      (mouseover)=\"onItemHighlight(item)\"\n      (mouseleave)=\"onItemBlur()\"\n      (click)=\"toggleItem(item)\"\n    >\n      <div class=\"ard-focus-overlay\"></div>\n      <ard-checkbox\n        [selected]=\"item.selected()\"\n        [disabled]=\"item.disabled()\"\n        [color]=\"color()\"\n        [htmlId]=\"htmlId() + item.index\"\n        [tabIndex]=\"tabIndex()\"\n        (focus)=\"onFocus($event)\"\n        (focus)=\"onItemFocus(item)\"\n        (blur)=\"onBlur($event)\"\n        (blur)=\"onItemBlur()\"\n        (select)=\"selectItem(item)\"\n        (unselect)=\"unselectItem(item)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n      <label [for]=\"htmlId() + item.index\">\n        {{ item.label() }}\n      </label>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["htmlId", "color", "unselectedColor", "state"], outputs: ["stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumCheckboxListComponent, selector: "ard-checkbox-list", inputs: { valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", 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 }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change" }, host: { properties: { "attr.id": "this._htmlIdHostAttribute" } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-checkbox-list\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (item of items; track item.index) {\n    <div\n      class=\"ard-checkbox-list__item\"\n      [class.ard-item-highlighted]=\"item.highlighted()\"\n      [class.ard-item-disabled]=\"item.disabled()\"\n      (mouseover)=\"onItemHighlight(item)\"\n      (mouseleave)=\"onItemBlur()\"\n      (click)=\"toggleItem(item)\"\n    >\n      <div class=\"ard-focus-overlay\"></div>\n      <ard-checkbox\n        [selected]=\"item.selected()\"\n        [disabled]=\"item.disabled()\"\n        [color]=\"color()\"\n        [htmlId]=\"htmlId() + item.index\"\n        [tabIndex]=\"tabIndex()\"\n        (focus)=\"onFocus($event)\"\n        (focus)=\"onItemFocus(item)\"\n        (blur)=\"onBlur($event)\"\n        (blur)=\"onItemBlur()\"\n        (select)=\"selectItem(item)\"\n        (unselect)=\"unselectItem(item)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n      <label [for]=\"htmlId() + item.index\">\n        {{ item.label() }}\n      </label>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["color", "unselectedColor", "state"], outputs: ["stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxListComponent, decorators: [{
             type: Component,
@@ -8685,6 +8936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 const _formFieldDefaults = {
     defaultHintAlign: SimpleOneAxisAlignment.Left,
+    reserveHintLine: false,
 };
 const ARD_FORM_FIELD_DEFAULTS = new InjectionToken('ard-form-field-defaults', {
     factory: () => ({
@@ -8743,17 +8995,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class ArdiumFormFieldComponent {
     constructor() {
         this._DEFAULTS = inject(ARD_FORM_FIELD_DEFAULTS);
-        this.alignLabelToLeftByDefault = this._DEFAULTS.defaultHintAlign === SimpleOneAxisAlignment.Left;
+        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);
-        // readonly leftHints = computed<ArdiumHintDirective[]>(() => this.hints().filter(v => v.left() && !v.right()));
-        // readonly rightHints = computed<ArdiumHintDirective[]>(() => this.hints().filter(v => !v.left() && v.right()));
         this.errors = contentChildren(ArdiumErrorDirective);
-        // readonly leftErrors = computed<ArdiumErrorDirective[]>(() => this.errors().filter(v => v.left() && !v.right()));
-        // readonly rightErrors = computed<ArdiumErrorDirective[]>(() => this.errors().filter(v => !v.left() && v.right()));
         this.hasAnyError = computed(() => this.errors()?.length > 0);
+        this.reserveHintLine = input(this._DEFAULTS.reserveHintLine, { transform: v => coerceBooleanProperty(v) });
     }
     ngOnInit() {
         if (!this.control()) {
@@ -8761,11 +9009,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", 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 class=\"ard-form-field\" [class.ard-form-field__with-error]=\"control()?.hasError()\">\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__hints-default-left]=\"alignLabelToLeftByDefault\"\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: [".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 class=\"ard-form-field\" [class.ard-form-field__with-error]=\"control()?.hasError()\">\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__hints-default-left]=\"alignLabelToLeftByDefault\"\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: [".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 {
@@ -8781,17 +9029,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+class ArdiumHorizontalFormFieldComponent {
+    constructor() {
+        this._DEFAULTS = inject(ARD_FORM_FIELD_DEFAULTS);
+        this.alignHintToLeftByDefault = this._DEFAULTS.defaultHintAlign === SimpleOneAxisAlignment.Left;
+        this.control = contentChild(_FormFieldComponentBase);
+        this.label = contentChild(ArdiumLabelComponent);
+        this.hints = contentChildren(ArdiumHintDirective);
+        this.errors = contentChildren(ArdiumErrorDirective);
+        this.hasAnyError = computed(() => this.errors()?.length > 0);
+        this.reserveHintLine = input(this._DEFAULTS.reserveHintLine, { transform: v => coerceBooleanProperty(v) });
+    }
+    ngOnInit() {
+        if (!this.control()) {
+            throw new Error(`ARD-FT5110: Form field component requires any control (input) to be present within the element. Found none.`);
+        }
+    }
+    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  [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  [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 {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldModule, declarations: [ArdiumFormFieldComponent, ArdiumLabelComponent, ArdiumHintComponent, ArdiumErrorComponent], imports: [CommonModule, ArdiumHintDirective, ArdiumErrorDirective], exports: [ArdiumFormFieldComponent, ArdiumLabelComponent, ArdiumHintComponent, ArdiumErrorComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldModule, declarations: [ArdiumFormFieldComponent,
+            ArdiumHorizontalFormFieldComponent,
+            ArdiumLabelComponent,
+            ArdiumHintComponent,
+            ArdiumErrorComponent], imports: [CommonModule, ArdiumHintDirective, ArdiumErrorDirective], exports: [ArdiumFormFieldComponent,
+            ArdiumHorizontalFormFieldComponent,
+            ArdiumLabelComponent,
+            ArdiumHintComponent,
+            ArdiumErrorComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumFormFieldComponent, ArdiumLabelComponent, ArdiumHintComponent, ArdiumErrorComponent],
+                    declarations: [
+                        ArdiumFormFieldComponent,
+                        ArdiumHorizontalFormFieldComponent,
+                        ArdiumLabelComponent,
+                        ArdiumHintComponent,
+                        ArdiumErrorComponent,
+                    ],
                     imports: [CommonModule, ArdiumHintDirective, ArdiumErrorDirective],
-                    exports: [ArdiumFormFieldComponent, ArdiumLabelComponent, ArdiumHintComponent, ArdiumErrorComponent],
+                    exports: [
+                        ArdiumFormFieldComponent,
+                        ArdiumHorizontalFormFieldComponent,
+                        ArdiumLabelComponent,
+                        ArdiumHintComponent,
+                        ArdiumErrorComponent,
+                    ],
                 }]
         }] });
 
@@ -10299,7 +10591,7 @@ class ArdiumTableComponent extends _FocusableComponentBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTableComponent, deps: [{ token: ARD_TABLE_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumTableComponent, selector: "ard-table", inputs: { rowDisabledFrom: { classPropertyName: "rowDisabledFrom", publicName: "rowDisabledFrom", isSignal: true, isRequired: false, transformFunction: null }, rowBoldFrom: { classPropertyName: "rowBoldFrom", publicName: "rowBoldFrom", isSignal: true, isRequired: false, transformFunction: null }, invertRowDisabled: { classPropertyName: "invertRowDisabled", publicName: "invertRowDisabled", isSignal: true, isRequired: false, transformFunction: null }, invertRowBold: { classPropertyName: "invertRowBold", publicName: "invertRowBold", isSignal: true, isRequired: false, transformFunction: null }, selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, loadingProgress: { classPropertyName: "loadingProgress", publicName: "loadingProgress", isSignal: true, isRequired: false, transformFunction: null }, loadingProgressBuffer: { classPropertyName: "loadingProgressBuffer", publicName: "loadingProgressBuffer", isSignal: true, isRequired: false, transformFunction: null }, loadingBarMode: { classPropertyName: "loadingBarMode", publicName: "loadingBarMode", isSignal: true, isRequired: false, transformFunction: null }, loadingBarColor: { classPropertyName: "loadingBarColor", publicName: "loadingBarColor", isSignal: true, 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, paginationStrategy: { classPropertyName: "paginationStrategy", publicName: "paginationStrategy", isSignal: true, isRequired: false, transformFunction: null }, paginationOptions: { classPropertyName: "paginationOptions", publicName: "paginationOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, paginationColor: { classPropertyName: "paginationColor", publicName: "paginationColor", isSignal: true, isRequired: false, transformFunction: null }, paginationAlign: { classPropertyName: "paginationAlign", publicName: "paginationAlign", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null }, pageFillRemaining: { classPropertyName: "pageFillRemaining", publicName: "pageFillRemaining", isSignal: true, isRequired: false, transformFunction: null }, paginationDisabled: { classPropertyName: "paginationDisabled", publicName: "paginationDisabled", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, treatDataSourceAsString: { classPropertyName: "treatDataSourceAsString", publicName: "treatDataSourceAsString", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", selectedRowsChangeEvent: "selectedRowsChange", failedSelectRowEvent: "failedSelectRow", selectRowEvent: "selectRow", unselectRowEvent: "unselectRow", clickRowEvent: "clickRow" }, queries: [{ propertyName: "checkboxTemplate", first: true, predicate: ArdiumTableCheckboxTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerCheckboxTemplate", first: true, predicate: ArdiumTableHeaderCheckboxTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "captionTemplate", first: true, predicate: ArdiumTableCaptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "templateChildren", predicate: ArdiumTableTemplateDirective, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\n  class=\"ard-table\"\n  [ngClass]=\"ngClasses()\"\n>\n  @if (caption()) {\n    <caption class=\"ard-table__caption\">\n      <div class=\"ard-table__caption-container\">\n        <ng-template\n          #defaultCaptionTemplate\n          let-captionText\n        >\n          {{ captionText }}\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"captionTemplate() ?? defaultCaptionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: caption() }\"\n        />\n      </div>\n    </caption>\n  }\n  <thead class=\"ard-table__header\">\n    @for (row of headerCells(); track $index) {\n      <tr class=\"ard-table__header-row\">\n        @for (cell of row; track $index) {\n          <th\n            class=\"ard-table__header-cell\"\n            [ngClass]=\"cell.cell().cellClass\"\n            [class.ard-table__checkbox-cell]=\"isHeaderCellCheckbox(cell)\"\n            [attr.colspan]=\"cell.colspan()\"\n            [attr.rowspan]=\"cell.rowspan()\"\n            [scope]=\"cell.colspan() > 1 ? 'colgroup' : 'col'\"\n          >\n            <div\n              class=\"ard-table__cell-container\"\n              [class.ard-table__sortable]=\"isHeaderCellSortable(cell)\"\n              [style.width]=\"cell.width\"\n              [style.minWidth]=\"cell.minWidth\"\n            >\n              @if (isHeaderCellCheckbox(cell)) {\n                <ng-template\n                  #defaultHeaderCheckboxTemplate\n                  let-state\n                  let-onChange=\"onChange\"\n                >\n                  <ard-checkbox\n                    [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\n                    [state]=\"state\"\n                    [color]=\"getHeaderCheckboxColor()\"\n                    unselectedColor=\"currentColor\"\n                    (change)=\"onChange()\"\n                  />\n                </ng-template>\n\n                <ng-template\n                  [ngTemplateOutlet]=\"headerCheckboxTemplate() ?? defaultHeaderCheckboxTemplate\"\n                  [ngTemplateOutletContext]=\"getHeaderCheckboxContext()\"\n                />\n              } @else {\n                <ng-template\n                  #defaultHeaderCellTemplate\n                  let-content\n                  let-sortable=\"sortable\"\n                  let-sortType=\"sortType\"\n                  let-onTriggerSort=\"onTriggerSort\"\n                  let-onTriggerResetSort=\"onTriggerResetSort\"\n                >\n                  <div\n                    class=\"ard-table__header-template-container\"\n                    [class.ard-sortable]=\"sortable\"\n                    [class.ard-nonsortable]=\"!sortable\"\n                  >\n                    @if (sortable) {\n                      <button\n                        type=\"button\"\n                        class=\"ard-table__header-content-container\"\n                        (click)=\"onTriggerSort($event)\"\n                        [tabindex]=\"tabIndex()\"\n                        (keydown.Esc)=\"onTriggerResetSort($event)\"\n                      >\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\n                        @if (sortType !== null) {\n                          <div class=\"ard-table__header-sort-icon\">\n                            @if (sortType === 'ascending') {\n                              <ard-icon>south</ard-icon>\n                            } @else if (sortType === 'descending') {\n                              <ard-icon>north</ard-icon>\n                            }\n                          </div>\n                        }\n                      </button>\n                    } @else {\n                      <div class=\"ard-table__header-content-container\">\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\n                      </div>\n                    }\n                  </div>\n                </ng-template>\n\n                <ng-template\n                  [ngTemplateOutlet]=\"getHeaderTemplate(cell.cell().header) ?? defaultHeaderCellTemplate\"\n                  [ngTemplateOutletContext]=\"getHeaderContext(cell.cell(), $index)\"\n                />\n              }\n            </div>\n          </th>\n        }\n      </tr>\n    }\n    <tr class=\"ard-table__progress-bar-row\">\n      <th\n        class=\"ard-table__progress-bar-cell\"\n        colspan=\"9999\"\n      >\n        @if (isLoading()) {\n          <ard-progress-bar\n            [value]=\"loadingProgress()\"\n            [bufferValue]=\"loadingProgressBuffer()\"\n            [mode]=\"loadingBarMode()\"\n            [color]=\"loadingBarColor()\"\n            variant=\"sharp\"\n            hideValue\n          />\n        }\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"ard-table__body\">\n    @for (row of dataRows(); track $index) {\n      @if (row.isEmpty()) {\n        <tr class=\"ard-table__empty-row\">\n          <td\n            class=\"ard-table__empty-cell\"\n            colspan=\"9999\"\n          ></td>\n        </tr>\n      } @else {\n        <tr\n          class=\"ard-table__body-row\"\n          [class.ard-table__selected-row]=\"row.selected()\"\n          [class.ard-table__highlighted-row]=\"row.highlighted()\"\n          [class.ard-table__disabled-row]=\"row.disabled()\"\n          [class.ard-table__bold-row]=\"row.bold()\"\n          (click)=\"onRowClick(row, $event)\"\n          (mouseover)=\"onRowMouseOver($event)\"\n          (mouseenter)=\"onRowMouseEnter(row.index(), $event)\"\n          (mouseleave)=\"onRowMouseLeave(row.index(), $event)\"\n        >\n          @for (cell of row.data(); track $index) {\n            <ng-template #cellTmp>\n              <div\n                class=\"ard-table__cell-container\"\n                [style]=\"getCellStyle(row.dataColumns()[$index])\"\n              >\n                @if (isCellCheckbox(cell)) {\n                  <ng-template\n                    #defaultCheckboxTemplate\n                    let-isChecked\n                    let-onChange=\"onChange\"\n                    let-disabled=\"disabled\"\n                  >\n                    <ard-checkbox\n                      [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\n                      [selected]=\"isChecked\"\n                      [color]=\"color()\"\n                      [disabled]=\"disabled\"\n                      (change)=\"onChange()\"\n                      (click)=\"$event.stopPropagation()\"\n                    />\n                  </ng-template>\n\n                  <ng-template\n                    [ngTemplateOutlet]=\"checkboxTemplate() ?? defaultCheckboxTemplate\"\n                    [ngTemplateOutletContext]=\"getCheckboxContext(row.index())\"\n                  />\n                } @else {\n                  <ng-template\n                    #defaultCellTemplate\n                    let-content\n                  >\n                    {{ content }}\n                  </ng-template>\n\n                  <ng-template\n                    [ngTemplateOutlet]=\"getCellTemplate(row.dataColumns()[$index].template) ?? defaultCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: cell }\"\n                  />\n                }\n              </div>\n            </ng-template>\n            @if (!row.dataColumns()[$index].isRowHeader) {\n              <td\n                class=\"ard-table__body-cell\"\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\n              >\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\n              </td>\n            } @else {\n              <th\n                class=\"ard-table__body-cell ard-table__row-header\"\n                scope=\"row\"\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\n              >\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\n              </th>\n            }\n          }\n        </tr>\n      }\n    }\n  </tbody>\n  @if (canDisplayPagination()) {\n    <tfoot class=\"ard-table__foot\">\n      <tr class=\"ard-table__foot-row\">\n        <td\n          class=\"ard-table__pagination-cell\"\n          colspan=\"9999\"\n        >\n          <ard-table-pagination\n            [options]=\"paginationOptions()\"\n            [totalItems]=\"totalItems()!\"\n            [disabled]=\"paginationDisabled()\"\n            [(itemsPerPage)]=\"itemsPerPage\"\n            [(page)]=\"page\"\n            [align]=\"paginationAlign()\"\n            [isLoading]=\"isLoading()\"\n            [itemsPerPageText]=\"itemsPerPageText()\"\n            [currentItemsFormatFn]=\"currentItemsFormatFn()\"\n          />\n        </td>\n      </tr>\n    </tfoot>\n  }\n</table>\n", styles: [".ard-table__cell-container,.ard-table__header-template-container{width:100%;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: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["htmlId", "color", "unselectedColor", "state"], outputs: ["stateChange"] }, { kind: "component", type: ArdiumTablePaginationComponent, selector: "ard-table-pagination", inputs: ["totalItems", "options", "itemsPerPage", "page", "color", "align", "compact", "useFirstLastButtons", "isLoading", "itemsPerPageText", "currentItemsFormatFn"], outputs: ["itemsPerPageChange", "pageChange"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumProgressBarComponent, selector: "ard-progress-bar", inputs: ["value", "bufferValue", "color", "variant", "size", "mode", "hideValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumTableComponent, selector: "ard-table", inputs: { rowDisabledFrom: { classPropertyName: "rowDisabledFrom", publicName: "rowDisabledFrom", isSignal: true, isRequired: false, transformFunction: null }, rowBoldFrom: { classPropertyName: "rowBoldFrom", publicName: "rowBoldFrom", isSignal: true, isRequired: false, transformFunction: null }, invertRowDisabled: { classPropertyName: "invertRowDisabled", publicName: "invertRowDisabled", isSignal: true, isRequired: false, transformFunction: null }, invertRowBold: { classPropertyName: "invertRowBold", publicName: "invertRowBold", isSignal: true, isRequired: false, transformFunction: null }, selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, loadingProgress: { classPropertyName: "loadingProgress", publicName: "loadingProgress", isSignal: true, isRequired: false, transformFunction: null }, loadingProgressBuffer: { classPropertyName: "loadingProgressBuffer", publicName: "loadingProgressBuffer", isSignal: true, isRequired: false, transformFunction: null }, loadingBarMode: { classPropertyName: "loadingBarMode", publicName: "loadingBarMode", isSignal: true, isRequired: false, transformFunction: null }, loadingBarColor: { classPropertyName: "loadingBarColor", publicName: "loadingBarColor", isSignal: true, 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, paginationStrategy: { classPropertyName: "paginationStrategy", publicName: "paginationStrategy", isSignal: true, isRequired: false, transformFunction: null }, paginationOptions: { classPropertyName: "paginationOptions", publicName: "paginationOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, paginationColor: { classPropertyName: "paginationColor", publicName: "paginationColor", isSignal: true, isRequired: false, transformFunction: null }, paginationAlign: { classPropertyName: "paginationAlign", publicName: "paginationAlign", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null }, pageFillRemaining: { classPropertyName: "pageFillRemaining", publicName: "pageFillRemaining", isSignal: true, isRequired: false, transformFunction: null }, paginationDisabled: { classPropertyName: "paginationDisabled", publicName: "paginationDisabled", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, treatDataSourceAsString: { classPropertyName: "treatDataSourceAsString", publicName: "treatDataSourceAsString", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", selectedRowsChangeEvent: "selectedRowsChange", failedSelectRowEvent: "failedSelectRow", selectRowEvent: "selectRow", unselectRowEvent: "unselectRow", clickRowEvent: "clickRow" }, queries: [{ propertyName: "checkboxTemplate", first: true, predicate: ArdiumTableCheckboxTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerCheckboxTemplate", first: true, predicate: ArdiumTableHeaderCheckboxTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "captionTemplate", first: true, predicate: ArdiumTableCaptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "templateChildren", predicate: ArdiumTableTemplateDirective, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\n  class=\"ard-table\"\n  [ngClass]=\"ngClasses()\"\n>\n  @if (caption()) {\n    <caption class=\"ard-table__caption\">\n      <div class=\"ard-table__caption-container\">\n        <ng-template\n          #defaultCaptionTemplate\n          let-captionText\n        >\n          {{ captionText }}\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"captionTemplate() ?? defaultCaptionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: caption() }\"\n        />\n      </div>\n    </caption>\n  }\n  <thead class=\"ard-table__header\">\n    @for (row of headerCells(); track $index) {\n      <tr class=\"ard-table__header-row\">\n        @for (cell of row; track $index) {\n          <th\n            class=\"ard-table__header-cell\"\n            [ngClass]=\"cell.cell().cellClass\"\n            [class.ard-table__checkbox-cell]=\"isHeaderCellCheckbox(cell)\"\n            [attr.colspan]=\"cell.colspan()\"\n            [attr.rowspan]=\"cell.rowspan()\"\n            [scope]=\"cell.colspan() > 1 ? 'colgroup' : 'col'\"\n          >\n            <div\n              class=\"ard-table__cell-container\"\n              [class.ard-table__sortable]=\"isHeaderCellSortable(cell)\"\n              [style.width]=\"cell.width\"\n              [style.minWidth]=\"cell.minWidth\"\n            >\n              @if (isHeaderCellCheckbox(cell)) {\n                <ng-template\n                  #defaultHeaderCheckboxTemplate\n                  let-state\n                  let-onChange=\"onChange\"\n                >\n                  <ard-checkbox\n                    [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\n                    [state]=\"state\"\n                    [color]=\"getHeaderCheckboxColor()\"\n                    unselectedColor=\"currentColor\"\n                    (change)=\"onChange()\"\n                  />\n                </ng-template>\n\n                <ng-template\n                  [ngTemplateOutlet]=\"headerCheckboxTemplate() ?? defaultHeaderCheckboxTemplate\"\n                  [ngTemplateOutletContext]=\"getHeaderCheckboxContext()\"\n                />\n              } @else {\n                <ng-template\n                  #defaultHeaderCellTemplate\n                  let-content\n                  let-sortable=\"sortable\"\n                  let-sortType=\"sortType\"\n                  let-onTriggerSort=\"onTriggerSort\"\n                  let-onTriggerResetSort=\"onTriggerResetSort\"\n                >\n                  <div\n                    class=\"ard-table__header-template-container\"\n                    [class.ard-sortable]=\"sortable\"\n                    [class.ard-nonsortable]=\"!sortable\"\n                  >\n                    @if (sortable) {\n                      <button\n                        type=\"button\"\n                        class=\"ard-table__header-content-container\"\n                        (click)=\"onTriggerSort($event)\"\n                        [tabindex]=\"tabIndex()\"\n                        (keydown.Esc)=\"onTriggerResetSort($event)\"\n                      >\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\n                        @if (sortType !== null) {\n                          <div class=\"ard-table__header-sort-icon\">\n                            @if (sortType === 'ascending') {\n                              <ard-icon>south</ard-icon>\n                            } @else if (sortType === 'descending') {\n                              <ard-icon>north</ard-icon>\n                            }\n                          </div>\n                        }\n                      </button>\n                    } @else {\n                      <div class=\"ard-table__header-content-container\">\n                        <div class=\"ard-table__header-content\">{{ content }}</div>\n                      </div>\n                    }\n                  </div>\n                </ng-template>\n\n                <ng-template\n                  [ngTemplateOutlet]=\"getHeaderTemplate(cell.cell().header) ?? defaultHeaderCellTemplate\"\n                  [ngTemplateOutletContext]=\"getHeaderContext(cell.cell(), $index)\"\n                />\n              }\n            </div>\n          </th>\n        }\n      </tr>\n    }\n    <tr class=\"ard-table__progress-bar-row\">\n      <th\n        class=\"ard-table__progress-bar-cell\"\n        colspan=\"9999\"\n      >\n        @if (isLoading()) {\n          <ard-progress-bar\n            [value]=\"loadingProgress()\"\n            [bufferValue]=\"loadingProgressBuffer()\"\n            [mode]=\"loadingBarMode()\"\n            [color]=\"loadingBarColor()\"\n            variant=\"sharp\"\n            hideValue\n          />\n        }\n      </th>\n    </tr>\n  </thead>\n  <tbody class=\"ard-table__body\">\n    @for (row of dataRows(); track $index) {\n      @if (row.isEmpty()) {\n        <tr class=\"ard-table__empty-row\">\n          <td\n            class=\"ard-table__empty-cell\"\n            colspan=\"9999\"\n          ></td>\n        </tr>\n      } @else {\n        <tr\n          class=\"ard-table__body-row\"\n          [class.ard-table__selected-row]=\"row.selected()\"\n          [class.ard-table__highlighted-row]=\"row.highlighted()\"\n          [class.ard-table__disabled-row]=\"row.disabled()\"\n          [class.ard-table__bold-row]=\"row.bold()\"\n          (click)=\"onRowClick(row, $event)\"\n          (mouseover)=\"onRowMouseOver($event)\"\n          (mouseenter)=\"onRowMouseEnter(row.index(), $event)\"\n          (mouseleave)=\"onRowMouseLeave(row.index(), $event)\"\n        >\n          @for (cell of row.data(); track $index) {\n            <ng-template #cellTmp>\n              <div\n                class=\"ard-table__cell-container\"\n                [style]=\"getCellStyle(row.dataColumns()[$index])\"\n              >\n                @if (isCellCheckbox(cell)) {\n                  <ng-template\n                    #defaultCheckboxTemplate\n                    let-isChecked\n                    let-onChange=\"onChange\"\n                    let-disabled=\"disabled\"\n                  >\n                    <ard-checkbox\n                      [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\n                      [selected]=\"isChecked\"\n                      [color]=\"color()\"\n                      [disabled]=\"disabled\"\n                      (change)=\"onChange()\"\n                      (click)=\"$event.stopPropagation()\"\n                    />\n                  </ng-template>\n\n                  <ng-template\n                    [ngTemplateOutlet]=\"checkboxTemplate() ?? defaultCheckboxTemplate\"\n                    [ngTemplateOutletContext]=\"getCheckboxContext(row.index())\"\n                  />\n                } @else {\n                  <ng-template\n                    #defaultCellTemplate\n                    let-content\n                  >\n                    {{ content }}\n                  </ng-template>\n\n                  <ng-template\n                    [ngTemplateOutlet]=\"getCellTemplate(row.dataColumns()[$index].template) ?? defaultCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: cell }\"\n                  />\n                }\n              </div>\n            </ng-template>\n            @if (!row.dataColumns()[$index].isRowHeader) {\n              <td\n                class=\"ard-table__body-cell\"\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\n              >\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\n              </td>\n            } @else {\n              <th\n                class=\"ard-table__body-cell ard-table__row-header\"\n                scope=\"row\"\n                [ngClass]=\"row.dataColumns()[$index].cellClass\"\n                [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\n              >\n                <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\n              </th>\n            }\n          }\n        </tr>\n      }\n    }\n  </tbody>\n  @if (canDisplayPagination()) {\n    <tfoot class=\"ard-table__foot\">\n      <tr class=\"ard-table__foot-row\">\n        <td\n          class=\"ard-table__pagination-cell\"\n          colspan=\"9999\"\n        >\n          <ard-table-pagination\n            [options]=\"paginationOptions()\"\n            [totalItems]=\"totalItems()!\"\n            [disabled]=\"paginationDisabled()\"\n            [(itemsPerPage)]=\"itemsPerPage\"\n            [(page)]=\"page\"\n            [align]=\"paginationAlign()\"\n            [isLoading]=\"isLoading()\"\n            [itemsPerPageText]=\"itemsPerPageText()\"\n            [currentItemsFormatFn]=\"currentItemsFormatFn()\"\n          />\n        </td>\n      </tr>\n    </tfoot>\n  }\n</table>\n", styles: [".ard-table__cell-container,.ard-table__header-template-container{width:100%;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: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["color", "unselectedColor", "state"], outputs: ["stateChange"] }, { kind: "component", type: ArdiumTablePaginationComponent, selector: "ard-table-pagination", inputs: ["totalItems", "options", "itemsPerPage", "page", "color", "align", "compact", "useFirstLastButtons", "isLoading", "itemsPerPageText", "currentItemsFormatFn"], outputs: ["itemsPerPageChange", "pageChange"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumProgressBarComponent, selector: "ard-progress-bar", inputs: ["value", "bufferValue", "color", "variant", "size", "mode", "hideValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTableComponent, decorators: [{
             type: Component,
@@ -11603,5 +11895,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARD_BADGE_DEFAULTS, ARD_BUTTON_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_COLOR_DISPLAY_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STAR_DISPLAY_DEFAULTS, ARD_STAR_INPUT_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ARD_TAB_DEFAULTS, ArdAddCustomTemplateDirective, ArdDialogButtonsTemplateDirective, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdInputSuggestionTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumColorDisplayComponent, ArdiumColorDisplayModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarDisplayComponent, ArdiumStarDisplayModule, ArdiumStarInputComponent, ArdiumStarInputModule, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ColorDisplayAppearance, ComponentColor, DecorationElementAppearance, DialogResult, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, provideBadgeDefaults, provideButtonDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideColorDisplayDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSimpleInputDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStarDisplayDefaults, provideStarInputDefaults, provideStateboxDefaults, provideTabDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
+export { ARD_BADGE_DEFAULTS, ARD_BUTTON_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_COLOR_DISPLAY_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STAR_DISPLAY_DEFAULTS, ARD_STAR_INPUT_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ARD_TAB_DEFAULTS, ArdAddCustomTemplateDirective, ArdDialogButtonsTemplateDirective, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdInputSuggestionTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumColorDisplayComponent, ArdiumColorDisplayModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarDisplayComponent, ArdiumStarDisplayModule, ArdiumStarInputComponent, ArdiumStarInputModule, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ColorDisplayAppearance, ComponentColor, DecorationElementAppearance, DialogResult, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, provideBadgeDefaults, provideButtonDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideColorDisplayDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSimpleInputDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStarDisplayDefaults, provideStarInputDefaults, provideStateboxDefaults, provideTabDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
 //# sourceMappingURL=ardium-ui-ui.mjs.map