@acorex/components 7.17.0 → 7.17.2

package/esm2022/calendar/lib/calendar.component.mjs

@@ -406,17 +406,17 @@ export class AXCalendarComponent extends classes((MXValueComponent), MXInteracti
             ignore();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation", count: "count", id: "id" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", countChange: "countChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation", count: "count", id: "id" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", countChange: "countChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXCalendarComponent),
                 multi: true,
             },
             AXUnsubscriber,
-        ], usesInheritance: true, ngImport: i0, template: "<!-- ax-col-start-1 ax-col-start-2 ax-col-start-3 ax-col-start-4 ax-col-start-5 ax-col-start-6 ax-col-start-7 -->\n<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-calendar-body\">\n    <ng-container *ngFor=\"let v of views; let first = first; let last = last\">\n      <div [ngSwitch]=\"activeView\">\n        <ng-container *ngSwitchCase=\"'year'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-next\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              <ng-container *ngIf=\"cellTemplate; else yearTpl\">\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #yearTpl>\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'month'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              <ng-container *ngIf=\"cellTemplate; else monthTpl\">\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #monthTpl>\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\"\n              >\n                {{ v.range.startTime.format('MMM') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-week\">\n            <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <ng-container *ngFor=\"let slot of v.slots\">\n              <div\n                tabindex=\"0\"\n                class=\"ax-calendar-slot\"\n                [ngClass]=\"slot.cssClass\"\n                (click)=\"_handleSlotClick($event, slot)\"\n              >\n                <ng-container *ngIf=\"cellTemplate; else dayTpl\">\n                  <div>\n                    <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                    </ng-container>\n                  </div>\n                </ng-container>\n                <ng-template #dayTpl>\n                  <div [title]=\"slot.tooltip\">\n                    {{ slot.text }}\n                  </div>\n                </ng-template>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n</ng-container>\n<ng-template #pickerTemplate>\n  <div class=\"ax-calendar-picker\">//TODO: picker</div>\n</ng-template>\n", styles: ["html[dir=rtl] ax-calendar .ax-calendar-header-buttons{flex-direction:row-reverse}ax-calendar{display:block;width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity))}@media (min-width: 768px){ax-calendar{width:max-content}}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:.5}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text;opacity:.75}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-left:.25rem;padding-right:.25rem;padding-top:.25rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{display:flex;flex-direction:column}@media (min-width: 1024px){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1 1 0%}@media (min-width: 768px){ax-calendar .ax-calendar-body>div{width:20rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-rounded-border-default);text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{float:left;padding-top:100%;content:\"\"}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected)){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 30%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-text-opacity)),black 30%)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-width:2px;outline-color:rgba(var(--ax-color-primary),1)}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled)){outline-color:color-mix(in srgb,rgba(var(--ax-color-primary),1) 30%,white)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:2px}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:.75}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.05}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary),var(--tw-border-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary),var(--tw-text-opacity))}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today){--tw-border-opacity: 1;border-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-border-opacity)) 30%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-text-opacity)) 30%,white)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 30%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-text-opacity)),black 30%)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary),var(--tw-text-opacity))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger),var(--tw-text-opacity))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-left:.5rem;padding-right:.5rem;padding-top:.75rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;margin:.125rem;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:.875rem;line-height:1.25rem}ax-calendar .ax-calendar-footer{margin-top:1.25rem;display:flex;align-items:center;justify-content:center}ax-calendar .ax-calendar-footer .ax-today-button{display:block;height:var(--ax-size-default);width:100%;cursor:pointer;border-radius:var(--ax-rounded-border-default);--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary),var(--tw-bg-opacity));padding-left:1rem;padding-right:1rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:.75}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 10%)}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary),1)}:is(.ax-dark ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled)){outline-color:color-mix(in srgb,rgba(var(--ax-color-primary),1) 30%,white)}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<!-- ax-col-start-1 ax-col-start-2 ax-col-start-3 ax-col-start-4 ax-col-start-5 ax-col-start-6 ax-col-start-7 -->\n<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-calendar-body\">\n    <ng-container *ngFor=\"let v of views; let first = first; let last = last\">\n      <div [ngSwitch]=\"activeView\">\n        <ng-container *ngSwitchCase=\"'year'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-next\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              <ng-container *ngIf=\"cellTemplate; else yearTpl\">\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #yearTpl>\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'month'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              <ng-container *ngIf=\"cellTemplate; else monthTpl\">\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #monthTpl>\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\"\n              >\n                {{ v.range.startTime.format('MMM') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-week\">\n            <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <ng-container *ngFor=\"let slot of v.slots\">\n              <div\n                tabindex=\"0\"\n                class=\"ax-calendar-slot\"\n                [ngClass]=\"slot.cssClass\"\n                (click)=\"_handleSlotClick($event, slot)\"\n              >\n                <ng-container *ngIf=\"cellTemplate; else dayTpl\">\n                  <div>\n                    <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                    </ng-container>\n                  </div>\n                </ng-container>\n                <ng-template #dayTpl>\n                  <div [title]=\"slot.tooltip\">\n                    {{ slot.text }}\n                  </div>\n                </ng-template>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n</ng-container>\n<ng-template #pickerTemplate>\n  <div class=\"ax-calendar-picker\">//TODO: picker</div>\n</ng-template>\n", styles: ["html[dir=rtl] ax-calendar .ax-calendar-header-buttons{flex-direction:row-reverse}ax-calendar{display:block;width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity))}@media (min-width: 768px){ax-calendar{width:max-content}}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:.5}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text;opacity:.75}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-left:.25rem;padding-right:.25rem;padding-top:.25rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{display:flex;flex-direction:column}@media (min-width: 1024px){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1 1 0%}@media (min-width: 768px){ax-calendar .ax-calendar-body>div{width:20rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-rounded-border-default);text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{float:left;padding-top:100%;content:\"\"}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-500),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected)){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-200),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore-tint),var(--tw-text-opacity))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-width:2px;outline-color:rgba(var(--ax-color-primary-500),1)}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled)){outline-color:rgba(var(--ax-color-primary-200),1)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:2px}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:.75}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.05}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary-500),var(--tw-border-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-500),var(--tw-text-opacity))}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today){--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary-200),var(--tw-border-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-200),var(--tw-text-opacity))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-500),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-200),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore-tint),var(--tw-text-opacity))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-500),var(--tw-text-opacity))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger-500),var(--tw-text-opacity))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-left:.5rem;padding-right:.5rem;padding-top:.75rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;margin:.125rem;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:.875rem;line-height:1.25rem}ax-calendar .ax-calendar-footer{margin-top:1.25rem;display:flex;align-items:center;justify-content:center}ax-calendar .ax-calendar-footer .ax-today-button{display:block;height:var(--ax-size-default);width:100%;cursor:pointer;border-radius:var(--ax-rounded-border-default);--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-500),var(--tw-bg-opacity));padding-left:1rem;padding-right:1rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:.75}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-600),var(--tw-bg-opacity))}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-500),1)}:is(.ax-dark ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled)){outline-color:rgba(var(--ax-color-primary-200),1)}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: [
                         'rtl',
@@ -458,7 +458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
                             multi: true,
                         },
                         AXUnsubscriber,
-                    ], template: "<!-- ax-col-start-1 ax-col-start-2 ax-col-start-3 ax-col-start-4 ax-col-start-5 ax-col-start-6 ax-col-start-7 -->\n<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-calendar-body\">\n    <ng-container *ngFor=\"let v of views; let first = first; let last = last\">\n      <div [ngSwitch]=\"activeView\">\n        <ng-container *ngSwitchCase=\"'year'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-next\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              <ng-container *ngIf=\"cellTemplate; else yearTpl\">\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #yearTpl>\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'month'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              <ng-container *ngIf=\"cellTemplate; else monthTpl\">\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #monthTpl>\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\"\n              >\n                {{ v.range.startTime.format('MMM') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-week\">\n            <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <ng-container *ngFor=\"let slot of v.slots\">\n              <div\n                tabindex=\"0\"\n                class=\"ax-calendar-slot\"\n                [ngClass]=\"slot.cssClass\"\n                (click)=\"_handleSlotClick($event, slot)\"\n              >\n                <ng-container *ngIf=\"cellTemplate; else dayTpl\">\n                  <div>\n                    <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                    </ng-container>\n                  </div>\n                </ng-container>\n                <ng-template #dayTpl>\n                  <div [title]=\"slot.tooltip\">\n                    {{ slot.text }}\n                  </div>\n                </ng-template>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n</ng-container>\n<ng-template #pickerTemplate>\n  <div class=\"ax-calendar-picker\">//TODO: picker</div>\n</ng-template>\n", styles: ["html[dir=rtl] ax-calendar .ax-calendar-header-buttons{flex-direction:row-reverse}ax-calendar{display:block;width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity))}@media (min-width: 768px){ax-calendar{width:max-content}}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:.5}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text;opacity:.75}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-left:.25rem;padding-right:.25rem;padding-top:.25rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{display:flex;flex-direction:column}@media (min-width: 1024px){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1 1 0%}@media (min-width: 768px){ax-calendar .ax-calendar-body>div{width:20rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-rounded-border-default);text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{float:left;padding-top:100%;content:\"\"}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected)){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 30%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-text-opacity)),black 30%)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-width:2px;outline-color:rgba(var(--ax-color-primary),1)}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled)){outline-color:color-mix(in srgb,rgba(var(--ax-color-primary),1) 30%,white)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:2px}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:.75}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.05}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary),var(--tw-border-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary),var(--tw-text-opacity))}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today){--tw-border-opacity: 1;border-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-border-opacity)) 30%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-text-opacity)) 30%,white)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 30%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-text-opacity)),black 30%)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary),var(--tw-text-opacity))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger),var(--tw-text-opacity))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-left:.5rem;padding-right:.5rem;padding-top:.75rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;margin:.125rem;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:.875rem;line-height:1.25rem}ax-calendar .ax-calendar-footer{margin-top:1.25rem;display:flex;align-items:center;justify-content:center}ax-calendar .ax-calendar-footer .ax-today-button{display:block;height:var(--ax-size-default);width:100%;cursor:pointer;border-radius:var(--ax-rounded-border-default);--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary),var(--tw-bg-opacity));padding-left:1rem;padding-right:1rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:.75}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 10%)}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary),1)}:is(.ax-dark ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled)){outline-color:color-mix(in srgb,rgba(var(--ax-color-primary),1) 30%,white)}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"] }]
+                    ], template: "<!-- ax-col-start-1 ax-col-start-2 ax-col-start-3 ax-col-start-4 ax-col-start-5 ax-col-start-6 ax-col-start-7 -->\n<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-calendar-body\">\n    <ng-container *ngFor=\"let v of views; let first = first; let last = last\">\n      <div [ngSwitch]=\"activeView\">\n        <ng-container *ngSwitchCase=\"'year'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-next\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              <ng-container *ngIf=\"cellTemplate; else yearTpl\">\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #yearTpl>\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'month'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              <ng-container *ngIf=\"cellTemplate; else monthTpl\">\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #monthTpl>\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\"\n              >\n                {{ v.range.startTime.format('MMM') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-week\">\n            <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <ng-container *ngFor=\"let slot of v.slots\">\n              <div\n                tabindex=\"0\"\n                class=\"ax-calendar-slot\"\n                [ngClass]=\"slot.cssClass\"\n                (click)=\"_handleSlotClick($event, slot)\"\n              >\n                <ng-container *ngIf=\"cellTemplate; else dayTpl\">\n                  <div>\n                    <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                    </ng-container>\n                  </div>\n                </ng-container>\n                <ng-template #dayTpl>\n                  <div [title]=\"slot.tooltip\">\n                    {{ slot.text }}\n                  </div>\n                </ng-template>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n</ng-container>\n<ng-template #pickerTemplate>\n  <div class=\"ax-calendar-picker\">//TODO: picker</div>\n</ng-template>\n", styles: ["html[dir=rtl] ax-calendar .ax-calendar-header-buttons{flex-direction:row-reverse}ax-calendar{display:block;width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity))}@media (min-width: 768px){ax-calendar{width:max-content}}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:.5}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text;opacity:.75}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-left:.25rem;padding-right:.25rem;padding-top:.25rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{display:flex;flex-direction:column}@media (min-width: 1024px){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1 1 0%}@media (min-width: 768px){ax-calendar .ax-calendar-body>div{width:20rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-rounded-border-default);text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{float:left;padding-top:100%;content:\"\"}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-500),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected)){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-200),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore-tint),var(--tw-text-opacity))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-width:2px;outline-color:rgba(var(--ax-color-primary-500),1)}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled)){outline-color:rgba(var(--ax-color-primary-200),1)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:2px}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:.75}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.05}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary-500),var(--tw-border-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-500),var(--tw-text-opacity))}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today){--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary-200),var(--tw-border-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-200),var(--tw-text-opacity))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-500),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-200),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore-tint),var(--tw-text-opacity))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-500),var(--tw-text-opacity))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger-500),var(--tw-text-opacity))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-left:.5rem;padding-right:.5rem;padding-top:.75rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;margin:.125rem;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:.875rem;line-height:1.25rem}ax-calendar .ax-calendar-footer{margin-top:1.25rem;display:flex;align-items:center;justify-content:center}ax-calendar .ax-calendar-footer .ax-today-button{display:block;height:var(--ax-size-default);width:100%;cursor:pointer;border-radius:var(--ax-rounded-border-default);--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-500),var(--tw-bg-opacity));padding-left:1rem;padding-right:1rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:.75}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-600),var(--tw-bg-opacity))}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-500),1)}:is(.ax-dark ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled)){outline-color:rgba(var(--ax-color-primary-200),1)}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"] }]
         }], ctorParameters: () => [{ type: i1.AXUnsubscriber }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']

package/esm2022/calendar/lib/calendar.module.mjs

@@ -7,11 +7,11 @@ import * as i0 from "@angular/core";
 const COMPONENT = [AXCalendarComponent, AXCalendarRangeComponent];
 const MODULES = [CommonModule, AXDateTimeModule];
 export class AXCalendarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent, AXCalendarRangeComponent], imports: [CommonModule, AXDateTimeModule], exports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCalendarModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent, AXCalendarRangeComponent], imports: [CommonModule, AXDateTimeModule], exports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCalendarModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/esm2022/check-box/lib/check-box.component.mjs

