@ardium-ui/ui 5.0.0-alpha.36 → 5.0.0-alpha.37

package/fesm2022/ardium-ui-ui.mjs

@@ -2,7 +2,7 @@ import 'first-last';
 import { Overlay, ScrollStrategyOptions, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { signal, computed, InjectionToken, input, Directive, Input, HostBinding, output, ViewChildren, inject, Injector, runInInjectionContext, viewChild, contentChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, ViewContainerRef, TemplateRef, forwardRef, HostListener, NgModule, effect, viewChildren, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, linkedSignal, contentChildren, Renderer2, untracked, Injectable } from '@angular/core';
+import { signal, computed, InjectionToken, input, Directive, Input, HostBinding, output, ViewChildren, inject, Injector, runInInjectionContext, viewChild, contentChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, ViewContainerRef, TemplateRef, forwardRef, HostListener, NgModule, effect, viewChildren, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, Renderer2, linkedSignal, contentChildren, untracked, Injectable } from '@angular/core';
 import { NgControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i5 from '@ardium-ui/devkit';
 import { arraySignal, coerceBooleanProperty, coerceNumberProperty, coerceArrayProperty, ArdiumClickOutsideModule, ArdiumEscapeHTMLModule, FileSystemService, FileSystemMethod, ArdiumFilePipesModule, coerceDateProperty, ArdiumHoldModule } from '@ardium-ui/devkit';
@@ -5090,23 +5090,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
-class _ButtonBase extends _FocusableComponentBase {
-    constructor(defaults) {
-        super(defaults);
+class _ButtonBase {
+    constructor(_DEFAULTS) {
+        this._DEFAULTS = _DEFAULTS;
         this.wrapperClasses = input('');
         this.type = input(this._DEFAULTS.type);
+        this.ariaLabel = input('');
         //! button settings
         this.appearance = input(this._DEFAULTS.appearance);
         this.color = input(this._DEFAULTS.color);
-        this.lightColoring = input(this._DEFAULTS.lightColoring, { transform: v => coerceBooleanProperty(v) });
+        this.lightColoring = input(this._DEFAULTS.lightColoring, {
+            transform: v => coerceBooleanProperty(v),
+        });
         this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
+        this.disabled = input(this._DEFAULTS.disabled, { transform: v => coerceBooleanProperty(v) });
+        this.tabIndex = computed(() => (this.disabled() ? -1 : this._tabIndex()));
+        this._tabIndex = input(this._DEFAULTS.tabIndex, {
+            alias: 'tabIndex',
+            transform: v => coerceNumberProperty(v, 0),
+        });
         this.pointerEventsWhenDisabled = input(this._DEFAULTS.pointerEventsWhenDisabled, {
             transform: v => coerceBooleanProperty(v),
         });
-        this._DEFAULTS = defaults;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _ButtonBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: _ButtonBase, isStandalone: true, inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, lightColoring: { classPropertyName: "lightColoring", publicName: "lightColoring", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, pointerEventsWhenDisabled: { classPropertyName: "pointerEventsWhenDisabled", publicName: "pointerEventsWhenDisabled", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: _ButtonBase, isStandalone: true, inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, lightColoring: { classPropertyName: "lightColoring", publicName: "lightColoring", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _tabIndex: { classPropertyName: "_tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, pointerEventsWhenDisabled: { classPropertyName: "pointerEventsWhenDisabled", publicName: "pointerEventsWhenDisabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _ButtonBase, decorators: [{
             type: Directive
@@ -5174,7 +5182,8 @@ const FabSize = {
 };
 
 const _simpleButtonDefaults = {
-    ..._focusableComponentDefaults,
+    disabled: false,
+    tabIndex: 0,
     color: ComponentColor.Primary,
     lightColoring: false,
     compact: false,
@@ -5189,7 +5198,6 @@ const _buttonBaseDefaults = {
 const _buttonDefaults = {
     ..._buttonBaseDefaults,
     variant: ButtonVariant.Rounded,
-    alignIcon: SimpleOneAxisAlignment.Left,
     vertical: false,
 };
 const ARD_BUTTON_DEFAULTS = new InjectionToken('ard-button-defaults', {
@@ -5199,33 +5207,81 @@ function provideButtonDefaults(config) {
     return { provide: ARD_BUTTON_DEFAULTS, useValue: { ..._buttonDefaults, ...config } };
 }
 
-class ArdiumButtonComponent extends _ButtonBase {
+class ArdiumButtonDirective extends _ButtonBase {
     constructor(defaults) {
         super(defaults);
-        this.icon = input('');
+        this._hostEl = inject(ElementRef);
+        this._renderer = inject(Renderer2);
         //! button settings
         this.variant = input(this._DEFAULTS.variant);
-        this.alignIcon = input(this._DEFAULTS.alignIcon);
         this.vertical = input(this._DEFAULTS.vertical, { transform: v => coerceBooleanProperty(v) });
         this.ngClasses = computed(() => [
+            'ard-button',
             this.wrapperClasses(),
             `ard-appearance-${this.appearance()}`,
             `ard-variant-${this.variant()}`,
             `ard-color-${this.color()}`,
-            `ard-align-${this.alignIcon()}`,
             this.lightColoring() ? `ard-light-coloring` : '',
+            this.disabled() ? 'ard-disabled' : '',
             this.compact() ? 'ard-compact' : '',
             this.vertical() ? 'ard-button-vertical' : '',
+            this.pointerEventsWhenDisabled() ? 'ard-button-with-pointer-events-when-disabled' : '',
         ].join(' '));
+        const el = this._hostEl.nativeElement;
+        if (el.tagName === 'BUTTON') {
+            effect(() => {
+                this._renderer.setProperty(el, 'disabled', this.disabled());
+            });
+            effect(() => {
+                this._renderer.setAttribute(el, 'type', this.type());
+            });
+        }
+    }
+    handleClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonDirective, deps: [{ token: ARD_BUTTON_DEFAULTS }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumButtonDirective, isStandalone: false, selector: "button[ard-button], a[ard-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "ngClasses()", "tabindex": "tabIndex()" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[ard-button], a[ard-button]',
+                    standalone: false,
+                    host: {
+                        '[class]': 'ngClasses()',
+                        '[tabindex]': 'tabIndex()',
+                        '(click)': 'handleClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ARD_BUTTON_DEFAULTS]
+                }] }] });
+
+class ArdiumButtonComponent extends _ButtonBase {
+    constructor(defaults) {
+        super(defaults);
+        //! events
+        this.focusEvent = output({ alias: 'focus' });
+        this.blurEvent = output({ alias: 'blur' });
+        //! button settings
+        this.variant = input(this._DEFAULTS.variant);
+        this.vertical = input(this._DEFAULTS.vertical, { transform: v => coerceBooleanProperty(v) });
+        // stub definition to satisfy abstract class
+        this.ngClasses = computed(() => '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonComponent, deps: [{ token: ARD_BUTTON_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumButtonComponent, isStandalone: false, selector: "ard-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, alignIcon: { classPropertyName: "alignIcon", publicName: "alignIcon", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  #buttonElement\r\n  class=\"ard-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  @if (icon()) {\r\n    <div class=\"ard-button-icon\">\r\n      {{ icon() }}\r\n    </div>\r\n  }\r\n  <div class=\"ard-button-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: [".ard-button{display:flex;align-items:center;position:relative;cursor:pointer}.ard-button.ard-button-align-left{flex-direction:row}.ard-button.ard-button-align-right{flex-direction:row-reverse}.ard-button.ard-button-vertical{flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumButtonComponent, isStandalone: false, selector: "ard-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur" }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  #buttonElement\r\n  ard-button\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [type]=\"type()\"\r\n  [appearance]=\"appearance()\"\r\n  [color]=\"color()\"\r\n  [disabled]=\"disabled()\"\r\n  [compact]=\"compact()\"\r\n  [lightColoring]=\"lightColoring()\"\r\n  [pointerEventsWhenDisabled]=\"pointerEventsWhenDisabled()\"\r\n  [variant]=\"variant()\"\r\n  [vertical]=\"vertical()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".ard-button{display:flex;align-items:center;position:relative;cursor:pointer}.ard-button.ard-button-align-left{flex-direction:row}.ard-button.ard-button-align-right{flex-direction:row-reverse}.ard-button.ard-button-vertical{flex-direction:column}\n"], dependencies: [{ kind: "directive", type: ArdiumButtonDirective, selector: "button[ard-button], a[ard-button]", inputs: ["variant", "vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'ard-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.ard-button-with-pointer-events-when-disabled]': 'pointerEventsWhenDisabled()',
-                    }, template: "<button\r\n  #buttonElement\r\n  class=\"ard-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  [tabindex]=\"tabIndex()\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  @if (icon()) {\r\n    <div class=\"ard-button-icon\">\r\n      {{ icon() }}\r\n    </div>\r\n  }\r\n  <div class=\"ard-button-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: [".ard-button{display:flex;align-items:center;position:relative;cursor:pointer}.ard-button.ard-button-align-left{flex-direction:row}.ard-button.ard-button-align-right{flex-direction:row-reverse}.ard-button.ard-button-vertical{flex-direction:column}\n"] }]
+                    }, template: "<button\r\n  #buttonElement\r\n  ard-button\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [type]=\"type()\"\r\n  [appearance]=\"appearance()\"\r\n  [color]=\"color()\"\r\n  [disabled]=\"disabled()\"\r\n  [compact]=\"compact()\"\r\n  [lightColoring]=\"lightColoring()\"\r\n  [pointerEventsWhenDisabled]=\"pointerEventsWhenDisabled()\"\r\n  [variant]=\"variant()\"\r\n  [vertical]=\"vertical()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".ard-button{display:flex;align-items:center;position:relative;cursor:pointer}.ard-button.ard-button-align-left{flex-direction:row}.ard-button.ard-button-align-right{flex-direction:row-reverse}.ard-button.ard-button-vertical{flex-direction:column}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_BUTTON_DEFAULTS]
@@ -5282,7 +5338,7 @@ class ArdiumFileDropAreaComponent extends _FileInputComponentBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFileDropAreaComponent, deps: [{ token: ARD_FILE_DROP_AREA_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFileDropAreaComponent, isStandalone: false, selector: "ard-file-drop-area", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "idleTemplate", first: true, predicate: ArdiumFileDropAreaIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileDropAreaDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileDropAreaUploadedContentTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-file-drop-area\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [ngClass]=\"ngClasses\"\r\n>\r\n  <div class=\"ard-file-drop-area-outline\">\r\n    <div class=\"ard-file-drop-area-content\">\r\n      @if (currentViewState() === 'idle') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n        [ngTemplateOutletContext]=\"getIdleContext()\"\r\n      />\r\n      } @if (currentViewState() === 'dragover') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n        [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n      />\r\n      } @if (currentViewState() === 'uploaded') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n        [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n      />\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-drop-area-input-element\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [id]=\"htmlId()\"\r\n  (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\r\n  <strong class=\"ard-file-drop-area-drop-text\">\r\n    @if (!multiple) {\r\n    <span>Drag & Drop a file</span>\r\n    } @else {\r\n    <span>Drag & Drop files</span>\r\n    } here\r\n  </strong>\r\n  <span class=\"ard-file-drop-area-or-text\">or</span>\r\n  <ard-button\r\n    class=\"ard-file-drop-area-browse-button\"\r\n    appearance=\"transparent\"\r\n    [compact]=\"compact()\"\r\n    [variant]=\"variant()\"\r\n    [color]=\"color()\"\r\n    (click)=\"browse()\"\r\n  >\r\n    Browse files\r\n  </ard-button>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-drop-area-dragover-text\">Drop </span>\r\n  <span class=\"ard-file-drop-area-dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  <span class=\"ard-file-drop-area-dragover-text\"> here to upload. </span>\r\n  @if (amount > 1 && !multiple()) {\r\n  <strong class=\"ard-file-drop-area-dragover-warning\"> Only the first file will be uploaded! </strong>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n  let-files=\"files\"\r\n>\r\n  <div class=\"ard-file-drop-area-uploaded-container\">\r\n    <div class=\"ard-file-drop-area-uploaded-message\">\r\n      <span class=\"ard-file-drop-area-uploaded-amount\">\r\n        {{ amount }}\r\n        <ng-container [ngPlural]=\"amount\">\r\n          <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n          <ng-template ngPluralCase=\"other\">files</ng-template>\r\n        </ng-container>\r\n      </span>\r\n      <span class=\"ard-file-drop-area-uploaded-text\"> uploaded.</span>\r\n    </div>\r\n    <div class=\"ard-file-drop-area-uploaded-files\">\r\n      @for (file of files; track $index) {\r\n      <div class=\"ard-file-drop-area-file\">\r\n        <ard-icon>draft</ard-icon>\r\n        <div class=\"ard-file-drop-area-file-info\">\r\n          <span class=\"ard-file-drop-area-filename\">\r\n            <span class=\"ard-file-drop-area-filename-name\">{{ file | filename }}</span>\r\n            <span class=\"ard-file-drop-area-filename-ext\">{{ file | fileext : true }}</span>\r\n          </span>\r\n          <span class=\"ard-file-drop-area-filesize\">{{ file.size | filesize }}</span>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-drop-area-input-element{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "pipe", type: i5.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i5.ArdiumFileNamePipe, name: "filename" }, { kind: "pipe", type: i5.ArdiumFileSizePipe, name: "filesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFileDropAreaComponent, isStandalone: false, selector: "ard-file-drop-area", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "idleTemplate", first: true, predicate: ArdiumFileDropAreaIdleContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dragoverTemplate", first: true, predicate: ArdiumFileDropAreaDragoverContentTemplateDirective, descendants: true, isSignal: true }, { propertyName: "uploadedTemplate", first: true, predicate: ArdiumFileDropAreaUploadedContentTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-file-drop-area\"\r\n  (ardClickOutside)=\"onDragleave()\"\r\n  (dragleave)=\"onDragleave()\"\r\n  (dragover)=\"onDragover($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  [ngClass]=\"ngClasses\"\r\n>\r\n  <div class=\"ard-file-drop-area-outline\">\r\n    <div class=\"ard-file-drop-area-content\">\r\n      @if (currentViewState() === 'idle') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"idleTemplate()?.template ?? defaultIdleTemplate\"\r\n        [ngTemplateOutletContext]=\"getIdleContext()\"\r\n      />\r\n      } @if (currentViewState() === 'dragover') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"dragoverTemplate()?.template ?? defaultDragoverTemplate\"\r\n        [ngTemplateOutletContext]=\"getDragoverContext()\"\r\n      />\r\n      } @if (currentViewState() === 'uploaded') {\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"uploadedTemplate()?.template ?? defaultUploadedTemplate\"\r\n        [ngTemplateOutletContext]=\"getUploadedContext()\"\r\n      />\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n<input\r\n  #fileInput\r\n  class=\"ard-file-drop-area-input-element\"\r\n  type=\"file\"\r\n  [name]=\"name()\"\r\n  [multiple]=\"multiple()\"\r\n  [id]=\"htmlId()\"\r\n  (change)=\"onFileInputChange()\"\r\n/>\r\n\r\n<ng-template\r\n  #defaultIdleTemplate\r\n  let-browse=\"browse\"\r\n>\r\n  <ard-icon class=\"ard-file-drop-area-icon\">upload</ard-icon>\r\n  <strong class=\"ard-file-drop-area-drop-text\">\r\n    @if (!multiple) {\r\n    <span>Drag & Drop a file</span>\r\n    } @else {\r\n    <span>Drag & Drop files</span>\r\n    } here\r\n  </strong>\r\n  <span class=\"ard-file-drop-area-or-text\">or</span>\r\n  <ard-button\r\n    class=\"ard-file-drop-area-browse-button\"\r\n    appearance=\"transparent\"\r\n    [compact]=\"compact()\"\r\n    [variant]=\"variant()\"\r\n    [color]=\"color()\"\r\n    (click)=\"browse()\"\r\n  >\r\n    Browse files\r\n  </ard-button>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDragoverTemplate\r\n  let-amount=\"amount\"\r\n>\r\n  <span class=\"ard-file-drop-area-dragover-text\">Drop </span>\r\n  <span class=\"ard-file-drop-area-dragover-amount\">\r\n    {{ amount }}\r\n    <ng-container [ngPlural]=\"amount\">\r\n      <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n      <ng-template ngPluralCase=\"other\">files</ng-template>\r\n    </ng-container>\r\n  </span>\r\n  <span class=\"ard-file-drop-area-dragover-text\"> here to upload. </span>\r\n  @if (amount > 1 && !multiple()) {\r\n  <strong class=\"ard-file-drop-area-dragover-warning\"> Only the first file will be uploaded! </strong>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultUploadedTemplate\r\n  let-amount=\"amount\"\r\n  let-files=\"files\"\r\n>\r\n  <div class=\"ard-file-drop-area-uploaded-container\">\r\n    <div class=\"ard-file-drop-area-uploaded-message\">\r\n      <span class=\"ard-file-drop-area-uploaded-amount\">\r\n        {{ amount }}\r\n        <ng-container [ngPlural]=\"amount\">\r\n          <ng-template ngPluralCase=\"=1\">file</ng-template>\r\n          <ng-template ngPluralCase=\"other\">files</ng-template>\r\n        </ng-container>\r\n      </span>\r\n      <span class=\"ard-file-drop-area-uploaded-text\"> uploaded.</span>\r\n    </div>\r\n    <div class=\"ard-file-drop-area-uploaded-files\">\r\n      @for (file of files; track $index) {\r\n      <div class=\"ard-file-drop-area-file\">\r\n        <ard-icon>draft</ard-icon>\r\n        <div class=\"ard-file-drop-area-file-info\">\r\n          <span class=\"ard-file-drop-area-filename\">\r\n            <span class=\"ard-file-drop-area-filename-name\">{{ file | filename }}</span>\r\n            <span class=\"ard-file-drop-area-filename-ext\">{{ file | fileext : true }}</span>\r\n          </span>\r\n          <span class=\"ard-file-drop-area-filesize\">{{ file.size | filesize }}</span>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-file-drop-area-input-element{position:absolute;appearance:none;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: 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: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "pipe", type: i5.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i5.ArdiumFileNamePipe, name: "filename" }, { kind: "pipe", type: i5.ArdiumFileSizePipe, name: "filesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFileDropAreaComponent, decorators: [{
             type: Component,
@@ -5294,15 +5350,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class ArdiumButtonModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonModule, declarations: [ArdiumButtonComponent], imports: [CommonModule], exports: [ArdiumButtonComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonModule, declarations: [ArdiumButtonComponent, ArdiumButtonDirective], imports: [CommonModule], exports: [ArdiumButtonComponent, ArdiumButtonDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumButtonComponent],
+                    declarations: [ArdiumButtonComponent, ArdiumButtonDirective],
                     imports: [CommonModule],
-                    exports: [ArdiumButtonComponent],
+                    exports: [ArdiumButtonComponent, ArdiumButtonDirective],
                 }]
         }] });
 
@@ -6134,10 +6190,10 @@ function isYearOutOfRange(year, min, max) {
 }
 
 const ARD_ICON_BUTTON_DEFAULTS = new InjectionToken('ard-icon-button-defaults', {
-    factory: () => _simpleButtonDefaults,
+    factory: () => ({ ..._simpleButtonDefaults, ..._focusableComponentDefaults }),
 });
 function provideIconButtonDefaults(config) {
-    return { provide: ARD_ICON_BUTTON_DEFAULTS, useValue: { ..._simpleButtonDefaults, ...config } };
+    return { provide: ARD_ICON_BUTTON_DEFAULTS, useValue: { ..._simpleButtonDefaults, ..._focusableComponentDefaults, ...config } };
 }
 
 class ArdiumIconButtonComponent extends _FocusableComponentBase {
@@ -6145,9 +6201,12 @@ class ArdiumIconButtonComponent extends _FocusableComponentBase {
         super(defaults);
         this.wrapperClasses = input('');
         this.type = input(this._DEFAULTS.type);
+        this.ariaLabel = input('');
         //! button settings
         this.color = input(this._DEFAULTS.color);
-        this.lightColoring = input(this._DEFAULTS.lightColoring, { transform: v => coerceBooleanProperty(v) });
+        this.lightColoring = input(this._DEFAULTS.lightColoring, {
+            transform: v => coerceBooleanProperty(v),
+        });
         this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
         this.pointerEventsWhenDisabled = input(this._DEFAULTS.pointerEventsWhenDisabled, {
             transform: v => coerceBooleanProperty(v),
@@ -6160,13 +6219,13 @@ class ArdiumIconButtonComponent extends _FocusableComponentBase {
         ].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumIconButtonComponent, deps: [{ token: ARD_ICON_BUTTON_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumIconButtonComponent, isStandalone: false, selector: "ard-icon-button", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, lightColoring: { classPropertyName: "lightColoring", publicName: "lightColoring", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, pointerEventsWhenDisabled: { classPropertyName: "pointerEventsWhenDisabled", publicName: "pointerEventsWhenDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-icon-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-button-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: [".ard-icon-button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-icon-button .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumIconButtonComponent, isStandalone: false, selector: "ard-icon-button", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, lightColoring: { classPropertyName: "lightColoring", publicName: "lightColoring", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, pointerEventsWhenDisabled: { classPropertyName: "pointerEventsWhenDisabled", publicName: "pointerEventsWhenDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-icon-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".ard-icon-button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-icon-button .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumIconButtonComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'ard-icon-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.ard-button-with-pointer-events-when-disabled]': 'pointerEventsWhenDisabled()',
-                    }, template: "<button\r\n  class=\"ard-icon-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div class=\"ard-button-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: [".ard-icon-button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-icon-button .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}\n"] }]
+                    }, template: "<button\r\n  class=\"ard-icon-button\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".ard-icon-button{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative}.ard-icon-button .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_ICON_BUTTON_DEFAULTS]
@@ -6436,7 +6495,7 @@ class DaysViewComponent {
         this.triggerHighlightSameDayPreviousPage.emit(event.altKey);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DaysViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DaysViewComponent, isStandalone: false, selector: "ard-days-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, isDayFilteredOut: { classPropertyName: "isDayFilteredOut", publicName: "isDayFilteredOut", isSignal: true, isRequired: true, transformFunction: null }, highlightedDay: { classPropertyName: "highlightedDay", publicName: "highlightedDay", isSignal: true, isRequired: true, transformFunction: null }, firstWeekday: { classPropertyName: "firstWeekday", publicName: "firstWeekday", isSignal: true, isRequired: true, transformFunction: null }, daysViewHeaderTemplate: { classPropertyName: "daysViewHeaderTemplate", publicName: "daysViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthTemplate: { classPropertyName: "floatingMonthTemplate", publicName: "floatingMonthTemplate", isSignal: true, isRequired: true, transformFunction: null }, weekdayTemplate: { classPropertyName: "weekdayTemplate", publicName: "weekdayTemplate", isSignal: true, isRequired: true, transformFunction: null }, dayTemplate: { classPropertyName: "dayTemplate", publicName: "dayTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenMonthsView: "triggerOpenMonthsView", triggerSelectDay: "triggerSelectDay", triggerChangeMonth: "triggerChangeMonth", triggerChangeYear: "triggerChangeYear", triggerHighlightDay: "triggerHighlightDay", triggerHighlightNextDay: "triggerHighlightNextDay", triggerHighlightPreviousDay: "triggerHighlightPreviousDay", triggerHighlightFirstDay: "triggerHighlightFirstDay", triggerHighlightLastDay: "triggerHighlightLastDay", triggerHighlightSameDayPreviousPage: "triggerHighlightSameDayPreviousPage", triggerHighlightSameDayNextPage: "triggerHighlightSameDayNextPage", focusEvent: "focus", blurEvent: "blur" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-days-view\">\r\n  @if (!readOnly()) {\r\n  <div class=\"ard-calendar__top-toolbar\">\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-openYearsView=\"openYearsView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          variant=\"pill\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openYearsView()\"\r\n        >\r\n          {{ currDate | date : 'MMM YYYY' | uppercase }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div class=\"ard-calendar__arrows\">\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          <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        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"daysViewHeaderTemplate() || defaultDaysViewHeaderTemplate\"\r\n      [ngTemplateOutletContext]=\"daysViewHeaderContext()\"\r\n    />\r\n  </div>\r\n  }\r\n  <div class=\"ard-calendar__weekdays\">\r\n    <ng-template\r\n      #defaultWeekdayTemplate\r\n      let-date\r\n    >\r\n      <div\r\n        class=\"ard-calendar__weekday\"\r\n        [title]=\"date | date : 'EEEE' | titlecase\"\r\n      >\r\n        {{ date | date : 'EEEEE' | uppercase }}\r\n      </div>\r\n    </ng-template>\r\n    @for (weekdayIndex of weekdayArray(); track weekdayIndex) {\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"weekdayTemplate() || defaultWeekdayTemplate\"\r\n      [ngTemplateOutletContext]=\"weekdayContext()(weekdayIndex)\"\r\n    ></ng-template>\r\n    }\r\n  </div>\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__days-grid\"\r\n    [class.ard-reserve-top-row]=\"reserveTopRow()\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onDayGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onDayGridBlur()\"\r\n    (click)=\"onDayGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    <div class=\"ard-calendar__floating-month\">\r\n      <ng-template\r\n        #defaultFloatingMonthTemplate\r\n        let-date\r\n      >\r\n        <div [title]=\"date | date : 'LLLL' | titlecase\">\r\n          {{ date | date : 'LLL' | uppercase }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      ></ng-template>\r\n    </div>\r\n    @for (week of activeCalendarData().array; track $index) { @for (day of week; track day ? day :\r\n    activeCalendarData().leadingSpaces - $index) { @if (day === null) {\r\n    <div class=\"ard-calendar__entry ard-calendar__entry-empty\"></div>\r\n    } @else {\r\n    <div\r\n      class=\"ard-calendar__entry\"\r\n      [class.ard-calendar__entry-highlighted]=\"highlightedDay() === day.value\"\r\n      [class.ard-calendar__entry-disabled]=\"day.disabled || isDayFilteredOut()(day.value)\"\r\n      [class.ard-calendar__entry-selected]=\"isDaySelected(day.value)\"\r\n      [class.ard-calendar-today]=\"isDayToday(day.value)\"\r\n      (click)=\"onCalendarDayClick(day.value)\"\r\n      (mousemove)=\"$event.stopPropagation()\"\r\n      (mouseover)=\"onCalendarDayMouseover(day.value)\"\r\n      role=\"gridcell\"\r\n    >\r\n      <div class=\"ard-calendar__entry-button\">\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultDayTemplate\r\n            let-day\r\n          >\r\n            {{ day }}\r\n          </ng-template>\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"dayTemplate() || defaultDayTemplate\"\r\n            [ngTemplateOutletContext]=\"dayContext()(day.value)\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    } } }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DaysViewComponent, isStandalone: false, selector: "ard-days-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, isDayFilteredOut: { classPropertyName: "isDayFilteredOut", publicName: "isDayFilteredOut", isSignal: true, isRequired: true, transformFunction: null }, highlightedDay: { classPropertyName: "highlightedDay", publicName: "highlightedDay", isSignal: true, isRequired: true, transformFunction: null }, firstWeekday: { classPropertyName: "firstWeekday", publicName: "firstWeekday", isSignal: true, isRequired: true, transformFunction: null }, daysViewHeaderTemplate: { classPropertyName: "daysViewHeaderTemplate", publicName: "daysViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthTemplate: { classPropertyName: "floatingMonthTemplate", publicName: "floatingMonthTemplate", isSignal: true, isRequired: true, transformFunction: null }, weekdayTemplate: { classPropertyName: "weekdayTemplate", publicName: "weekdayTemplate", isSignal: true, isRequired: true, transformFunction: null }, dayTemplate: { classPropertyName: "dayTemplate", publicName: "dayTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenMonthsView: "triggerOpenMonthsView", triggerSelectDay: "triggerSelectDay", triggerChangeMonth: "triggerChangeMonth", triggerChangeYear: "triggerChangeYear", triggerHighlightDay: "triggerHighlightDay", triggerHighlightNextDay: "triggerHighlightNextDay", triggerHighlightPreviousDay: "triggerHighlightPreviousDay", triggerHighlightFirstDay: "triggerHighlightFirstDay", triggerHighlightLastDay: "triggerHighlightLastDay", triggerHighlightSameDayPreviousPage: "triggerHighlightSameDayPreviousPage", triggerHighlightSameDayNextPage: "triggerHighlightSameDayNextPage", focusEvent: "focus", blurEvent: "blur" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-days-view\">\r\n  @if (!readOnly()) {\r\n  <div class=\"ard-calendar__top-toolbar\">\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-openYearsView=\"openYearsView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          variant=\"pill\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openYearsView()\"\r\n        >\r\n          {{ currDate | date : 'MMM YYYY' | uppercase }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div class=\"ard-calendar__arrows\">\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          <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        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"daysViewHeaderTemplate() || defaultDaysViewHeaderTemplate\"\r\n      [ngTemplateOutletContext]=\"daysViewHeaderContext()\"\r\n    />\r\n  </div>\r\n  }\r\n  <div class=\"ard-calendar__weekdays\">\r\n    <ng-template\r\n      #defaultWeekdayTemplate\r\n      let-date\r\n    >\r\n      <div\r\n        class=\"ard-calendar__weekday\"\r\n        [title]=\"date | date : 'EEEE' | titlecase\"\r\n      >\r\n        {{ date | date : 'EEEEE' | uppercase }}\r\n      </div>\r\n    </ng-template>\r\n    @for (weekdayIndex of weekdayArray(); track weekdayIndex) {\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"weekdayTemplate() || defaultWeekdayTemplate\"\r\n      [ngTemplateOutletContext]=\"weekdayContext()(weekdayIndex)\"\r\n    ></ng-template>\r\n    }\r\n  </div>\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__days-grid\"\r\n    [class.ard-reserve-top-row]=\"reserveTopRow()\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onDayGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onDayGridBlur()\"\r\n    (click)=\"onDayGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    <div class=\"ard-calendar__floating-month\">\r\n      <ng-template\r\n        #defaultFloatingMonthTemplate\r\n        let-date\r\n      >\r\n        <div [title]=\"date | date : 'LLLL' | titlecase\">\r\n          {{ date | date : 'LLL' | uppercase }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"floatingMonthTemplate() || defaultFloatingMonthTemplate\"\r\n        [ngTemplateOutletContext]=\"floatingMonthContext()\"\r\n      ></ng-template>\r\n    </div>\r\n    @for (week of activeCalendarData().array; track $index) { @for (day of week; track day ? day :\r\n    activeCalendarData().leadingSpaces - $index) { @if (day === null) {\r\n    <div class=\"ard-calendar__entry ard-calendar__entry-empty\"></div>\r\n    } @else {\r\n    <div\r\n      class=\"ard-calendar__entry\"\r\n      [class.ard-calendar__entry-highlighted]=\"highlightedDay() === day.value\"\r\n      [class.ard-calendar__entry-disabled]=\"day.disabled || isDayFilteredOut()(day.value)\"\r\n      [class.ard-calendar__entry-selected]=\"isDaySelected(day.value)\"\r\n      [class.ard-calendar-today]=\"isDayToday(day.value)\"\r\n      (click)=\"onCalendarDayClick(day.value)\"\r\n      (mousemove)=\"$event.stopPropagation()\"\r\n      (mouseover)=\"onCalendarDayMouseover(day.value)\"\r\n      role=\"gridcell\"\r\n    >\r\n      <div class=\"ard-calendar__entry-button\">\r\n        <div class=\"ard-focus-overlay\"></div>\r\n        <div class=\"ard-button-content\">\r\n          <ng-template\r\n            #defaultDayTemplate\r\n            let-day\r\n          >\r\n            {{ day }}\r\n          </ng-template>\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"dayTemplate() || defaultDayTemplate\"\r\n            [ngTemplateOutletContext]=\"dayContext()(day.value)\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    } } }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DaysViewComponent, decorators: [{
             type: Component,
@@ -6672,7 +6731,7 @@ class MonthsViewComponent {
         return isYearOutOfRange(year, this.min(), this.max());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MonthsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MonthsViewComponent, isStandalone: false, selector: "ard-months-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, highlightedMonth: { classPropertyName: "highlightedMonth", publicName: "highlightedMonth", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderTemplate: { classPropertyName: "monthsViewHeaderTemplate", publicName: "monthsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthTemplate: { classPropertyName: "monthTemplate", publicName: "monthTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectMonth: "triggerSelectMonth", triggeChangeYear: "triggeChangeYear", triggerHighlightMonth: "triggerHighlightMonth", triggerHighlightNextMonth: "triggerHighlightNextMonth", triggerHighlightPreviousMonth: "triggerHighlightPreviousMonth", triggerHighlightFirstMonth: "triggerHighlightFirstMonth", triggerHighlightLastMonth: "triggerHighlightLastMonth", triggerHighlightSameMonthPreviousPage: "triggerHighlightSameMonthPreviousPage", triggerHighlightSameMonthNextPage: "triggerHighlightSameMonthNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-months-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultMonthsViewHeaderTemplate\r\n        let-year\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-openDaysView=\"openDaysView\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            [color]=\"color()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n          >\r\n            {{ year }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div class=\"ard-calendar-arrows\">\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"prevPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToPreviousPage\"\r\n            >\r\n              <ard-icon>chevron_left</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"nextPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToNextPage\"\r\n            >\r\n              <ard-icon>chevron_right</ard-icon>\r\n            </ard-icon-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onMonthGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onMonthGridBlur()\"\r\n    (click)=\"onMonthGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (month of monthsArray(); track $index) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n        [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n        [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n        (click)=\"onCalendarMonthClick(month.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-calendar__entry-button\"\r\n          tabindex=\"-1\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultMonthTemplate\r\n              let-month\r\n            >\r\n              {{ month | date: 'MMM' : '+0000' | uppercase }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n              [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n            />\r\n          </div>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MonthsViewComponent, isStandalone: false, selector: "ard-months-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, highlightedMonth: { classPropertyName: "highlightedMonth", publicName: "highlightedMonth", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderTemplate: { classPropertyName: "monthsViewHeaderTemplate", publicName: "monthsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthTemplate: { classPropertyName: "monthTemplate", publicName: "monthTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectMonth: "triggerSelectMonth", triggeChangeYear: "triggeChangeYear", triggerHighlightMonth: "triggerHighlightMonth", triggerHighlightNextMonth: "triggerHighlightNextMonth", triggerHighlightPreviousMonth: "triggerHighlightPreviousMonth", triggerHighlightFirstMonth: "triggerHighlightFirstMonth", triggerHighlightLastMonth: "triggerHighlightLastMonth", triggerHighlightSameMonthPreviousPage: "triggerHighlightSameMonthPreviousPage", triggerHighlightSameMonthNextPage: "triggerHighlightSameMonthNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-months-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultMonthsViewHeaderTemplate\r\n        let-year\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-openDaysView=\"openDaysView\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            [color]=\"color()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n          >\r\n            {{ year }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div class=\"ard-calendar-arrows\">\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"prevPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToPreviousPage\"\r\n            >\r\n              <ard-icon>chevron_left</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"nextPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToNextPage\"\r\n            >\r\n              <ard-icon>chevron_right</ard-icon>\r\n            </ard-icon-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onMonthGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onMonthGridBlur()\"\r\n    (click)=\"onMonthGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (month of monthsArray(); track $index) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n        [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n        [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n        (click)=\"onCalendarMonthClick(month.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-calendar__entry-button\"\r\n          tabindex=\"-1\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultMonthTemplate\r\n              let-month\r\n            >\r\n              {{ month | date: 'MMM' : '+0000' | uppercase }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n              [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n            />\r\n          </div>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MonthsViewComponent, decorators: [{
             type: Component,
@@ -6907,7 +6966,7 @@ class YearsViewComponent {
         this.triggerHighlightSameYearNextPage.emit(event.altKey);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: YearsViewComponent, isStandalone: false, selector: "ard-years-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, highlightedYear: { classPropertyName: "highlightedYear", publicName: "highlightedYear", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderTemplate: { classPropertyName: "yearsViewHeaderTemplate", publicName: "yearsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearTemplate: { classPropertyName: "yearTemplate", publicName: "yearTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenMonthsView: "triggerOpenMonthsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectYear: "triggerSelectYear", triggerChangeYearsViewPage: "triggerChangeYearsViewPage", triggerHighlightYear: "triggerHighlightYear", triggerHighlightNextYear: "triggerHighlightNextYear", triggerHighlightPreviousYear: "triggerHighlightPreviousYear", triggerHighlightFirstYear: "triggerHighlightFirstYear", triggerHighlightLastYear: "triggerHighlightLastYear", triggerHighlightSameYearPreviousPage: "triggerHighlightSameYearPreviousPage", triggerHighlightSameYearNextPage: "triggerHighlightSameYearNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-years-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultYearsViewHeaderTemplate\r\n        let-dateRange=\"dateRange\"\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-openDaysView=\"openDaysView\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n            variant=\"pill\"\r\n          >\r\n            {{ dateRange.low | date: 'YYYY' }}\r\n            &mdash;\r\n            {{ dateRange.high | date: 'YYYY' }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div class=\"ard-calendar-arrows\">\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"prevPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToPreviousPage\"\r\n            >\r\n              <ard-icon>chevron_left</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"nextPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToNextPage\"\r\n            >\r\n              <ard-icon>chevron_right</ard-icon>\r\n            </ard-icon-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onYearGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onYearGridBlur()\"\r\n    (click)=\"onYearGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (year of yearsArray(); track year) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n        [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n        [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n        (click)=\"onCalendarYearClick(year.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-calendar__entry-button\"\r\n          tabindex=\"-1\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultYearTemplate\r\n              let-year\r\n            >\r\n              {{ year | date: 'YYYY' }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n              [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n            />\r\n          </div>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: YearsViewComponent, isStandalone: false, selector: "ard-years-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, highlightedYear: { classPropertyName: "highlightedYear", publicName: "highlightedYear", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderTemplate: { classPropertyName: "yearsViewHeaderTemplate", publicName: "yearsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearTemplate: { classPropertyName: "yearTemplate", publicName: "yearTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenMonthsView: "triggerOpenMonthsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectYear: "triggerSelectYear", triggerChangeYearsViewPage: "triggerChangeYearsViewPage", triggerHighlightYear: "triggerHighlightYear", triggerHighlightNextYear: "triggerHighlightNextYear", triggerHighlightPreviousYear: "triggerHighlightPreviousYear", triggerHighlightFirstYear: "triggerHighlightFirstYear", triggerHighlightLastYear: "triggerHighlightLastYear", triggerHighlightSameYearPreviousPage: "triggerHighlightSameYearPreviousPage", triggerHighlightSameYearNextPage: "triggerHighlightSameYearNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-years-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultYearsViewHeaderTemplate\r\n        let-dateRange=\"dateRange\"\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-openDaysView=\"openDaysView\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            color=\"none\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n            variant=\"pill\"\r\n          >\r\n            {{ dateRange.low | date: 'YYYY' }}\r\n            &mdash;\r\n            {{ dateRange.high | date: 'YYYY' }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div class=\"ard-calendar-arrows\">\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"prevPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToPreviousPage\"\r\n            >\r\n              <ard-icon>chevron_left</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"nextPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToNextPage\"\r\n            >\r\n              <ard-icon>chevron_right</ard-icon>\r\n            </ard-icon-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onYearGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onYearGridBlur()\"\r\n    (click)=\"onYearGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (year of yearsArray(); track year) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n        [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n        [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n        (click)=\"onCalendarYearClick(year.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-calendar__entry-button\"\r\n          tabindex=\"-1\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultYearTemplate\r\n              let-year\r\n            >\r\n              {{ year | date: 'YYYY' }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n              [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n            />\r\n          </div>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, decorators: [{
             type: Component,
@@ -7743,7 +7802,7 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumDateInputComponent,
             },
-        ], queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdDateInputValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarIconTemplate", first: true, predicate: ArdDateInputCalendarIconTemplateDirective, descendants: true, isSignal: true }, { propertyName: "acceptButtonsTemplate", first: true, predicate: ArdDateInputAcceptButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdDateInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdDateInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: 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  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ serializeFn()(date) }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      autoFocus\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [selected]=\"value()\"\r\n      (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-date\r\n      >\r\n        {{ serializeFn()(date) }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n      />\r\n    </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["color", "activeView", "activeYear", "activeMonth", "firstWeekday", "multipleYearPageChangeModifier", "autoFocus", "selected", "min", "max", "UTC", "filter"], outputs: ["activeViewChange", "activeYearChange", "activeMonthChange", "selectedChange", "yearSelect", "monthSelect"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdDateInputValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarIconTemplate", first: true, predicate: ArdDateInputCalendarIconTemplateDirective, descendants: true, isSignal: true }, { propertyName: "acceptButtonsTemplate", first: true, predicate: ArdDateInputAcceptButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdDateInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdDateInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: 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  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ serializeFn()(date) }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__input-container\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n        [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n      >\r\n        <input\r\n          #dateInput\r\n          #focusableElement\r\n          type=\"text\"\r\n          class=\"ard-date-input__input\"\r\n          [attr.tabindex]=\"tabIndex()\"\r\n          [value]=\"dateInputValue()\"\r\n          [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n          (input)=\"onDateInputInput($event)\"\r\n          (change)=\"$event.stopPropagation()\"\r\n          (focus)=\"onDateInputFocus($event)\"\r\n          (blur)=\"onDateInputBlur($event)\"\r\n          (keydown)=\"onDateInputEnter($event)\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      autoFocus\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [selected]=\"value()\"\r\n      (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-date\r\n      >\r\n        {{ serializeFn()(date) }}\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n      />\r\n    </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["color", "activeView", "activeYear", "activeMonth", "firstWeekday", "multipleYearPageChangeModifier", "autoFocus", "selected", "min", "max", "UTC", "filter"], outputs: ["activeViewChange", "activeYearChange", "activeMonthChange", "selectedChange", "yearSelect", "monthSelect"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateInputComponent, decorators: [{
             type: Component,
@@ -8393,6 +8452,15 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
                 return newValue;
             },
         });
+        this._isQuickChangeButtonFocused = false;
+        this.canIncrement = computed(() => {
+            const num = this.inputModel.numberValue();
+            return !isDefined(num) || num < this.max();
+        });
+        this.canDecrement = computed(() => {
+            const num = this.inputModel.numberValue();
+            return !isDefined(num) || num > this.min();
+        });
         // effect(() => {
         //   const v = this.inputModel.numberValue();
         //   this.valueChange.emit(v);
@@ -8423,11 +8491,12 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
     }
     onQuickChangeButtonClick(direction, event) {
         let num = this.inputModel.numberValue();
+        const hasAnyValue = isDefined(num);
         if (!num)
             num = 0;
-        if (direction === 1 && num >= this.max())
+        if (direction === 1 && num >= this.max() && hasAnyValue)
             return;
-        if (direction === -1 && num <= this.min())
+        if (direction === -1 && num <= this.min() && hasAnyValue)
             return;
         if (event)
             event.stopPropagation();
@@ -8450,17 +8519,12 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
     onQuickChangeButtonMouseup(event) {
         // prevent the event from reaching the parent element
         if (this.keepFocusOnQuickChangeButton()) {
-            event.stopPropagation();
+            this._isQuickChangeButtonFocused = true;
+            setTimeout(() => {
+                this._isQuickChangeButtonFocused = false;
+            }, 0);
         }
     }
-    canIncrement() {
-        const num = this.inputModel.numberValue();
-        return !isDefined(num) || num < this.max();
-    }
-    canDecrement() {
-        const num = this.inputModel.numberValue();
-        return !isDefined(num) || num > this.min();
-    }
     //! event handlers
     onInput(newVal) {
         const valueHasChanged = this.inputModel.writeValue(newVal);
@@ -8486,6 +8550,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
     }
     _emitChange() {
         const v = this.inputModel.numberValue();
+        this.valueChange.emit(v);
         this.changeEvent.emit(v);
         this._onChangeRegistered?.(v);
     }
@@ -8494,6 +8559,8 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
         const selection = window.getSelection();
         if (selection && selection.type === 'Range')
             return;
+        if (this._isQuickChangeButtonFocused)
+            return;
         this.focus();
     }
     // copy
@@ -8534,7 +8601,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumNumberInputComponent,
             },
-        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button decrement\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canDecrement()\"\r\n    [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n    pointerEventsWhenDisabled\r\n    (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n    (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    -\r\n  </ard-button>\r\n  }\r\n  <div class=\"ard-input-container\">\r\n    @if (shouldDisplayPlaceholder()) {\r\n    <ng-template\r\n      #defaultPlaceholderTemplate\r\n      let-plchldr\r\n    >\r\n      <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n    }\r\n\r\n    <input\r\n      #textInput\r\n      #focusableElement\r\n      type=\"text\"\r\n      inputmode=\"numeric\"\r\n      [attr.id]=\"inputId()\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [readonly]=\"readonly()\"\r\n      [disabled]=\"disabled()\"\r\n      (input)=\"onInput(textInput.value)\"\r\n      (focus)=\"onFocusMaster($event)\"\r\n      (blur)=\"onBlurMaster($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n      (mouseup)=\"$event.stopPropagation()\"\r\n      (copy)=\"onCopy($event)\"\r\n    />\r\n  </div>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button increment\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canIncrement()\"\r\n    [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n    pointerEventsWhenDisabled\r\n    (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n    (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    +\r\n  </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button decrement\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canDecrement()\"\r\n    [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n    pointerEventsWhenDisabled\r\n    (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n    (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n    (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 (shouldDisplayPlaceholder()) {\r\n    <ng-template\r\n      #defaultPlaceholderTemplate\r\n      let-plchldr\r\n    >\r\n      <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n    }\r\n\r\n    <input\r\n      #textInput\r\n      #focusableElement\r\n      type=\"text\"\r\n      inputmode=\"numeric\"\r\n      [attr.id]=\"inputId()\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [readonly]=\"readonly()\"\r\n      [disabled]=\"disabled()\"\r\n      (input)=\"onInput(textInput.value)\"\r\n      (focus)=\"onFocusMaster($event)\"\r\n      (blur)=\"onBlurMaster($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n      (mouseup)=\"$event.stopPropagation()\"\r\n      (copy)=\"onCopy($event)\"\r\n    />\r\n  </div>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button increment\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canIncrement()\"\r\n    [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n    pointerEventsWhenDisabled\r\n    (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n    (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n    (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: i5.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,
@@ -8548,7 +8615,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    ardHoldSpaceKey\r\n  >\r\n    -\r\n  </ard-button>\r\n  }\r\n  <div class=\"ard-input-container\">\r\n    @if (shouldDisplayPlaceholder()) {\r\n    <ng-template\r\n      #defaultPlaceholderTemplate\r\n      let-plchldr\r\n    >\r\n      <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n    }\r\n\r\n    <input\r\n      #textInput\r\n      #focusableElement\r\n      type=\"text\"\r\n      inputmode=\"numeric\"\r\n      [attr.id]=\"inputId()\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [readonly]=\"readonly()\"\r\n      [disabled]=\"disabled()\"\r\n      (input)=\"onInput(textInput.value)\"\r\n      (focus)=\"onFocusMaster($event)\"\r\n      (blur)=\"onBlurMaster($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n      (mouseup)=\"$event.stopPropagation()\"\r\n      (copy)=\"onCopy($event)\"\r\n    />\r\n  </div>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button increment\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canIncrement()\"\r\n    [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n    pointerEventsWhenDisabled\r\n    (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n    (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n    ardHoldSpaceKey\r\n  >\r\n    +\r\n  </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-input-container{position:relative}.ard-number-input .ard-placeholder{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input,.ard-text-align-left .ard-placeholder{text-align:left}.ard-text-align-middle input,.ard-text-align-middle .ard-placeholder{text-align:center}.ard-text-align-right input,.ard-text-align-right .ard-placeholder{text-align:right}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"] }]
+                    ], 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 (shouldDisplayPlaceholder()) {\r\n    <ng-template\r\n      #defaultPlaceholderTemplate\r\n      let-plchldr\r\n    >\r\n      <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n    </ng-template>\r\n\r\n    <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n    }\r\n\r\n    <input\r\n      #textInput\r\n      #focusableElement\r\n      type=\"text\"\r\n      inputmode=\"numeric\"\r\n      [attr.id]=\"inputId()\"\r\n      [attr.tabindex]=\"tabIndex()\"\r\n      [readonly]=\"readonly()\"\r\n      [disabled]=\"disabled()\"\r\n      (input)=\"onInput(textInput.value)\"\r\n      (focus)=\"onFocusMaster($event)\"\r\n      (blur)=\"onBlurMaster($event)\"\r\n      (change)=\"onChange($event)\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n      (mouseup)=\"$event.stopPropagation()\"\r\n      (copy)=\"onCopy($event)\"\r\n    />\r\n  </div>\r\n  @if (!noButtons()) {\r\n  <ard-button\r\n    class=\"ard-quick-change-button increment\"\r\n    [variant]=\"buttonVariant()\"\r\n    [appearance]=\"buttonAppearance()\"\r\n    color=\"none\"\r\n    [disabled]=\"!canIncrement()\"\r\n    [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n    pointerEventsWhenDisabled\r\n    (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n    (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n    (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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_NUMBER_INPUT_DEFAULTS]
@@ -8587,6 +8654,9 @@ function provideFabDefaults(config) {
 class ArdiumFabComponent extends _ButtonBase {
     constructor(defaults) {
         super(defaults);
+        //! events
+        this.focusEvent = output({ alias: 'focus' });
+        this.blurEvent = output({ alias: 'blur' });
         //! appearance
         this.size = input(FabSize.Standard);
         // readonly extended = input<boolean, BooleanLike>(false, { transform: v => coerceBooleanProperty(v) });
@@ -8599,13 +8669,13 @@ class ArdiumFabComponent extends _ButtonBase {
         ].join(' '));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFabComponent, deps: [{ token: ARD_FAB_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumFabComponent, isStandalone: false, selector: "ard-fab", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-fab\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div\r\n    class=\"ard-button-content\"\r\n    #content\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: [".ard-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;border-radius:9999px}.ard-fab .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}.ard-fab:not(.ard-fab-extended){aspect-ratio:1}.ard-fab:not(.ard-fab-extended) .ard-button-content{aspect-ratio:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumFabComponent, isStandalone: false, selector: "ard-fab", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur" }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-fab\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".ard-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;border-radius:9999px;max-height:100%}.ard-fab:not(.ard-fab-extended){aspect-ratio:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFabComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'ard-fab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.ard-button-with-pointer-events-when-disabled]': 'pointerEventsWhenDisabled()',
-                    }, template: "<button\r\n  class=\"ard-fab\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div\r\n    class=\"ard-button-content\"\r\n    #content\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: [".ard-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;border-radius:9999px}.ard-fab .ard-button-content{max-height:100%;display:flex;align-items:center;justify-content:center}.ard-fab:not(.ard-fab-extended){aspect-ratio:1}.ard-fab:not(.ard-fab-extended) .ard-button-content{aspect-ratio:1}\n"] }]
+                    }, template: "<button\r\n  class=\"ard-fab\"\r\n  [type]=\"type()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (focus)=\"focusEvent.emit($event)\"\r\n  (blur)=\"blurEvent.emit($event)\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".ard-fab{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;border-radius:9999px;max-height:100%}.ard-fab:not(.ard-fab-extended){aspect-ratio:1}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_FAB_DEFAULTS]
@@ -13149,7 +13219,7 @@ class ArdiumTablePaginationComponent extends _FocusableComponentBase {
         this._emitPageEvent();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumTablePaginationComponent, deps: [{ token: ARD_TABLE_PAGINATION_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTablePaginationComponent, isStandalone: false, selector: "ard-table-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", itemsPerPageChangeEvent: "itemsPerPageChange", pageChangeEvent: "pageChange" }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-pagination\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-pagination__items-per-page\">\r\n    <div class=\"ard-pagination__text\">{{ itemsPerPageText() }}</div>\r\n    <ard-select\r\n      [items]=\"options()\"\r\n      [compact]=\"compact()\"\r\n      [value]=\"itemsPerPage()\"\r\n      autoHighlightFirst=\"false\"\r\n      [disabled]=\"disabled()\"\r\n      (valueChange)=\"onItemsPerPageChange($event[0])\"\r\n      clearable=\"false\"\r\n    />\r\n  </div>\r\n  <div class=\"ard-pagination__current-page\">\r\n    <div class=\"ard-pagination__text\">\r\n      {{ currentItemsFormatFn()(getCurrentItemsContext()) }}\r\n    </div>\r\n    <div class=\"ard-pagination__buttons\">\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || firstPageDisabled()\"\r\n          (click)=\"onFirstPage()\"\r\n        >\r\n          <ard-icon>first page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || firstPageDisabled()\"\r\n        (click)=\"onPrevPage()\"\r\n      >\r\n        <ard-icon>navigate before</ard-icon>\r\n      </ard-icon-button>\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || lastPageDisabled()\"\r\n        (click)=\"onNextPage()\"\r\n      >\r\n        <ard-icon>navigate next</ard-icon>\r\n      </ard-icon-button>\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || lastPageDisabled()\"\r\n          (click)=\"onLastPage()\"\r\n        >\r\n          <ard-icon>last page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumSelectComponent, selector: "ard-select", inputs: ["valueFrom", "labelFrom", "disabledFrom", "groupLabelFrom", "groupDisabledFrom", "childrenFrom", "placeholder", "searchPlaceholder", "clearButtonTitle", "dropdownPosition", "noItemsFoundText", "addCustomOptionText", "loadingPlaceholderText", "searchInputId", "inputAttrs", "isLoading", "itemsAlreadyGrouped", "invertDisabled", "noGroupActions", "autoHighlightFirst", "autoFocus", "keepOpen", "hideSelected", "noBackspaceClear", "searchCaseSensitive", "keepSearchAfterSelect", "maxSelectedItems", "itemDisplayLimit", "searchFn", "compareWith", "appearance", "variant", "compact", "dropdownAppearance", "dropdownVariant", "items", "multiselectable", "clearable", "searchable", "addCustom", "value", "isOpen", "dropdownPanelWidth", "dropdownPanelHeight", "dropdownPanelMinWidth", "dropdownPanelMinHeight", "dropdownPanelMaxWidth", "dropdownPanelMaxHeight"], outputs: ["valueChange", "add", "failedToAdd", "remove", "clear", "open", "close", "scroll", "scrollToEnd", "search", "isOpenChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumTablePaginationComponent, isStandalone: false, selector: "ard-table-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", itemsPerPageChangeEvent: "itemsPerPageChange", pageChangeEvent: "pageChange" }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-pagination\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  <div class=\"ard-pagination__items-per-page\">\r\n    <div class=\"ard-pagination__text\">{{ itemsPerPageText() }}</div>\r\n    <ard-select\r\n      [items]=\"options()\"\r\n      [compact]=\"compact()\"\r\n      [value]=\"itemsPerPage()\"\r\n      autoHighlightFirst=\"false\"\r\n      [disabled]=\"disabled()\"\r\n      (valueChange)=\"onItemsPerPageChange($event[0])\"\r\n      clearable=\"false\"\r\n    />\r\n  </div>\r\n  <div class=\"ard-pagination__current-page\">\r\n    <div class=\"ard-pagination__text\">\r\n      {{ currentItemsFormatFn()(getCurrentItemsContext()) }}\r\n    </div>\r\n    <div class=\"ard-pagination__buttons\">\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || firstPageDisabled()\"\r\n          (click)=\"onFirstPage()\"\r\n        >\r\n          <ard-icon>first page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || firstPageDisabled()\"\r\n        (click)=\"onPrevPage()\"\r\n      >\r\n        <ard-icon>navigate before</ard-icon>\r\n      </ard-icon-button>\r\n      <ard-icon-button\r\n        [color]=\"color()\"\r\n        [compact]=\"compact()\"\r\n        [disabled]=\"disabled() || lastPageDisabled()\"\r\n        (click)=\"onNextPage()\"\r\n      >\r\n        <ard-icon>navigate next</ard-icon>\r\n      </ard-icon-button>\r\n      @if (useFirstLastButtons()) {\r\n        <ard-icon-button\r\n          [color]=\"color()\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"disabled() || lastPageDisabled()\"\r\n          (click)=\"onLastPage()\"\r\n        >\r\n          <ard-icon>last page</ard-icon>\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumSelectComponent, selector: "ard-select", inputs: ["valueFrom", "labelFrom", "disabledFrom", "groupLabelFrom", "groupDisabledFrom", "childrenFrom", "placeholder", "searchPlaceholder", "clearButtonTitle", "dropdownPosition", "noItemsFoundText", "addCustomOptionText", "loadingPlaceholderText", "searchInputId", "inputAttrs", "isLoading", "itemsAlreadyGrouped", "invertDisabled", "noGroupActions", "autoHighlightFirst", "autoFocus", "keepOpen", "hideSelected", "noBackspaceClear", "searchCaseSensitive", "keepSearchAfterSelect", "maxSelectedItems", "itemDisplayLimit", "searchFn", "compareWith", "appearance", "variant", "compact", "dropdownAppearance", "dropdownVariant", "items", "multiselectable", "clearable", "searchable", "addCustom", "value", "isOpen", "dropdownPanelWidth", "dropdownPanelHeight", "dropdownPanelMinWidth", "dropdownPanelMinHeight", "dropdownPanelMaxWidth", "dropdownPanelMaxHeight"], outputs: ["valueChange", "add", "failedToAdd", "remove", "clear", "open", "close", "scroll", "scrollToEnd", "search", "isOpenChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { 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: ArdiumTablePaginationComponent, decorators: [{
             type: Component,
@@ -14504,7 +14574,7 @@ class ArdiumModalComponent {
         this._destroyOverlay();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumModalComponent, isStandalone: false, selector: "ard-modal", inputs: { 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 }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, allActionsDisabled: { classPropertyName: "allActionsDisabled", publicName: "allActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, _open: { classPropertyName: "_open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null }, _closeIconTemplate: { classPropertyName: "_closeIconTemplate", publicName: "_closeIconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", closeEvent: "close" }, queries: [{ propertyName: "closeIconTemplate", first: true, predicate: ArdModalCloseIconTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "modalTemplate", first: true, predicate: ["modalTemplate"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template #modalTemplate>\r\n  @if (noBackdrop()) {\r\n    <div\r\n      class=\"ard-modal\"\r\n      [ngClass]=\"ngClasses()\"\r\n      (click)=\"onBackdropClick()\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"ard-modal ard-modal-backdrop\"\r\n      [ngClass]=\"ngClasses()\"\r\n      (click)=\"onBackdropClick()\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #_modalInsidePanel>\r\n  <div\r\n    class=\"ard-modal-panel\"\r\n    cdkTrapFocus\r\n    [class.ard-modal-no-heading-text]=\"!heading()\"\r\n    [class.ard-modal-has-close-button]=\"!noCloseButton()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <div class=\"ard-modal-heading\">\r\n      <div class=\"ard-modal-heading-text\">{{ heading() || (noCloseButton() ? '' : '&nbsp;') }}</div>\r\n      @if (!noCloseButton()) {\r\n        <ard-icon-button\r\n          class=\"ard-modal-close-button\"\r\n          color=\"none\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"allActionsDisabled()\"\r\n          (click)=\"onCloseButtonClick()\"\r\n        >\r\n          <ng-template #defaultCloseIconTemplate>\r\n            <ard-icon>close</ard-icon>\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"closeIconTemplate()?.template ?? _closeIconTemplate()?.template ?? defaultCloseIconTemplate\"\r\n          />\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n    <div class=\"ard-modal-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-modal-content{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumModalComponent, isStandalone: false, selector: "ard-modal", inputs: { 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 }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, allActionsDisabled: { classPropertyName: "allActionsDisabled", publicName: "allActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, _open: { classPropertyName: "_open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null }, _closeIconTemplate: { classPropertyName: "_closeIconTemplate", publicName: "_closeIconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", closeEvent: "close" }, queries: [{ propertyName: "closeIconTemplate", first: true, predicate: ArdModalCloseIconTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "modalTemplate", first: true, predicate: ["modalTemplate"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-template #modalTemplate>\r\n  @if (noBackdrop()) {\r\n    <div\r\n      class=\"ard-modal\"\r\n      [ngClass]=\"ngClasses()\"\r\n      (click)=\"onBackdropClick()\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      class=\"ard-modal ard-modal-backdrop\"\r\n      [ngClass]=\"ngClasses()\"\r\n      (click)=\"onBackdropClick()\"\r\n    >\r\n      <ng-template [ngTemplateOutlet]=\"_modalInsidePanel\"></ng-template>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #_modalInsidePanel>\r\n  <div\r\n    class=\"ard-modal-panel\"\r\n    cdkTrapFocus\r\n    [class.ard-modal-no-heading-text]=\"!heading()\"\r\n    [class.ard-modal-has-close-button]=\"!noCloseButton()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <div class=\"ard-modal-heading\">\r\n      <div class=\"ard-modal-heading-text\">{{ heading() || (noCloseButton() ? '' : '&nbsp;') }}</div>\r\n      @if (!noCloseButton()) {\r\n        <ard-icon-button\r\n          class=\"ard-modal-close-button\"\r\n          color=\"none\"\r\n          [compact]=\"compact()\"\r\n          [disabled]=\"allActionsDisabled()\"\r\n          (click)=\"onCloseButtonClick()\"\r\n        >\r\n          <ng-template #defaultCloseIconTemplate>\r\n            <ard-icon>close</ard-icon>\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"closeIconTemplate()?.template ?? _closeIconTemplate()?.template ?? defaultCloseIconTemplate\"\r\n          />\r\n        </ard-icon-button>\r\n      }\r\n    </div>\r\n    <div class=\"ard-modal-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".ard-modal-content{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumModalComponent, decorators: [{
             type: Component,
@@ -14607,7 +14677,7 @@ class ArdiumDialogComponent {
         this.closeEvent.emit('close');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumDialogComponent, isStandalone: false, selector: "ard-dialog", inputs: { 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 }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, buttonActionType: { classPropertyName: "buttonActionType", publicName: "buttonActionType", isSignal: true, isRequired: false, transformFunction: null }, allActionsDisabled: { classPropertyName: "allActionsDisabled", publicName: "allActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonColor: { classPropertyName: "confirmButtonColor", publicName: "confirmButtonColor", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonAppearance: { classPropertyName: "confirmButtonAppearance", publicName: "confirmButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonText: { classPropertyName: "rejectButtonText", publicName: "rejectButtonText", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonColor: { classPropertyName: "rejectButtonColor", publicName: "rejectButtonColor", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonAppearance: { classPropertyName: "rejectButtonAppearance", publicName: "rejectButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, noRejectButton: { classPropertyName: "noRejectButton", publicName: "noRejectButton", isSignal: true, isRequired: false, transformFunction: null }, canConfirm: { classPropertyName: "canConfirm", publicName: "canConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeEvent: "close", confirmEvent: "confirm", rejectEvent: "reject" }, queries: [{ propertyName: "buttonsTemplate", first: true, predicate: ArdDialogButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "closeIconTemplate", first: true, predicate: ArdDialogCloseIconTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ard-modal\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [heading]=\"heading()\"\r\n  [noCloseButton]=\"noCloseButton()\"\r\n  [noBackdrop]=\"noBackdrop()\"\r\n  [disableBackdropClose]=\"disableBackdropClose()\"\r\n  [allActionsDisabled]=\"allActionsDisabled()\"\r\n  [(open)]=\"open\"\r\n  (close)=\"onModalClose()\"\r\n  [_closeIconTemplate]=\"closeIconTemplate()\"\r\n>\r\n  <div class=\"ard-dialog-container\">\r\n    <div class=\"ard-dialog-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"ard-dialog-buttons\">\r\n      <ng-template\r\n        #defaultButtonsTemplate\r\n        let-confirmButton=\"confirmButton\"\r\n        let-rejectButton=\"rejectButton\"\r\n        let-canConfirm=\"canConfirm\"\r\n        let-allActionsDisabled=\"allActionsDisabled\"\r\n        let-onConfirm=\"onConfirm\"\r\n        let-onReject=\"onReject\"\r\n        let-dialogVariant=\"dialogVariant\"\r\n        let-dialogCompact=\"dialogCompact\"\r\n      >\r\n        <div class=\"ard-dialog-buttons-container\">\r\n          @if (rejectButton.enabled) {\r\n            <ard-button\r\n              [color]=\"rejectButton.color\"\r\n              [appearance]=\"rejectButton.appearance\"\r\n              [variant]=\"dialogVariant\"\r\n              [compact]=\"dialogCompact\"\r\n              [disabled]=\"allActionsDisabled\"\r\n              (click)=\"onReject()\"\r\n            >\r\n              {{ rejectButton.text }}\r\n            </ard-button>\r\n          }\r\n          <ard-button\r\n            [color]=\"confirmButton.color\"\r\n            [appearance]=\"confirmButton.appearance\"\r\n            [variant]=\"dialogVariant\"\r\n            [compact]=\"dialogCompact\"\r\n            (click)=\"onConfirm()\"\r\n            [disabled]=\"!canConfirm || allActionsDisabled\"\r\n          >\r\n            {{ confirmButton.text }}\r\n          </ard-button>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\r\n      />\r\n    </div>\r\n  </div>\r\n</ard-modal>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "component", type: ArdiumModalComponent, selector: "ard-modal", inputs: ["appearance", "variant", "compact", "heading", "noCloseButton", "noBackdrop", "disableBackdropClose", "allActionsDisabled", "open", "_closeIconTemplate"], outputs: ["openChange", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumDialogComponent, isStandalone: false, selector: "ard-dialog", inputs: { 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 }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, noCloseButton: { classPropertyName: "noCloseButton", publicName: "noCloseButton", isSignal: true, isRequired: false, transformFunction: null }, noBackdrop: { classPropertyName: "noBackdrop", publicName: "noBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, buttonActionType: { classPropertyName: "buttonActionType", publicName: "buttonActionType", isSignal: true, isRequired: false, transformFunction: null }, allActionsDisabled: { classPropertyName: "allActionsDisabled", publicName: "allActionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonText: { classPropertyName: "confirmButtonText", publicName: "confirmButtonText", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonColor: { classPropertyName: "confirmButtonColor", publicName: "confirmButtonColor", isSignal: true, isRequired: false, transformFunction: null }, confirmButtonAppearance: { classPropertyName: "confirmButtonAppearance", publicName: "confirmButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonText: { classPropertyName: "rejectButtonText", publicName: "rejectButtonText", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonColor: { classPropertyName: "rejectButtonColor", publicName: "rejectButtonColor", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonAppearance: { classPropertyName: "rejectButtonAppearance", publicName: "rejectButtonAppearance", isSignal: true, isRequired: false, transformFunction: null }, noRejectButton: { classPropertyName: "noRejectButton", publicName: "noRejectButton", isSignal: true, isRequired: false, transformFunction: null }, canConfirm: { classPropertyName: "canConfirm", publicName: "canConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeEvent: "close", confirmEvent: "confirm", rejectEvent: "reject" }, queries: [{ propertyName: "buttonsTemplate", first: true, predicate: ArdDialogButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "closeIconTemplate", first: true, predicate: ArdDialogCloseIconTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ard-modal\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [heading]=\"heading()\"\r\n  [noCloseButton]=\"noCloseButton()\"\r\n  [noBackdrop]=\"noBackdrop()\"\r\n  [disableBackdropClose]=\"disableBackdropClose()\"\r\n  [allActionsDisabled]=\"allActionsDisabled()\"\r\n  [(open)]=\"open\"\r\n  (close)=\"onModalClose()\"\r\n  [_closeIconTemplate]=\"closeIconTemplate()\"\r\n>\r\n  <div class=\"ard-dialog-container\">\r\n    <div class=\"ard-dialog-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"ard-dialog-buttons\">\r\n      <ng-template\r\n        #defaultButtonsTemplate\r\n        let-confirmButton=\"confirmButton\"\r\n        let-rejectButton=\"rejectButton\"\r\n        let-canConfirm=\"canConfirm\"\r\n        let-allActionsDisabled=\"allActionsDisabled\"\r\n        let-onConfirm=\"onConfirm\"\r\n        let-onReject=\"onReject\"\r\n        let-dialogVariant=\"dialogVariant\"\r\n        let-dialogCompact=\"dialogCompact\"\r\n      >\r\n        <div class=\"ard-dialog-buttons-container\">\r\n          @if (rejectButton.enabled) {\r\n            <ard-button\r\n              [color]=\"rejectButton.color\"\r\n              [appearance]=\"rejectButton.appearance\"\r\n              [variant]=\"dialogVariant\"\r\n              [compact]=\"dialogCompact\"\r\n              [disabled]=\"allActionsDisabled\"\r\n              (click)=\"onReject()\"\r\n            >\r\n              {{ rejectButton.text }}\r\n            </ard-button>\r\n          }\r\n          <ard-button\r\n            [color]=\"confirmButton.color\"\r\n            [appearance]=\"confirmButton.appearance\"\r\n            [variant]=\"dialogVariant\"\r\n            [compact]=\"dialogCompact\"\r\n            (click)=\"onConfirm()\"\r\n            [disabled]=\"!canConfirm || allActionsDisabled\"\r\n          >\r\n            {{ confirmButton.text }}\r\n          </ard-button>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"buttonsTemplate()?.template ?? defaultButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"getButtonsContext()\"\r\n      />\r\n    </div>\r\n  </div>\r\n</ard-modal>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumModalComponent, selector: "ard-modal", inputs: ["appearance", "variant", "compact", "heading", "noCloseButton", "noBackdrop", "disableBackdropClose", "allActionsDisabled", "open", "_closeIconTemplate"], outputs: ["openChange", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDialogComponent, decorators: [{
             type: Component,
@@ -14806,7 +14876,7 @@ class _ArdSimpleSnackbarComponent {
         return `ard-color-${this.color}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _ArdSimpleSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: _ArdSimpleSnackbarComponent, isStandalone: true, selector: "ard-simple-snackbar", ngImport: i0, template: "<div\r\n  class=\"ard-snackbar\"\r\n  [class.ard-snackbar-closing]=\"snackbarRef.onCloseStart | async\"\r\n  [class]=\"colorClass\"\r\n>\r\n  <div class=\"ard-snackbar-content\">\r\n    @if (typeIcon) {\r\n      <ard-icon filled>{{ typeIcon }}</ard-icon>\r\n    }\r\n    <div class=\"ard-snackbar-message\">{{ data.message }}</div>\r\n  </div>\r\n  @if (data.action) {\r\n    <ard-button\r\n      class=\"ard-snackbar-action\"\r\n      appearance=\"transparent\"\r\n      lightColoring\r\n      [color]=\"color\"\r\n      (click)=\"closeWithAction()\"\r\n      >{{ data.action }}</ard-button\r\n    >\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ArdiumButtonModule }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ArdiumIconModule }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: _ArdSimpleSnackbarComponent, isStandalone: true, selector: "ard-simple-snackbar", ngImport: i0, template: "<div\r\n  class=\"ard-snackbar\"\r\n  [class.ard-snackbar-closing]=\"snackbarRef.onCloseStart | async\"\r\n  [class]=\"colorClass\"\r\n>\r\n  <div class=\"ard-snackbar-content\">\r\n    @if (typeIcon) {\r\n      <ard-icon filled>{{ typeIcon }}</ard-icon>\r\n    }\r\n    <div class=\"ard-snackbar-message\">{{ data.message }}</div>\r\n  </div>\r\n  @if (data.action) {\r\n    <ard-button\r\n      class=\"ard-snackbar-action\"\r\n      appearance=\"transparent\"\r\n      lightColoring\r\n      [color]=\"color\"\r\n      (click)=\"closeWithAction()\"\r\n      >{{ data.action }}</ard-button\r\n    >\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ArdiumButtonModule }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ArdiumIconModule }, { 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: _ArdSimpleSnackbarComponent, decorators: [{
             type: Component,
@@ -15057,5 +15127,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARD_BADGE_DEFAULTS, ARD_BUTTON_DEFAULTS, ARD_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_DATE_INPUT_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_CONTROL, ARD_FORM_FIELD_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ArdAddCustomTemplateDirective, ArdAutocompleteInputLoadingTemplateDirective, ArdAutocompleteInputPlaceholderTemplateDirective, ArdAutocompleteInputPrefixTemplateDirective, ArdAutocompleteInputSuffixTemplateDirective, ArdAutocompleteInputSuggestionTemplateDirective, ArdCalendarDayTemplateDirective, ArdCalendarDaysViewHeaderTemplateDirective, ArdCalendarFloatingMonthTemplateDirective, ArdCalendarMonthTemplateDirective, ArdCalendarMonthsViewHeaderTemplateDirective, ArdCalendarView, ArdCalendarWeekdayTemplateDirective, ArdCalendarYearTemplateDirective, ArdCalendarYearsViewHeaderTemplateDirective, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxListLabelTemplateDirective, ArdCheckboxTemplateDirective, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputDayTemplateDirective, ArdDateInputDaysViewHeaderTemplateDirective, ArdDateInputFloatingMonthTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputMonthTemplateDirective, ArdDateInputMonthsViewHeaderTemplateDirective, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDateInputWeekdayTemplateDirective, ArdDateInputYearTemplateDirective, ArdDateInputYearsViewHeaderTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRangeSelectionBehavior, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectDropdownArrowTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdTabberLabelTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumAutocompleteInputComponent, ArdiumAutocompleteInputModule, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputFolderIconTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumFormFieldNativeInputAdapterDirective, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHintErrorComponent, ArdiumHintErrorDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ComponentColor, DecorationElementAppearance, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, provideBadgeDefaults, provideButtonDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideInputDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStateboxDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
+export { ARD_BADGE_DEFAULTS, ARD_BUTTON_DEFAULTS, ARD_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_DATE_INPUT_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_CONTROL, ARD_FORM_FIELD_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ArdAddCustomTemplateDirective, ArdAutocompleteInputLoadingTemplateDirective, ArdAutocompleteInputPlaceholderTemplateDirective, ArdAutocompleteInputPrefixTemplateDirective, ArdAutocompleteInputSuffixTemplateDirective, ArdAutocompleteInputSuggestionTemplateDirective, ArdCalendarDayTemplateDirective, ArdCalendarDaysViewHeaderTemplateDirective, ArdCalendarFloatingMonthTemplateDirective, ArdCalendarMonthTemplateDirective, ArdCalendarMonthsViewHeaderTemplateDirective, ArdCalendarView, ArdCalendarWeekdayTemplateDirective, ArdCalendarYearTemplateDirective, ArdCalendarYearsViewHeaderTemplateDirective, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxListLabelTemplateDirective, ArdCheckboxTemplateDirective, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputDayTemplateDirective, ArdDateInputDaysViewHeaderTemplateDirective, ArdDateInputFloatingMonthTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputMonthTemplateDirective, ArdDateInputMonthsViewHeaderTemplateDirective, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDateInputWeekdayTemplateDirective, ArdDateInputYearTemplateDirective, ArdDateInputYearsViewHeaderTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRangeSelectionBehavior, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectDropdownArrowTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdTabberLabelTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumAutocompleteInputComponent, ArdiumAutocompleteInputModule, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumButtonComponent, ArdiumButtonDirective, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputFolderIconTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumFormFieldNativeInputAdapterDirective, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHintErrorComponent, ArdiumHintErrorDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ComponentColor, DecorationElementAppearance, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, provideBadgeDefaults, provideButtonDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldDefaults, provideFormFieldFrameDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideInputDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStateboxDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
 //# sourceMappingURL=ardium-ui-ui.mjs.map