@ardium-ui/ui 5.0.0-alpha.98 → 5.0.0-alpha.99

package/fesm2022/ardium-ui-ui.mjs

@@ -5403,6 +5403,7 @@ const _buttonDefaults = {
     ..._buttonBaseDefaults,
     variant: ButtonVariant.Rounded,
     vertical: false,
+    square: false,
 };
 const ARD_BUTTON_DEFAULTS = new InjectionToken('ard-button-defaults', {
     factory: () => ({ ..._buttonDefaults }),
@@ -5419,6 +5420,7 @@ class ArdiumButtonDirective extends _ButtonBase {
         //! button settings
         this.variant = input(this._DEFAULTS.variant);
         this.vertical = input(this._DEFAULTS.vertical, { transform: v => coerceBooleanProperty(v) });
+        this.square = input(this._DEFAULTS.square, { transform: v => coerceBooleanProperty(v) });
         this.ngClasses = computed(() => [
             'ard-button',
             this.wrapperClasses(),
@@ -5429,8 +5431,13 @@ class ArdiumButtonDirective extends _ButtonBase {
             this.disabled() ? 'ard-disabled' : '',
             this.compact() ? 'ard-compact' : '',
             this.vertical() ? 'ard-button-vertical' : '',
+            this.square() ? 'ard-button-square' : '',
             this.pointerEventsWhenDisabled() ? 'ard-button-with-pointer-events-when-disabled' : '',
         ].join(' '));
+        //! inheriting from button groups
+        this.inheritedCompact = signal(null);
+        this.wasCompactChanged = signal(false);
+        this.compactOrInherited = computed(() => this.wasCompactChanged() ? this.compact() : (this.inheritedCompact() ?? this.compact()));
         const el = this._hostEl.nativeElement;
         if (el.tagName === 'BUTTON') {
             effect(() => {
@@ -5447,8 +5454,13 @@ class ArdiumButtonDirective extends _ButtonBase {
             event.stopImmediatePropagation();
         }
     }
+    ngOnChanges(changes) {
+        if (changes['compact']) {
+            this.wasCompactChanged.set(true);
+        }
+    }
     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 }); }
+    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 }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "ngClasses()", "tabindex": "tabIndex()" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonDirective, decorators: [{
             type: Directive,
@@ -5475,17 +5487,26 @@ class ArdiumButtonComponent extends _ButtonBase {
         //! button settings
         this.variant = input(this._DEFAULTS.variant);
         this.vertical = input(this._DEFAULTS.vertical, { transform: v => coerceBooleanProperty(v) });
+        this.square = input(this._DEFAULTS.square, { transform: v => coerceBooleanProperty(v) });
+        this.inheritedCompact = signal(null);
+        this.wasCompactChanged = signal(false);
+        this.compactOrInherited = computed(() => this.wasCompactChanged() ? this.compact() : (this.inheritedCompact() ?? this.compact()));
         // stub definition to satisfy abstract class
         this.ngClasses = computed(() => '');
     }
+    ngOnChanges(changes) {
+        if (changes['compact']) {
+            this.wasCompactChanged.set(true);
+        }
+    }
     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.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  [tabIndex]=\"tabIndex()\"\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: ["@layer ard-ui{ard-button{display:block}.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 }); }
+    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 }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusEvent: "focus", blurEvent: "blur" }, host: { properties: { "class.ard-button-with-pointer-events-when-disabled": "pointerEventsWhenDisabled()" } }, usesInheritance: true, usesOnChanges: 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  [tabIndex]=\"tabIndex()\"\r\n  [lightColoring]=\"lightColoring()\"\r\n  [pointerEventsWhenDisabled]=\"pointerEventsWhenDisabled()\"\r\n  [variant]=\"variant()\"\r\n  [vertical]=\"vertical()\"\r\n  [square]=\"square()\"\r\n  [compact]=\"compactOrInherited()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["@layer ard-ui{ard-button{display:block}.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", "square"] }], 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  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  [tabIndex]=\"tabIndex()\"\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: ["@layer ard-ui{ard-button{display:block}.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  [tabIndex]=\"tabIndex()\"\r\n  [lightColoring]=\"lightColoring()\"\r\n  [pointerEventsWhenDisabled]=\"pointerEventsWhenDisabled()\"\r\n  [variant]=\"variant()\"\r\n  [vertical]=\"vertical()\"\r\n  [square]=\"square()\"\r\n  [compact]=\"compactOrInherited()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n>\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: ["@layer ard-ui{ard-button{display:block}.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]
@@ -5546,7 +5567,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  [multiple]=\"multiple()\"\r\n  [attr.id]=\"htmlId()\"\r\n  [attr.name]=\"htmlName()\"\r\n  [tabIndex]=\"tabIndex()\"\r\n  [readOnly]=\"readonly()\"\r\n  [disabled]=\"disabled()\"\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    [tabIndex]=\"this.readonly() ? -1 : tabIndex()\"\r\n    [disabled]=\"this.disabled() || this.readonly()\"\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: ["@layer ard-ui{ard-file-drop-area{display:block}.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: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "pipe", type: i4.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i4.ArdiumFileNamePipe, name: "filename" }, { kind: "pipe", type: i4.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  [multiple]=\"multiple()\"\r\n  [attr.id]=\"htmlId()\"\r\n  [attr.name]=\"htmlName()\"\r\n  [tabIndex]=\"tabIndex()\"\r\n  [readOnly]=\"readonly()\"\r\n  [disabled]=\"disabled()\"\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    [tabIndex]=\"this.readonly() ? -1 : tabIndex()\"\r\n    [disabled]=\"this.disabled() || this.readonly()\"\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: ["@layer ard-ui{ard-file-drop-area{display:block}.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", "square"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "pipe", type: i4.ArdiumFileExtensionPipe, name: "fileext" }, { kind: "pipe", type: i4.ArdiumFileNamePipe, name: "filename" }, { kind: "pipe", type: i4.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,
@@ -7008,7 +7029,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 }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", 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 }, staticHeight: { classPropertyName: "staticHeight", publicName: "staticHeight", isSignal: true, isRequired: true, transformFunction: null }, hideFloatingMonth: { classPropertyName: "hideFloatingMonth", publicName: "hideFloatingMonth", 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 }, daysViewHeaderDateFormat: { classPropertyName: "daysViewHeaderDateFormat", publicName: "daysViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, weekdayDateFormat: { classPropertyName: "weekdayDateFormat", publicName: "weekdayDateFormat", isSignal: true, isRequired: true, transformFunction: null }, weekdayTitleDateFormat: { classPropertyName: "weekdayTitleDateFormat", publicName: "weekdayTitleDateFormat", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthDateFormat: { classPropertyName: "floatingMonthDateFormat", publicName: "floatingMonthDateFormat", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthTitleDateFormat: { classPropertyName: "floatingMonthTitleDateFormat", publicName: "floatingMonthTitleDateFormat", isSignal: true, isRequired: true, transformFunction: null }, dayDateFormat: { classPropertyName: "dayDateFormat", publicName: "dayDateFormat", 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-hideNextPageButton=\"hideNextPageButton\"\r\n        let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n        let-openYearsView=\"openYearsView\"\r\n        let-onFocus=\"onFocus\"\r\n        let-onBlur=\"onBlur\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <div>\r\n            @if (!hidePreviousPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"prevMonth()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToPreviousMonth\"\r\n              >\r\n                <ard-icon>chevron_left</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n          <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            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n          >\r\n            {{ currDate | date: this.daysViewHeaderDateFormat() | uppercase }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div>\r\n            @if (!hideNextPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"nextMonth()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToNextMonth\"\r\n              >\r\n                <ard-icon>chevron_right</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\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: weekdayTitleDateFormat() | titlecase\"\r\n      >\r\n        {{ date | date: weekdayDateFormat() | 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      />\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    @if (!hideFloatingMonth()) {\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: floatingMonthTitleDateFormat() | titlecase\">\r\n            {{ date | date: floatingMonthDateFormat() | 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        />\r\n      </div>\r\n    }\r\n    @for (week of activeCalendarData().array; track $index) {\r\n      @for (day of week; track day ? day : activeCalendarData().leadingSpaces - $index) {\r\n        @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-highlighted-in-range]=\"isDayBetweenSelectedHighlighted(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__entry-selected-start]=\"isDaySelectedStart(day.value)\"\r\n            [class.ard-calendar__entry-selected-end]=\"isDaySelectedEnd(day.value)\"\r\n            [class.ard-calendar__entry-selected-in-range]=\"isDayBetweenSelectedRange(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-range-overlay\"></div>\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-date=\"date\"\r\n                >\r\n                  {{ date | date: dayDateFormat() }}\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      }\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-days-view{display:block}}\n"], 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 }); }
+    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 }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", 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 }, staticHeight: { classPropertyName: "staticHeight", publicName: "staticHeight", isSignal: true, isRequired: true, transformFunction: null }, hideFloatingMonth: { classPropertyName: "hideFloatingMonth", publicName: "hideFloatingMonth", 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 }, daysViewHeaderDateFormat: { classPropertyName: "daysViewHeaderDateFormat", publicName: "daysViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, weekdayDateFormat: { classPropertyName: "weekdayDateFormat", publicName: "weekdayDateFormat", isSignal: true, isRequired: true, transformFunction: null }, weekdayTitleDateFormat: { classPropertyName: "weekdayTitleDateFormat", publicName: "weekdayTitleDateFormat", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthDateFormat: { classPropertyName: "floatingMonthDateFormat", publicName: "floatingMonthDateFormat", isSignal: true, isRequired: true, transformFunction: null }, floatingMonthTitleDateFormat: { classPropertyName: "floatingMonthTitleDateFormat", publicName: "floatingMonthTitleDateFormat", isSignal: true, isRequired: true, transformFunction: null }, dayDateFormat: { classPropertyName: "dayDateFormat", publicName: "dayDateFormat", 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-hideNextPageButton=\"hideNextPageButton\"\r\n        let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n        let-openYearsView=\"openYearsView\"\r\n        let-onFocus=\"onFocus\"\r\n        let-onBlur=\"onBlur\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <div>\r\n            @if (!hidePreviousPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"prevMonth()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToPreviousMonth\"\r\n              >\r\n                <ard-icon>chevron_left</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n          <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            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n          >\r\n            {{ currDate | date: this.daysViewHeaderDateFormat() | uppercase }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div>\r\n            @if (!hideNextPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"nextMonth()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\r\n                [tabIndex]=\"tabIndex()\"\r\n                [disabled]=\"!canGoToNextMonth\"\r\n              >\r\n                <ard-icon>chevron_right</ard-icon>\r\n              </ard-icon-button>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\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: weekdayTitleDateFormat() | titlecase\"\r\n      >\r\n        {{ date | date: weekdayDateFormat() | 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      />\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    @if (!hideFloatingMonth()) {\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: floatingMonthTitleDateFormat() | titlecase\">\r\n            {{ date | date: floatingMonthDateFormat() | 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        />\r\n      </div>\r\n    }\r\n    @for (week of activeCalendarData().array; track $index) {\r\n      @for (day of week; track day ? day : activeCalendarData().leadingSpaces - $index) {\r\n        @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-highlighted-in-range]=\"isDayBetweenSelectedHighlighted(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__entry-selected-start]=\"isDaySelectedStart(day.value)\"\r\n            [class.ard-calendar__entry-selected-end]=\"isDaySelectedEnd(day.value)\"\r\n            [class.ard-calendar__entry-selected-in-range]=\"isDayBetweenSelectedRange(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-range-overlay\"></div>\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-date=\"date\"\r\n                >\r\n                  {{ date | date: dayDateFormat() }}\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      }\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-days-view{display:block}}\n"], 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", "square"], 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,
@@ -7326,7 +7347,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 }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", 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 }, monthsViewHeaderDateFormat: { classPropertyName: "monthsViewHeaderDateFormat", publicName: "monthsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, monthDateFormat: { classPropertyName: "monthDateFormat", publicName: "monthDateFormat", 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-date=\"date\"\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-hideNextPageButton=\"hideNextPageButton\"\r\n        let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n        let-openDaysView=\"openDaysView\"\r\n        let-onFocus=\"onFocus\"\r\n        let-onBlur=\"onBlur\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <div>\r\n            @if (!hidePreviousPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"prevPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\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            }\r\n          </div>\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            [color]=\"color()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n          >\r\n            {{ date | date: monthsViewHeaderDateFormat() }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div>\r\n            @if (!hideNextPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"nextPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\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            }\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-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(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__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n        [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n        [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(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        <div class=\"ard-calendar__entry-button\">\r\n          <div class=\"ard-range-overlay\"></div>\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: monthDateFormat() : '+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        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-months-view{display:block}}\n"], 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 }); }
+    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 }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", 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 }, monthsViewHeaderDateFormat: { classPropertyName: "monthsViewHeaderDateFormat", publicName: "monthsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, monthDateFormat: { classPropertyName: "monthDateFormat", publicName: "monthDateFormat", 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-date=\"date\"\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-hideNextPageButton=\"hideNextPageButton\"\r\n        let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n        let-openDaysView=\"openDaysView\"\r\n        let-onFocus=\"onFocus\"\r\n        let-onBlur=\"onBlur\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <div>\r\n            @if (!hidePreviousPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"prevPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\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            }\r\n          </div>\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            [color]=\"color()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n          >\r\n            {{ date | date: monthsViewHeaderDateFormat() }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div>\r\n            @if (!hideNextPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"nextPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\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            }\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-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(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__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n        [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n        [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(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        <div class=\"ard-calendar__entry-button\">\r\n          <div class=\"ard-range-overlay\"></div>\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: monthDateFormat() : '+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        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-months-view{display:block}}\n"], 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", "square"], 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,
@@ -7631,7 +7652,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 }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, multipleYearPageSize: { classPropertyName: "multipleYearPageSize", publicName: "multipleYearPageSize", 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 }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", 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-hideNextPageButton=\"hideNextPageButton\"\r\n        let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n        let-openDaysView=\"openDaysView\"\r\n        let-onFocus=\"onFocus\"\r\n        let-onBlur=\"onBlur\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <div>\r\n            @if (!hidePreviousPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"prevPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\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            }\r\n          </div>\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)=\"openDaysView()\"\r\n            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n          >\r\n            {{ dateRange.from | date: yearsViewHeaderDateFormat() }}\r\n            &mdash;\r\n            {{ dateRange.to | date: yearsViewHeaderDateFormat() }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div>\r\n            @if (!hideNextPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"nextPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\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            }\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-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(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__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n        [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n        [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(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        <div class=\"ard-calendar__entry-button\">\r\n          <div class=\"ard-range-overlay\"></div>\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: yearDateFormat() }}\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        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-years-view{display:block}}\n"], 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 }); }
+    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 }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, multipleYearPageSize: { classPropertyName: "multipleYearPageSize", publicName: "multipleYearPageSize", 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 }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", 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-hideNextPageButton=\"hideNextPageButton\"\r\n        let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n        let-openDaysView=\"openDaysView\"\r\n        let-onFocus=\"onFocus\"\r\n        let-onBlur=\"onBlur\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <div>\r\n            @if (!hidePreviousPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"prevPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\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            }\r\n          </div>\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)=\"openDaysView()\"\r\n            (focus)=\"onFocus($event)\"\r\n            (blur)=\"onBlur($event)\"\r\n          >\r\n            {{ dateRange.from | date: yearsViewHeaderDateFormat() }}\r\n            &mdash;\r\n            {{ dateRange.to | date: yearsViewHeaderDateFormat() }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div>\r\n            @if (!hideNextPageButton) {\r\n              <ard-icon-button\r\n                size=\"small\"\r\n                appearance=\"transparent\"\r\n                color=\"none\"\r\n                (click)=\"nextPage()\"\r\n                (focus)=\"onFocus($event)\"\r\n                (blur)=\"onBlur($event)\"\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            }\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-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(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__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n        [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n        [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(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        <div class=\"ard-calendar__entry-button\">\r\n          <div class=\"ard-range-overlay\"></div>\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: yearDateFormat() }}\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        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer ard-ui{ard-years-view{display:block}}\n"], 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", "square"], 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,
@@ -8868,7 +8889,7 @@ class ArdiumDateInputComponent extends _AbstractDateInput {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumDateInputComponent,
             },