@@ -50,8 +50,8 @@ export class AXCheckBoxComponent extends MXValueComponent {
     _handleModelChange(value) {
         this.commitValue(value, true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", name: "name", id: "id", checked: "checked", indeterminate: "indeterminate" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "click": "_handleClick($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", name: "name", id: "id", checked: "checked", indeterminate: "indeterminate" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "click": "_handleClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXCheckBoxComponent),
@@ -59,7 +59,7 @@ export class AXCheckBoxComponent extends MXValueComponent {
             },
         ], queries: [{ propertyName: "_labels", predicate: AXLabelComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-checkbox-label\" [class.ax-state-readonly]=\"readonly\" [class.ax-state-disabled]=\"disabled\">\n  <div class=\"ax-checkbox-start-side\">\n    <input\n      [id]=\"id\"\n      class=\"ax-checkbox\"\n      type=\"checkbox\"\n      [indeterminate]=\"_stateIndeterminate\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\"\n      (blur)=\"emitOnBlurEvent($event)\"\n    />\n  </div>\n  <div class=\"ax-checkbox-end-side\">\n    <ng-content select=\"ax-label\"></ng-content>\n    <ng-content select=\"ax-form-hint\"></ng-content>\n    <span class=\"ax-error-container\"></span>\n  </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: [".ax-checkbox-label{display:flex;width:-moz-fit-content;width:fit-content;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:flex-start;font-size:.875rem;line-height:1.25rem}.ax-checkbox-label.ax-state-readonly{opacity:.75}.ax-checkbox-label.ax-state-disabled{cursor:not-allowed;opacity:.5}.ax-checkbox-label.ax-state-disabled .ax-checkbox:disabled{opacity:1}.ax-checkbox-label .ax-checkbox-start-side{display:flex;height:1.25rem;align-items:center}.ax-checkbox-label .ax-checkbox-end-side{margin-inline-start:.75rem}.ax-checkbox-label .ax-checkbox-end-side ax-label label{margin-bottom:0}.ax-checkbox-label .ax-checkbox-end-side ax-form-hint{margin-top:.25rem;cursor:text;-webkit-user-select:text;user-select:text}\n"], dependencies: [{ kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-check-box', inputs: ['disabled', 'tabIndex', 'readonly', 'value', 'name', 'id', 'checked'], outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {

package/esm2022/check-box/lib/check-box.module.mjs

@@ -5,11 +5,11 @@ import { FormsModule } from '@angular/forms';
 import { AXCheckBoxComponent } from './check-box.component';
 import * as i0 from "@angular/core";
 export class AXCheckBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule, AXDecoratorModule], exports: [AXCheckBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCheckBoxModule, imports: [CommonModule, FormsModule, AXDecoratorModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule, AXDecoratorModule], exports: [AXCheckBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCheckBoxModule, imports: [CommonModule, FormsModule, AXDecoratorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCheckBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCheckBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXCheckBoxComponent],

package/esm2022/chips/lib/chips.component.mjs

@@ -13,10 +13,10 @@ export class AXChipsComponent extends MXColorComponent {
     get __hostClass() {
         return `ax-el-${this.color}-${this.look} ax-el-interactive`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXChipsComponent, selector: "ax-chips", inputs: { tabIndex: "tabIndex", color: "color", look: "look", text: "text" }, outputs: { colorChange: "colorChange" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, hostDirectives: [{ directive: i1.AXRippleDirective }], ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-chips-text\" *ngIf=\"text\">{{text}}</div>\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-chips{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-radius:9999px;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-chips:focus-visible{outline-width:2px;outline-offset:2px;outline-color:#00000080}ax-chips .ax-chips-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.5rem;padding-right:.5rem}ax-chips ax-prefix,ax-chips ax-suffix{display:flex;align-items:center;font-size:1.125rem;line-height:1.75rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: AXChipsComponent, selector: "ax-chips", inputs: { tabIndex: "tabIndex", color: "color", look: "look", text: "text" }, outputs: { colorChange: "colorChange" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, hostDirectives: [{ directive: i1.AXRippleDirective }], ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-chips-text\" *ngIf=\"text\">{{text}}</div>\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-chips{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-radius:9999px;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-chips:focus-visible{outline-width:2px;outline-offset:2px;outline-color:#00000080}ax-chips .ax-chips-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.5rem;padding-right:.5rem}ax-chips ax-prefix,ax-chips ax-suffix{display:flex;align-items:center;font-size:1.125rem;line-height:1.75rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-chips', inputs: ['tabIndex', 'color'], outputs: ['colorChange'], hostDirectives: [AXRippleDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-chips-text\" *ngIf=\"text\">{{text}}</div>\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-chips{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-radius:9999px;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-chips:focus-visible{outline-width:2px;outline-offset:2px;outline-color:#00000080}ax-chips .ax-chips-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.5rem;padding-right:.5rem}ax-chips ax-prefix,ax-chips ax-suffix{display:flex;align-items:center;font-size:1.125rem;line-height:1.75rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { look: [{

package/esm2022/chips/lib/chips.module.mjs

@@ -3,11 +3,11 @@ import { NgModule } from '@angular/core';
 import { AXChipsComponent } from './chips.component';
 import * as i0 from "@angular/core";
 export class AXChipsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: AXChipsModule, declarations: [AXChipsComponent], imports: [CommonModule], exports: [AXChipsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXChipsModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: AXChipsModule, declarations: [AXChipsComponent], imports: [CommonModule], exports: [AXChipsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXChipsModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXChipsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXChipsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXChipsComponent],

package/esm2022/circular-progress/lib/circular-progress.component.mjs

@@ -68,10 +68,10 @@ export class AXCircularProgressComponent extends MXColorComponent {
             this.circle.nativeElement.style.background = `conic-gradient(var(--ax-progress-color) ${this.progress * 3.6}deg, var(--ax-progress-line-color) 0deg)`;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCircularProgressComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXCircularProgressComponent, selector: "ax-circular-progress", inputs: { color: "color", progress: "progress", stroke: "stroke", size: "size" }, outputs: { ValueChange: "ValueChange", strokeChange: "strokeChange", sizeChange: "sizeChange" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-progress-circular\" #circle>\n  <span class=\"ax-progress-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-circular-progress .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary));--ax-progress-line-color: rgba(var(--ax-color-on-surface));--ax-circle-size: 48px;--ax-stroke-size: 44px;height:var(--ax-circle-size);width:var(--ax-circle-size);background:conic-gradient(var(--ax-progress-color) 0deg,var(--ax-progress-line-color) 0deg);position:relative;display:flex;align-items:center;justify-content:center;border-radius:9999px}ax-circular-progress .ax-progress-circular:before{content:\"\";height:var(--ax-stroke-size);width:var(--ax-stroke-size);position:absolute;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity))}ax-circular-progress .ax-progress-circular .ax-progress-content{position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress.ax-ghost-circular .ax-circular-progress-svg{--ax-progress-color: rgba(var(--ax-color-ghost-fore));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-primary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-secondary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-secondary));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-success-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-success));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-warning-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-warning));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-danger-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-danger));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-info-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-info));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-primary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-secondary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-secondary), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-success-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-success), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-warning-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-warning), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-danger-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-danger), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-info-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-info), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCircularProgressComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: AXCircularProgressComponent, selector: "ax-circular-progress", inputs: { color: "color", progress: "progress", stroke: "stroke", size: "size" }, outputs: { ValueChange: "ValueChange", strokeChange: "strokeChange", sizeChange: "sizeChange" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-progress-circular\" #circle>\n  <span class=\"ax-progress-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-circular-progress .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary));--ax-progress-line-color: rgba(var(--ax-color-on-surface));--ax-circle-size: 48px;--ax-stroke-size: 44px;height:var(--ax-circle-size);width:var(--ax-circle-size);background:conic-gradient(var(--ax-progress-color) 0deg,var(--ax-progress-line-color) 0deg);position:relative;display:flex;align-items:center;justify-content:center;border-radius:9999px}ax-circular-progress .ax-progress-circular:before{content:\"\";height:var(--ax-stroke-size);width:var(--ax-stroke-size);position:absolute;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity))}ax-circular-progress .ax-progress-circular .ax-progress-content{position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress.ax-ghost-circular .ax-circular-progress-svg{--ax-progress-color: rgba(var(--ax-color-ghost-fore));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-primary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-secondary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-secondary));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-success-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-success));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-warning-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-warning));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-danger-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-danger));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-info-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-info));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-primary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-secondary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-secondary), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-success-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-success), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-warning-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-warning), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-danger-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-danger), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-info-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-info), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCircularProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCircularProgressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-circular-progress', inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-progress-circular\" #circle>\n  <span class=\"ax-progress-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-circular-progress .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary));--ax-progress-line-color: rgba(var(--ax-color-on-surface));--ax-circle-size: 48px;--ax-stroke-size: 44px;height:var(--ax-circle-size);width:var(--ax-circle-size);background:conic-gradient(var(--ax-progress-color) 0deg,var(--ax-progress-line-color) 0deg);position:relative;display:flex;align-items:center;justify-content:center;border-radius:9999px}ax-circular-progress .ax-progress-circular:before{content:\"\";height:var(--ax-stroke-size);width:var(--ax-stroke-size);position:absolute;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity))}ax-circular-progress .ax-progress-circular .ax-progress-content{position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress.ax-ghost-circular .ax-circular-progress-svg{--ax-progress-color: rgba(var(--ax-color-ghost-fore));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-primary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-secondary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-secondary));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-success-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-success));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-warning-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-warning));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-danger-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-danger));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}ax-circular-progress.ax-info-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-info));--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-primary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-primary), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-secondary-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-secondary), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-success-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-success), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-warning-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-warning), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-danger-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-danger), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}.ax-dark ax-circular-progress.ax-info-circular .ax-progress-circular{--ax-progress-color: rgba(var(--ax-color-info), 70%);--ax-progress-line-color: rgba(var(--ax-color-on-surface))}\n"] }]
         }], propDecorators: { circle: [{

package/esm2022/circular-progress/lib/circular-progress.module.mjs

@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { AXCircularProgressComponent } from './circular-progress.component';
 import * as i0 from "@angular/core";
 export class AXCircularProgressModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCircularProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: AXCircularProgressModule, declarations: [AXCircularProgressComponent], exports: [AXCircularProgressComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCircularProgressModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCircularProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: AXCircularProgressModule, declarations: [AXCircularProgressComponent], exports: [AXCircularProgressComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCircularProgressModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCircularProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCircularProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXCircularProgressComponent],

package/esm2022/collapse/lib/collapse-group.component.mjs

@@ -88,10 +88,10 @@ export class AXCollapseGroupComponent extends classes(MXBaseComponent, MXLookCom
     get __hostClass() {
         return ['ax-collapse-group', `ax-look-${this.look}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCollapseGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: { look: "look", accordion: "accordion", activeIndex: "activeIndex" }, outputs: { accordionChange: "accordionChange", activeIndexChange: "activeIndexChange" }, host: { properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "_items", predicate: AXCollapseComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content select="ax-collapse"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCollapseGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: { look: "look", accordion: "accordion", activeIndex: "activeIndex" }, outputs: { accordionChange: "accordionChange", activeIndexChange: "activeIndexChange" }, host: { properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "_items", predicate: AXCollapseComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content select="ax-collapse"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCollapseGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCollapseGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-collapse-group',

package/esm2022/collapse/lib/collapse.component.mjs

@@ -80,8 +80,8 @@ export class AXCollapseComponent extends MXInteractiveComponent {
     get __hostClass() {
         return [`${this.disabled ? 'ax-state-disabled' : ''}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCollapseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXCollapseComponent, selector: "ax-collapse", inputs: { disabled: "disabled", isCollapsed: "isCollapsed", caption: "caption", icon: "icon", isLoading: "isLoading", headerTemplate: "headerTemplate" }, outputs: { onClick: "onClick", isCollapsedChange: "isCollapsedChange" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick($event)\">\n  <ng-container *ngIf=\"headerTemplate; else default\">\n    <div class=\"ax-collapse-custom-header-container\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"\n      ></ng-container>\n    </div>\n  </ng-container>\n  <ng-template #default>\n    <div class=\"ax-collapse-header-container\">\n      <div class=\"ax-collapse-header-start\">\n        <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n        <span>\n          {{ caption }}\n        </span>\n      </div>\n      <ng-container *ngIf=\"isLoading; else elseTemplate\">\n        <ax-loading></ax-loading>\n      </ng-container>\n      <ng-template #elseTemplate>\n        <span\n          class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\"\n          [ngClass]=\"{ '-rotation-90': isCollapsed, 'rotation-90': !isCollapsed }\"\n        ></span>\n      </ng-template>\n    </div>\n  </ng-template>\n</div>\n<div class=\"ax-collapse-body\" [@collapse]=\"isCollapsed\">\n  <div class=\"ax-collapse-body-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["ax-collapse,ax-collapse-group{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-collapse-group.ax-look-solid{border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-collapse-group.ax-look-solid .ax-collapse-header{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity))}ax-collapse-group.ax-look-solid ax-collapse{border-radius:0!important;border-width:0px!important}ax-collapse-group.ax-look-solid ax-collapse:not(ax-collapse-group.ax-look-solid ax-collapse:last-child){border-bottom-width:1px!important;border-color:rgba(var(--ax-color-border-default))!important}ax-collapse-group.ax-look-fill .ax-collapse-header{border-radius:var(--ax-rounded-border-default);--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))}ax-collapse-group.ax-look-fill ax-collapse{margin-bottom:.5rem;border-radius:var(--ax-rounded-border-default)}ax-collapse-group.ax-look-outline .ax-collapse-header{background-color:transparent}ax-collapse-group.ax-look-outline ax-collapse{margin-bottom:.5rem;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-collapse-group.ax-look-flat .ax-collapse-header{background-color:transparent}ax-collapse-group.ax-look-flat ax-collapse{margin-bottom:.5rem;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-collapse.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity))}ax-collapse .ax-collapse-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.75rem}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start:not(:empty) .ax-collapse-header-icon{padding-inline-end:.5rem;font-size:1.125rem;line-height:1.75rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-arrow{font-size:1.5rem;line-height:2rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-arrow.-rotation-90{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-arrow.rotation-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}ax-collapse .ax-collapse-body{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity))}ax-collapse .ax-collapse-body .ax-collapse-body-content{padding:1rem 1.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCollapseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: AXCollapseComponent, selector: "ax-collapse", inputs: { disabled: "disabled", isCollapsed: "isCollapsed", caption: "caption", icon: "icon", isLoading: "isLoading", headerTemplate: "headerTemplate" }, outputs: { onClick: "onClick", isCollapsedChange: "isCollapsedChange" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick($event)\">\n  <ng-container *ngIf=\"headerTemplate; else default\">\n    <div class=\"ax-collapse-custom-header-container\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"\n      ></ng-container>\n    </div>\n  </ng-container>\n  <ng-template #default>\n    <div class=\"ax-collapse-header-container\">\n      <div class=\"ax-collapse-header-start\">\n        <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n        <span>\n          {{ caption }}\n        </span>\n      </div>\n      <ng-container *ngIf=\"isLoading; else elseTemplate\">\n        <ax-loading></ax-loading>\n      </ng-container>\n      <ng-template #elseTemplate>\n        <span\n          class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\"\n          [ngClass]=\"{ '-rotation-90': isCollapsed, 'rotation-90': !isCollapsed }\"\n        ></span>\n      </ng-template>\n    </div>\n  </ng-template>\n</div>\n<div class=\"ax-collapse-body\" [@collapse]=\"isCollapsed\">\n  <div class=\"ax-collapse-body-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["ax-collapse,ax-collapse-group{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-collapse-group.ax-look-solid{border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-collapse-group.ax-look-solid .ax-collapse-header{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity))}ax-collapse-group.ax-look-solid ax-collapse{border-radius:0!important;border-width:0px!important}ax-collapse-group.ax-look-solid ax-collapse:not(ax-collapse-group.ax-look-solid ax-collapse:last-child){border-bottom-width:1px!important;border-color:rgba(var(--ax-color-border-default))!important}ax-collapse-group.ax-look-fill .ax-collapse-header{border-radius:var(--ax-rounded-border-default);--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))}ax-collapse-group.ax-look-fill ax-collapse{margin-bottom:.5rem;border-radius:var(--ax-rounded-border-default)}ax-collapse-group.ax-look-outline .ax-collapse-header{background-color:transparent}ax-collapse-group.ax-look-outline ax-collapse{margin-bottom:.5rem;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-collapse-group.ax-look-flat .ax-collapse-header{background-color:transparent}ax-collapse-group.ax-look-flat ax-collapse{margin-bottom:.5rem;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-collapse.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity))}ax-collapse .ax-collapse-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.75rem}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start:not(:empty) .ax-collapse-header-icon{padding-inline-end:.5rem;font-size:1.125rem;line-height:1.75rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-arrow{font-size:1.5rem;line-height:2rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-arrow.-rotation-90{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-arrow.rotation-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}ax-collapse .ax-collapse-body{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity))}ax-collapse .ax-collapse-body .ax-collapse-body-content{padding:1rem 1.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], animations: [
             trigger('collapse', [
                 state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
                 state('true', style({ height: '0', visibility: 'hidden' })),
@@ -90,7 +90,7 @@ export class AXCollapseComponent extends MXInteractiveComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCollapseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCollapseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-collapse', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [
                         trigger('collapse', [

package/esm2022/collapse/lib/collapse.module.mjs

@@ -5,11 +5,11 @@ import { AXCollapseGroupComponent } from './collapse-group.component';
 import { AXCollapseComponent } from './collapse.component';
 import * as i0 from "@angular/core";
 export class AXCollapseModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: AXCollapseModule, declarations: [AXCollapseComponent, AXCollapseGroupComponent], imports: [CommonModule, AXLoadingModule], exports: [AXCollapseComponent, AXCollapseGroupComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCollapseModule, imports: [CommonModule, AXLoadingModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: AXCollapseModule, declarations: [AXCollapseComponent, AXCollapseGroupComponent], imports: [CommonModule, AXLoadingModule], exports: [AXCollapseComponent, AXCollapseGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCollapseModule, imports: [CommonModule, AXLoadingModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXCollapseModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXCollapseModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXCollapseComponent, AXCollapseGroupComponent],

package/esm2022/color-box/lib/color-box.component.mjs

@@ -35,8 +35,8 @@ export class AXColorBoxComponent extends classes(MXDropdownBoxBaseComponent, (MX
     internalValueChanged(value) {
         //this.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXColorBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXColorBoxComponent, selector: "ax-color-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", minValue: "minValue", maxValue: "maxValue", value: "value", state: "state", name: "name", id: "id", type: "type" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXColorBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: AXColorBoxComponent, selector: "ax-color-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", minValue: "minValue", maxValue: "maxValue", value: "value", state: "state", name: "name", id: "id", type: "type" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, providers: [
             { provide: AXComponent, useExisting: AXColorBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXColorBoxComponent },
             { provide: AXValuableComponent, useExisting: AXColorBoxComponent },
@@ -48,7 +48,7 @@ export class AXColorBoxComponent extends classes(MXDropdownBoxBaseComponent, (MX
             },
         ], viewQueries: [{ propertyName: "picker", first: true, predicate: AXColorPalleteComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-content\" (click)=\"_handleInputClickEvent($event)\">\n      <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\n      <div class=\"color-value\">{{ value }}</div>\n    </div>\n    <ng-content select=\"ax-clear-button\" *ngIf=\"value && !disabled && !readonly\"></ng-content>\n    <button\n      type=\"button\"\n      class=\"ax-general-button ax-button-icon\"\n      [tabIndex]=\"-1\"\n      [disabled]=\"disabled\"\n      (click)=\"_handleArrowClickEvent($event)\"\n    >\n      <span class=\"ax-icon ax-icon-color-palette\"></span>\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-color-palette\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n    >\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-swatches></ax-color-palette-swatches>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </ng-container>\n</ax-dropdown-box>\n", styles: ["ax-color-box{display:flex;flex:1 1 0%}ax-color-box .ax-content{margin-left:.5rem;margin-right:.5rem;display:flex;height:100%;flex:1 1 0%;align-items:center}ax-color-box .ax-content .color-badge{margin-inline-end:.5rem;display:block;height:1rem;width:1rem;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-color-box .ax-content .color-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i3.AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: i3.AXColorPaletteInputComponent, selector: "ax-color-palette-input" }, { kind: "component", type: i3.AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: i4.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXColorBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXColorBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-box', inputs: [
                         'disabled',

package/esm2022/color-box/lib/color-box.module.mjs

@@ -8,11 +8,11 @@ import * as i0 from "@angular/core";
 const COMPONENT = [AXColorBoxComponent];
 const MODULES = [CommonModule, FormsModule, AXColorPaletteModule, AXDropdownModule];
 export class AXColorBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXColorBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: AXColorBoxModule, declarations: [AXColorBoxComponent], imports: [CommonModule, FormsModule, AXColorPaletteModule, AXDropdownModule], exports: [AXColorBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXColorBoxModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXColorBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: AXColorBoxModule, declarations: [AXColorBoxComponent], imports: [CommonModule, FormsModule, AXColorPaletteModule, AXDropdownModule], exports: [AXColorBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXColorBoxModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXColorBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXColorBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/esm2022/color-palette/lib/color-palette-input.component.mjs

@@ -91,8 +91,8 @@ export class AXColorPaletteInputComponent extends MXBaseComponent {
     checkValid() {
         this.isValid = AXColorUtil.isValid(this._hex);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input", host: { classAttribute: "ax-color-palette-input" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input", host: { classAttribute: "ax-color-palette-input" }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPaletteInputComponent,
@@ -100,7 +100,7 @@ export class AXColorPaletteInputComponent extends MXBaseComponent {
             AXUnsubscriber,
         ], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"this._colorMode\">\n  <div class=\"palette-inputs\">\n    <ng-container *ngSwitchCase=\"'hex'\">\n      <div>\n        <ax-text-box class=\"ax-sm\" [ngModel]=\"_hex\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          [state]=\"isValid ? 'clear' : 'error'\" (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n          [mask-options]=\"_hexMaskOptions\">\n        </ax-text-box>\n        <label>HEX</label>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'rgba'\">\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"r\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.r\"\n          [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>R</label>\n      </div>\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"g\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.g\"\n          [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>G</label>\n      </div>\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"b\" [minValue]=\"0\" [maxValue]=\"255\" [ngModel]=\"_rgba.b\"\n          [showSpinButtons]=\"false\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>B</label>\n      </div>\n      <div>\n        <ax-number-box class=\"ax-sm\" name=\"a\" [minValue]=\"0\" [maxValue]=\"1\" [ngModel]=\"_rgba.a\" [decimals]=\"2\"\n          [step]=\"0.1\" [disabled]=\"_parent.disabled\" [readonly]=\"_parent.readonly\" [showSpinButtons]=\"false\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n        </ax-number-box>\n        <label>A</label>\n      </div>\n    </ng-container>\n  </div>\n  <button type=\"button\" class=\"ax-general-button ax-button-rounded ax-button-icon ax-sm\"\n    (click)=\"_handleChangeInputMode()\" [disabled]=\"_parent.disabled\">\n    <span class=\"ax-icon ax-icon-unfold-more\"></span>\n  </button>\n</ng-container>", dependencies: [{ kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: i5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette-input', host: { class: 'ax-color-palette-input' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {