@ardium-ui/ui 4.2.3 → 4.4.0

package/fesm2022/ardium-ui-ui.mjs

@@ -267,6 +267,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Directive
         }] });
 
+const ARD_FORM_FIELD_CONTROL = new InjectionToken('ard-form-field-control');
+
 //! appearances
 const OutlinedAppearance = {
     /**
@@ -850,7 +852,7 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
                 multi: true,
             },
             {
-                provide: _FormFieldComponentBase,
+                provide: ARD_FORM_FIELD_CONTROL,
                 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          [readonly]=\"data.readonly\"\r\n          [placeholder]=\"data.placeholder\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n          [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n          (paste)=\"onPaste($event, data.index!)\"\r\n          (input)=\"onInput($event, data.index!)\"\r\n          (focus)=\"onFocusMaster($event, data.index!)\"\r\n          (blur)=\"onBlurMaster($event, data.index!)\"\r\n          (keydown)=\"onKeydown($event, data.index!)\"\r\n        />\r\n      } @else {\r\n        <div class=\"ard-digit-input__static\">\r\n          {{ data.char }}\r\n        </div>\r\n        <input\r\n          #input\r\n          type=\"text\"\r\n          class=\"ard-digit-input__static-input\"\r\n          data-ard-static\r\n          autocomplete=\"off\"\r\n          tabindex=\"-1\"\r\n          aria-hidden=\"true\"\r\n          [value]=\"data.char\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ard-digit-input__static-input{position:absolute;opacity:0;appearance:none;pointer-events:none;width:0;height:0}@keyframes cdk-text-field-autofill-start{}@keyframes cdk-text-field-autofill-end{}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -864,7 +866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             multi: true,
                         },
                         {
-                            provide: _FormFieldComponentBase,
+                            provide: ARD_FORM_FIELD_CONTROL,
                             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          [readonly]=\"data.readonly\"\r\n          [placeholder]=\"data.placeholder\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [class.ard-digit-input__input-readonly]=\"data.readonly\"\r\n          [class.ard-digit-input__input-empty]=\"isInputEmpty(data.index!)\"\r\n          (paste)=\"onPaste($event, data.index!)\"\r\n          (input)=\"onInput($event, data.index!)\"\r\n          (focus)=\"onFocusMaster($event, data.index!)\"\r\n          (blur)=\"onBlurMaster($event, data.index!)\"\r\n          (keydown)=\"onKeydown($event, data.index!)\"\r\n        />\r\n      } @else {\r\n        <div class=\"ard-digit-input__static\">\r\n          {{ data.char }}\r\n        </div>\r\n        <input\r\n          #input\r\n          type=\"text\"\r\n          class=\"ard-digit-input__static-input\"\r\n          data-ard-static\r\n          autocomplete=\"off\"\r\n          tabindex=\"-1\"\r\n          aria-hidden=\"true\"\r\n          [value]=\"data.char\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ard-digit-input__static-input{position:absolute;opacity:0;appearance:none;pointer-events:none;width:0;height:0}@keyframes cdk-text-field-autofill-start{}@keyframes cdk-text-field-autofill-end{}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}\n"] }]
@@ -2021,7 +2023,7 @@ class ArdiumInputComponent extends _SimpleInputComponentBase {
                 multi: true,
             },
             {
-                provide: _FormFieldComponentBase,
+                provide: ARD_FORM_FIELD_CONTROL,
                 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: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -2035,7 +2037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             multi: true,
                         },
                         {
-                            provide: _FormFieldComponentBase,
+                            provide: ARD_FORM_FIELD_CONTROL,
                             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"] }]
@@ -2385,7 +2387,7 @@ class ArdiumPasswordInputComponent extends _FormFieldComponentBase {
                 multi: true,
             },
             {
-                provide: _FormFieldComponentBase,
+                provide: ARD_FORM_FIELD_CONTROL,
                 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 }); }
@@ -2399,7 +2401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             multi: true,
                         },
                         {
-                            provide: _FormFieldComponentBase,
+                            provide: ARD_FORM_FIELD_CONTROL,
                             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" }]
@@ -2528,7 +2530,7 @@ class ArdiumSimpleInputComponent extends _SimpleInputComponentBase {
                 multi: true,
             },
             {
-                provide: _FormFieldComponentBase,
+                provide: ARD_FORM_FIELD_CONTROL,
                 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 }); }
@@ -2542,7 +2544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             multi: true,
                         },
                         {
-                            provide: _FormFieldComponentBase,
+                            provide: ARD_FORM_FIELD_CONTROL,
                             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"] }]
@@ -4264,7 +4266,7 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
                 multi: true,
             },
             {
-                provide: _FormFieldComponentBase,
+                provide: ARD_FORM_FIELD_CONTROL,
                 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        @if (isValueWithinDisplayLimit($index)) {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n        />\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 [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"></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 [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"></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          [innerHTML]=\"isItemsInputUsed ? (group.label() | escapeHTML) : group.label()\"\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 [innerHTML]=\"isItemsInputUsed ? (option.label() | escapeHTML) : option.label()\"></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.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: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "pipe", type: i5.ArdiumEscapeHTMLPipe, name: "escapeHTML" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -4278,7 +4280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             multi: true,
                         },
                         {
-                            provide: _FormFieldComponentBase,
+                            provide: ARD_FORM_FIELD_CONTROL,
                             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        @if (isValueWithinDisplayLimit($index)) {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || (multiselectable() ? defaultMultiValueTemplate : defaultValueTemplate)\"\r\n          [ngTemplateOutletContext]=\"getValueContext(item)\"\r\n        />\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 [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"></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 [innerHTML]=\"isItemsInputUsed ? (item.label() | escapeHTML) : item.label()\"></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          [innerHTML]=\"isItemsInputUsed ? (group.label() | escapeHTML) : group.label()\"\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 [innerHTML]=\"isItemsInputUsed ? (option.label() | escapeHTML) : option.label()\"></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"] }]
@@ -5453,7 +5455,7 @@ class ArdiumFileInputComponent extends _FileInputComponentBase {
                 multi: true,
             },
             {
-                provide: _FormFieldComponentBase,
+                provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => ArdiumFileInputComponent),
             },
         ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdFileInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdFileInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdFileInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "idleTemplate", first: true, predicate: ArdiumFileInputIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileInputDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileInputUploadedContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "folderIconTemplate", first: true, predicate: ArdiumFileInputFolderIconTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  class=\"ard-file-input-form-field-frame\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (drop)=\"onDrop($event)\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n>\r\n  <div\r\n    class=\"ard-file-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <div class=\"ard-file-input__value\">\r\n        @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n        } @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        />\r\n        } @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (shouldShowClearButton) {\r\n    <ard-clear-button\r\n      #focusableElement\r\n      [title]=\"clearButtonTitle()\"\r\n      (mouseup)=\"onClearButtonClick($event)\"\r\n    />\r\n    } @if (!shouldBeBlocked) {\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-browse-button\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (click)=\"openBrowseDialog()\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-icon>folder</ard-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-input__input\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [attr.id]=\"htmlId()\"\r\n  [accept]=\"acceptString()\"\r\n  (change)=\"onInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <span class=\"ard-file-input__idle\">\r\n    @if (multiple()) {\r\n    <span>Upload a file</span>\r\n    } @else {\r\n    <span>Upload files</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n  @if (multiple()) {\r\n  <span class=\"ard-file-input__dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  } @else {\r\n  <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n  }\r\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n  let-files=\"files\"\r\n>\r\n  <div class=\"ard-file-input__uploaded\">\r\n    @if (amount === 1) {\r\n    <div class=\"ard-file-input__full-file-name\">\r\n      <span class=\"ard-file-input__file-name\">\r\n        {{ files?.[0]?.name | filename }}\r\n      </span>\r\n      <span class=\"ard-file-input__file-ext\">\r\n        {{ files?.[0]?.name | fileext:true }}\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <span class=\"ard-file-input__uploaded-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: _ClearButtonComponent, selector: "ard-clear-button" }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "pipe", type: i5.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i5.ArdiumFileNamePipe, name: "filename" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -5467,7 +5469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             multi: true,
                         },
                         {
-                            provide: _FormFieldComponentBase,
+                            provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: forwardRef(() => ArdiumFileInputComponent),
                         },
                     ], template: "<ard-form-field-frame\r\n  class=\"ard-file-input-form-field-frame\"\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (drop)=\"onDrop($event)\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n>\r\n  <div\r\n    class=\"ard-file-input\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder) {\r\n      <ng-template #defaultPlaceholderTemplate>\r\n        <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\" />\r\n      }\r\n\r\n      <div class=\"ard-file-input__value\">\r\n        @if (currentViewState() === 'idle') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n          [ngTemplateOutletContext]=\"getIdleContext()\"\r\n        />\r\n        } @if (currentViewState() === 'dragover') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n          [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n        />\r\n        } @if (currentViewState() === 'uploaded') {\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n          [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n        />\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    @if (shouldShowClearButton) {\r\n    <ard-clear-button\r\n      #focusableElement\r\n      [title]=\"clearButtonTitle()\"\r\n      (mouseup)=\"onClearButtonClick($event)\"\r\n    />\r\n    } @if (!shouldBeBlocked) {\r\n    <button\r\n      #focusableElement\r\n      type=\"button\"\r\n      class=\"ard-browse-button\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      (click)=\"openBrowseDialog()\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <ard-icon>folder</ard-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-input__input\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [attr.id]=\"htmlId()\"\r\n  [accept]=\"acceptString()\"\r\n  (change)=\"onInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <span class=\"ard-file-input__idle\">\r\n    @if (multiple()) {\r\n    <span>Upload a file</span>\r\n    } @else {\r\n    <span>Upload files</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-input__dragover-text\">Drop </span>\r\n  @if (multiple()) {\r\n  <span class=\"ard-file-input__dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  } @else {\r\n  <span class=\"ard-file-input__dragover-amount\"> a file </span>\r\n  }\r\n  <span class=\"ard-file-input__dragover-text\"> here to upload </span>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n  let-files=\"files\"\r\n>\r\n  <div class=\"ard-file-input__uploaded\">\r\n    @if (amount === 1) {\r\n    <div class=\"ard-file-input__full-file-name\">\r\n      <span class=\"ard-file-input__file-name\">\r\n        {{ files?.[0]?.name | filename }}\r\n      </span>\r\n      <span class=\"ard-file-input__file-ext\">\r\n        {{ files?.[0]?.name | fileext:true }}\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <span class=\"ard-file-input__uploaded-amount\">\r\n      {{ amount }}\r\n      <ng-container [ngPlural]=\"amount\">\r\n        <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n        <ng-template ngPluralCase=\"other\">files</ng-template>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"ard-file-input__uploaded-text\"> uploaded.</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-input__input{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"] }]
@@ -5774,7 +5776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
 const _calendarDefaults = {
-    ..._ngModelComponentDefaults,
+    ..._formFieldComponentDefaults,
     color: ComponentColor.Primary,
     activeView: ArdCalendarView.Days,
     activeYear: new Date().getFullYear(),
@@ -6804,7 +6806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 const TODAY = new Date();
-class ArdiumCalendarComponent extends _NgModelComponentBase {
+class ArdiumCalendarComponent extends _FormFieldComponentBase {
     constructor(defaults) {
         super(defaults);
         //! appearance
@@ -6842,8 +6844,12 @@ class ArdiumCalendarComponent extends _NgModelComponentBase {
         this.selectedDate = model(null, { alias: 'selected' });
         this.yearSelect = output();
         this.monthSelect = output();
-        this.min = input(this._DEFAULTS.min, { transform: v => v === null ? null : coerceDateProperty(v, this._DEFAULTS.min) });
-        this.max = input(this._DEFAULTS.max, { transform: v => v === null ? null : coerceDateProperty(v, this._DEFAULTS.max) });
+        this.min = input(this._DEFAULTS.min, {
+            transform: v => (v === null ? null : coerceDateProperty(v, this._DEFAULTS.min)),
+        });
+        this.max = input(this._DEFAULTS.max, {
+            transform: v => (v === null ? null : coerceDateProperty(v, this._DEFAULTS.max)),
+        });
         this.filter = input(this._DEFAULTS.filter);
         this.isDayFilteredOut = computed(() => {
             return (day, month = this.activeMonth(), year = this.activeYear()) => {
@@ -7216,6 +7222,10 @@ class ArdiumCalendarComponent extends _NgModelComponentBase {
                 useExisting: forwardRef(() => ArdiumCalendarComponent),
                 multi: true,
             },
+            {
+                provide: ARD_FORM_FIELD_CONTROL,
+                useExisting: ArdiumCalendarComponent,
+            },
         ], queries: [{ propertyName: "templateRepository", first: true, predicate: _CalendarTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "yearsViewHeaderTemplate", first: true, predicate: ArdCalendarYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthsViewHeaderTemplate", first: true, predicate: ArdCalendarMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "daysViewHeaderTemplate", first: true, predicate: ArdCalendarDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "floatingMonthTemplate", first: true, predicate: ArdCalendarFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearTemplate", first: true, predicate: ArdCalendarYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthTemplate", first: true, predicate: ArdCalendarMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dayTemplate", first: true, predicate: ArdCalendarDayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "weekdayTemplate", first: true, predicate: ArdCalendarWeekdayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) {\r\n    @case ('days') {\r\n      <ard-days-view\r\n        [tabIndex]=\"tabIndex()\"\r\n        [readOnly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [autoFocus]=\"autoFocus()\"\r\n        [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n        [activeMonth]=\"activeMonth()\"\r\n        [activeYear]=\"activeYear()\"\r\n        [selectedDate]=\"selectedDate()\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [highlightedDay]=\"highlightedDay()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n        [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n        [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n        [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n        [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n        (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n        (triggerChangeMonth)=\"changeMonth($event)\"\r\n        (triggerChangeYear)=\"changeYear($event)\"\r\n        (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n        (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n        (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n        (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n        (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n        (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n        (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n        (triggerSelectDay)=\"selectDay($event)\"\r\n      />\r\n    }\r\n    @case ('months') {\r\n      <ard-months-view\r\n        [tabIndex]=\"tabIndex()\"\r\n        [readOnly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [autoFocus]=\"autoFocus()\"\r\n        [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n        [color]=\"color()\"\r\n        [activeMonth]=\"activeMonth()\"\r\n        [activeYear]=\"activeYear()\"\r\n        [selectedDate]=\"selectedDate()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [highlightedMonth]=\"highlightedMonth()\"\r\n        [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n        [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n        (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n        (triggeChangeYear)=\"changeYear($event)\"\r\n        (triggerSelectMonth)=\"selectMonth($event)\"\r\n        (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n        (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n        (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n        (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n        (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n        (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n        (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n      />\r\n    }\r\n    @case ('years') {\r\n      <ard-years-view\r\n        [tabIndex]=\"tabIndex()\"\r\n        [readOnly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [autoFocus]=\"autoFocus()\"\r\n        [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n        [highlightedYear]=\"highlightedYear()\"\r\n        [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n        [activeYear]=\"activeYear()\"\r\n        [selectedDate]=\"selectedDate()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n        [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n        (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n        (triggerSelectYear)=\"selectYear($event)\"\r\n        (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n        (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n        (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n        (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n        (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n        (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n        (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n        (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n      />\r\n    }\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DaysViewComponent, selector: "ard-days-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "activeYear", "activeMonth", "selectedDate", "min", "max", "isDayFilteredOut", "highlightedDay", "firstWeekday", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate"], outputs: ["triggerOpenYearsView", "triggerOpenMonthsView", "triggerSelectDay", "triggerChangeMonth", "triggerChangeYear", "triggerHighlightDay", "triggerHighlightNextDay", "triggerHighlightPreviousDay", "triggerHighlightFirstDay", "triggerHighlightLastDay", "triggerHighlightSameDayPreviousPage", "triggerHighlightSameDayNextPage", "focus", "blur"] }, { kind: "component", type: MonthsViewComponent, selector: "ard-months-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "color", "activeYear", "activeMonth", "selectedDate", "min", "max", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate"], outputs: ["triggerOpenYearsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectMonth", "triggeChangeYear", "triggerHighlightMonth", "triggerHighlightNextMonth", "triggerHighlightPreviousMonth", "triggerHighlightFirstMonth", "triggerHighlightLastMonth", "triggerHighlightSameMonthPreviousPage", "triggerHighlightSameMonthNextPage"] }, { kind: "component", type: YearsViewComponent, selector: "ard-years-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "activeYear", "selectedDate", "min", "max", "currentYearRangeStart", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCalendarComponent, decorators: [{
@@ -7226,6 +7236,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ArdiumCalendarComponent),
                             multi: true,
                         },
+                        {
+                            provide: ARD_FORM_FIELD_CONTROL,
+                            useExisting: ArdiumCalendarComponent,
+                        },
                     ], template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) {\r\n    @case ('days') {\r\n      <ard-days-view\r\n        [tabIndex]=\"tabIndex()\"\r\n        [readOnly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [autoFocus]=\"autoFocus()\"\r\n        [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n        [activeMonth]=\"activeMonth()\"\r\n        [activeYear]=\"activeYear()\"\r\n        [selectedDate]=\"selectedDate()\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [highlightedDay]=\"highlightedDay()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n        [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n        [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n        [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n        [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n        (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n        (triggerChangeMonth)=\"changeMonth($event)\"\r\n        (triggerChangeYear)=\"changeYear($event)\"\r\n        (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n        (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n        (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n        (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n        (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n        (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n        (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n        (triggerSelectDay)=\"selectDay($event)\"\r\n      />\r\n    }\r\n    @case ('months') {\r\n      <ard-months-view\r\n        [tabIndex]=\"tabIndex()\"\r\n        [readOnly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [autoFocus]=\"autoFocus()\"\r\n        [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n        [color]=\"color()\"\r\n        [activeMonth]=\"activeMonth()\"\r\n        [activeYear]=\"activeYear()\"\r\n        [selectedDate]=\"selectedDate()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [highlightedMonth]=\"highlightedMonth()\"\r\n        [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n        [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n        (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n        (triggeChangeYear)=\"changeYear($event)\"\r\n        (triggerSelectMonth)=\"selectMonth($event)\"\r\n        (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n        (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n        (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n        (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n        (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n        (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n        (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n      />\r\n    }\r\n    @case ('years') {\r\n      <ard-years-view\r\n        [tabIndex]=\"tabIndex()\"\r\n        [readOnly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        [autoFocus]=\"autoFocus()\"\r\n        [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n        [highlightedYear]=\"highlightedYear()\"\r\n        [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n        [activeYear]=\"activeYear()\"\r\n        [selectedDate]=\"selectedDate()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n        [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n        (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n        (triggerSelectYear)=\"selectYear($event)\"\r\n        (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n        (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n        (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n        (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n        (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n        (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n        (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n        (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n      />\r\n    }\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -7568,7 +7582,7 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
                 multi: true,
             },
             {
-                provide: _FormFieldComponentBase,
+                provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumDateInputComponent,
             },
         ], queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdDateInputValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarIconTemplate", first: true, predicate: ArdDateInputCalendarIconTemplateDirective, descendants: true, isSignal: true }, { propertyName: "acceptButtonsTemplate", first: true, predicate: ArdDateInputAcceptButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdDateInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdDateInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, 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-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ serializeFn()(date) }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\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        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\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-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      autoFocus\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-date\r\n      >\r\n        {{ serializeFn()(date) }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n      />\r\n    </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display: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: "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: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["color", "activeView", "activeYear", "activeMonth", "firstWeekday", "multipleYearPageChangeModifier", "autoFocus", "selected", "min", "max", "filter"], outputs: ["activeViewChange", "activeYearChange", "activeMonthChange", "selectedChange", "yearSelect", "monthSelect"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -7582,7 +7596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             multi: true,
                         },
                         {
-                            provide: _FormFieldComponentBase,
+                            provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumDateInputComponent,
                         },
                     ], 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-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ serializeFn()(date) }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\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        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\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-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      autoFocus\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-date\r\n      >\r\n        {{ serializeFn()(date) }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n      />\r\n    </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
@@ -8059,7 +8073,7 @@ class ArdiumHexInputComponent extends _FormFieldComponentBase {
                 multi: true,
             },
             {
-                provide: _FormFieldComponentBase,
+                provide: ARD_FORM_FIELD_CONTROL,
                 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    @if (showHash()) {\r\n      <div class=\"ard-hash-container\">#</div>\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, $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.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 }); }
@@ -8073,7 +8087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             multi: true,
                         },
                         {
-                            provide: _FormFieldComponentBase,
+                            provide: ARD_FORM_FIELD_CONTROL,
                             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    @if (showHash()) {\r\n      <div class=\"ard-hash-container\">#</div>\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, $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"] }]
@@ -8353,7 +8367,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
                 multi: true,
             },
             {
-                provide: _FormFieldComponentBase,
+                provide: ARD_FORM_FIELD_CONTROL,
                 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    pointerEventsWhenDisabled\r\n    (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n    (mouseup)=\"onQuickChangeButtonMouseup($event)\"\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      inputmode=\"numeric\"\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    pointerEventsWhenDisabled\r\n    (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n    (mouseup)=\"onQuickChangeButtonMouseup($event)\"\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: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -8367,7 +8381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             multi: true,
                         },
                         {
-                            provide: _FormFieldComponentBase,
+                            provide: ARD_FORM_FIELD_CONTROL,
                             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    pointerEventsWhenDisabled\r\n    (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n    (mouseup)=\"onQuickChangeButtonMouseup($event)\"\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      inputmode=\"numeric\"\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    pointerEventsWhenDisabled\r\n    (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n    (mouseup)=\"onQuickChangeButtonMouseup($event)\"\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"] }]
@@ -8846,7 +8860,7 @@ class ArdiumRadioGroupComponent extends _FormFieldComponentBase {
                 multi: true,
             },
             {
-                provide: _FormFieldComponentBase,
+                provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumRadioGroupComponent,
             },
         ], queries: [{ propertyName: "_radios", predicate: ArdiumRadioComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -8872,7 +8886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             multi: true,
                         },
                         {
-                            provide: _FormFieldComponentBase,
+                            provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumRadioGroupComponent,
                         },
                     ],
@@ -9658,7 +9672,7 @@ class ArdiumSegmentComponent extends _SelectableListComponentBase {
                 multi: true,
             },
             {
-                provide: _FormFieldComponentBase,
+                provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumSegmentComponent,
             },
         ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n    <div\r\n      class=\"ard-segment-row\"\r\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n    >\r\n      @for (option of row.options; track $index) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-segment-option\"\r\n          tabindex=\"-1\"\r\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\r\n          [class.ard-option-selected]=\"option.selected()\"\r\n          [class.ard-option-highlighted]=\"option.highlighted()\"\r\n          [ariaSelected]=\"option.selected()\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <span class=\"ard-option-label\">\r\n              <ng-template #defaultOptionTemplate>\r\n                {{ option.label() }}\r\n              </ng-template>\r\n\r\n              <ng-template\r\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n              />\r\n            </span>\r\n          </div>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -9672,7 +9686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             multi: true,
                         },
                         {
-                            provide: _FormFieldComponentBase,
+                            provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumSegmentComponent,
                         },
                     ], template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n    <div\r\n      class=\"ard-segment-row\"\r\n      [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n      [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n      [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n    >\r\n      @for (option of row.options; track $index) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-segment-option\"\r\n          tabindex=\"-1\"\r\n          [class.ard-option-disabled]=\"option.disabled() || (isItemLimitReached() && !option.selected())\"\r\n          [class.ard-option-selected]=\"option.selected()\"\r\n          [class.ard-option-highlighted]=\"option.highlighted()\"\r\n          [ariaSelected]=\"option.selected()\"\r\n          (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n          (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n          (click)=\"onItemClick(option, $event)\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <span class=\"ard-option-label\">\r\n              <ng-template #defaultOptionTemplate>\r\n                {{ option.label() }}\r\n              </ng-template>\r\n\r\n              <ng-template\r\n                [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n                [ngTemplateOutletContext]=\"getOptionContext(option)\"\r\n              />\r\n            </span>\r\n          </div>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
@@ -11429,9 +11443,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+class ArdiumFormFieldNativeInputAdapterDirective {
+    constructor() {
+        this._required = input(undefined, {
+            transform: v => coerceBooleanProperty(v),
+            alias: 'required',
+        });
+        this.isSuccess = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.disabled = input(false, { transform: v => coerceBooleanProperty(v) });
+        //! form field related
+        this._injector = inject(Injector);
+        this.wasTouched = signal(false);
+        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()));
+    }
+    get required() {
+        return this._required() ?? !!this._ngControl?.control?.hasValidator(Validators.required);
+    }
+    ngOnInit() {
+        this._ngControl = this._injector.get(NgControl, null);
+        if (this._ngControl) {
+            // if (!this._ngControl.valueAccessor || (this && this instanceof (this._ngControl.valueAccessor as any).constructor)) {
+            //   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: ArdiumFormFieldNativeInputAdapterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumFormFieldNativeInputAdapterDirective, selector: "ard-form-field > input, ard-form-field > textarea, ard-form-field > select, ard-horizontal-form-field > input, ard-horizontal-form-field > textarea, ard-horizontal-form-field > select", inputs: { _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, isSuccess: { classPropertyName: "isSuccess", publicName: "isSuccess", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, _hasError: { classPropertyName: "_hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-has-error": "hasError()", "class.ard-is-success": "isSuccess()" } }, providers: [
+            {
+                provide: ARD_FORM_FIELD_CONTROL,
+                useExisting: ArdiumFormFieldNativeInputAdapterDirective,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldNativeInputAdapterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ard-form-field > input, ard-form-field > textarea, ard-form-field > select, ard-horizontal-form-field > input, ard-horizontal-form-field > textarea, ard-horizontal-form-field > select',
+                    providers: [
+                        {
+                            provide: ARD_FORM_FIELD_CONTROL,
+                            useExisting: ArdiumFormFieldNativeInputAdapterDirective,
+                        },
+                    ],
+                    host: {
+                        '[class.ard-has-error]': 'hasError()',
+                        '[class.ard-is-success]': 'isSuccess()',
+                    },
+                }]
+        }] });
+
 const _formFieldDefaults = {
     defaultHintAlign: SimpleOneAxisAlignment.Left,
     reserveHintLine: false,
+    labelRequiredText: '*',
+    labelOptionalText: '(optional)',
 };
 const ARD_FORM_FIELD_DEFAULTS = new InjectionToken('ard-form-field-defaults', {
     factory: () => ({
@@ -11471,8 +11559,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class ArdiumLabelComponent {
     constructor() {
+        this._DEFAULTS = inject(ARD_FORM_FIELD_DEFAULTS);
         this.required = input(false, { transform: v => coerceBooleanProperty(v) });
         this.optional = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.requiredText = input(this._DEFAULTS.labelRequiredText);
+        this.optionalText = input(this._DEFAULTS.labelOptionalText);
         effect(() => {
             if (this.required() && this.optional()) {
                 console.error(`ARD-NF5110: Cannot set a form field label to be both required and optional.`);
@@ -11480,35 +11571,65 @@ class ArdiumLabelComponent {
         });
     }
     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" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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 }, requiredText: { classPropertyName: "requiredText", publicName: "requiredText", isSignal: true, isRequired: false, transformFunction: null }, optionalText: { classPropertyName: "optionalText", publicName: "optionalText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-label": "true" } }, ngImport: i0, template: "<div\r\n  class=\"ard-label__text\"\r\n  [class.ard-label__required]=\"required()\"\r\n  [class.ard-label__optional]=\"optional()\"\r\n>\r\n  <ng-content />\r\n  <span class=\"ard-label__required-optional-text\">\r\n    @if (required() && !optional()) {\r\n    {{ requiredText() }}\r\n    } @else if (optional() && !required()) {\r\n    {{ optionalText() }}\r\n    }\r\n  </span>\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" }]
+            args: [{ selector: 'ard-label', host: {
+                        '[class.ard-label]': 'true',
+                    }, template: "<div\r\n  class=\"ard-label__text\"\r\n  [class.ard-label__required]=\"required()\"\r\n  [class.ard-label__optional]=\"optional()\"\r\n>\r\n  <ng-content />\r\n  <span class=\"ard-label__required-optional-text\">\r\n    @if (required() && !optional()) {\r\n    {{ requiredText() }}\r\n    } @else if (optional() && !required()) {\r\n    {{ optionalText() }}\r\n    }\r\n  </span>\r\n</div>\r\n" }]
         }], ctorParameters: () => [] });
 
-class ArdiumFormFieldComponent {
+class _FormFieldBase {
     constructor() {
         this._DEFAULTS = inject(ARD_FORM_FIELD_DEFAULTS);
         this.alignHintToLeftByDefault = this._DEFAULTS.defaultHintAlign === SimpleOneAxisAlignment.Left;
-        this.control = contentChild(_FormFieldComponentBase);
+        this.control = contentChild(ARD_FORM_FIELD_CONTROL);
+        // get controlRequired() {
+        //   const fnOrValue = this.control()?.required;
+        //   return isFunction(fnOrValue) ? fnOrValue() : fnOrValue;
+        // }
         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) });
     }
+    get controlHasError() {
+        const fnOrValue = this.control()?.hasError;
+        return isFunction(fnOrValue) ? fnOrValue() : fnOrValue;
+    }
+    get controlIsSuccess() {
+        const fnOrValue = this.control()?.isSuccess;
+        return isFunction(fnOrValue) ? fnOrValue() : fnOrValue;
+    }
+    get controlDisabled() {
+        const fnOrValue = this.control()?.disabled;
+        return isFunction(fnOrValue) ? fnOrValue() : fnOrValue;
+    }
+    get controlHtmlId() {
+        const fnOrValue = this.control()?.htmlId;
+        return isFunction(fnOrValue) ? fnOrValue() : fnOrValue;
+    }
     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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FormFieldBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: _FormFieldBase, inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: ARD_FORM_FIELD_CONTROL, 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FormFieldBase, decorators: [{
+            type: Directive
+        }] });
+
+class ArdiumFormFieldComponent extends _FormFieldBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFormFieldComponent, selector: "ard-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <label\r\n    class=\"ard-form-field__label\"\r\n    [attr.for]=\"controlHtmlId\"\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"] }]
+            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]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <label\r\n    class=\"ard-form-field__label\"\r\n    [attr.for]=\"controlHtmlId\"\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 {
@@ -11524,38 +11645,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-class ArdiumHorizontalFormFieldComponent {
-    constructor() {
-        this._DEFAULTS = inject(ARD_FORM_FIELD_DEFAULTS);
-        this.alignHintToLeftByDefault = this._DEFAULTS.defaultHintAlign === SimpleOneAxisAlignment.Left;
-        this.control = contentChild(_FormFieldComponentBase);
-        this.label = contentChild(ArdiumLabelComponent);
-        this.hints = contentChildren(ArdiumHintDirective);
-        this.errors = contentChildren(ArdiumErrorDirective);
-        this.hasAnyError = computed(() => this.errors()?.length > 0);
-        this.reserveHintLine = input(this._DEFAULTS.reserveHintLine, { transform: v => coerceBooleanProperty(v) });
-    }
-    ngOnInit() {
-        if (!this.control()) {
-            throw new Error(`ARD-FT5110: Form field component requires any control (input) to be present within the element. Found none.`);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumHorizontalFormFieldComponent, selector: "ard-horizontal-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n  [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n  [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-label\"\r\n      [attr.for]=\"control()?.htmlId()\"\r\n    >\r\n      <ng-content select=\"ard-label, [ard-label]\" />\r\n    </label>\r\n  </div>\r\n  <div class=\"ard-form-field__non-label\">\r\n    <div class=\"ard-form-field__input\">\r\n      <ng-content />\r\n    </div>\r\n    <div\r\n      class=\"ard-form-field__hints\"\r\n      [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n      [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n    >\r\n      @if (hasAnyError()) {\r\n        <div class=\"ard-form-field__error\">\r\n          <ng-content select=\"ard-error, [ard-error]\" />\r\n        </div>\r\n      } @else {\r\n        <div class=\"ard-form-field__hints-left\">\r\n          <div class=\"ard-form-field__default-hint\">\r\n            <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n          </div>\r\n          <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n        </div>\r\n        <div class=\"ard-form-field__hints-right\">\r\n          <div class=\"ard-form-field__default-hint\">\r\n            <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n          </div>\r\n          <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+class ArdiumHorizontalFormFieldComponent extends _FormFieldBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumHorizontalFormFieldComponent, selector: "ard-horizontal-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-horizontal-form-field\"\r\n  [class.ard-form-field__with-error]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-form-field__label\"\r\n      [attr.for]=\"controlHtmlId\"\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"] }]
+            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]=\"controlHasError\"\r\n  [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n  [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n  <div class=\"ard-form-field__label-container\">\r\n    <label\r\n      class=\"ard-form-field__label\"\r\n      [attr.for]=\"controlHtmlId\"\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,
+            ArdiumFormFieldNativeInputAdapterDirective,
             ArdiumLabelComponent,
             ArdiumHintComponent,
             ArdiumErrorComponent], imports: [CommonModule, ArdiumHintDirective, ArdiumErrorDirective], exports: [ArdiumFormFieldComponent,
             ArdiumHorizontalFormFieldComponent,
+            ArdiumFormFieldNativeInputAdapterDirective,
             ArdiumLabelComponent,
             ArdiumHintComponent,
             ArdiumErrorComponent] }); }
@@ -11567,6 +11675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     declarations: [
                         ArdiumFormFieldComponent,
                         ArdiumHorizontalFormFieldComponent,
+                        ArdiumFormFieldNativeInputAdapterDirective,
                         ArdiumLabelComponent,
                         ArdiumHintComponent,
                         ArdiumErrorComponent,
@@ -11575,6 +11684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     exports: [
                         ArdiumFormFieldComponent,
                         ArdiumHorizontalFormFieldComponent,
+                        ArdiumFormFieldNativeInputAdapterDirective,
                         ArdiumLabelComponent,
                         ArdiumHintComponent,
                         ArdiumErrorComponent,
@@ -14469,5 +14579,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_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_DATE_INPUT_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_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_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_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ARD_TAB_DEFAULTS, ArdAddCustomTemplateDirective, ArdCalendarDayTemplateDirective, ArdCalendarDaysViewHeaderTemplateDirective, ArdCalendarFloatingMonthTemplateDirective, ArdCalendarMonthTemplateDirective, ArdCalendarMonthsViewHeaderTemplateDirective, ArdCalendarView, ArdCalendarWeekdayTemplateDirective, ArdCalendarYearTemplateDirective, ArdCalendarYearsViewHeaderTemplateDirective, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxTemplateDirective, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputDayTemplateDirective, ArdDateInputDaysViewHeaderTemplateDirective, ArdDateInputFloatingMonthTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputMonthTemplateDirective, ArdDateInputMonthsViewHeaderTemplateDirective, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDateInputWeekdayTemplateDirective, ArdDateInputYearTemplateDirective, ArdDateInputYearsViewHeaderTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdInputSuggestionTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputFolderIconTemplateDirective, 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, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, 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, ComponentColor, DecorationElementAppearance, 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, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSimpleInputDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStateboxDefaults, provideTabDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
+export { ARD_BADGE_DEFAULTS, ARD_BUTTON_DEFAULTS, ARD_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_DATE_INPUT_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_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_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_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ARD_TAB_DEFAULTS, ArdAddCustomTemplateDirective, ArdCalendarDayTemplateDirective, ArdCalendarDaysViewHeaderTemplateDirective, ArdCalendarFloatingMonthTemplateDirective, ArdCalendarMonthTemplateDirective, ArdCalendarMonthsViewHeaderTemplateDirective, ArdCalendarView, ArdCalendarWeekdayTemplateDirective, ArdCalendarYearTemplateDirective, ArdCalendarYearsViewHeaderTemplateDirective, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxTemplateDirective, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputDayTemplateDirective, ArdDateInputDaysViewHeaderTemplateDirective, ArdDateInputFloatingMonthTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputMonthTemplateDirective, ArdDateInputMonthsViewHeaderTemplateDirective, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDateInputWeekdayTemplateDirective, ArdDateInputYearTemplateDirective, ArdDateInputYearsViewHeaderTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputLoadingTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdInputSuggestionTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSimpleInputPlaceholderTemplateDirective, ArdSimpleInputPrefixTemplateDirective, ArdSimpleInputSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputFolderIconTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumFormFieldNativeInputAdapterDirective, 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, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSimpleInputComponent, ArdiumSimpleInputModule, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, 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, ComponentColor, DecorationElementAppearance, 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, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSimpleInputDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStateboxDefaults, provideTabDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
 //# sourceMappingURL=ardium-ui-ui.mjs.map