@ardium-ui/ui 5.0.0-alpha.67 → 5.0.0-alpha.69

package/fesm2022/ardium-ui-ui.mjs

@@ -529,8 +529,7 @@ const int = (currentText, previousText, caretPos) => {
 };
 const float = (currentText, previousText, caretPos) => {
     const regexes = [
-        [/[^0-9,.-]/],
-        [/,/, '.'],
+        [/[^0-9.-]/],
         [/(.+)-/, '$1'],
         [/\.(.*)\./, '$1.'],
         [/^(-?)\./, '$10.'],
@@ -549,6 +548,12 @@ const ArdTransformer = {
     Float: float,
 };
 
+const ArdNumberInputMinMaxBehavior = {
+    AdjustOnInput: 'adjust-on-input',
+    AdjustOnBlur: 'adjust-on-blur',
+    Noop: 'noop',
+};
+
 class InputModel {
     constructor(_ardHostCmp) {
         this._ardHostCmp = _ardHostCmp;
@@ -660,13 +665,26 @@ class NumberInputModel {
         this._value.set(stringV);
         this._updateInputEl();
     }
-    updateFixedDecimalPlaces() {
-        if (!this._ardHostCmp.fixedDecimalPlaces())
+    updateOnBlur(adjustMinMax) {
+        let v = this._value();
+        if (isNull(v))
             return;
-        const maxDp = this._ardHostCmp.maxDecimalPlaces();
-        const newValue = this.numberValue()?.toFixed(maxDp) ?? null;
+        v = this._applyStandardConstraints(v, adjustMinMax ?? this._ardHostCmp.minMaxBehavior() === ArdNumberInputMinMaxBehavior.AdjustOnBlur);
+        if (this._ardHostCmp.fixedDecimalPlaces()) {
+            v = this._fixDecimalPlaces(v);
+        }
         // internal storage remains using '.'; _updateInputEl handles display
-        this.setValue(newValue);
+        // convert to number and back to string to remove any trailing decimal separator without digits and to remove leading zeros
+        this.setValue(Number(v));
+    }
+    _fixDecimalPlaces(v) {
+        const maxDp = this._ardHostCmp.maxDecimalPlaces();
+        if (!isDefined(maxDp) || maxDp === Infinity)
+            return v;
+        const num = Number(v);
+        if (isNaN(num))
+            return v;
+        return num.toFixed(maxDp);
     }
     _updateInputEl() {
         let stringV = this.stringValue();
@@ -682,28 +700,20 @@ class NumberInputModel {
         this.caretPos = caretPos;
     }
     //! write value handlers
-    writeValue(v) {
+    writeValue(v, applyConstraints) {
         if (!isNumber(v) && !isAnyString(v) && !isNull(v)) {
             //warn when using non-string/non-null value
             console.warn(new Error(`ARD-WA0070: Trying to set <ard-number-input>'s value to "${typeof v}", expected string, number, or null.`));
             //normalize the value
             v = v?.toString?.() ?? String(v);
         }
-        v = String(v);
-        // convert custom decimal separator to '.' for internal storage
-        const sep = this._ardHostCmp.decimalSeparator();
-        if (sep && sep !== '.') {
-            v = v.replaceAll(sep, '.');
-        }
-        return this._writeValue(v);
+        v = v === null ? null : String(v);
+        return this._writeValue(v, applyConstraints);
     }
-    _writeValue(v) {
+    _writeValue(v, applyConstraints) {
         //constraints
-        if (v) {
-            v = this._removeDecimalPlaces(v);
-            v = this._applyNumberConstraint(v);
-            v = this._applyMaxDecimalPlaces(v);
-            v = this._applyMinMaxConstraints(v);
+        if (applyConstraints) {
+            v = this._applyStandardConstraints(v, this._ardHostCmp.minMaxBehavior() === ArdNumberInputMinMaxBehavior.AdjustOnInput);
         }
         if (v === '')
             v = null;
@@ -713,7 +723,7 @@ class NumberInputModel {
         return oldVal !== v;
     }
     rewriteValueAfterHostUpdate() {
-        this._writeValue(this._value());
+        this._writeValue(this._value(), false);
     }
     //! input element methods
     get caretPos() {
@@ -724,32 +734,38 @@ class NumberInputModel {
         el?.setSelectionRange(pos, pos);
     }
     //! constraints
+    _applyStandardConstraints(v, adjustMinMax) {
+        if (!v && v !== 0)
+            return '';
+        v = this._standardizeSeparator(v);
+        v = this._removeDecimalPlaces(v);
+        v = this._applyNumberConstraint(v);
+        v = this._applyMaxDecimalPlaces(v);
+        if (adjustMinMax) {
+            v = this._applyMinMaxConstraints(v);
+        }
+        return v;
+    }
+    _standardizeSeparator(v) {
+        if (!v && v !== 0)
+            return '';
+        const sep = this._ardHostCmp.decimalSeparator();
+        if (!sep || sep === '.')
+            return String(v);
+        return String(v).replaceAll(sep, '.');
+    }
     _removeDecimalPlaces(v) {
         if (!v && v !== 0)
             return '';
         if (this._ardHostCmp.allowFloat())
             return v;
-        // normalize separator when parsing
-        let str = String(v);
-        const sep = this._ardHostCmp.decimalSeparator();
-        if (sep && sep !== '.') {
-            str = str.replaceAll(sep, '.');
-        }
-        const num = Number(str);
-        if (!isNaN(num))
-            return Math.round(num);
-        return v;
+        return String(v).split('.')[0];
     }
     _applyNumberConstraint(v) {
         if (!v && v !== 0)
             return '';
-        const sep = this._ardHostCmp.decimalSeparator();
-        let input = String(v);
-        let prev = this.stringValue();
-        if (sep && sep !== '.') {
-            input = input.replaceAll(sep, '.');
-            prev = prev.replaceAll(sep, '.');
-        }
+        const input = String(v);
+        const prev = this.stringValue();
         const transformerFn = this._ardHostCmp.allowFloat() ? ArdTransformer.Float : ArdTransformer.Integer;
         const { text, caretPos } = transformerFn(input, prev, this.caretPos);
         this.caretPos = caretPos;
@@ -2498,6 +2514,11 @@ class ArdiumPasswordInputComponent extends _FormFieldComponentBase {
             this._hideTimeout = setTimeout(() => this.revealed.set(false), timeout);
         }
     }
+    onMouseUp() {
+        if (this.holdToReveal() && this.revealed()) {
+            this.revealed.set(false);
+        }
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
         if (this._hideTimeout) {
@@ -2569,7 +2590,7 @@ class ArdiumPasswordInputComponent extends _FormFieldComponentBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumPasswordInputComponent, deps: [{ token: ARD_PASSWORD_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumPasswordInputComponent, isStandalone: false, selector: "ard-password-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, revealable: { classPropertyName: "revealable", publicName: "revealable", isSignal: true, isRequired: false, transformFunction: null }, holdToReveal: { classPropertyName: "holdToReveal", publicName: "holdToReveal", isSignal: true, isRequired: false, transformFunction: null }, autoHideTimeoutMs: { classPropertyName: "autoHideTimeoutMs", publicName: "autoHideTimeoutMs", isSignal: true, isRequired: false, transformFunction: null }, revealed: { classPropertyName: "revealed", publicName: "revealed", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { revealed: "revealedChange", value: "valueChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumPasswordInputComponent, isStandalone: false, selector: "ard-password-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, revealable: { classPropertyName: "revealable", publicName: "revealable", isSignal: true, isRequired: false, transformFunction: null }, holdToReveal: { classPropertyName: "holdToReveal", publicName: "holdToReveal", isSignal: true, isRequired: false, transformFunction: null }, autoHideTimeoutMs: { classPropertyName: "autoHideTimeoutMs", publicName: "autoHideTimeoutMs", isSignal: true, isRequired: false, transformFunction: null }, revealed: { classPropertyName: "revealed", publicName: "revealed", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { revealed: "revealedChange", value: "valueChange" }, host: { listeners: { "document:mouseup": "onMouseUp()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumPasswordInputComponent),
@@ -2579,7 +2600,7 @@ class ArdiumPasswordInputComponent extends _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  [readonly]=\"readonly()\"\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 }); }
+        ], 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  [readonly]=\"readonly()\"\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      >\r\n        <ng-template\r\n          #defaultRevealTemplate\r\n          let-revealed\r\n        >\r\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n        />\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumPasswordInputComponent, decorators: [{
             type: Component,
@@ -2593,11 +2614,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             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  [readonly]=\"readonly()\"\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" }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\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      >\r\n        <ng-template\r\n          #defaultRevealTemplate\r\n          let-revealed\r\n        >\r\n          <ard-icon [icon]=\"revealed ? 'visibility' : 'visibility_off'\"></ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"revealTemplate()?.template || defaultRevealTemplate\"\r\n          [ngTemplateOutletContext]=\"revealButtonContext()\"\r\n        />\r\n      </button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_PASSWORD_INPUT_DEFAULTS]
-                }] }] });
+                }] }], propDecorators: { onMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup']
+            }] } });
 
 class ArdiumIconModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -8667,7 +8691,7 @@ class ArdiumDateInputComponent extends _AbstractDateInput {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumDateInputComponent,
             },
