@ardium-ui/ui 3.2.7 → 3.3.0-alpha.10

package/fesm2022/ardium-ui-ui.mjs

@@ -1,17 +1,18 @@
 import 'first-last';
 import * as i0 from '@angular/core';
-import { input, signal, Directive, Input, HostBinding, computed, output, ViewChildren, InjectionToken, effect, viewChildren, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, NgModule, inject, viewChild, contentChild, ViewContainerRef, TemplateRef, HostListener, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, ViewChild, ContentChild, contentChildren, Renderer2, Injector, Injectable } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+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 { isArray, isAnyString, isNull, isNumber, isFunction, isRegExp, isDefined, any, isPrimitive, isString, evaluate, isObject, isPromise } from 'simple-bool';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { map, Subject, merge, takeUntil, startWith, BehaviorSubject } from 'rxjs';
+import { TakeChance } from 'take-chance';
+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';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import { resolvePath } from 'resolve-object-path';
-import { Subject, merge, takeUntil, startWith, BehaviorSubject } from 'rxjs';
-import { TakeChance } from 'take-chance';
 import { roundToPrecision, roundToMultiple } from 'more-rounding';
 import * as Color from 'color';
 import { keyToString } from 'key-display-names';
@@ -80,7 +81,7 @@ class _FocusableComponentBase extends _DisablableComponentBase {
         this.tabIndex = computed(() => (this.disabled() ? -1 : this._tabIndex()));
         this._tabIndex = input(this._DEFAULTS.tabIndex, {
             alias: 'tabIndex',
-            transform: v => coerceNumberProperty(v),
+            transform: v => coerceNumberProperty(v, 0),
         });
         //! events
         /**
@@ -95,7 +96,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 +127,7 @@ class _FocusableComponentBase extends _DisablableComponentBase {
      * @param event The focus event to emit.
      */
     onFocus(event) {
-        this.isFocused = true;
+        this.isFocused.set(true);
         this.focusEvent.emit(event);
     }
     /**
@@ -134,7 +135,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 }); }
@@ -147,13 +148,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['focusableElement']
             }] } });
 
-const _ngModelComponentDefaults = _focusableComponentDefaults;
+const _ngModelComponentDefaults = {
+    ..._focusableComponentDefaults,
+    required: undefined,
+};
 /**
  * Common code for components which implement the ControlValueAccessor.
  *
  * **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.
@@ -175,18 +195,77 @@ 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
         }] });
 
+const _formFieldComponentDefaults = {
+    ..._ngModelComponentDefaults,
+    required: undefined,
+};
+/**
+ * Common code for components which implement the ControlValueAccessor.
+ *
+ * **Warning**: `writeValue` function should be implemented on the child component!
+ */
+class _FormFieldComponentBase extends _NgModelComponentBase {
+    constructor() {
+        super(...arguments);
+        this._required = input(undefined, {
+            transform: v => coerceBooleanProperty(v),
+            alias: 'required',
+        });
+        this.isSuccess = input(false, { transform: v => coerceBooleanProperty(v) });
+    }
+    get required() {
+        return this._required() ?? !!this._ngControl?.control?.hasValidator(Validators.required);
+    }
+    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 }, 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
+        }] });
+
 //! appearances
 const OutlinedAppearance = {
     /**
@@ -251,7 +330,7 @@ const DigitInputPrimitiveOption = {
 };
 
 const _digitInputDefaults = {
-    ..._ngModelComponentDefaults,
+    ..._formFieldComponentDefaults,
     appearance: FormElementAppearance.Outlined,
     variant: FormElementVariant.Rounded,
     shape: DigitInputShape.Square,
@@ -291,6 +370,8 @@ class DigitInputModel {
                 return {
                     type: DigitInputConfigDataType.Input,
                     index: inputIndex++,
+                    readonly: v.readonly,
+                    placeholder: v.placeholder ?? '',
                 };
             });
         });
@@ -318,13 +399,23 @@ class DigitInputModel {
         return !!this.value()?.[index];
     }
     writeValue(v) {
-        if (!isArray(v) && !isAnyString(v) && !isNull(v)) {
-            //warn when using non-string value
-            console.warn(new Error(`ARD-WA0020: Trying to set <ard-digit-input>'s value to "${v}" (of type ${typeof v}), expected string or array of strings.`));
-            //normalize the value
-            v = v?.toString?.() ?? String(v);
+        if (this._ardHost.outputAsString()) {
+            if (!isAnyString(v) && !isNull(v)) {
+                throw new Error(`ARD-FT0040b: Trying to set <ard-digit-input>'s value to "${v}" (of type ${typeof v}), but the input uses [outputAsString]="true", and thus expects string or null.`);
+            }
+            const vArray = v?.split('') ?? [];
+            if (vArray.length > this._configArrayNoStatics().length) {
+                console.warn(`ARD-WA0041: Value provided to <ard-digit-input> is too long. Got ${vArray.length} characters, but expected a maximum of ${this._configArrayNoStatics().length} characters.`);
+            }
+            return this._writeValue(vArray);
+        }
+        if (!isAnyString(v) && !isNull(v) && !isArray(v)) {
+            throw new Error(`ARD-FT0041: Trying to set <ard-digit-input>'s value to "${v}" (of type ${typeof v}), expected string or array of characters.`);
         }
         const vArray = coerceArrayProperty(v);
+        if (vArray.length > this._configArrayNoStatics().length) {
+            console.warn(`ARD-WA0041: Value provided to <ard-digit-input> is too long. Got ${vArray.length} characters, but expected a maximum of ${this._configArrayNoStatics().length} characters.`);
+        }
         const problemIndex = vArray.findIndex(el => !isAnyString(el) || el.length > 1);
         if (problemIndex !== -1) {
             throw new Error(`ARD-FT0042: Array passed to <ard-digit-input>'s value must only contain strings of length 1 or 0. Element "${vArray[problemIndex]}" at index ${problemIndex} does not match those requirements.`);
@@ -332,17 +423,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++;
         }
     }
@@ -396,7 +489,7 @@ class DigitInputModel {
     //! validate against the config
     validateInputAndSetValue(input, index) {
         if (index < 0 || index > this._configArrayNoStatics().length)
-            return false;
+            return null;
         let v = this.value();
         //prepare the value array if does not exist
         if (!v) {
@@ -418,7 +511,7 @@ class DigitInputModel {
         //get the corresponding HTML input element
         const inputEl = this._ardHost.inputs()[index];
         if (!inputEl) {
-            throw new Error("ARD-IS0048: <ard-digit-input>'s value changed, but its corresponding input element could not be found. This is error is fatal to the functioning of Ardium UI. Please report this issue to the creators.");
+            throw new Error("ARD-IS0048: <ard-digit-input>'s value changed, but its corresponding input element could not be found. If you are reading this, you probably experienced a problem with Ardium UI. Please report this issue to the creators.");
         }
         //update the input element and value array
         const newVal = inputChar ?? before;
@@ -431,7 +524,7 @@ class DigitInputModel {
             return newArr;
         });
         //return changes marker and validated value
-        return [newVal !== before, inputChar];
+        return { wasChanged: newVal !== before, resultChar: inputChar };
     }
     validateValueAndUpdate() {
         const v = this.value();
@@ -478,7 +571,7 @@ class DigitInputModel {
     }
 }
 
-class ArdiumDigitInputComponent extends _NgModelComponentBase {
+class ArdiumDigitInputComponent extends _FormFieldComponentBase {
     constructor(defaults) {
         super(defaults);
         //! inputs ref
@@ -508,8 +601,10 @@ class ArdiumDigitInputComponent extends _NgModelComponentBase {
             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) });
         this.valueChange = output();
         this.stringValue = this.model.stringValue;
         this.emittableValue = computed(() => {
@@ -522,16 +617,29 @@ class ArdiumDigitInputComponent extends _NgModelComponentBase {
         this.focusIndexEvent = output({ alias: 'focusIndex' });
         this.blurIndexEvent = output({ alias: 'blurIndex' });
     }
+    ngOnInit() {
+        super.ngOnInit();
+        this._oldConfigArrayDataLength = this.configArrayData().length;
+    }
     isInputEmpty(index) {
         return !this.model.isDefinedAtIndex(index);
     }
-    //! control value accessor's write value implementation
     writeValue(v) {
+        if (!this._wasViewInit) {
+            this._valueBeforeViewInit = v;
+            return;
+        }
         this._writeValue(v);
     }
     _writeValue(v) {
         return this.model.writeValue(v);
     }
+    ngAfterViewInit() {
+        this._wasViewInit = true;
+        if (this._valueBeforeViewInit) {
+            this._writeValue(this._valueBeforeViewInit);
+        }
+    }
     set value(v) {
         this.writeValue(v);
     }
@@ -556,8 +664,8 @@ class ArdiumDigitInputComponent extends _NgModelComponentBase {
         this.focusByIndex(index + 1);
     }
     _updateSingleInputValue(value, index) {
-        const valueChanged = this.model.validateInputAndSetValue(value, index);
-        if (!valueChanged || !valueChanged[0])
+        const changeResult = this.model.validateInputAndSetValue(value, index);
+        if (!changeResult?.wasChanged)
             return;
         this._emitChange();
         if (this.model.isValueFull()) {
@@ -587,7 +695,8 @@ class ArdiumDigitInputComponent extends _NgModelComponentBase {
     }
     _emitChange() {
         const v = this.emittableValue();
-        this._onChangeRegistered?.(v);
+        if (!this.outputControlValueAccessorOnFinish() || this.model.isValueFull())
+            this._onChangeRegistered?.(v);
         this.valueChange.emit(v);
         if (this.model.isValueFull()) {
             this.finishedValue.emit(v);
@@ -616,13 +725,17 @@ class ArdiumDigitInputComponent extends _NgModelComponentBase {
         }
     }
     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 }, 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: { 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumDigitInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-digit-input\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (data of configArrayData(); track $index) {\n    <div class=\"ard-digit-input__item\">\n      @if (data.type === 'input') {\n        <input\n          #input\n          #focusableElement\n          class=\"ard-digit-input__input\"\n          type=\"text\"\n          autocomplete=\"off\"\n          [readonly]=\"data.readonly\"\n          [class.ard-digit-input__input-readonly]=\"data.readonly\"\n          [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\n          (paste)=\"onPaste($event, data.index!)\"\n          (input)=\"onInput($event, data.index!)\"\n          (focus)=\"onFocusMaster($event, data.index!)\"\n          (blur)=\"onBlurMaster($event, data.index!)\"\n          (keydown)=\"onKeydown($event, data.index!)\"\n        />\n      } @else {\n        <div class=\"ard-digit-input__static\">\n          {{ data.char }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            {
+                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  [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n  <div\r\n    class=\"ard-digit-input__item\"\r\n    [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n  >\r\n    @if (data.type === 'input') {\r\n    <input\r\n      #input\r\n      #focusableElement\r\n      class=\"ard-digit-input__input\"\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [readonly]=\"data.readonly\"\r\n      [placeholder]=\"data.placeholder\"\r\n      [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    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumDigitInputComponent, decorators: [{
             type: Component,
@@ -632,7 +745,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumDigitInputComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ard-digit-input\"\n  [ngClass]=\"ngClasses()\"\n>\n  @for (data of configArrayData(); track $index) {\n    <div class=\"ard-digit-input__item\">\n      @if (data.type === 'input') {\n        <input\n          #input\n          #focusableElement\n          class=\"ard-digit-input__input\"\n          type=\"text\"\n          autocomplete=\"off\"\n          [readonly]=\"data.readonly\"\n          [class.ard-digit-input__input-readonly]=\"data.readonly\"\n          [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\n          (paste)=\"onPaste($event, data.index!)\"\n          (input)=\"onInput($event, data.index!)\"\n          (focus)=\"onFocusMaster($event, data.index!)\"\n          (blur)=\"onBlurMaster($event, data.index!)\"\n          (keydown)=\"onKeydown($event, data.index!)\"\n        />\n      } @else {\n        <div class=\"ard-digit-input__static\">\n          {{ data.char }}\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
+                        {
+                            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  [class.ard-is-success]=\"isSuccess()\"\r\n>\r\n  @for (data of configArrayData(); track $index) {\r\n  <div\r\n    class=\"ard-digit-input__item\"\r\n    [class.ard-digit-input__item-with-input]=\"data.type === 'input'\"\r\n  >\r\n    @if (data.type === 'input') {\r\n    <input\r\n      #input\r\n      #focusableElement\r\n      class=\"ard-digit-input__input\"\r\n      type=\"text\"\r\n      autocomplete=\"off\"\r\n      [readonly]=\"data.readonly\"\r\n      [placeholder]=\"data.placeholder\"\r\n      [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    }\r\n  </div>\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DIGIT_INPUT_DEFAULTS]
@@ -867,8 +984,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
     constructor(defaults) {
         super(defaults);
-        //! focused state
-        this.isFocused = false;
+        this.hasError = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.isSuccess = input(false, { transform: v => coerceBooleanProperty(v) });
         //! appearance
         /**
          * The appearance of the component, aka the styling.
@@ -886,7 +1003,9 @@ class ArdiumFormFieldFrameComponent extends _FocusableComponentBase {
             `ard-appearance-${this.appearance()}`,
             `ard-variant-${this.variant()}`,
             this.compact() ? 'ard-compact' : '',
-            this.isFocused ? 'ard-focused' : 'ard-unfocused',
+            this.hasError() ? 'ard-has-error' : '',
+            this.isSuccess() ? 'ard-is-success' : '',
+            this.isFocused() ? 'ard-focused' : 'ard-unfocused',
         ].join(' '));
         //! prefix & suffix
         this.prefixTemplateInput = input(undefined, { alias: 'prefixTemplate' });
@@ -894,8 +1013,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: { 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,
@@ -903,8 +1026,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 {
@@ -1335,7 +1459,7 @@ function escapeAndCreateRegex(str, flags, negated = true) {
 }
 
 const _simpleInputComponentDefaults = {
-    ..._ngModelComponentDefaults,
+    ..._formFieldComponentDefaults,
     appearance: FormElementAppearance.Outlined,
     variant: FormElementVariant.Rounded,
     compact: false,
@@ -1346,7 +1470,7 @@ const _simpleInputComponentDefaults = {
     inputAttrs: {},
     maxLength: undefined,
 };
-class _SimpleInputComponentBase extends _NgModelComponentBase {
+class _SimpleInputComponentBase extends _FormFieldComponentBase {
     constructor() {
         super(...arguments);
         //! input view
@@ -1778,7 +1902,11 @@ class ArdiumInputComponent extends _SimpleInputComponentBase {
                 useExisting: forwardRef(() => ArdiumInputComponent),
                 multi: true,
             },
-        ], 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\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-input\"\n    #suggestionsHost\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value\"\n    (click)=\"focus()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayAutocomplete()) {\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\n      }\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\n      }\n      <input\n        #textInput\n        #focusableElement\n        type=\"text\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (copy)=\"onCopy($event)\"\n      />\n    </div>\n\n    @if (shouldShowClearButton()) {\n      <ard-clear-button\n        [title]=\"clearButtonTitle()\"\n        (click)=\"onClearButtonClick($event)\"\n      />\n    }\n  </div>\n</ard-form-field-frame>\n\n<ng-template #suggestionsTemplate>\n  <ard-dropdown-panel\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\n    role=\"listbox\"\n    [compact]=\"compact\"\n    aria-label=\"Suggestions\"\n    [appearance]=\"dropdownAppearanceOrDefault()\"\n    [variant]=\"dropdownVariantOrDefault()\"\n    [isOpen]=\"shouldDisplaySuggestions()\"\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\n    (mousemove)=\"onMouseMove()\"\n  >\n    @for (item of suggestionItems(); track item.index) {\n      <div\n        class=\"ard-option\"\n        role=\"option\"\n        [class.ard-option-selected]=\"item.selected()\"\n        [class.ard-option-highlighted]=\"item.highlighted()\"\n        [attr.aria-selected]=\"item.selected()\"\n        (click)=\"selectSuggestion(item, $event)\"\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\n      >\n        <span class=\"ard-option-label\">\n          <ng-template #defaultOptionTemplate>\n            {{ item.label() }}\n          </ng-template>\n\n          <ng-template\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\n            [ngTemplateOutletContext]=\"getOptionContext(item)\"\n          ></ng-template>\n        </span>\n      </div>\n    }\n    @if (areSuggestionsLoading()) {\n      <ng-template #defaultLoadingPlaceholderTemplate>\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\n      </ng-template>\n\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\n    }\n  </ard-dropdown-panel>\n</ng-template>\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: ["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 }); }
+            {
+                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  [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,
@@ -1788,7 +1916,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumInputComponent),
                             multi: true,
                         },
-                    ], template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-input\"\n    #suggestionsHost\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value\"\n    (click)=\"focus()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayAutocomplete()) {\n        <div class=\"ard-autocomplete\">{{ autocomplete() }}</div>\n      }\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\n      }\n      <input\n        #textInput\n        #focusableElement\n        type=\"text\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (copy)=\"onCopy($event)\"\n      />\n    </div>\n\n    @if (shouldShowClearButton()) {\n      <ard-clear-button\n        [title]=\"clearButtonTitle()\"\n        (click)=\"onClearButtonClick($event)\"\n      />\n    }\n  </div>\n</ard-form-field-frame>\n\n<ng-template #suggestionsTemplate>\n  <ard-dropdown-panel\n    class=\"ard-dropdown-panel ard-input-suggestions-panel\"\n    role=\"listbox\"\n    [compact]=\"compact\"\n    aria-label=\"Suggestions\"\n    [appearance]=\"dropdownAppearanceOrDefault()\"\n    [variant]=\"dropdownVariantOrDefault()\"\n    [isOpen]=\"shouldDisplaySuggestions()\"\n    (ardClickOutside)=\"handleSuggestionClickOutside($event)\"\n    (mousemove)=\"onMouseMove()\"\n  >\n    @for (item of suggestionItems(); track item.index) {\n      <div\n        class=\"ard-option\"\n        role=\"option\"\n        [class.ard-option-selected]=\"item.selected()\"\n        [class.ard-option-highlighted]=\"item.highlighted()\"\n        [attr.aria-selected]=\"item.selected()\"\n        (click)=\"selectSuggestion(item, $event)\"\n        (mouseenter)=\"onSuggestionMouseEnter(item, $event)\"\n        (mouseleave)=\"onSuggestionMouseLeave(item, $event)\"\n      >\n        <span class=\"ard-option-label\">\n          <ng-template #defaultOptionTemplate>\n            {{ item.label() }}\n          </ng-template>\n\n          <ng-template\n            [ngTemplateOutlet]=\"suggestionTemplate()?.template || defaultOptionTemplate\"\n            [ngTemplateOutletContext]=\"getOptionContext(item)\"\n          ></ng-template>\n        </span>\n      </div>\n    }\n    @if (areSuggestionsLoading()) {\n      <ng-template #defaultLoadingPlaceholderTemplate>\n        <div class=\"ard-option ard-option-disabled\">{{ suggestionsLoadingText() }}</div>\n      </ng-template>\n\n      <ng-template [ngTemplateOutlet]=\"suggestionLoadingTemplate()?.template || defaultLoadingPlaceholderTemplate\"></ng-template>\n    }\n  </ard-dropdown-panel>\n</ng-template>\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"] }]
+                        {
+                            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  [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]
@@ -1858,7 +1990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 const _passwordInputDefaults = {
-    ..._ngModelComponentDefaults,
+    ..._formFieldComponentDefaults,
     appearance: FormElementAppearance.Outlined,
     variant: FormElementVariant.Rounded,
     compact: false,
@@ -2003,7 +2135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'ard-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"ard-icon material-symbols-outlined\"\n  [attr.aria-hidden]=\"ariaLabel() !== undefined\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [style]=\"fontVariationSettings()\"\n>\n  {{ icon() ?? contentWrapperEl.innerText | icon }}\n</span>\n\n<div\n  #contentWrapperEl\n  class=\"ard-icon-content-wrapper\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\";ard-icon{font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 48;font-size:1.5em;width:1em;height:1em;display:inline-block;-webkit-user-select:none;user-select:none;background-repeat:no-repeat;fill:currentColor;overflow:hidden;flex-shrink:0}ard-icon .ard-icon{font-variation-settings:inherit;font-size:inherit}ard-icon .ard-icon-content-wrapper{display:none}\n"] }]
         }] });
 
-class ArdiumPasswordInputComponent extends _NgModelComponentBase {
+class ArdiumPasswordInputComponent extends _FormFieldComponentBase {
     constructor(defaults) {
         super(defaults);
         //! input view
@@ -2044,6 +2176,7 @@ class ArdiumPasswordInputComponent extends _NgModelComponentBase {
         this.value = model();
     }
     ngOnInit() {
+        super.ngOnInit();
         this._setInputAttributes();
     }
     toggleReveal(newState = !this.revealed()) {
@@ -2057,6 +2190,7 @@ class ArdiumPasswordInputComponent extends _NgModelComponentBase {
         }
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         if (this._hideTimeout) {
             clearTimeout(this._hideTimeout);
         }
@@ -2132,7 +2266,11 @@ class ArdiumPasswordInputComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumPasswordInputComponent),
                 multi: true,
             },
-        ], 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\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-password-input\"\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value()\"\n    (click)=\"focus()\"\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()?.template || defaultPlaceholderTemplate\" />\n      }\n\n      <input\n        #textInput\n        #focusableElement\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (change)=\"onChange($event)\"\n        (copy)=\"onCopy($event)\"\n        [class.ard-revealed]=\"revealable() && revealed()\"\n      />\n    </div>\n\n    @if (revealable()) {\n      <button\n        class=\"ard-reveal-button\"\n        type=\"button\"\n        (click)=\"!holdToReveal() && toggleReveal()\"\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\n      >\n        <ng-template\n          #defaultRevealTemplate\n          let-revealed\n        >\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\n        />\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\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: ["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 }); }
+            {
+                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  [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,
@@ -2142,7 +2280,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumPasswordInputComponent),
                             multi: true,
                         },
-                    ], template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-password-input\"\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value()\"\n    (click)=\"focus()\"\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()?.template || defaultPlaceholderTemplate\" />\n      }\n\n      <input\n        #textInput\n        #focusableElement\n        [type]=\"!revealable() || !revealed() ? 'password' : 'text'\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (change)=\"onChange($event)\"\n        (copy)=\"onCopy($event)\"\n        [class.ard-revealed]=\"revealable() && revealed()\"\n      />\n    </div>\n\n    @if (revealable()) {\n      <button\n        class=\"ard-reveal-button\"\n        type=\"button\"\n        (click)=\"!holdToReveal() && toggleReveal()\"\n        (mousedown)=\"holdToReveal() && revealed.set(true)\"\n        (mouseup)=\"holdToReveal() && revealed.set(false)\"\n      >\n        <ng-template\n          #defaultRevealTemplate\n          let-revealed\n        >\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\n        </ng-template>\n\n        <ng-template\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\n        />\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n" }]
+                        {
+                            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  [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]
@@ -2197,7 +2339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 const _simpleInputDefaults = {
-    ..._ngModelComponentDefaults,
+    ..._formFieldComponentDefaults,
     appearance: FormElementAppearance.Outlined,
     variant: FormElementVariant.Rounded,
     compact: false,
@@ -2267,7 +2409,11 @@ class ArdiumSimpleInputComponent extends _SimpleInputComponentBase {
                 useExisting: forwardRef(() => ArdiumSimpleInputComponent),
                 multi: true,
             },
-        ], 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\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-simple-input\"\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value\"\n    (click)=\"focus()\"\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()?.template || defaultPlaceholderTemplate\"></ng-template>\n      }\n\n      <input\n        #textInput\n        #focusableElement\n        type=\"text\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocusMaster($event)\"\n        (blur)=\"onBlurMaster($event)\"\n        (change)=\"onChange($event)\"\n        (copy)=\"onCopy($event)\"\n      />\n    </div>\n\n    @if (shouldShowClearButton()) {\n      <ard-clear-button\n        [title]=\"clearButtonTitle()\"\n        (click)=\"onClearButtonClick($event)\"\n      />\n    }\n  </div>\n</ard-form-field-frame>\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: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            {
+                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  [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,
@@ -2277,7 +2423,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumSimpleInputComponent),
                             multi: true,
                         },
-                    ], template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-simple-input\"\n    [ngClass]=\"ngClasses()\"\n    [class.ard-has-value]=\"value\"\n    (click)=\"focus()\"\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()?.template || defaultPlaceholderTemplate\"></ng-template>\n      }\n\n      <input\n        #textInput\n        #focusableElement\n        type=\"text\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value)\"\n        (focus)=\"onFocusMaster($event)\"\n        (blur)=\"onBlurMaster($event)\"\n        (change)=\"onChange($event)\"\n        (copy)=\"onCopy($event)\"\n      />\n    </div>\n\n    @if (shouldShowClearButton()) {\n      <ard-clear-button\n        [title]=\"clearButtonTitle()\"\n        (click)=\"onClearButtonClick($event)\"\n      />\n    }\n  </div>\n</ard-form-field-frame>\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"] }]
+                        {
+                            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  [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]
@@ -2600,6 +2750,9 @@ class ItemStorage {
         });
     }
     handleWriteValue(ngModel) {
+        if (!isArray(ngModel)) {
+            ngModel = [ngModel];
+        }
         //defer writing the value if no options are yet loaded
         if (!this._wasValueWriteDeferred() && this._items().length === 0) {
             this._valueToWriteAfterItemsLoad.set(ngModel);
@@ -2892,7 +3045,7 @@ const ArdPanelPosition = {
 };
 
 const _selectDefaults = {
-    ..._ngModelComponentDefaults,
+    ..._formFieldComponentDefaults,
     valueFrom: 'value',
     labelFrom: 'label',
     disabledFrom: 'disabled',
@@ -3225,7 +3378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     args: [ARD_DELETABLE_CHIP_DEFAULTS]
                 }] }] });
 
-class ArdiumSelectComponent extends _NgModelComponentBase {
+class ArdiumSelectComponent extends _FormFieldComponentBase {
     constructor(defaults) {
         super(defaults);
         this._componentId = '000';
@@ -3260,7 +3413,6 @@ class ArdiumSelectComponent extends _NgModelComponentBase {
         this.inputAttrs = input(this._DEFAULTS.inputAttrs);
         //! other inputs
         this.isLoading = input(this._DEFAULTS.isLoading, { transform: v => coerceBooleanProperty(v) });
-        this.htmlId = input(TakeChance.id());
         //! boolean settings
         this.itemsAlreadyGrouped = input(this._DEFAULTS.itemsAlreadyGrouped, {
             transform: v => coerceBooleanProperty(v),
@@ -3609,9 +3761,11 @@ class ArdiumSelectComponent extends _NgModelComponentBase {
     }
     //! hooks
     ngOnInit() {
+        super.ngOnInit();
         this._setSearchInputAttributes();
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this._destroy$.next();
         this._destroy$.complete();
     }
@@ -3981,13 +4135,17 @@ class ArdiumSelectComponent extends _NgModelComponentBase {
         this.itemStorage.highlightAllItems();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSelectComponent, deps: [{ token: ARD_SELECT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumSelectComponent, selector: "ard-select", 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 }, groupLabelFrom: { classPropertyName: "groupLabelFrom", publicName: "groupLabelFrom", isSignal: true, isRequired: false, transformFunction: null }, groupDisabledFrom: { classPropertyName: "groupDisabledFrom", publicName: "groupDisabledFrom", isSignal: true, isRequired: false, transformFunction: null }, childrenFrom: { classPropertyName: "childrenFrom", publicName: "childrenFrom", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearButtonTitle: { classPropertyName: "clearButtonTitle", publicName: "clearButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, noItemsFoundText: { classPropertyName: "noItemsFoundText", publicName: "noItemsFoundText", isSignal: true, isRequired: false, transformFunction: null }, loadingPlaceholderText: { classPropertyName: "loadingPlaceholderText", publicName: "loadingPlaceholderText", isSignal: true, isRequired: false, transformFunction: null }, searchInputId: { classPropertyName: "searchInputId", publicName: "searchInputId", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, itemsAlreadyGrouped: { classPropertyName: "itemsAlreadyGrouped", publicName: "itemsAlreadyGrouped", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, noGroupActions: { classPropertyName: "noGroupActions", publicName: "noGroupActions", isSignal: true, isRequired: false, transformFunction: null }, autoHighlightFirst: { classPropertyName: "autoHighlightFirst", publicName: "autoHighlightFirst", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, noBackspaceClear: { classPropertyName: "noBackspaceClear", publicName: "noBackspaceClear", isSignal: true, isRequired: false, transformFunction: null }, sortMultipleValues: { classPropertyName: "sortMultipleValues", publicName: "sortMultipleValues", isSignal: true, isRequired: false, transformFunction: null }, searchCaseSensitive: { classPropertyName: "searchCaseSensitive", publicName: "searchCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, keepSearchAfterSelect: { classPropertyName: "keepSearchAfterSelect", publicName: "keepSearchAfterSelect", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemDisplayLimit: { classPropertyName: "itemDisplayLimit", publicName: "itemDisplayLimit", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", 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 }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, dropdownAppearance: { classPropertyName: "dropdownAppearance", publicName: "dropdownAppearance", isSignal: true, isRequired: false, transformFunction: null }, dropdownVariant: { classPropertyName: "dropdownVariant", publicName: "dropdownVariant", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, multiselectable: { classPropertyName: "multiselectable", publicName: "multiselectable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, addCustom: { classPropertyName: "addCustom", publicName: "addCustom", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change", addEvent: "add", failedToAddEvent: "failedToAdd", removeEvent: "remove", clearEvent: "clear", openEvent: "open", closeEvent: "close", scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd", searchEvent: "search", isOpen: "isOpenChange" }, host: { listeners: { "window:resize": "onWindowResize()", "mouseup": "onMouseup()", "keydown": "onKeyPress($event)" }, properties: { "class.ard-group-items": "this._groupItemsHostAttribute" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumSelectComponent, selector: "ard-select", 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 }, groupLabelFrom: { classPropertyName: "groupLabelFrom", publicName: "groupLabelFrom", isSignal: true, isRequired: false, transformFunction: null }, groupDisabledFrom: { classPropertyName: "groupDisabledFrom", publicName: "groupDisabledFrom", isSignal: true, isRequired: false, transformFunction: null }, childrenFrom: { classPropertyName: "childrenFrom", publicName: "childrenFrom", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearButtonTitle: { classPropertyName: "clearButtonTitle", publicName: "clearButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, noItemsFoundText: { classPropertyName: "noItemsFoundText", publicName: "noItemsFoundText", isSignal: true, isRequired: false, transformFunction: null }, loadingPlaceholderText: { classPropertyName: "loadingPlaceholderText", publicName: "loadingPlaceholderText", isSignal: true, isRequired: false, transformFunction: null }, searchInputId: { classPropertyName: "searchInputId", publicName: "searchInputId", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, itemsAlreadyGrouped: { classPropertyName: "itemsAlreadyGrouped", publicName: "itemsAlreadyGrouped", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, noGroupActions: { classPropertyName: "noGroupActions", publicName: "noGroupActions", isSignal: true, isRequired: false, transformFunction: null }, autoHighlightFirst: { classPropertyName: "autoHighlightFirst", publicName: "autoHighlightFirst", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, noBackspaceClear: { classPropertyName: "noBackspaceClear", publicName: "noBackspaceClear", isSignal: true, isRequired: false, transformFunction: null }, sortMultipleValues: { classPropertyName: "sortMultipleValues", publicName: "sortMultipleValues", isSignal: true, isRequired: false, transformFunction: null }, searchCaseSensitive: { classPropertyName: "searchCaseSensitive", publicName: "searchCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, keepSearchAfterSelect: { classPropertyName: "keepSearchAfterSelect", publicName: "keepSearchAfterSelect", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemDisplayLimit: { classPropertyName: "itemDisplayLimit", publicName: "itemDisplayLimit", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", 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 }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, dropdownAppearance: { classPropertyName: "dropdownAppearance", publicName: "dropdownAppearance", isSignal: true, isRequired: false, transformFunction: null }, dropdownVariant: { classPropertyName: "dropdownVariant", publicName: "dropdownVariant", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, multiselectable: { classPropertyName: "multiselectable", publicName: "multiselectable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, addCustom: { classPropertyName: "addCustom", publicName: "addCustom", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change", addEvent: "add", failedToAddEvent: "failedToAdd", removeEvent: "remove", clearEvent: "clear", openEvent: "open", closeEvent: "close", scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd", searchEvent: "search", isOpen: "isOpenChange" }, host: { listeners: { "window:resize": "onWindowResize()", "mouseup": "onMouseup()", "keydown": "onKeyPress($event)" }, properties: { "class.ard-group-items": "this._groupItemsHostAttribute" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumSelectComponent),
                 multi: true,
             },
-        ], 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\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-select\"\n    #dropdownHost\n    (click)=\"handleAnywhereClick($event)\"\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\n    [ngClass]=\"ngClasses()\"\n  >\n    <div class=\"ard-select-value-container\">\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\n      }\n      @if (shouldDisplayValue()) {\n        @for (item of itemStorage.selectedItems(); track item.index) {\n          <div\n            class=\"ard-select-value\"\n            [class.ard-value-disabled]=\"item.disabled()\"\n            [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\n          >\n            <ng-template\n              *ngIf=\"isValueWithinDisplayLimit($index)\"\n              [ngTemplateOutlet]=\"\n                valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\n              \"\n              [ngTemplateOutletContext]=\"getValueContext(item)\"\n            />\n          </div>\n        }\n\n        <ng-template\n          #defaultValueTemplate\n          let-item\n        >\n          <div\n            [ardInnerHTML]=\"item.label()\"\n            [ardEscapeInnerHTML]=\"isItemsInputUsed\"\n          ></div>\n        </ng-template>\n        <ng-template\n          #defaultMultiValueTemplate\n          let-item\n          let-unselect=\"unselect\"\n        >\n          <ard-deletable-chip\n            (delete)=\"unselect(item)\"\n            [variant]=\"variant()\"\n            compact\n            appearance=\"outlined-strong\"\n          >\n            <div\n              [ardInnerHTML]=\"item.label()\"\n              [ardEscapeInnerHTML]=\"isItemsInputUsed\"\n            ></div>\n            <!-- TODO check if can remove div -->\n          </ard-deletable-chip>\n        </ng-template>\n      }\n      @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\n        <div class=\"ard-overflow-indicator\">\n          <ng-template\n            [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\n            [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\n          />\n\n          <ng-template\n            #defaultItemDisplayLimitTemplate\n            let-count=\"overflowCount\"\n          >\n            <div>{{ count }} more...</div>\n          </ng-template>\n        </div>\n      }\n\n      <div\n        class=\"ard-search-input\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\n      >\n        <input\n          #searchInput\n          #focusableElement\n          type=\"text\"\n          [attr.id]=\"searchInputId()\"\n          [attr.tabindex]=\"tabIndex()\"\n          [readonly]=\"isInputElementReadonly()\"\n          [disabled]=\"disabled()\"\n          [value]=\"searchTerm()\"\n          aria-autocomplete=\"list\"\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\n          (input)=\"filter(searchInput.value)\"\n          (change)=\"$event.stopPropagation()\"\n          (focus)=\"onFocus($event)\"\n          (focus)=\"onSearchInputFocus()\"\n          (blur)=\"onBlur($event)\"\n          (blur)=\"onSearchInputBlur()\"\n        />\n      </div>\n    </div>\n\n    <div class=\"ard-select-controls\">\n      @if (isLoading()) {\n        <ng-template #defaultLoadingSpinnerTemplate>\n          <div class=\"ard-simple-spinner\"></div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\n      }\n      @if (shouldShowClearButton()) {\n        <ard-clear-button\n          [title]=\"clearButtonTitle()\"\n          (click)=\"handleClearButtonClick($event)\"\n        />\n      }\n\n      <button\n        type=\"button\"\n        class=\"ard-dropdown-arrow-wrapper\"\n        (click)=\"handleDropdownArrowClick($event)\"\n      >\n        <span class=\"ard-dropdown-arrow\"></span>\n        <div class=\"ard-hitbox\"></div>\n      </button>\n    </div>\n  </div>\n</ard-form-field-frame>\n\n<ng-template #dropdownTemplate>\n  <ard-dropdown-panel\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\n    role=\"listbox\"\n    aria-label=\"Options list\"\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\n    [appearance]=\"dropdownAppearanceOrDefault()\"\n    [variant]=\"dropdownVariantOrDefault()\"\n    [isOpen]=\"true\"\n    [filterValue]=\"searchTerm()\"\n    [panelId]=\"htmlId()\"\n    [compact]=\"compact()\"\n    (ardClickOutside)=\"handleOutsideClick($event)\"\n    (mousemove)=\"onMouseMove()\"\n    (scroll)=\"scrollEvent.emit($event)\"\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\n  >\n    @if (!shouldShowNoItemsFound()) {\n      @for (group of itemStorage.groups(); track $index) {\n        <div\n          class=\"ard-optgroup\"\n          role=\"group\"\n          [class.ard-group-disabled]=\"group.disabled()\"\n          [class.ard-group-selected]=\"group.selected()\"\n          [class.ard-group-highlighted]=\"group.highlighted()\"\n          (mouseover)=\"onGroupMouseover(group)\"\n          (click)=\"onGroupClick(group)\"\n        >\n          @if (group.label() !== '' && group.label() !== undefined) {\n            <ng-template\n              #defaultOptgroupTemplate\n              let-group\n            >\n              <span\n                class=\"ard-optgroup-label\"\n                [ardInnerHTML]=\"group.label()\"\n                [ardEscapeInnerHTML]=\"isItemsInputUsed\"\n              ></span>\n            </ng-template>\n\n            <ng-template\n              [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\n              [ngTemplateOutletContext]=\"getGroupContext(group)\"\n            />\n          }\n\n          <div class=\"ard-optgroup-children\">\n            @for (option of group.children(); track option.index) {\n              <div\n                class=\"ard-option\"\n                role=\"option\"\n                [class.ard-option-disabled]=\"option.disabled()\"\n                [class.ard-option-selected]=\"option.selected()\"\n                [class.ard-option-highlighted]=\"option.highlighted()\"\n                [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\n                [attr.aria-selected]=\"option.selected()\"\n                [attr.id]=\"htmlId() + '-' + option.index\"\n                (click)=\"onItemClick(option, $event)\"\n                (mouseover)=\"onItemMouseOver($event)\"\n                (mouseenter)=\"onItemMouseEnter(option, $event)\"\n                (mouseleave)=\"onItemMouseLeave(option, $event)\"\n              >\n                <div class=\"ard-option-label\">\n                  <ng-template\n                    #defaultOptionTemplate\n                    let-option\n                  >\n                    <span\n                      [ardInnerHTML]=\"option.label()\"\n                      [ardEscapeInnerHTML]=\"isItemsInputUsed\"\n                    ></span>\n                  </ng-template>\n\n                  <ng-template\n                    [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n                    [ngTemplateOutletContext]=\"getOptionContext(option)\"\n                  />\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    }\n    @if (shouldShowNoItemsFound()) {\n      <ng-template #defaultNoItemsFoundTemplate>\n        <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\n        [ngTemplateOutletContext]=\"getSearchContext()\"\n      />\n    }\n    @if (shouldShowAddCustom()) {\n      <ng-template\n        #defaultAddCustomTemplate\n        let-searchTerm\n      >\n        <div\n          class=\"ard-option ard-option-highlighted ard-add-custom\"\n          (click)=\"addCustomOption(searchTerm)\"\n        >\n          <span class=\"ard-add-custom-label\">Add option</span>\n          <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\n        </div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\n        [ngTemplateOutletContext]=\"getCustomOptionContext()\"\n      />\n    }\n    @if (isLoading()) {\n      <ng-template #defaultLoadingPlaceholderTemplate>\n        <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\n        [ngTemplateOutletContext]=\"getSearchContext()\"\n      />\n    }\n  </ard-dropdown-panel>\n</ng-template>\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: ["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 }); }
+            {
+                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  [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,
@@ -3997,7 +4155,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumSelectComponent),
                             multi: true,
                         },
-                    ], template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-select\"\n    #dropdownHost\n    (click)=\"handleAnywhereClick($event)\"\n    [class.ard-has-value]=\"itemStorage.isAnyItemSelected()\"\n    [ngClass]=\"ngClasses()\"\n  >\n    <div class=\"ard-select-value-container\">\n      @if (shouldDisplayPlaceholder()) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\n      }\n      @if (shouldDisplayValue()) {\n        @for (item of itemStorage.selectedItems(); track item.index) {\n          <div\n            class=\"ard-select-value\"\n            [class.ard-value-disabled]=\"item.disabled()\"\n            [attr.hidden]=\"!isValueWithinDisplayLimit($index)\"\n          >\n            <ng-template\n              *ngIf=\"isValueWithinDisplayLimit($index)\"\n              [ngTemplateOutlet]=\"\n                valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\n              \"\n              [ngTemplateOutletContext]=\"getValueContext(item)\"\n            />\n          </div>\n        }\n\n        <ng-template\n          #defaultValueTemplate\n          let-item\n        >\n          <div\n            [ardInnerHTML]=\"item.label()\"\n            [ardEscapeInnerHTML]=\"isItemsInputUsed\"\n          ></div>\n        </ng-template>\n        <ng-template\n          #defaultMultiValueTemplate\n          let-item\n          let-unselect=\"unselect\"\n        >\n          <ard-deletable-chip\n            (delete)=\"unselect(item)\"\n            [variant]=\"variant()\"\n            compact\n            appearance=\"outlined-strong\"\n          >\n            <div\n              [ardInnerHTML]=\"item.label()\"\n              [ardEscapeInnerHTML]=\"isItemsInputUsed\"\n            ></div>\n            <!-- TODO check if can remove div -->\n          </ard-deletable-chip>\n        </ng-template>\n      }\n      @if (itemStorage.isAnyItemSelected() && shouldShowItemDisplayLimit()) {\n        <div class=\"ard-overflow-indicator\">\n          <ng-template\n            [ngTemplateOutlet]=\"itemDisplayLimitTemplate()?.template || defaultItemDisplayLimitTemplate\"\n            [ngTemplateOutletContext]=\"getItemDisplayLimitContext()\"\n          />\n\n          <ng-template\n            #defaultItemDisplayLimitTemplate\n            let-count=\"overflowCount\"\n          >\n            <div>{{ count }} more...</div>\n          </ng-template>\n        </div>\n      }\n\n      <div\n        class=\"ard-search-input\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\n      >\n        <input\n          #searchInput\n          #focusableElement\n          type=\"text\"\n          [attr.id]=\"searchInputId()\"\n          [attr.tabindex]=\"tabIndex()\"\n          [readonly]=\"isInputElementReadonly()\"\n          [disabled]=\"disabled()\"\n          [value]=\"searchTerm()\"\n          aria-autocomplete=\"list\"\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\n          (input)=\"filter(searchInput.value)\"\n          (change)=\"$event.stopPropagation()\"\n          (focus)=\"onFocus($event)\"\n          (focus)=\"onSearchInputFocus()\"\n          (blur)=\"onBlur($event)\"\n          (blur)=\"onSearchInputBlur()\"\n        />\n      </div>\n    </div>\n\n    <div class=\"ard-select-controls\">\n      @if (isLoading()) {\n        <ng-template #defaultLoadingSpinnerTemplate>\n          <div class=\"ard-simple-spinner\"></div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate()?.template || defaultLoadingSpinnerTemplate\" />\n      }\n      @if (shouldShowClearButton()) {\n        <ard-clear-button\n          [title]=\"clearButtonTitle()\"\n          (click)=\"handleClearButtonClick($event)\"\n        />\n      }\n\n      <button\n        type=\"button\"\n        class=\"ard-dropdown-arrow-wrapper\"\n        (click)=\"handleDropdownArrowClick($event)\"\n      >\n        <span class=\"ard-dropdown-arrow\"></span>\n        <div class=\"ard-hitbox\"></div>\n      </button>\n    </div>\n  </div>\n</ard-form-field-frame>\n\n<ng-template #dropdownTemplate>\n  <ard-dropdown-panel\n    class=\"ard-dropdown-panel ard-select-dropdown-panel\"\n    role=\"listbox\"\n    aria-label=\"Options list\"\n    [headerTemplate]=\"dropdownHeaderTemplate()?.template ?? null\"\n    [footerTemplate]=\"dropdownFooterTemplate()?.template ?? null\"\n    [appearance]=\"dropdownAppearanceOrDefault()\"\n    [variant]=\"dropdownVariantOrDefault()\"\n    [isOpen]=\"true\"\n    [filterValue]=\"searchTerm()\"\n    [panelId]=\"htmlId()\"\n    [compact]=\"compact()\"\n    (ardClickOutside)=\"handleOutsideClick($event)\"\n    (mousemove)=\"onMouseMove()\"\n    (scroll)=\"scrollEvent.emit($event)\"\n    (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\n  >\n    @if (!shouldShowNoItemsFound()) {\n      @for (group of itemStorage.groups(); track $index) {\n        <div\n          class=\"ard-optgroup\"\n          role=\"group\"\n          [class.ard-group-disabled]=\"group.disabled()\"\n          [class.ard-group-selected]=\"group.selected()\"\n          [class.ard-group-highlighted]=\"group.highlighted()\"\n          (mouseover)=\"onGroupMouseover(group)\"\n          (click)=\"onGroupClick(group)\"\n        >\n          @if (group.label() !== '' && group.label() !== undefined) {\n            <ng-template\n              #defaultOptgroupTemplate\n              let-group\n            >\n              <span\n                class=\"ard-optgroup-label\"\n                [ardInnerHTML]=\"group.label()\"\n                [ardEscapeInnerHTML]=\"isItemsInputUsed\"\n              ></span>\n            </ng-template>\n\n            <ng-template\n              [ngTemplateOutlet]=\"optgroupTemplate()?.template || defaultOptgroupTemplate\"\n              [ngTemplateOutletContext]=\"getGroupContext(group)\"\n            />\n          }\n\n          <div class=\"ard-optgroup-children\">\n            @for (option of group.children(); track option.index) {\n              <div\n                class=\"ard-option\"\n                role=\"option\"\n                [class.ard-option-disabled]=\"option.disabled()\"\n                [class.ard-option-selected]=\"option.selected()\"\n                [class.ard-option-highlighted]=\"option.highlighted()\"\n                [class.ard-option-highlighted-recent]=\"option.highlighted_recently()\"\n                [attr.aria-selected]=\"option.selected()\"\n                [attr.id]=\"htmlId() + '-' + option.index\"\n                (click)=\"onItemClick(option, $event)\"\n                (mouseover)=\"onItemMouseOver($event)\"\n                (mouseenter)=\"onItemMouseEnter(option, $event)\"\n                (mouseleave)=\"onItemMouseLeave(option, $event)\"\n              >\n                <div class=\"ard-option-label\">\n                  <ng-template\n                    #defaultOptionTemplate\n                    let-option\n                  >\n                    <span\n                      [ardInnerHTML]=\"option.label()\"\n                      [ardEscapeInnerHTML]=\"isItemsInputUsed\"\n                    ></span>\n                  </ng-template>\n\n                  <ng-template\n                    [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n                    [ngTemplateOutletContext]=\"getOptionContext(option)\"\n                  />\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    }\n    @if (shouldShowNoItemsFound()) {\n      <ng-template #defaultNoItemsFoundTemplate>\n        <div class=\"ard-option ard-option-disabled\">{{ noItemsFoundText() }}</div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"noItemsFoundTemplate()?.template || defaultNoItemsFoundTemplate\"\n        [ngTemplateOutletContext]=\"getSearchContext()\"\n      />\n    }\n    @if (shouldShowAddCustom()) {\n      <ng-template\n        #defaultAddCustomTemplate\n        let-searchTerm\n      >\n        <div\n          class=\"ard-option ard-option-highlighted ard-add-custom\"\n          (click)=\"addCustomOption(searchTerm)\"\n        >\n          <span class=\"ard-add-custom-label\">Add option</span>\n          <span class=\"ard-add-custom-value\">\"{{ searchTerm }}\"</span>\n        </div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"addCustomTemplate()?.template || defaultAddCustomTemplate\"\n        [ngTemplateOutletContext]=\"getCustomOptionContext()\"\n      />\n    }\n    @if (isLoading()) {\n      <ng-template #defaultLoadingPlaceholderTemplate>\n        <div class=\"ard-option ard-option-disabled\">{{ loadingPlaceholderText() }}</div>\n      </ng-template>\n\n      <ng-template\n        [ngTemplateOutlet]=\"loadingPlaceholderTemplate()?.template || defaultLoadingPlaceholderTemplate\"\n        [ngTemplateOutletContext]=\"getSearchContext()\"\n      />\n    }\n  </ard-dropdown-panel>\n</ng-template>\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"] }]
+                        {
+                            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  [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]
@@ -4330,7 +4492,6 @@ class _FileInputComponentBase extends _NgModelComponentBase {
     constructor() {
         super(...arguments);
         this.fileInputEl = viewChild('fileInput');
-        this.htmlId = input(TakeChance.id());
         this.name = input('');
         this._wasViewInit = false;
         //! appearance
@@ -4352,6 +4513,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!`));
         }
@@ -4466,7 +4628,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
@@ -4966,7 +5128,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: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\n  class=\"ard-file-input-form-field-frame\"\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [prefixTemplate]=\"prefixTemplate\"\n  [suffixTemplate]=\"suffixTemplate\"\n  (dragover)=\"onDragover($event)\"\n  (dragleave)=\"onDragleave()\"\n  (drop)=\"onDrop($event)\"\n  (ardClickOutside)=\"onDragleave()\"\n>\n  <div\n    class=\"ard-file-input\"\n    [ngClass]=\"ngClasses()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n      }\n\n      <div class=\"ard-file-input__value\">\n        @if (currentViewState() === 'idle') {\n          <ng-template\n            [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n            [ngTemplateOutletContext]=\"getIdleContext()\"\n          />\n        }\n        @if (currentViewState() === 'dragover') {\n          <ng-template\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\n          />\n        }\n        @if (currentViewState() === 'uploaded') {\n          <ng-template\n            [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n            [ngTemplateOutletContext]=\"getUploadedContext()\"\n          />\n        }\n      </div>\n    </div>\n\n    @if (shouldShowClearButton) {\n      <ard-clear-button\n        #focusableElement\n        [title]=\"clearButtonTitle()\"\n        (mouseup)=\"onClearButtonClick($event)\"\n      />\n    }\n    @if (!shouldBeBlocked) {\n      <button\n        #focusableElement\n        type=\"button\"\n        class=\"ard-browse-button\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"openBrowseDialog()\"\n      >\n        <div class=\"ard-focus-overlay\"></div>\n        <ard-icon>folder</ard-icon>\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n\n<input\n  #fileInput\n  class=\"ard-file-input__input\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [attr.id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <span class=\"ard-file-input__idle\">\n    @if (multiple()) {\n      <span>Upload a file</span>\n    } @else {\n      <span>Upload files</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\n  @if (multiple()) {\n    <span class=\"ard-file-input__dragover-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n  } @else {\n    <span class=\"ard-file-input__dragover-amount\"> a file </span>\n  }\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n>\n  <div class=\"ard-file-input__uploaded\">\n    <span class=\"ard-file-input__uploaded-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n  </div>\n</ng-template>\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFileInputComponent, decorators: [{
             type: Component,
@@ -4976,7 +5138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumFileInputComponent),
                             multi: true,
                         },
-                    ], template: "<ard-form-field-frame\n  class=\"ard-file-input-form-field-frame\"\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate\"\n  [suffixTemplate]=\"suffixTemplate\"\n  (dragover)=\"onDragover($event)\"\n  (dragleave)=\"onDragleave()\"\n  (drop)=\"onDrop($event)\"\n  (ardClickOutside)=\"onDragleave()\"\n>\n  <div\n    class=\"ard-file-input\"\n    [ngClass]=\"ngClasses()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n      }\n\n      <div class=\"ard-file-input__value\">\n        @if (currentViewState() === 'idle') {\n          <ng-template\n            [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n            [ngTemplateOutletContext]=\"getIdleContext()\"\n          />\n        }\n        @if (currentViewState() === 'dragover') {\n          <ng-template\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\n          />\n        }\n        @if (currentViewState() === 'uploaded') {\n          <ng-template\n            [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n            [ngTemplateOutletContext]=\"getUploadedContext()\"\n          />\n        }\n      </div>\n    </div>\n\n    @if (shouldShowClearButton) {\n      <ard-clear-button\n        #focusableElement\n        [title]=\"clearButtonTitle()\"\n        (mouseup)=\"onClearButtonClick($event)\"\n      />\n    }\n    @if (!shouldBeBlocked) {\n      <button\n        #focusableElement\n        type=\"button\"\n        class=\"ard-browse-button\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"openBrowseDialog()\"\n      >\n        <div class=\"ard-focus-overlay\"></div>\n        <ard-icon>folder</ard-icon>\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n\n<input\n  #fileInput\n  class=\"ard-file-input__input\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [attr.id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <span class=\"ard-file-input__idle\">\n    @if (multiple()) {\n      <span>Upload a file</span>\n    } @else {\n      <span>Upload files</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\n  @if (multiple()) {\n    <span class=\"ard-file-input__dragover-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n  } @else {\n    <span class=\"ard-file-input__dragover-amount\"> a file </span>\n  }\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n>\n  <div class=\"ard-file-input__uploaded\">\n    <span class=\"ard-file-input__uploaded-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n  </div>\n</ng-template>\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
+                    ], template: "<ard-form-field-frame\n  class=\"ard-file-input-form-field-frame\"\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused()\"\n  [prefixTemplate]=\"prefixTemplate\"\n  [suffixTemplate]=\"suffixTemplate\"\n  (dragover)=\"onDragover($event)\"\n  (dragleave)=\"onDragleave()\"\n  (drop)=\"onDrop($event)\"\n  (ardClickOutside)=\"onDragleave()\"\n>\n  <div\n    class=\"ard-file-input\"\n    [ngClass]=\"ngClasses()\"\n  >\n    <div class=\"ard-input-container\">\n      @if (shouldDisplayPlaceholder) {\n        <ng-template #defaultPlaceholderTemplate>\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n        </ng-template>\n\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n      }\n\n      <div class=\"ard-file-input__value\">\n        @if (currentViewState() === 'idle') {\n          <ng-template\n            [ngTemplateOutlet]=\"idleTemplate ?? defaultIdleTemplate\"\n            [ngTemplateOutletContext]=\"getIdleContext()\"\n          />\n        }\n        @if (currentViewState() === 'dragover') {\n          <ng-template\n            [ngTemplateOutlet]=\"dragoverTemplate ?? defaultDragoverTemplate\"\n            [ngTemplateOutletContext]=\"getDragoverContext()\"\n          />\n        }\n        @if (currentViewState() === 'uploaded') {\n          <ng-template\n            [ngTemplateOutlet]=\"uploadedTemplate ?? defaultUploadedTemplate\"\n            [ngTemplateOutletContext]=\"getUploadedContext()\"\n          />\n        }\n      </div>\n    </div>\n\n    @if (shouldShowClearButton) {\n      <ard-clear-button\n        #focusableElement\n        [title]=\"clearButtonTitle()\"\n        (mouseup)=\"onClearButtonClick($event)\"\n      />\n    }\n    @if (!shouldBeBlocked) {\n      <button\n        #focusableElement\n        type=\"button\"\n        class=\"ard-browse-button\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (click)=\"openBrowseDialog()\"\n      >\n        <div class=\"ard-focus-overlay\"></div>\n        <ard-icon>folder</ard-icon>\n      </button>\n    }\n  </div>\n</ard-form-field-frame>\n\n<input\n  #fileInput\n  class=\"ard-file-input__input\"\n  type=\"file\"\n  [name]=\"name()\"\n  [multiple]=\"multiple()\"\n  [attr.id]=\"htmlId()\"\n  (change)=\"onInputChange()\"\n/>\n\n<ng-template\n  #defaultIdleTemplate\n  let-browse=\"browse\"\n>\n  <span class=\"ard-file-input__idle\">\n    @if (multiple()) {\n      <span>Upload a file</span>\n    } @else {\n      <span>Upload files</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template\n  #defaultDragoverTemplate\n  let-amount=\"amount\"\n>\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\n  @if (multiple()) {\n    <span class=\"ard-file-input__dragover-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n  } @else {\n    <span class=\"ard-file-input__dragover-amount\"> a file </span>\n  }\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\n</ng-template>\n\n<ng-template\n  #defaultUploadedTemplate\n  let-amount=\"amount\"\n>\n  <div class=\"ard-file-input__uploaded\">\n    <span class=\"ard-file-input__uploaded-amount\">\n      {{ amount }}\n      <ng-container [ngPlural]=\"amount\">\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\n        <ng-template ngPluralCase=\"other\">files</ng-template>\n      </ng-container>\n    </span>\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\n  </div>\n</ng-template>\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_FILE_INPUT_DEFAULTS]
@@ -5029,7 +5191,7 @@ const CaseTransformerType = {
 };
 
 const _hexInputDefaults = {
-    ..._ngModelComponentDefaults,
+    ..._formFieldComponentDefaults,
     appearance: FormElementAppearance.Outlined,
     variant: FormElementVariant.Rounded,
     compact: false,
@@ -5177,7 +5339,7 @@ class HexInputModel {
     }
 }
 
-class ArdiumHexInputComponent extends _NgModelComponentBase {
+class ArdiumHexInputComponent extends _FormFieldComponentBase {
     constructor(defaults) {
         super(defaults);
         //! input view
@@ -5319,7 +5481,11 @@ class ArdiumHexInputComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumHexInputComponent),
                 multi: true,
             },
-        ], 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\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-hex-input\"\n    [class.ard-has-value]=\"value\"\n    (mouseup)=\"onMouseup()\"\n  >\n    <div\n      class=\"ard-hash-container\"\n      *ngIf=\"showHash\"\n    >\n      #\n    </div>\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()?.template || defaultPlaceholderTemplate\"></ng-template>\n      }\n\n      <input\n        #textInput\n        #focusableElement\n        type=\"text\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value, $event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (change)=\"onChange($event)\"\n        (mouseup)=\"$event.stopPropagation()\"\n        (copy)=\"onCopy($event)\"\n      />\n    </div>\n\n    @if (shouldShowClearButton()) {\n      <ard-clear-button\n        [title]=\"clearButtonTitle()\"\n        (click)=\"onClearButtonClick($event)\"\n      />\n    }\n  </div>\n</ard-form-field-frame>\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: ["isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            {
+                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  [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,
@@ -5329,7 +5495,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumHexInputComponent),
                             multi: true,
                         },
-                    ], template: "<ard-form-field-frame\n  [appearance]=\"appearance()\"\n  [variant]=\"variant()\"\n  [compact]=\"compact()\"\n  [isFocused]=\"isFocused\"\n  [prefixTemplate]=\"prefixTemplate()?.template\"\n  [suffixTemplate]=\"suffixTemplate()?.template\"\n>\n  <div\n    class=\"ard-hex-input\"\n    [class.ard-has-value]=\"value\"\n    (mouseup)=\"onMouseup()\"\n  >\n    <div\n      class=\"ard-hash-container\"\n      *ngIf=\"showHash\"\n    >\n      #\n    </div>\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()?.template || defaultPlaceholderTemplate\"></ng-template>\n      }\n\n      <input\n        #textInput\n        #focusableElement\n        type=\"text\"\n        [attr.id]=\"inputId()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput(textInput.value, $event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (change)=\"onChange($event)\"\n        (mouseup)=\"$event.stopPropagation()\"\n        (copy)=\"onCopy($event)\"\n      />\n    </div>\n\n    @if (shouldShowClearButton()) {\n      <ard-clear-button\n        [title]=\"clearButtonTitle()\"\n        (click)=\"onClearButtonClick($event)\"\n      />\n    }\n  </div>\n</ard-form-field-frame>\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"] }]
+                        {
+                            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  [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]
@@ -5368,7 +5538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 const _numberInputDefaults = {
-    ..._ngModelComponentDefaults,
+    ..._formFieldComponentDefaults,
     appearance: FormElementAppearance.Outlined,
     variant: FormElementVariant.Rounded,
     compact: false,
@@ -5402,7 +5572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'ard-number-input > ng-template[ard-placeholder-tmp]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
-class ArdiumNumberInputComponent extends _NgModelComponentBase {
+class ArdiumNumberInputComponent extends _FormFieldComponentBase {
     constructor(defaults) {
         super(defaults);
         //! input view
@@ -5424,7 +5594,7 @@ class ArdiumNumberInputComponent extends _NgModelComponentBase {
                 `ard-appearance-${this.appearance()}`,
                 `ard-variant-${this.variant()}`,
                 `ard-text-align-${this.alignText()}`,
-                `ard-quick-change-${this.noButtons}`,
+                `ard-quick-change-${!this.noButtons()}`,
                 this.compact() ? 'ard-compact' : '',
             ].join(' ');
         });
@@ -5455,7 +5625,7 @@ class ArdiumNumberInputComponent extends _NgModelComponentBase {
         this.quickChangeEvent = output({ alias: 'quickChange' });
         //! min/max and number type
         this.min = input(0, { transform: v => coerceNumberProperty(v, 0) });
-        this.max = input(Infinity, { transform: v => coerceNumberProperty(v, Infinity) });
+        this.max = input(999999, { transform: v => coerceNumberProperty(v, 999999) });
         this.allowFloat = input(false, { transform: v => coerceBooleanProperty(v) });
         //! incerement/decrement buttons
         this.noButtons = input(false, { transform: v => coerceBooleanProperty(v) });
@@ -5596,7 +5766,11 @@ class ArdiumNumberInputComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumNumberInputComponent),
                 multi: true,
             },
-        ], 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\n  class=\"ard-number-input\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-has-value]=\"value\"\n  (mousedown)=\"$event.preventDefault()\"\n  (mouseup)=\"onMouseup()\"\n>\n  @if (!noButtons()) {\n    <ard-button\n      class=\"ard-quick-change-button decrement\"\n      [variant]=\"buttonVariant()\"\n      [appearance]=\"buttonAppearance()\"\n      color=\"none\"\n      [disabled]=\"!canDecrement()\"\n      [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\n      (click)=\"onQuickChangeButtonClick(-1, $event)\"\n      (ardHold)=\"onQuickChangeButtonClick(-1)\"\n      ardHoldSpaceKey\n    >\n      -\n    </ard-button>\n  }\n  <div class=\"ard-input-container\">\n    @if (shouldDisplayPlaceholder()) {\n      <ng-template\n        #defaultPlaceholderTemplate\n        let-plchldr\n      >\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n      </ng-template>\n\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\n    }\n\n    <input\n      #textInput\n      #focusableElement\n      type=\"text\"\n      [attr.id]=\"inputId()\"\n      [attr.tabindex]=\"tabIndex()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"disabled()\"\n      (input)=\"onInput(textInput.value)\"\n      (focus)=\"onFocusMaster($event)\"\n      (blur)=\"onBlurMaster($event)\"\n      (change)=\"onChange($event)\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (mouseup)=\"$event.stopPropagation()\"\n      (copy)=\"onCopy($event)\"\n    />\n  </div>\n  @if (!noButtons()) {\n    <ard-button\n      class=\"ard-quick-change-button increment\"\n      [variant]=\"buttonVariant()\"\n      [appearance]=\"buttonAppearance()\"\n      color=\"none\"\n      [disabled]=\"!canIncrement()\"\n      [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\n      (click)=\"onQuickChangeButtonClick(1, $event)\"\n      (ardHold)=\"onQuickChangeButtonClick(1)\"\n      ardHoldSpaceKey\n    >\n      +\n    </ard-button>\n  }\n</div>\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 }); }
+            {
+                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-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,
@@ -5606,7 +5780,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumNumberInputComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"ard-number-input\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-has-value]=\"value\"\n  (mousedown)=\"$event.preventDefault()\"\n  (mouseup)=\"onMouseup()\"\n>\n  @if (!noButtons()) {\n    <ard-button\n      class=\"ard-quick-change-button decrement\"\n      [variant]=\"buttonVariant()\"\n      [appearance]=\"buttonAppearance()\"\n      color=\"none\"\n      [disabled]=\"!canDecrement()\"\n      [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\n      (click)=\"onQuickChangeButtonClick(-1, $event)\"\n      (ardHold)=\"onQuickChangeButtonClick(-1)\"\n      ardHoldSpaceKey\n    >\n      -\n    </ard-button>\n  }\n  <div class=\"ard-input-container\">\n    @if (shouldDisplayPlaceholder()) {\n      <ng-template\n        #defaultPlaceholderTemplate\n        let-plchldr\n      >\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\n      </ng-template>\n\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\n    }\n\n    <input\n      #textInput\n      #focusableElement\n      type=\"text\"\n      [attr.id]=\"inputId()\"\n      [attr.tabindex]=\"tabIndex()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"disabled()\"\n      (input)=\"onInput(textInput.value)\"\n      (focus)=\"onFocusMaster($event)\"\n      (blur)=\"onBlurMaster($event)\"\n      (change)=\"onChange($event)\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (mouseup)=\"$event.stopPropagation()\"\n      (copy)=\"onCopy($event)\"\n    />\n  </div>\n  @if (!noButtons()) {\n    <ard-button\n      class=\"ard-quick-change-button increment\"\n      [variant]=\"buttonVariant()\"\n      [appearance]=\"buttonAppearance()\"\n      color=\"none\"\n      [disabled]=\"!canIncrement()\"\n      [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\n      (click)=\"onQuickChangeButtonClick(1, $event)\"\n      (ardHold)=\"onQuickChangeButtonClick(1)\"\n      ardHoldSpaceKey\n    >\n      +\n    </ard-button>\n  }\n</div>\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"] }]
+                        {
+                            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-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]
@@ -5752,7 +5930,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);
@@ -5776,7 +5953,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),
@@ -5813,7 +5990,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', {
@@ -5825,11 +6002,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);
@@ -5837,6 +6034,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();
@@ -5857,7 +6095,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,
@@ -5865,7 +6103,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() {
@@ -5874,7 +6121,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' });
         /**
@@ -6009,6 +6255,7 @@ class ArdiumRadioGroupComponent extends _NgModelComponentBase {
         }
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this._destroyChildSubscriptions();
     }
     _destroyChildSubscriptions() {
@@ -6018,7 +6265,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),
@@ -6205,6 +6452,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.`);
@@ -6410,7 +6660,7 @@ class SimpleItemStorage {
 }
 
 const _selectableListComponentDefaults = {
-    ..._ngModelComponentDefaults,
+    ..._formFieldComponentDefaults,
     valueFrom: 'value',
     labelFrom: 'label',
     disabledFrom: 'disabled',
@@ -6420,12 +6670,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
@@ -6489,7 +6738,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);
@@ -6605,7 +6854,7 @@ class _SelectableListComponentBase extends _NgModelComponentBase {
         }
     }
     _toggleHighlightedItems(event) {
-        if (!this.isFocused)
+        if (!this.isFocused())
             return;
         event.preventDefault();
         const highlightedItems = this.highlightedItems();
@@ -6617,28 +6866,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);
@@ -6807,11 +7056,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\n  #focusableElement\n  class=\"ard-segment-container\"\n  [class.ard-disabled]=\"disabled()\"\n  [ariaDisabled]=\"disabled()\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n  [attr.tabindex]=\"tabIndex()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  @for (row of itemRows(); track $index) {\n    <div\n      class=\"ard-segment-row\"\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n    >\n      @for (option of row.options; track $index) {\n        <button\n          type=\"button\"\n          class=\"ard-segment-option\"\n          tabindex=\"-1\"\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n          [class.ard-option-selected]=\"option.selected()\"\n          [class.ard-option-highlighted]=\"option.highlighted()\"\n          [ariaSelected]=\"option.selected()\"\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\n          (click)=\"onItemClick(option, $event)\"\n        >\n          <div class=\"ard-focus-overlay\"></div>\n          <div class=\"ard-button-content\">\n            <span class=\"ard-option-label\">\n              <ng-template #defaultOptionTemplate>\n                {{ option.label() }}\n              </ng-template>\n\n              <ng-template\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\n              />\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumSegmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ard-segment', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #focusableElement\n  class=\"ard-segment-container\"\n  [class.ard-disabled]=\"disabled()\"\n  [ariaDisabled]=\"disabled()\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-focus-visible]=\"isFocused && !isMouseBeingUsed\"\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n  [attr.tabindex]=\"tabIndex()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  @for (row of itemRows(); track $index) {\n    <div\n      class=\"ard-segment-row\"\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n    >\n      @for (option of row.options; track $index) {\n        <button\n          type=\"button\"\n          class=\"ard-segment-option\"\n          tabindex=\"-1\"\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n          [class.ard-option-selected]=\"option.selected()\"\n          [class.ard-option-highlighted]=\"option.highlighted()\"\n          [ariaSelected]=\"option.selected()\"\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\n          (click)=\"onItemClick(option, $event)\"\n        >\n          <div class=\"ard-focus-overlay\"></div>\n          <div class=\"ard-button-content\">\n            <span class=\"ard-option-label\">\n              <ng-template #defaultOptionTemplate>\n                {{ option.label() }}\n              </ng-template>\n\n              <ng-template\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\n              />\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
+            args: [{ selector: 'ard-segment', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ArdiumSegmentComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: _FormFieldComponentBase,
+                            useExisting: ArdiumSegmentComponent,
+                        },
+                    ], template: "<div\n  #focusableElement\n  class=\"ard-segment-container\"\n  [class.ard-disabled]=\"disabled()\"\n  [ariaDisabled]=\"disabled()\"\n  [ngClass]=\"ngClasses()\"\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\n  [attr.tabindex]=\"tabIndex()\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  @for (row of itemRows(); track $index) {\n    <div\n      class=\"ard-segment-row\"\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\n    >\n      @for (option of row.options; track $index) {\n        <button\n          type=\"button\"\n          class=\"ard-segment-option\"\n          tabindex=\"-1\"\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\n          [class.ard-option-selected]=\"option.selected()\"\n          [class.ard-option-highlighted]=\"option.highlighted()\"\n          [ariaSelected]=\"option.selected()\"\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\n          (click)=\"onItemClick(option, $event)\"\n        >\n          <div class=\"ard-focus-overlay\"></div>\n          <div class=\"ard-button-content\">\n            <span class=\"ard-option-label\">\n              <ng-template #defaultOptionTemplate>\n                {{ option.label() }}\n              </ng-template>\n\n              <ng-template\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\n              />\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SEGMENT_DEFAULTS]
@@ -7192,6 +7461,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() });
@@ -7962,7 +8232,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);
@@ -8047,7 +8316,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,
@@ -8529,6 +8798,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+class ArdiumErrorDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ArdiumErrorDirective, isStandalone: true, selector: "[ard-error]", host: { properties: { "class.ard-error": "true" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumErrorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ard-error]',
+                    standalone: true,
+                    host: {
+                        '[class.ard-error]': 'true',
+                    },
+                }]
+        }] });
+
+class ArdiumErrorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ArdiumErrorComponent, selector: "ard-error", hostDirectives: [{ directive: ArdiumErrorDirective }], ngImport: i0, template: '<ng-content />', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumErrorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ard-error',
+                    template: '<ng-content />',
+                    hostDirectives: [{ directive: ArdiumErrorDirective }],
+                }]
+        }] });
+
+const _formFieldDefaults = {
+    defaultHintAlign: SimpleOneAxisAlignment.Left,
+    reserveHintLine: false,
+};
+const ARD_FORM_FIELD_DEFAULTS = new InjectionToken('ard-form-field-defaults', {
+    factory: () => ({
+        ..._formFieldDefaults,
+    }),
+});
+function provideFormFieldDefaults(config) {
+    return { provide: ARD_FORM_FIELD_DEFAULTS, useValue: { ..._formFieldDefaults, ...config } };
+}
+
+class ArdiumHintDirective {
+    constructor() {
+        this.left = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.right = input(false, { transform: v => coerceBooleanProperty(v) });
+        effect(() => {
+            if (this.left() && this.right()) {
+                console.error(`ARD-NF5130: Cannot align a form field hint to both left and right.`);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumHintDirective, isStandalone: true, selector: "[ard-hint]", inputs: { left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, right: { classPropertyName: "right", publicName: "right", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-hint": "true", "class.ard-hint-default": "!left() && !right()", "class.ard-hint-left": "left() && !right()", "class.ard-hint-right": "!left() && right()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHintDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ard-hint]',
+                    standalone: true,
+                    host: {
+                        '[class.ard-hint]': 'true',
+                        '[class.ard-hint-default]': '!left() && !right()',
+                        '[class.ard-hint-left]': 'left() && !right()',
+                        '[class.ard-hint-right]': '!left() && right()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+class ArdiumLabelComponent {
+    constructor() {
+        this.required = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.optional = input(false, { transform: v => coerceBooleanProperty(v) });
+        effect(() => {
+            if (this.required() && this.optional()) {
+                console.error(`ARD-NF5110: Cannot set a form field label to be both required and optional.`);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumLabelComponent, selector: "ard-label", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"ard-label-text\"\r\n  [class.ard-label-optional]=\"optional()\"\r\n  [class.ard-label-required]=\"required()\"\r\n>\r\n  <ng-content />\r\n</div>\r\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ard-label', template: "<div\r\n  class=\"ard-label-text\"\r\n  [class.ard-label-optional]=\"optional()\"\r\n  [class.ard-label-required]=\"required()\"\r\n>\r\n  <ng-content />\r\n</div>\r\n" }]
+        }], ctorParameters: () => [] });
+
+class ArdiumFormFieldComponent {
+    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: ArdiumFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFormFieldComponent, selector: "ard-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n  [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n  [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n  <label\r\n    class=\"ard-label\"\r\n    [attr.for]=\"control()?.htmlId()\"\r\n  >\r\n    <ng-content select=\"ard-label, [ard-label]\" />\r\n  </label>\r\n  <div class=\"ard-form-field__input\">\r\n    <ng-content />\r\n  </div>\r\n  <div\r\n    class=\"ard-form-field__hints\"\r\n    [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n    [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n  >\r\n    @if (hasAnyError()) {\r\n    <div class=\"ard-form-field__error\">\r\n      <ng-content select=\"ard-error, [ard-error]\" />\r\n    </div>\r\n    } @else {\r\n    <div class=\"ard-form-field__hints-left\">\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n      </div>\r\n      <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n    </div>\r\n    <div class=\"ard-form-field__hints-right\">\r\n      <div class=\"ard-form-field__default-hint\">\r\n        <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n      </div>\r\n      <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ard-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n  [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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ArdiumHintComponent, selector: "ard-hint", hostDirectives: [{ directive: ArdiumHintDirective, inputs: ["left", "left", "right", "right"] }], ngImport: i0, template: '<ng-content />', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ard-hint',
+                    template: '<ng-content />',
+                    hostDirectives: [{ directive: ArdiumHintDirective, inputs: ['left', 'right'] }],
+                }]
+        }] });
+
+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,
+            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,
+                        ArdiumHorizontalFormFieldComponent,
+                        ArdiumLabelComponent,
+                        ArdiumHintComponent,
+                        ArdiumErrorComponent,
+                    ],
+                    imports: [CommonModule, ArdiumHintDirective, ArdiumErrorDirective],
+                    exports: [
+                        ArdiumFormFieldComponent,
+                        ArdiumHorizontalFormFieldComponent,
+                        ArdiumLabelComponent,
+                        ArdiumHintComponent,
+                        ArdiumErrorComponent,
+                    ],
+                }]
+        }] });
+
 const _kbdDefaults = {
     full: false,
     appearance: FormElementAppearance.Outlined,
@@ -9566,7 +10016,7 @@ class ArdiumTablePaginationComponent extends _FocusableComponentBase {
         this._emitPageEvent();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTablePaginationComponent, deps: [{ token: ARD_TABLE_PAGINATION_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumTablePaginationComponent, selector: "ard-table-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", 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 }, 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 }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", 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 } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", itemsPerPageChangeEvent: "itemsPerPageChange", pageChangeEvent: "pageChange" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-pagination\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-pagination__items-per-page\">\n    <div class=\"ard-pagination__text\">{{ itemsPerPageText() }}</div>\n    <ard-select\n      [items]=\"options()\"\n      [compact]=\"compact()\"\n      [value]=\"itemsPerPage()\"\n      autoHighlightFirst=\"false\"\n      [disabled]=\"disabled()\"\n      (valueChange)=\"onItemsPerPageChange($event[0])\"\n      clearable=\"false\"\n    />\n  </div>\n  <div class=\"ard-pagination__current-page\">\n    <div class=\"ard-pagination__text\">\n      {{ currentItemsFormatFn()(getCurrentItemsContext()) }}\n    </div>\n    <div class=\"ard-pagination__buttons\">\n      @if (useFirstLastButtons()) {\n        <ard-icon-button\n          [color]=\"color()\"\n          [compact]=\"compact()\"\n          [disabled]=\"disabled() || firstPageDisabled()\"\n          (click)=\"onFirstPage()\"\n        >\n          <ard-icon>first page</ard-icon>\n        </ard-icon-button>\n      }\n      <ard-icon-button\n        [color]=\"color()\"\n        [compact]=\"compact()\"\n        [disabled]=\"disabled() || firstPageDisabled()\"\n        (click)=\"onPrevPage()\"\n      >\n        <ard-icon>navigate before</ard-icon>\n      </ard-icon-button>\n      <ard-icon-button\n        [color]=\"color()\"\n        [compact]=\"compact()\"\n        [disabled]=\"disabled() || lastPageDisabled()\"\n        (click)=\"onNextPage()\"\n      >\n        <ard-icon>navigate next</ard-icon>\n      </ard-icon-button>\n      @if (useFirstLastButtons()) {\n        <ard-icon-button\n          [color]=\"color()\"\n          [compact]=\"compact()\"\n          [disabled]=\"disabled() || lastPageDisabled()\"\n          (click)=\"onLastPage()\"\n        >\n          <ard-icon>last page</ard-icon>\n        </ard-icon-button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumSelectComponent, selector: "ard-select", inputs: ["valueFrom", "labelFrom", "disabledFrom", "groupLabelFrom", "groupDisabledFrom", "childrenFrom", "placeholder", "searchPlaceholder", "clearButtonTitle", "dropdownPosition", "noItemsFoundText", "loadingPlaceholderText", "searchInputId", "inputAttrs", "isLoading", "htmlId", "itemsAlreadyGrouped", "invertDisabled", "noGroupActions", "autoHighlightFirst", "autoFocus", "keepOpen", "hideSelected", "noBackspaceClear", "sortMultipleValues", "searchCaseSensitive", "keepSearchAfterSelect", "maxSelectedItems", "itemDisplayLimit", "searchFn", "compareWith", "appearance", "variant", "compact", "dropdownAppearance", "dropdownVariant", "items", "multiselectable", "clearable", "searchable", "addCustom", "value", "isOpen"], outputs: ["valueChange", "change", "add", "failedToAdd", "remove", "clear", "open", "close", "scroll", "scrollToEnd", "search", "isOpenChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumTablePaginationComponent, selector: "ard-table-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", 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 }, 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 }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", 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 } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", itemsPerPageChangeEvent: "itemsPerPageChange", pageChangeEvent: "pageChange" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ard-pagination\"\n  [ngClass]=\"ngClasses()\"\n>\n  <div class=\"ard-pagination__items-per-page\">\n    <div class=\"ard-pagination__text\">{{ itemsPerPageText() }}</div>\n    <ard-select\n      [items]=\"options()\"\n      [compact]=\"compact()\"\n      [value]=\"itemsPerPage()\"\n      autoHighlightFirst=\"false\"\n      [disabled]=\"disabled()\"\n      (valueChange)=\"onItemsPerPageChange($event[0])\"\n      clearable=\"false\"\n    />\n  </div>\n  <div class=\"ard-pagination__current-page\">\n    <div class=\"ard-pagination__text\">\n      {{ currentItemsFormatFn()(getCurrentItemsContext()) }}\n    </div>\n    <div class=\"ard-pagination__buttons\">\n      @if (useFirstLastButtons()) {\n        <ard-icon-button\n          [color]=\"color()\"\n          [compact]=\"compact()\"\n          [disabled]=\"disabled() || firstPageDisabled()\"\n          (click)=\"onFirstPage()\"\n        >\n          <ard-icon>first page</ard-icon>\n        </ard-icon-button>\n      }\n      <ard-icon-button\n        [color]=\"color()\"\n        [compact]=\"compact()\"\n        [disabled]=\"disabled() || firstPageDisabled()\"\n        (click)=\"onPrevPage()\"\n      >\n        <ard-icon>navigate before</ard-icon>\n      </ard-icon-button>\n      <ard-icon-button\n        [color]=\"color()\"\n        [compact]=\"compact()\"\n        [disabled]=\"disabled() || lastPageDisabled()\"\n        (click)=\"onNextPage()\"\n      >\n        <ard-icon>navigate next</ard-icon>\n      </ard-icon-button>\n      @if (useFirstLastButtons()) {\n        <ard-icon-button\n          [color]=\"color()\"\n          [compact]=\"compact()\"\n          [disabled]=\"disabled() || lastPageDisabled()\"\n          (click)=\"onLastPage()\"\n        >\n          <ard-icon>last page</ard-icon>\n        </ard-icon-button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumSelectComponent, selector: "ard-select", inputs: ["valueFrom", "labelFrom", "disabledFrom", "groupLabelFrom", "groupDisabledFrom", "childrenFrom", "placeholder", "searchPlaceholder", "clearButtonTitle", "dropdownPosition", "noItemsFoundText", "loadingPlaceholderText", "searchInputId", "inputAttrs", "isLoading", "itemsAlreadyGrouped", "invertDisabled", "noGroupActions", "autoHighlightFirst", "autoFocus", "keepOpen", "hideSelected", "noBackspaceClear", "sortMultipleValues", "searchCaseSensitive", "keepSearchAfterSelect", "maxSelectedItems", "itemDisplayLimit", "searchFn", "compareWith", "appearance", "variant", "compact", "dropdownAppearance", "dropdownVariant", "items", "multiselectable", "clearable", "searchable", "addCustom", "value", "isOpen"], outputs: ["valueChange", "change", "add", "failedToAdd", "remove", "clear", "open", "close", "scroll", "scrollToEnd", "search", "isOpenChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact"] }, { 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: ArdiumTablePaginationComponent, decorators: [{
             type: Component,
@@ -10033,7 +10483,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,
@@ -11337,5 +11787,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, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, 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