-        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ date }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      @if (!readonly()) {\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.id]=\"htmlId()\"\r\n            [attr.name]=\"htmlName()\"\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      }\r\n    </div>\r\n\r\n    @if (!calendarHidden() && !readonly()) {\r\n      <ard-icon-button\r\n        color=\"none\"\r\n        [disabled]=\"calendarDisabled()\"\r\n        (click)=\"onCalendarButtonClick($event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n      >\r\n        <ng-template\r\n          #defaultCalendarIconTemplate\r\n          let-date\r\n        >\r\n          <ard-icon filled>today</ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n      </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n      <div class=\"ard-date-input__accept-buttons-container\">\r\n        <ng-template\r\n          #defaultAcceptButtonsTemplate\r\n          let-accept=\"accept\"\r\n          let-cancel=\"cancel\"\r\n          let-disabled=\"disabled\"\r\n        >\r\n          <ard-button\r\n            appearance=\"outlined\"\r\n            color=\"none\"\r\n            [disabled]=\"disabled\"\r\n            (click)=\"cancel()\"\r\n          >\r\n            {{ cancelButtonText() }}\r\n          </ard-button>\r\n          <ard-button\r\n            appearance=\"raised\"\r\n            [color]=\"color()\"\r\n            [disabled]=\"disabled\"\r\n            (click)=\"accept()\"\r\n          >\r\n            {{ acceptButtonText() }}\r\n          </ard-button>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n          [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n        />\r\n      </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-date-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n    [class.ard-date-input__date-input-focused]=\"isDateInputFocused()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ date }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n      @if (!readonly()) {\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.id]=\"htmlId()\"\r\n            [attr.name]=\"htmlName()\"\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      }\r\n    </div>\r\n\r\n    @if (!calendarHidden() && !readonly()) {\r\n      <ard-icon-button\r\n        color=\"none\"\r\n        [disabled]=\"calendarDisabled()\"\r\n        (click)=\"onCalendarButtonClick($event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n      >\r\n        <ng-template\r\n          #defaultCalendarIconTemplate\r\n          let-date\r\n        >\r\n          <ard-icon filled>today</ard-icon>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n      </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n      (focus)=\"onFocus($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n      <div class=\"ard-date-input__accept-buttons-container\">\r\n        <ng-template\r\n          #defaultAcceptButtonsTemplate\r\n          let-accept=\"accept\"\r\n          let-cancel=\"cancel\"\r\n          let-disabled=\"disabled\"\r\n        >\r\n          <ard-button\r\n            appearance=\"outlined\"\r\n            color=\"none\"\r\n            [disabled]=\"disabled\"\r\n            (click)=\"cancel()\"\r\n          >\r\n            {{ cancelButtonText() }}\r\n          </ard-button>\r\n          <ard-button\r\n            appearance=\"raised\"\r\n            [color]=\"color()\"\r\n            [disabled]=\"disabled\"\r\n            (click)=\"accept()\"\r\n          >\r\n            {{ acceptButtonText() }}\r\n          </ard-button>\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n          [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n        />\r\n      </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-date-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical", "square"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateInputComponent, decorators: [{
             type: Component,
@@ -9221,7 +9242,7 @@ class ArdiumDateRangeInputComponent extends _AbstractDateInput {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumDateRangeInputComponent,
             },
-        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateRangeInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateRangeInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateRangeInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateRangeInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateRangeInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateRangeInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateRangeInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateRangeInputDayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input ard-date-range-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ date }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden() && !readonly()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-range-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-range-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n      />\r\n    </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-date-range-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumRangeCalendarComponent, selector: "ard-range-calendar", inputs: ["value"], outputs: ["valueChange", "startSelection"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateRangeInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateRangeInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateRangeInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateRangeInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateRangeInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateRangeInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateRangeInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateRangeInputDayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input ard-date-range-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ date }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden() && !readonly()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <ard-range-calendar\r\n      class=\"ard-date-input__calendar\"\r\n      [(activeMonth)]=\"activeMonth\"\r\n      [(activeYear)]=\"activeYear\"\r\n      [(activeView)]=\"activeView\"\r\n      [firstWeekday]=\"firstWeekday()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [UTC]=\"_UTCAfterInit()\"\r\n      [hideFloatingMonth]=\"hideFloatingMonth()\"\r\n      autoFocus\r\n      staticHeight\r\n      [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n      [color]=\"color()\"\r\n      [disabled]=\"disabled() || calendarDisabled()\"\r\n      [tabIndex]=\"tabIndex()\"\r\n      [value]=\"value()\"\r\n      [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n      [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n      [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n      [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n      [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n      [floatingMonthDateFormat]=\"calendarFloatingMonthDateFormat()\"\r\n      [floatingMonthTitleDateFormat]=\"calendarFloatingMonthTitleDateFormat()\"\r\n      [yearDateFormat]=\"calendarYearDateFormat()\"\r\n      [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n      [dayDateFormat]=\"calendarDayDateFormat()\"\r\n      (valueChange)=\"onCalendarSelectedChange($event)\"\r\n      (yearSelect)=\"yearSelect.emit($event)\"\r\n      (monthSelect)=\"monthSelect.emit($event)\"\r\n    >\r\n      <ng-template\r\n        _ard-tmp-repository\r\n        [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n        [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n        [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n        [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n        [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n        [yearTmp]=\"calendarYearTemplate()\"\r\n        [monthTmp]=\"calendarMonthTemplate()\"\r\n        [dayTmp]=\"calendarDayTemplate()\"\r\n      />\r\n    </ard-range-calendar>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n      />\r\n    </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-date-range-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumRangeCalendarComponent, selector: "ard-range-calendar", inputs: ["value"], outputs: ["valueChange", "startSelection"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical", "square"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateRangeInputComponent, decorators: [{
             type: Component,
@@ -9627,7 +9648,7 @@ class ArdiumMultipageDateRangeInputComponent extends _AbstractDateInput {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumMultipageDateRangeInputComponent,
             },
-        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdMultipageDateRangeInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdMultipageDateRangeInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdMultipageDateRangeInputDayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input ard-multipage-date-range-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ date }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden() && !readonly()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <div class=\"ard-date-input__multipage-wrapper\">\r\n      @for (calendarData of calendarDataArray(); track $index) {\r\n      <ard-range-calendar\r\n        class=\"ard-date-input__calendar\"\r\n        [activeMonth]=\"calendarData.activeDate.getMonth()\"\r\n        [activeYear]=\"calendarData.activeDate.getFullYear()\"\r\n        (activePageChange)=\"onActivePageChange($event, $index)\"\r\n        (highlightDay)=\"onHighlightDate($event)\"\r\n        [highlightedDay]=\"calendarData.highlightedDay\"\r\n        [(activeView)]=\"activeView\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [UTC]=\"_UTCAfterInit()\"\r\n        [autoFocus]=\"$index === 0\"\r\n        hideFloatingMonth\r\n        staticHeight\r\n        [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n        [color]=\"color()\"\r\n        [disabled]=\"disabled() || calendarDisabled()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [value]=\"value()\"\r\n        [multiCalendarLocation]=\"calendarData.location\"\r\n        [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n        [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n        [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n        [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n        [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n        [yearDateFormat]=\"calendarYearDateFormat()\"\r\n        [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n        [dayDateFormat]=\"calendarDayDateFormat()\"\r\n        (valueChange)=\"onCalendarSelectedChange($event)\"\r\n        (yearSelect)=\"yearSelect.emit($event)\"\r\n        (monthSelect)=\"monthSelect.emit($event)\"\r\n      >\r\n        <ng-template\r\n          _ard-tmp-repository\r\n          [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate() ?? { template: defaultDaysViewHeaderTemplate }\"\r\n          [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n          [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n          [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n          [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n          [yearTmp]=\"calendarYearTemplate()\"\r\n          [monthTmp]=\"calendarMonthTemplate()\"\r\n          [dayTmp]=\"calendarDayTemplate()\"\r\n        />\r\n      </ard-range-calendar>\r\n      }\r\n    </div>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n      />\r\n    </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDaysViewHeaderTemplate\r\n  let-currDate\r\n  let-nextMonth=\"nextMonth\"\r\n  let-prevMonth=\"prevMonth\"\r\n  let-canGoToNextMonth=\"canGoToNextPage\"\r\n  let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n  let-hideNextPageButton=\"hideNextPageButton\"\r\n  let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n>\r\n  <div class=\"ard-calendar__calendar-header\">\r\n    <div>\r\n      @if (!hidePreviousPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"prevMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToPreviousMonth\"\r\n      >\r\n        <ard-icon>chevron_left</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n    <span class=\"ard-calendar__header-button\">\r\n      {{ currDate | date : calendarDaysViewHeaderDateFormat() | uppercase }}\r\n    </span>\r\n    <div>\r\n      @if (!hideNextPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"nextMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToNextMonth\"\r\n      >\r\n        <ard-icon>chevron_right</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-multipage-date-range-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumRangeCalendarComponent, selector: "ard-range-calendar", inputs: ["value"], outputs: ["valueChange", "startSelection"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdMultipageDateRangeInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdMultipageDateRangeInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdMultipageDateRangeInputDayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\r\n  [isFocused]=\"isFocused()\"\r\n  [hasError]=\"hasError()\"\r\n  [isSuccess]=\"isSuccess()\"\r\n  [prefixTemplate]=\"prefixTemplate()?.template\"\r\n  [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n  <div\r\n    class=\"ard-date-input ard-multipage-date-range-input\"\r\n    #dropdownHost\r\n    (click)=\"onGeneralClick($event)\"\r\n    [class.ard-has-value]=\"!!value()\"\r\n    [ngClass]=\"ngClasses()\"\r\n  >\r\n    <div class=\"ard-date-input__value-container ard-input-container\">\r\n      <div\r\n        class=\"ard-date-input__placeholder ard-placeholder\"\r\n        [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      <div\r\n        class=\"ard-date-input__value\"\r\n        [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n      >\r\n        <ng-template\r\n          #defaultValueTemplate\r\n          let-date\r\n        >\r\n          {{ date }}\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n          [ngTemplateOutletContext]=\"valueContext()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (!calendarHidden() && !readonly()) {\r\n    <ard-icon-button\r\n      color=\"none\"\r\n      [disabled]=\"calendarDisabled()\"\r\n      (click)=\"onCalendarButtonClick($event)\"\r\n    >\r\n      <ng-template\r\n        #defaultCalendarIconTemplate\r\n        let-date\r\n      >\r\n        <ard-icon filled>today</ard-icon>\r\n      </ng-template>\r\n\r\n      <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n    </ard-icon-button>\r\n    }\r\n  </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n  <ard-dropdown-panel\r\n    class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n    [appearance]=\"dropdownAppearanceOrDefault()\"\r\n    [variant]=\"dropdownVariantOrDefault()\"\r\n    [isOpen]=\"true\"\r\n    [panelId]=\"htmlId()\"\r\n    [compact]=\"compact()\"\r\n    (ardClickOutside)=\"onOutsideClick($event)\"\r\n  >\r\n    <div class=\"ard-date-input__multipage-wrapper\">\r\n      @for (calendarData of calendarDataArray(); track $index) {\r\n      <ard-range-calendar\r\n        class=\"ard-date-input__calendar\"\r\n        [activeMonth]=\"calendarData.activeDate.getMonth()\"\r\n        [activeYear]=\"calendarData.activeDate.getFullYear()\"\r\n        (activePageChange)=\"onActivePageChange($event, $index)\"\r\n        (highlightDay)=\"onHighlightDate($event)\"\r\n        [highlightedDay]=\"calendarData.highlightedDay\"\r\n        [(activeView)]=\"activeView\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [UTC]=\"_UTCAfterInit()\"\r\n        [autoFocus]=\"$index === 0\"\r\n        hideFloatingMonth\r\n        staticHeight\r\n        [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n        [color]=\"color()\"\r\n        [disabled]=\"disabled() || calendarDisabled()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [value]=\"value()\"\r\n        [multiCalendarLocation]=\"calendarData.location\"\r\n        [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n        [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n        [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n        [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n        [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n        [yearDateFormat]=\"calendarYearDateFormat()\"\r\n        [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n        [dayDateFormat]=\"calendarDayDateFormat()\"\r\n        (valueChange)=\"onCalendarSelectedChange($event)\"\r\n        (yearSelect)=\"yearSelect.emit($event)\"\r\n        (monthSelect)=\"monthSelect.emit($event)\"\r\n      >\r\n        <ng-template\r\n          _ard-tmp-repository\r\n          [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate() ?? { template: defaultDaysViewHeaderTemplate }\"\r\n          [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n          [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n          [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n          [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n          [yearTmp]=\"calendarYearTemplate()\"\r\n          [monthTmp]=\"calendarMonthTemplate()\"\r\n          [dayTmp]=\"calendarDayTemplate()\"\r\n        />\r\n      </ard-range-calendar>\r\n      }\r\n    </div>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n        [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n      />\r\n    </div>\r\n    }\r\n  </ard-dropdown-panel>\r\n</ng-template>\r\n\r\n<ng-template\r\n  #defaultDaysViewHeaderTemplate\r\n  let-currDate\r\n  let-nextMonth=\"nextMonth\"\r\n  let-prevMonth=\"prevMonth\"\r\n  let-canGoToNextMonth=\"canGoToNextPage\"\r\n  let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n  let-hideNextPageButton=\"hideNextPageButton\"\r\n  let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n>\r\n  <div class=\"ard-calendar__calendar-header\">\r\n    <div>\r\n      @if (!hidePreviousPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"prevMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToPreviousMonth\"\r\n      >\r\n        <ard-icon>chevron_left</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n    <span class=\"ard-calendar__header-button\">\r\n      {{ currDate | date : calendarDaysViewHeaderDateFormat() | uppercase }}\r\n    </span>\r\n    <div>\r\n      @if (!hideNextPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"nextMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToNextMonth\"\r\n      >\r\n        <ard-icon>chevron_right</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@layer ard-ui{ard-multipage-date-range-input{display:block}.ard-date-input .ard-input-container .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-input-container .ard-date-input__value.ard-date-input__value-hidden{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumRangeCalendarComponent, selector: "ard-range-calendar", inputs: ["value"], outputs: ["valueChange", "startSelection"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical", "square"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumMultipageDateRangeInputComponent, decorators: [{
             type: Component,
@@ -10453,7 +10474,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumNumberInputComponent,
             },
-        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdNumberInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdNumberInputSuffixTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button decrement\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canDecrement()\"\r\n      [tabIndex]=\"!canDecrement() || readonly() ? -1 : tabIndex()\"\r\n      pointerEventsWhenDisabled\r\n      (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-number-input-wrapper\">\r\n    @if (prefixTemplate()) {\r\n      <div class=\"ard-number-input-prefix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\r\n    }\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template\r\n          #defaultPlaceholderTemplate\r\n          let-plchldr\r\n        >\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        inputmode=\"numeric\"\r\n        [attr.id]=\"htmlId()\"\r\n        [attr.name]=\"htmlName()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n    @if (suffixTemplate()) {\r\n      <div class=\"ard-number-input-suffix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button increment\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canIncrement()\"\r\n      [tabIndex]=\"!canIncrement() || readonly() ? -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: ["@layer ard-ui{ard-number-input{display:block}.ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input{text-align:left}.ard-text-align-left .ard-placeholder{justify-content:flex-start}.ard-text-align-center input{text-align:center}.ard-text-align-center .ard-placeholder{justify-content:center}.ard-text-align-right input{text-align:right}.ard-text-align-right .ard-placeholder{justify-content:flex-end}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}.ard-readonly>.ard-number-input .ard-quick-change-button{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: i4.ArdiumHoldDirective, selector: "[ardHold]", inputs: ["ardHoldDisabled", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdNumberInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdNumberInputSuffixTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button decrement\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canDecrement()\"\r\n      [tabIndex]=\"!canDecrement() || readonly() ? -1 : tabIndex()\"\r\n      pointerEventsWhenDisabled\r\n      (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-number-input-wrapper\">\r\n    @if (prefixTemplate()) {\r\n      <div class=\"ard-number-input-prefix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\r\n    }\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template\r\n          #defaultPlaceholderTemplate\r\n          let-plchldr\r\n        >\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        inputmode=\"numeric\"\r\n        [attr.id]=\"htmlId()\"\r\n        [attr.name]=\"htmlName()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n    @if (suffixTemplate()) {\r\n      <div class=\"ard-number-input-suffix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button increment\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canIncrement()\"\r\n      [tabIndex]=\"!canIncrement() || readonly() ? -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: ["@layer ard-ui{ard-number-input{display:block}.ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input{text-align:left}.ard-text-align-left .ard-placeholder{justify-content:flex-start}.ard-text-align-center input{text-align:center}.ard-text-align-center .ard-placeholder{justify-content:center}.ard-text-align-right input{text-align:right}.ard-text-align-right .ard-placeholder{justify-content:flex-end}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}.ard-readonly>.ard-number-input .ard-quick-change-button{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: i4.ArdiumHoldDirective, selector: "[ardHold]", inputs: ["ardHoldDisabled", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical", "square"], 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,
@@ -10505,6 +10526,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+const _buttonGroupDefaults = {
+    vertical: false,
+    compact: false,
+};
+const ARD_BUTTON_GROUP_DEFAULTS = new InjectionToken('ard-button-group-defaults', {
+    factory: () => ({ ..._buttonGroupDefaults }),
+});
+function provideButtonGroupDefaults(config) {
+    return { provide: ARD_BUTTON_GROUP_DEFAULTS, useValue: { ..._buttonGroupDefaults, ...config } };
+}
+
+class ArdiumButtonGroupComponent {
+    ngOnChanges(changes) {
+        if (changes['vertical']) {
+            this.wasVerticalChanged.set(true);
+        }
+        if (changes['compact']) {
+            this.wasCompactChanged.set(true);
+        }
+    }
+    constructor() {
+        this._DEFAULTS = inject(ARD_BUTTON_GROUP_DEFAULTS);
+        this.vertical = input(this._DEFAULTS.vertical, { transform: v => coerceBooleanProperty(v) });
+        this.inheritedVertical = signal(null);
+        this.compact = input(this._DEFAULTS.compact, { transform: v => coerceBooleanProperty(v) });
+        this.inheritedCompact = signal(null);
+        this.wasVerticalChanged = signal(false);
+        this.wasCompactChanged = signal(false);
+        this.verticalOrInherited = computed(() => this.wasVerticalChanged() ? this.vertical() : (this.inheritedVertical() ?? this.vertical()));
+        this.compactOrInherited = computed(() => this.wasCompactChanged() ? this.compact() : (this.inheritedCompact() ?? this.compact()));
+        this.groupChildren = contentChildren(ArdiumButtonGroupComponent);
+        this.buttonChildren = contentChildren(ArdiumButtonComponent);
+        this.buttonDirChildren = contentChildren(ArdiumButtonDirective);
+        this._wasContentInitialized = false;
+        effect(() => {
+            this._updateChildrenStyles();
+        });
+    }
+    ngAfterContentInit() {
+        this._wasContentInitialized = true;
+        this._updateChildrenStyles();
+    }
+    _updateChildrenStyles() {
+        const buttonChildren = this.buttonChildren();
+        const buttonDirChildren = this.buttonDirChildren();
+        const groupChildren = this.groupChildren();
+        const compact = this.compactOrInherited();
+        const vertical = this.verticalOrInherited();
+        if (!this._wasContentInitialized) {
+            return;
+        }
+        for (const child of [...buttonChildren, ...buttonDirChildren]) {
+            child.inheritedCompact.set(compact);
+        }
+        for (const child of groupChildren) {
+            child.inheritedCompact.set(compact);
+            child.inheritedVertical.set(vertical);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumButtonGroupComponent, isStandalone: false, selector: "ard-button-group", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-button-group__vertical": "verticalOrInherited()", "class.ard-button-group__compact": "compactOrInherited()" }, classAttribute: "ard-button-group" }, queries: [{ propertyName: "groupChildren", predicate: ArdiumButtonGroupComponent, isSignal: true }, { propertyName: "buttonChildren", predicate: ArdiumButtonComponent, isSignal: true }, { propertyName: "buttonDirChildren", predicate: ArdiumButtonDirective, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content />", styles: ["@layer ard-ui{ard-button-group{display:flex;z-index:0;max-width:max-content}ard-button-group .ard-button:hover,ard-button-group .ard-button:focus,ard-button-group .ard-button:focus-visible,ard-button-group .ard-button:active{z-index:1}ard-button-group:not(.ard-button-group__vertical):not(:has(>ard-button-group))>ard-button:not(:last-child) .ard-button{border-top-right-radius:0;border-bottom-right-radius:0}ard-button-group:not(.ard-button-group__vertical):not(:has(>ard-button-group))>ard-button:not(:first-child) .ard-button{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}ard-button-group:not(.ard-button-group__vertical):not(:has(>ard-button-group))>.ard-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}ard-button-group:not(.ard-button-group__vertical):not(:has(>ard-button-group))>.ard-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}ard-button-group:not(.ard-button-group__vertical):not(:has(>ard-button-group)) .ard-divider+ard-button .ard-button,ard-button-group:not(.ard-button-group__vertical):not(:has(>ard-button-group)) .ard-divider+.ard-button{margin-left:0}ard-button-group.ard-button-group__vertical{flex-direction:column}ard-button-group.ard-button-group__vertical:not(:has(>ard-button-group))>ard-button:not(:last-child) .ard-button{border-bottom-right-radius:0;border-bottom-left-radius:0}ard-button-group.ard-button-group__vertical:not(:has(>ard-button-group))>ard-button:not(:first-child) .ard-button{border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px}ard-button-group.ard-button-group__vertical:not(:has(>ard-button-group))>.ard-button:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}ard-button-group.ard-button-group__vertical:not(:has(>ard-button-group))>.ard-button:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px}ard-button-group.ard-button-group__vertical:not(:has(>ard-button-group))>.ard-divider+ard-button .ard-button,ard-button-group.ard-button-group__vertical:not(:has(>ard-button-group))>.ard-divider+.ard-button{margin-top:0}ard-button-group.ard-button-group__vertical>.ard-button,ard-button-group.ard-button-group__vertical>ard-button,ard-button-group.ard-button-group__vertical>ard-button>.ard-button{width:100%;aspect-ratio:unset}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'ard-button-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ard-button-group',
+                        '[class.ard-button-group__vertical]': 'verticalOrInherited()',
+                        '[class.ard-button-group__compact]': 'compactOrInherited()',
+                    }, template: "<ng-content />", styles: ["@layer ard-ui{ard-button-group{display:flex;z-index:0;max-width:max-content}ard-button-group .ard-button:hover,ard-button-group .ard-button:focus,ard-button-group .ard-button:focus-visible,ard-button-group .ard-button:active{z-index:1}ard-button-group:not(.ard-button-group__vertical):not(:has(>ard-button-group))>ard-button:not(:last-child) .ard-button{border-top-right-radius:0;border-bottom-right-radius:0}ard-button-group:not(.ard-button-group__vertical):not(:has(>ard-button-group))>ard-button:not(:first-child) .ard-button{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}ard-button-group:not(.ard-button-group__vertical):not(:has(>ard-button-group))>.ard-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}ard-button-group:not(.ard-button-group__vertical):not(:has(>ard-button-group))>.ard-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}ard-button-group:not(.ard-button-group__vertical):not(:has(>ard-button-group)) .ard-divider+ard-button .ard-button,ard-button-group:not(.ard-button-group__vertical):not(:has(>ard-button-group)) .ard-divider+.ard-button{margin-left:0}ard-button-group.ard-button-group__vertical{flex-direction:column}ard-button-group.ard-button-group__vertical:not(:has(>ard-button-group))>ard-button:not(:last-child) .ard-button{border-bottom-right-radius:0;border-bottom-left-radius:0}ard-button-group.ard-button-group__vertical:not(:has(>ard-button-group))>ard-button:not(:first-child) .ard-button{border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px}ard-button-group.ard-button-group__vertical:not(:has(>ard-button-group))>.ard-button:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}ard-button-group.ard-button-group__vertical:not(:has(>ard-button-group))>.ard-button:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px}ard-button-group.ard-button-group__vertical:not(:has(>ard-button-group))>.ard-divider+ard-button .ard-button,ard-button-group.ard-button-group__vertical:not(:has(>ard-button-group))>.ard-divider+.ard-button{margin-top:0}ard-button-group.ard-button-group__vertical>.ard-button,ard-button-group.ard-button-group__vertical>ard-button,ard-button-group.ard-button-group__vertical>ard-button>.ard-button{width:100%;aspect-ratio:unset}}\n"] }]
+        }], ctorParameters: () => [] });
+
+class ArdiumButtonGroupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonGroupModule, declarations: [ArdiumButtonGroupComponent], imports: [CommonModule], exports: [ArdiumButtonGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonGroupModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumButtonGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ArdiumButtonGroupComponent],
+                    imports: [CommonModule],
+                    exports: [ArdiumButtonGroupComponent],
+                }]
+        }] });
+
 const _fabDefaults = {
     ..._buttonBaseDefaults,
     size: FabSize.Standard,
@@ -16473,14 +16579,21 @@ class ArdiumGridComponent {
         this.inheritedColumnSpacing = signal(null);
         this.inheritedRowSpacing = signal(null);
         this.inheritedWrap = signal(null);
+        this.wasColumnsChanged = signal(false);
+        this.wasReverseChanged = signal(false);
+        this.wasJustifyContentChanged = signal(false);
+        this.wasAlignItemsChanged = signal(false);
+        this.wasColumnSpacingChanged = signal(false);
+        this.wasRowSpacingChanged = signal(false);
+        this.wasWrapChanged = signal(false);
         //! inherited or own properties
-        this.columnsOrInherited = computed(() => this.inheritedColumns() ?? this.columns());
-        this.reverseOrInherited = computed(() => this.inheritedReverse() ?? this.reverse());
-        this.justifyContentOrInherited = computed(() => this.inheritedJustifyContent() ?? this.justifyContent());
-        this.alignItemsOrInherited = computed(() => this.inheritedAlignItems() ?? this.alignItems());
-        this.columnSpacingOrInherited = computed(() => this.inheritedColumnSpacing() ?? this.columnSpacing());
-        this.rowSpacingOrInherited = computed(() => this.inheritedRowSpacing() ?? this.rowSpacing());
-        this.wrapOrInherited = computed(() => this.inheritedWrap() ?? this.wrap());
+        this.columnsOrInherited = computed(() => this.wasColumnsChanged() ? this.columns() : (this.inheritedColumns() ?? this.columns()));
+        this.reverseOrInherited = computed(() => this.wasReverseChanged() ? this.reverse() : (this.inheritedReverse() ?? this.reverse()));
+        this.justifyContentOrInherited = computed(() => this.wasJustifyContentChanged() ? this.justifyContent() : (this.inheritedJustifyContent() ?? this.justifyContent()));
+        this.alignItemsOrInherited = computed(() => this.wasAlignItemsChanged() ? this.alignItems() : (this.inheritedAlignItems() ?? this.alignItems()));
+        this.columnSpacingOrInherited = computed(() => this.wasColumnSpacingChanged() ? this.columnSpacing() : (this.inheritedColumnSpacing() ?? this.columnSpacing()));
+        this.rowSpacingOrInherited = computed(() => this.wasRowSpacingChanged() ? this.rowSpacing() : (this.inheritedRowSpacing() ?? this.rowSpacing()));
+        this.wrapOrInherited = computed(() => (this.wasWrapChanged() ? this.wrap() : (this.inheritedWrap() ?? this.wrap())));
         //! computed properties
         this.finalColumnSpacing = computed(() => this.columnSpacingOrInherited() ?? this.spacing());
         this.finalRowSpacing = computed(() => this.rowSpacingOrInherited() ?? this.spacing());
@@ -16494,7 +16607,8 @@ class ArdiumGridComponent {
         this.currentRowSpacing = computed(() => this.finalRowSpacing()[this._breakpointService.currentBreakpoint() ?? 'xs']);
         this.currentWrap = computed(() => this.wrapOrInherited()[this._breakpointService.currentBreakpoint() ?? 'xs']);
         this.currentStyle = computed(() => [
-            this.container() ? `--ard-_grid-columns: ${this.currentColumns()}` : `--ard-_grid-size: ${this.currentSize()}`,
+            this.currentSize() ? `--ard-_grid-size: ${this.currentSize()}` : '',
+            this.container() ? `--ard-_grid-columns: ${this.currentColumns()}` : '',
             this.container() ? `--ard-_grid-direction: ${this.currentReverse() ? 'row-reverse' : 'row'}` : '',
             this.container() ? `--ard-_grid-justify-content: ${this.currentJustifyContent()}` : '',
             this.container() ? `--ard-_grid-align-items: ${this.currentAlignItems()}` : '',
@@ -16514,23 +16628,53 @@ class ArdiumGridComponent {
         this._wasContentInitialized = true;
         this._updateChildrenStyles();
     }
+    ngOnChanges(changes) {
+        if (changes['columns']) {
+            this.wasColumnsChanged.set(true);
+        }
+        if (changes['reverse']) {
+            this.wasReverseChanged.set(true);
+        }
+        if (changes['justifyContent']) {
+            this.wasJustifyContentChanged.set(true);
+        }
+        if (changes['alignItems']) {
+            this.wasAlignItemsChanged.set(true);
+        }
+        if (changes['columnSpacing']) {
+            this.wasColumnSpacingChanged.set(true);
+        }
+        if (changes['rowSpacing']) {
+            this.wasRowSpacingChanged.set(true);
+        }
+        if (changes['wrap']) {
+            this.wasWrapChanged.set(true);
+        }
+    }
     _updateChildrenStyles() {
+        const containerChildren = this.children().filter(child => child !== this && child.container());
+        const columns = this.columnsOrInherited();
+        const reverse = this.reverseOrInherited();
+        const justifyContent = this.justifyContentOrInherited();
+        const alignItems = this.alignItemsOrInherited();
+        const columnSpacing = this.finalColumnSpacing();
+        const rowSpacing = this.finalRowSpacing();
+        const wrap = this.wrapOrInherited();
         if (!this._wasContentInitialized) {
             return;
         }
-        const containerChildren = this.children().filter(child => child !== this && child.container());
         for (const child of containerChildren) {
-            child.inheritedColumns.set(this.columns());
-            child.inheritedReverse.set(this.reverse());
-            child.inheritedJustifyContent.set(this.justifyContent());
-            child.inheritedAlignItems.set(this.alignItems());
-            child.inheritedColumnSpacing.set(this.columnSpacing());
-            child.inheritedRowSpacing.set(this.rowSpacing());
-            child.inheritedWrap.set(this.wrap());
+            child.inheritedColumns.set(columns);
+            child.inheritedReverse.set(reverse);
+            child.inheritedJustifyContent.set(justifyContent);
+            child.inheritedAlignItems.set(alignItems);
+            child.inheritedColumnSpacing.set(columnSpacing);
+            child.inheritedRowSpacing.set(rowSpacing);
+            child.inheritedWrap.set(wrap);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumGridComponent, isStandalone: false, selector: "ard-grid", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, columnSpacing: { classPropertyName: "columnSpacing", publicName: "columnSpacing", isSignal: true, isRequired: false, transformFunction: null }, rowSpacing: { classPropertyName: "rowSpacing", publicName: "rowSpacing", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "currentStyle()", "class.ard-grid__container": "container()", "class.ard-grid__item": "!container()", "class.ard-grid__item-grow": "!container() && currentSize() === \"grow\"", "class.ard-grid__item-auto": "!container() && currentSize() === \"auto\"" }, classAttribute: "ard-grid" }, queries: [{ propertyName: "children", predicate: ArdiumGridComponent, isSignal: true }], ngImport: i0, template: "<ng-content />", styles: ["@layer ard-ui{.ard-grid{display:block;box-sizing:border-box;min-width:0px}.ard-grid__container{display:flex;flex-direction:var(--ard-_grid-direction, row);flex-wrap:var(--ard-_grid-wrap, wrap);row-gap:var(--ard-_grid-row-spacing, 0px);column-gap:var(--ard-_grid-column-spacing, 0px);justify-content:var(--ard-_grid-justify-content, flex-start);align-items:var(--ard-_grid-align-items, flex-start)}.ard-grid__container>.ard-grid{flex-grow:0;flex-basis:auto;max-width:100%;width:calc(100% * var(--ard-_grid-size) / var(--ard-_grid-columns) - (var(--ard-_grid-columns) - var(--ard-_grid-size)) * var(--ard-_grid-column-spacing) / var(--ard-_grid-columns))}.ard-grid__container>.ard-grid.ard-grid__item-grow{flex-grow:1;width:auto}.ard-grid__container>.ard-grid.ard-grid__item-auto{width:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumGridComponent, isStandalone: false, selector: "ard-grid", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, columnSpacing: { classPropertyName: "columnSpacing", publicName: "columnSpacing", isSignal: true, isRequired: false, transformFunction: null }, rowSpacing: { classPropertyName: "rowSpacing", publicName: "rowSpacing", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "currentStyle()", "class.ard-grid__container": "container()", "class.ard-grid__item": "!container()", "class.ard-grid__item-grow": "!container() && currentSize() === \"grow\"", "class.ard-grid__item-auto": "!container() && currentSize() === \"auto\"" }, classAttribute: "ard-grid" }, queries: [{ propertyName: "children", predicate: ArdiumGridComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content />", styles: ["@layer ard-ui{.ard-grid{display:block;box-sizing:border-box;min-width:0px}.ard-grid__container{display:flex;flex-direction:var(--ard-_grid-direction, row);flex-wrap:var(--ard-_grid-wrap, wrap);row-gap:var(--ard-_grid-row-spacing, 0px);column-gap:var(--ard-_grid-column-spacing, 0px);justify-content:var(--ard-_grid-justify-content, flex-start);align-items:var(--ard-_grid-align-items, flex-start)}.ard-grid__container>.ard-grid{flex-grow:0;flex-basis:auto;max-width:100%;width:calc(100% * var(--ard-_grid-size) / var(--ard-_grid-columns) - (var(--ard-_grid-columns) - var(--ard-_grid-size)) * var(--ard-_grid-column-spacing) / var(--ard-_grid-columns))}.ard-grid__container>.ard-grid.ard-grid__item-grow{flex-grow:1;width:auto}.ard-grid__container>.ard-grid.ard-grid__item-auto{width:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumGridComponent, decorators: [{
             type: Component,
@@ -17093,7 +17237,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 }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", 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 }, confirmButtonPointerEventsWhenDisabled: { classPropertyName: "confirmButtonPointerEventsWhenDisabled", publicName: "confirmButtonPointerEventsWhenDisabled", 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  [panelClass]=\"panelClass()\"\r\n  [backdropClass]=\"backdropClass()\"\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            [pointerEventsWhenDisabled]=\"confirmButton.pointerEventsWhenDisabled\"\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", "panelClass", "backdropClass", "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 }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", 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 }, confirmButtonPointerEventsWhenDisabled: { classPropertyName: "confirmButtonPointerEventsWhenDisabled", publicName: "confirmButtonPointerEventsWhenDisabled", 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  [panelClass]=\"panelClass()\"\r\n  [backdropClass]=\"backdropClass()\"\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            [pointerEventsWhenDisabled]=\"confirmButton.pointerEventsWhenDisabled\"\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", "square"], outputs: ["focus", "blur"] }, { kind: "component", type: ArdiumModalComponent, selector: "ard-modal", inputs: ["appearance", "variant", "compact", "heading", "noCloseButton", "panelClass", "backdropClass", "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,
@@ -17325,7 +17469,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: ["ard-simple-snackbar{display:block}\n"], 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 }); }
+    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: ["ard-simple-snackbar{display:block}\n"], dependencies: [{ kind: "ngmodule", type: ArdiumButtonModule }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical", "square"], 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,
@@ -17606,5 +17750,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARD_BADGE_DEFAULTS, ARD_BREAKPOINTS, 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_ERROR_MAP, 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_GRID_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_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, ArdDateRangeInputAcceptButtonsTemplateDirective, ArdDateRangeInputCalendarIconTemplateDirective, ArdDateRangeInputDayTemplateDirective, ArdDateRangeInputDaysViewHeaderTemplateDirective, ArdDateRangeInputFloatingMonthTemplateDirective, ArdDateRangeInputMonthTemplateDirective, ArdDateRangeInputMonthsViewHeaderTemplateDirective, ArdDateRangeInputPrefixTemplateDirective, ArdDateRangeInputSuffixTemplateDirective, ArdDateRangeInputValueTemplateDirective, ArdDateRangeInputWeekdayTemplateDirective, ArdDateRangeInputYearTemplateDirective, ArdDateRangeInputYearsViewHeaderTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDividerVariant, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdGridAlign, ArdGridDirection, ArdGridJustify, ArdGridSize, ArdGridWrap, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdMultiCalendarLocation, ArdMultipageDateRangeInputAcceptButtonsTemplateDirective, ArdMultipageDateRangeInputCalendarIconTemplateDirective, ArdMultipageDateRangeInputDayTemplateDirective, ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, ArdMultipageDateRangeInputFloatingMonthTemplateDirective, ArdMultipageDateRangeInputMonthTemplateDirective, ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, ArdMultipageDateRangeInputPrefixTemplateDirective, ArdMultipageDateRangeInputSuffixTemplateDirective, ArdMultipageDateRangeInputValueTemplateDirective, ArdMultipageDateRangeInputWeekdayTemplateDirective, ArdMultipageDateRangeInputYearTemplateDirective, ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdNumberInputPrefixTemplateDirective, ArdNumberInputSuffixTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRangeCalendarDayTemplateDirective, ArdRangeCalendarDaysViewHeaderTemplateDirective, ArdRangeCalendarFloatingMonthTemplateDirective, ArdRangeCalendarMonthTemplateDirective, ArdRangeCalendarMonthsViewHeaderTemplateDirective, ArdRangeCalendarWeekdayTemplateDirective, ArdRangeCalendarYearTemplateDirective, ArdRangeCalendarYearsViewHeaderTemplateDirective, ArdRangeSelectionBehavior, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectDropdownArrowTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdTabberLabelTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumAutoErrorComponent, ArdiumAutocompleteInputComponent, ArdiumAutocompleteInputModule, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumBreakpointService, ArdiumButtonComponent, ArdiumButtonDirective, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDateRangeInputComponent, ArdiumDateRangeInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerDirective, ArdiumDividerDirectiveStandalone, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadIconTemplateDirective, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumFormFieldNativeInputAdapterDirective, ArdiumGridComponent, ArdiumGridModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHintErrorComponent, ArdiumHintErrorDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumMultipageDateRangeInputComponent, ArdiumMultipageDateRangeInputModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeCalendarComponent, ArdiumRangeCalendarModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarModule, 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, DateRange, DecorationElementAppearance, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OneAxisAlignmentOrientational, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, PartialDateRange, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, isAnyDateRange, isArdGridAlign, isArdGridDirection, isArdGridJustify, isArdGridSize, isArdGridWrap, isDateRange, isYearRange, provideBadgeDefaults, provideBreakpoints, provideButtonDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideErrorMap, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldDefaults, provideFormFieldFrameDefaults, provideGridDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideInputDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
+export { ARD_BADGE_DEFAULTS, ARD_BREAKPOINTS, ARD_BUTTON_DEFAULTS, ARD_BUTTON_GROUP_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_ERROR_MAP, 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_GRID_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_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, ArdDateRangeInputAcceptButtonsTemplateDirective, ArdDateRangeInputCalendarIconTemplateDirective, ArdDateRangeInputDayTemplateDirective, ArdDateRangeInputDaysViewHeaderTemplateDirective, ArdDateRangeInputFloatingMonthTemplateDirective, ArdDateRangeInputMonthTemplateDirective, ArdDateRangeInputMonthsViewHeaderTemplateDirective, ArdDateRangeInputPrefixTemplateDirective, ArdDateRangeInputSuffixTemplateDirective, ArdDateRangeInputValueTemplateDirective, ArdDateRangeInputWeekdayTemplateDirective, ArdDateRangeInputYearTemplateDirective, ArdDateRangeInputYearsViewHeaderTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDividerVariant, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdGridAlign, ArdGridDirection, ArdGridJustify, ArdGridSize, ArdGridWrap, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdMultiCalendarLocation, ArdMultipageDateRangeInputAcceptButtonsTemplateDirective, ArdMultipageDateRangeInputCalendarIconTemplateDirective, ArdMultipageDateRangeInputDayTemplateDirective, ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, ArdMultipageDateRangeInputFloatingMonthTemplateDirective, ArdMultipageDateRangeInputMonthTemplateDirective, ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, ArdMultipageDateRangeInputPrefixTemplateDirective, ArdMultipageDateRangeInputSuffixTemplateDirective, ArdMultipageDateRangeInputValueTemplateDirective, ArdMultipageDateRangeInputWeekdayTemplateDirective, ArdMultipageDateRangeInputYearTemplateDirective, ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdNumberInputPrefixTemplateDirective, ArdNumberInputSuffixTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRangeCalendarDayTemplateDirective, ArdRangeCalendarDaysViewHeaderTemplateDirective, ArdRangeCalendarFloatingMonthTemplateDirective, ArdRangeCalendarMonthTemplateDirective, ArdRangeCalendarMonthsViewHeaderTemplateDirective, ArdRangeCalendarWeekdayTemplateDirective, ArdRangeCalendarYearTemplateDirective, ArdRangeCalendarYearsViewHeaderTemplateDirective, ArdRangeSelectionBehavior, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectDropdownArrowTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdTabberLabelTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumAutoErrorComponent, ArdiumAutocompleteInputComponent, ArdiumAutocompleteInputModule, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumBreakpointService, ArdiumButtonComponent, ArdiumButtonDirective, ArdiumButtonGroupComponent, ArdiumButtonGroupModule, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDateRangeInputComponent, ArdiumDateRangeInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerDirective, ArdiumDividerDirectiveStandalone, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadIconTemplateDirective, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumFormFieldNativeInputAdapterDirective, ArdiumGridComponent, ArdiumGridModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHintErrorComponent, ArdiumHintErrorDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumMultipageDateRangeInputComponent, ArdiumMultipageDateRangeInputModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeCalendarComponent, ArdiumRangeCalendarModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarModule, 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, DateRange, DecorationElementAppearance, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OneAxisAlignmentOrientational, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, PartialDateRange, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, isAnyDateRange, isArdGridAlign, isArdGridDirection, isArdGridJustify, isArdGridSize, isArdGridWrap, isDateRange, isYearRange, provideBadgeDefaults, provideBreakpoints, provideButtonDefaults, provideButtonGroupDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideErrorMap, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldDefaults, provideFormFieldFrameDefaults, provideGridDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideInputDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
 //# sourceMappingURL=ardium-ui-ui.mjs.map