-        ], queries: [{ 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 }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\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    [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\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          {{ 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      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"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-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { 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 }); }
+        ], queries: [{ 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 }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\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    [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\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          {{ 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      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"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-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .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: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateInputComponent, decorators: [{
             type: Component,
@@ -8681,7 +8705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             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  [readonly]=\"readonly()\"\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    [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\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          {{ 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      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"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-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\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    [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\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          {{ 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      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"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-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DATE_INPUT_DEFAULTS]
@@ -9012,7 +9036,7 @@ class ArdiumDateRangeInputComponent extends _AbstractDateInput {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumDateRangeInputComponent,
             },
-        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateRangeInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateRangeInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateRangeInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateRangeInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateRangeInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateRangeInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateRangeInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateRangeInputDayTemplateDirective, 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  [readonly]=\"readonly()\"\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 ard-date-range-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          {{ 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\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-range-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      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"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-range-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-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumRangeCalendarComponent, selector: "ard-range-calendar", inputs: ["value"], outputs: ["valueChange", "startSelection"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { 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 }); }
+        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateRangeInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateRangeInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateRangeInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateRangeInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateRangeInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateRangeInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateRangeInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateRangeInputDayTemplateDirective, 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  [readonly]=\"readonly()\"\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 ard-date-range-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          {{ 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\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-range-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      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"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-range-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-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .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: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumRangeCalendarComponent, selector: "ard-range-calendar", inputs: ["value"], outputs: ["valueChange", "startSelection"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateRangeInputComponent, decorators: [{
             type: Component,
@@ -9026,7 +9050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumDateRangeInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\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 ard-date-range-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          {{ 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\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-range-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      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"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-range-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-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\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 ard-date-range-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          {{ 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\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-range-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      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"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-range-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-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DATE_INPUT_DEFAULTS]
@@ -9407,7 +9431,7 @@ class ArdiumMultipageDateRangeInputComponent extends _AbstractDateInput {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumMultipageDateRangeInputComponent,
             },
-        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdMultipageDateRangeInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdMultipageDateRangeInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdMultipageDateRangeInputDayTemplateDirective, 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  [readonly]=\"readonly()\"\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 ard-multipage-date-range-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          {{ 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\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    <div class=\"ard-date-input__multipage-wrapper\">\r\n      @for (calendarData of calendarDataArray(); track $index) {\r\n      <ard-range-calendar\r\n        class=\"ard-date-input__calendar\"\r\n        [activeMonth]=\"calendarData.activeDate.getMonth()\"\r\n        [activeYear]=\"calendarData.activeDate.getFullYear()\"\r\n        (activePageChange)=\"onActivePageChange($event, $index)\"\r\n        (highlightDay)=\"onHighlightDate($event)\"\r\n        [highlightedDay]=\"calendarData.highlightedDay\"\r\n        [(activeView)]=\"activeView\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [UTC]=\"_UTCAfterInit()\"\r\n        [autoFocus]=\"$index === 0\"\r\n        hideFloatingMonth\r\n        staticHeight\r\n        [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n        [color]=\"color()\"\r\n        [disabled]=\"disabled() || calendarDisabled()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [value]=\"value()\"\r\n        [multiCalendarLocation]=\"calendarData.location\"\r\n        [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n        [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n        [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n        [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n        [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n        [yearDateFormat]=\"calendarYearDateFormat()\"\r\n        [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n        [dayDateFormat]=\"calendarDayDateFormat()\"\r\n        (valueChange)=\"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() ?? { template: defaultDaysViewHeaderTemplate }\"\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-range-calendar>\r\n      }\r\n    </div>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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\r\n<ng-template\r\n  #defaultDaysViewHeaderTemplate\r\n  let-currDate\r\n  let-nextMonth=\"nextMonth\"\r\n  let-prevMonth=\"prevMonth\"\r\n  let-canGoToNextMonth=\"canGoToNextPage\"\r\n  let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n  let-hideNextPageButton=\"hideNextPageButton\"\r\n  let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n>\r\n  <div class=\"ard-calendar__calendar-header\">\r\n    <div>\r\n      @if (!hidePreviousPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"prevMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToPreviousMonth\"\r\n      >\r\n        <ard-icon>chevron_left</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n    <span class=\"ard-calendar__header-button\">\r\n      {{ currDate | date : calendarDaysViewHeaderDateFormat() | uppercase }}\r\n    </span>\r\n    <div>\r\n      @if (!hideNextPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"nextMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToNextMonth\"\r\n      >\r\n        <ard-icon>chevron_right</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\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: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumRangeCalendarComponent, selector: "ard-range-calendar", inputs: ["value"], outputs: ["valueChange", "startSelection"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { 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"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdMultipageDateRangeInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdMultipageDateRangeInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdMultipageDateRangeInputDayTemplateDirective, 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  [readonly]=\"readonly()\"\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 ard-multipage-date-range-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          {{ 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\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    <div class=\"ard-date-input__multipage-wrapper\">\r\n      @for (calendarData of calendarDataArray(); track $index) {\r\n      <ard-range-calendar\r\n        class=\"ard-date-input__calendar\"\r\n        [activeMonth]=\"calendarData.activeDate.getMonth()\"\r\n        [activeYear]=\"calendarData.activeDate.getFullYear()\"\r\n        (activePageChange)=\"onActivePageChange($event, $index)\"\r\n        (highlightDay)=\"onHighlightDate($event)\"\r\n        [highlightedDay]=\"calendarData.highlightedDay\"\r\n        [(activeView)]=\"activeView\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [UTC]=\"_UTCAfterInit()\"\r\n        [autoFocus]=\"$index === 0\"\r\n        hideFloatingMonth\r\n        staticHeight\r\n        [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n        [color]=\"color()\"\r\n        [disabled]=\"disabled() || calendarDisabled()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [value]=\"value()\"\r\n        [multiCalendarLocation]=\"calendarData.location\"\r\n        [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n        [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n        [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n        [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n        [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n        [yearDateFormat]=\"calendarYearDateFormat()\"\r\n        [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n        [dayDateFormat]=\"calendarDayDateFormat()\"\r\n        (valueChange)=\"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() ?? { template: defaultDaysViewHeaderTemplate }\"\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-range-calendar>\r\n      }\r\n    </div>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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\r\n<ng-template\r\n  #defaultDaysViewHeaderTemplate\r\n  let-currDate\r\n  let-nextMonth=\"nextMonth\"\r\n  let-prevMonth=\"prevMonth\"\r\n  let-canGoToNextMonth=\"canGoToNextPage\"\r\n  let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n  let-hideNextPageButton=\"hideNextPageButton\"\r\n  let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n>\r\n  <div class=\"ard-calendar__calendar-header\">\r\n    <div>\r\n      @if (!hidePreviousPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"prevMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToPreviousMonth\"\r\n      >\r\n        <ard-icon>chevron_left</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n    <span class=\"ard-calendar__header-button\">\r\n      {{ currDate | date : calendarDaysViewHeaderDateFormat() | uppercase }}\r\n    </span>\r\n    <div>\r\n      @if (!hideNextPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"nextMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToNextMonth\"\r\n      >\r\n        <ard-icon>chevron_right</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .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: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumRangeCalendarComponent, selector: "ard-range-calendar", inputs: ["value"], outputs: ["valueChange", "startSelection"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { 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"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumMultipageDateRangeInputComponent, decorators: [{
             type: Component,
@@ -9421,7 +9445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumMultipageDateRangeInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\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 ard-multipage-date-range-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          {{ 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\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    <div class=\"ard-date-input__multipage-wrapper\">\r\n      @for (calendarData of calendarDataArray(); track $index) {\r\n      <ard-range-calendar\r\n        class=\"ard-date-input__calendar\"\r\n        [activeMonth]=\"calendarData.activeDate.getMonth()\"\r\n        [activeYear]=\"calendarData.activeDate.getFullYear()\"\r\n        (activePageChange)=\"onActivePageChange($event, $index)\"\r\n        (highlightDay)=\"onHighlightDate($event)\"\r\n        [highlightedDay]=\"calendarData.highlightedDay\"\r\n        [(activeView)]=\"activeView\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [UTC]=\"_UTCAfterInit()\"\r\n        [autoFocus]=\"$index === 0\"\r\n        hideFloatingMonth\r\n        staticHeight\r\n        [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n        [color]=\"color()\"\r\n        [disabled]=\"disabled() || calendarDisabled()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [value]=\"value()\"\r\n        [multiCalendarLocation]=\"calendarData.location\"\r\n        [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n        [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n        [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n        [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n        [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n        [yearDateFormat]=\"calendarYearDateFormat()\"\r\n        [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n        [dayDateFormat]=\"calendarDayDateFormat()\"\r\n        (valueChange)=\"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() ?? { template: defaultDaysViewHeaderTemplate }\"\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-range-calendar>\r\n      }\r\n    </div>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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\r\n<ng-template\r\n  #defaultDaysViewHeaderTemplate\r\n  let-currDate\r\n  let-nextMonth=\"nextMonth\"\r\n  let-prevMonth=\"prevMonth\"\r\n  let-canGoToNextMonth=\"canGoToNextPage\"\r\n  let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n  let-hideNextPageButton=\"hideNextPageButton\"\r\n  let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n>\r\n  <div class=\"ard-calendar__calendar-header\">\r\n    <div>\r\n      @if (!hidePreviousPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"prevMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToPreviousMonth\"\r\n      >\r\n        <ard-icon>chevron_left</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n    <span class=\"ard-calendar__header-button\">\r\n      {{ currDate | date : calendarDaysViewHeaderDateFormat() | uppercase }}\r\n    </span>\r\n    <div>\r\n      @if (!hideNextPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"nextMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToNextMonth\"\r\n      >\r\n        <ard-icon>chevron_right</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\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"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\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 ard-multipage-date-range-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          {{ 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\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    <div class=\"ard-date-input__multipage-wrapper\">\r\n      @for (calendarData of calendarDataArray(); track $index) {\r\n      <ard-range-calendar\r\n        class=\"ard-date-input__calendar\"\r\n        [activeMonth]=\"calendarData.activeDate.getMonth()\"\r\n        [activeYear]=\"calendarData.activeDate.getFullYear()\"\r\n        (activePageChange)=\"onActivePageChange($event, $index)\"\r\n        (highlightDay)=\"onHighlightDate($event)\"\r\n        [highlightedDay]=\"calendarData.highlightedDay\"\r\n        [(activeView)]=\"activeView\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [UTC]=\"_UTCAfterInit()\"\r\n        [autoFocus]=\"$index === 0\"\r\n        hideFloatingMonth\r\n        staticHeight\r\n        [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n        [color]=\"color()\"\r\n        [disabled]=\"disabled() || calendarDisabled()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [value]=\"value()\"\r\n        [multiCalendarLocation]=\"calendarData.location\"\r\n        [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n        [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n        [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n        [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n        [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n        [yearDateFormat]=\"calendarYearDateFormat()\"\r\n        [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n        [dayDateFormat]=\"calendarDayDateFormat()\"\r\n        (valueChange)=\"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() ?? { template: defaultDaysViewHeaderTemplate }\"\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-range-calendar>\r\n      }\r\n    </div>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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\r\n<ng-template\r\n  #defaultDaysViewHeaderTemplate\r\n  let-currDate\r\n  let-nextMonth=\"nextMonth\"\r\n  let-prevMonth=\"prevMonth\"\r\n  let-canGoToNextMonth=\"canGoToNextPage\"\r\n  let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n  let-hideNextPageButton=\"hideNextPageButton\"\r\n  let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n>\r\n  <div class=\"ard-calendar__calendar-header\">\r\n    <div>\r\n      @if (!hidePreviousPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"prevMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToPreviousMonth\"\r\n      >\r\n        <ard-icon>chevron_left</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n    <span class=\"ard-calendar__header-button\">\r\n      {{ currDate | date : calendarDaysViewHeaderDateFormat() | uppercase }}\r\n    </span>\r\n    <div>\r\n      @if (!hideNextPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"nextMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToNextMonth\"\r\n      >\r\n        <ard-icon>chevron_right</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DATE_INPUT_DEFAULTS]
@@ -9833,7 +9857,7 @@ class ArdiumHexInputComponent extends _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  [readonly]=\"readonly()\"\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        [maxLength]=\"maxDigitsAsInt()\"\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 }); }
+        ], 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  [readonly]=\"readonly()\"\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        [maxLength]=\"maxDigitsAsInt()\"\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-placeholder{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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHexInputComponent, decorators: [{
             type: Component,
@@ -9847,7 +9871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             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  [readonly]=\"readonly()\"\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        [maxLength]=\"maxDigitsAsInt()\"\r\n        (input)=\"onInput(textInput.value, $event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (shouldShowClearButton()) {\r\n      <ard-clear-button\r\n        [title]=\"clearButtonTitle()\"\r\n        (click)=\"onClearButtonClick($event)\"\r\n      />\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n", styles: [".ard-input-container{position:relative}.ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [readonly]=\"readonly()\"\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        [maxLength]=\"maxDigitsAsInt()\"\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-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_HEX_INPUT_DEFAULTS]
@@ -9895,6 +9919,7 @@ const _numberInputDefaults = {
     inputAttrs: {},
     min: 0,
     max: Infinity,
+    minMaxBehavior: ArdNumberInputMinMaxBehavior.AdjustOnBlur,
     maxDecimalPlaces: Infinity,
     fixedDecimalPlaces: false,
     decimalSeparator: '.',
@@ -10003,6 +10028,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
         //! min/max and number type
         this.min = input(this._DEFAULTS.min, { transform: v => coerceNumberProperty(v, this._DEFAULTS.min) });
         this.max = input(this._DEFAULTS.max, { transform: v => coerceNumberProperty(v, this._DEFAULTS.max) });
+        this.minMaxBehavior = input(this._DEFAULTS.minMaxBehavior);
         this.maxDecimalPlaces = input(this._DEFAULTS.maxDecimalPlaces, {
             transform: v => {
                 const newValue = coerceNumberProperty(v, this._DEFAULTS.maxDecimalPlaces);
@@ -10078,10 +10104,10 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
     }
     //! control value accessor's write value implementation
     writeValue(v) {
-        this.inputModel.writeValue(v);
+        this.inputModel.writeValue(v, false);
         if (this.isFocused())
             return;
-        this.inputModel.updateFixedDecimalPlaces();
+        this.inputModel.updateOnBlur(true);
     }
     set value(v) {
         if (typeof v === 'number')
@@ -10130,7 +10156,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
     }
     //! event handlers
     onInput(newVal) {
-        const valueHasChanged = this.inputModel.writeValue(newVal);
+        const valueHasChanged = this.inputModel.writeValue(newVal, true);
         if (!valueHasChanged)
             return;
         this._emitInput();
@@ -10145,7 +10171,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
     }
     onBlurMaster(event) {
         this.onBlur(event);
-        this.inputModel.updateFixedDecimalPlaces();
+        this.inputModel.updateOnBlur();
     }
     //change
     onChange(event) {
@@ -10195,7 +10221,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumNumberInputComponent, deps: [{ token: ARD_NUMBER_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumNumberInputComponent, isStandalone: false, selector: "ard-number-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, alignText: { classPropertyName: "alignText", publicName: "alignText", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, maxDecimalPlaces: { classPropertyName: "maxDecimalPlaces", publicName: "maxDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, fixedDecimalPlaces: { classPropertyName: "fixedDecimalPlaces", publicName: "fixedDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, decimalSeparator: { classPropertyName: "decimalSeparator", publicName: "decimalSeparator", isSignal: true, isRequired: false, transformFunction: null }, allowFloat: { classPropertyName: "allowFloat", publicName: "allowFloat", isSignal: true, isRequired: false, transformFunction: null }, noButtons: { classPropertyName: "noButtons", publicName: "noButtons", isSignal: true, isRequired: false, transformFunction: null }, keepFocusOnQuickChangeButton: { classPropertyName: "keepFocusOnQuickChangeButton", publicName: "keepFocusOnQuickChangeButton", isSignal: true, isRequired: false, transformFunction: null }, stepSize: { classPropertyName: "stepSize", publicName: "stepSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear", quickChangeEvent: "quickChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumNumberInputComponent, isStandalone: false, selector: "ard-number-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, alignText: { classPropertyName: "alignText", publicName: "alignText", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minMaxBehavior: { classPropertyName: "minMaxBehavior", publicName: "minMaxBehavior", isSignal: true, isRequired: false, transformFunction: null }, maxDecimalPlaces: { classPropertyName: "maxDecimalPlaces", publicName: "maxDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, fixedDecimalPlaces: { classPropertyName: "fixedDecimalPlaces", publicName: "fixedDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, decimalSeparator: { classPropertyName: "decimalSeparator", publicName: "decimalSeparator", isSignal: true, isRequired: false, transformFunction: null }, allowFloat: { classPropertyName: "allowFloat", publicName: "allowFloat", isSignal: true, isRequired: false, transformFunction: null }, noButtons: { classPropertyName: "noButtons", publicName: "noButtons", isSignal: true, isRequired: false, transformFunction: null }, keepFocusOnQuickChangeButton: { classPropertyName: "keepFocusOnQuickChangeButton", publicName: "keepFocusOnQuickChangeButton", isSignal: true, isRequired: false, transformFunction: null }, stepSize: { classPropertyName: "stepSize", publicName: "stepSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputEvent: "input", changeEvent: "change", clearEvent: "clear", quickChangeEvent: "quickChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumNumberInputComponent),
@@ -10205,7 +10231,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumNumberInputComponent,
             },
-        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdNumberInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdNumberInputSuffixTemplateDirective, 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      (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-input-container\">\r\n    @if (prefixTemplate()) {\r\n      <div class=\"ard-number-input-prefix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\r\n    }\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    @if (suffixTemplate()) {\r\n      <div class=\"ard-number-input-suffix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\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      (ardHold)=\"canIncrement() && onQuickChangeButtonClick(1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      +\r\n    </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ArdiumHoldDirective, selector: "[ardHold]", inputs: ["ardHoldDisabled", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdNumberInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdNumberInputSuffixTemplateDirective, 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      (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-number-input-wrapper\">\r\n    @if (prefixTemplate()) {\r\n      <div class=\"ard-number-input-prefix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\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 (suffixTemplate()) {\r\n      <div class=\"ard-number-input-suffix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\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      (ardHold)=\"canIncrement() && onQuickChangeButtonClick(1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      +\r\n    </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input{text-align:left}.ard-text-align-left .ard-placeholder{justify-content:flex-start}.ard-text-align-middle input{text-align:center}.ard-text-align-middle .ard-placeholder{justify-content:center}.ard-text-align-right input{text-align:right}.ard-text-align-right .ard-placeholder{justify-content:flex-end}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ArdiumHoldDirective, selector: "[ardHold]", inputs: ["ardHoldDisabled", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumNumberInputComponent, decorators: [{
             type: Component,
@@ -10219,7 +10245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             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      (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-input-container\">\r\n    @if (prefixTemplate()) {\r\n      <div class=\"ard-number-input-prefix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\r\n    }\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    @if (suffixTemplate()) {\r\n      <div class=\"ard-number-input-suffix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\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      (ardHold)=\"canIncrement() && onQuickChangeButtonClick(1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      +\r\n    </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"] }]
+                    ], template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button decrement\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canDecrement()\"\r\n      [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n      pointerEventsWhenDisabled\r\n      (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-number-input-wrapper\">\r\n    @if (prefixTemplate()) {\r\n      <div class=\"ard-number-input-prefix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\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 (suffixTemplate()) {\r\n      <div class=\"ard-number-input-suffix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\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      (ardHold)=\"canIncrement() && onQuickChangeButtonClick(1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      +\r\n    </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input{text-align:left}.ard-text-align-left .ard-placeholder{justify-content:flex-start}.ard-text-align-middle input{text-align:center}.ard-text-align-middle .ard-placeholder{justify-content:center}.ard-text-align-right input{text-align:right}.ard-text-align-right .ard-placeholder{justify-content:flex-end}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_NUMBER_INPUT_DEFAULTS]