npm - @acorex/components - Versions diffs - 7.2.7 → 7.2.8 - Mend

@acorex/components 7.2.7 → 7.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (275) hide show

package/fesm2022/acorex-components-button.mjs CHANGED Viewed

@@ -44,13 +44,13 @@ class AXButtonComponent extends MXButtonBaseComponent {
             .filter(c => c[1])
             .map(c => c[0]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXButtonComponent, selector: "ax-button", inputs: { disabled: "disabled", size: "size", tabIndex: "tabIndex", color: "color", look: "look", text: "text", toggleable: "toggleable", selected: "selected", type: "type" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange", lookChange: "lookChange", colorChange: "colorChange" }, host: { listeners: { "click": "emitOnClickEvent($event)", "focus": "emitOnBlurEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXButtonComponent, selector: "ax-button", inputs: { disabled: "disabled", size: "size", tabIndex: "tabIndex", color: "color", look: "look", text: "text", toggleable: "toggleable", selected: "selected", type: "type" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange", lookChange: "lookChange", colorChange: "colorChange" }, host: { listeners: { "click": "emitOnClickEvent($event)", "focus": "emitOnBlurEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXComponent, useExisting: AXButtonComponent },
             { provide: AXFocusableComponent, useExisting: AXButtonComponent },
         ], usesInheritance: true, ngImport: i0, template: "<button\n  [disabled]=\"disabled\"\n  [attr.tabindex]=\"tabIndex\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  [attr.type]=\"type\"\n>\n  <ng-content select=\"ax-prefix, ax-loading, ax-icon\"> </ng-content>\n  <ng-content select=\"ax-content\"> </ng-content>\n  <span class=\"ax-button-text\" *ngIf=\"text\">{{ text }}</span>\n  <ng-content select=\"ax-suffix\"> </ng-content>\n  <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n</button>\n", styles: ["ax-button{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ax-rounded-border-default);height:var(--ax-size-default);font-size:.875rem;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-button.ax-primary-default{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-color:rgba(var(--ax-color-primary-400))}ax-button.ax-primary-default>button:is(ax-button.ax-primary-default > button:focus-within){outline-color:rgba(var(--ax-color-primary-500))}ax-button.ax-primary-default:is(ax-button.ax-primary-default:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-primary-600))}ax-button.ax-primary-default:is(ax-button.ax-primary-default:focus-visible):not(.ax-state-disabled){background-color:rgba(var(--ax-color-primary-600))}ax-button.ax-primary-default:is(ax-button.ax-primary-default:active):not(.ax-state-disabled){background-color:rgba(var(--ax-color-primary-500))}ax-button.ax-primary-default.ax-state-selected{background-color:rgba(var(--ax-color-primary-700))}ax-button.ax-primary-outline{border:2px solid;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-button.ax-primary-outline>button:is(ax-button.ax-primary-outline > button:focus-visible){outline-color:rgba(var(--ax-color-primary-500))}ax-button.ax-primary-outline:is(ax-button.ax-primary-outline:hover):not(.ax-state-disabled){border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-button.ax-primary-outline:is(ax-button.ax-primary-outline:focus-visible):not(.ax-state-disabled){border-color:rgba(var(--ax-color-primary-600));background-color:rgba(var(--ax-color-primary-600));color:rgba(var(--ax-color-primary-fore))}ax-button.ax-primary-outline:is(ax-button.ax-primary-outline:active):not(.ax-state-disabled){border-color:rgba(var(--ax-color-primary-400));background-color:transparent;color:rgba(var(--ax-color-primary-500))}ax-button.ax-primary-outline.ax-state-selected{background-color:rgba(var(--ax-color-primary-700));border-color:rgba(var(--ax-color-primary-700));color:rgba(var(--ax-color-primary-fore))}ax-button.ax-primary-blank{color:rgba(var(--ax-color-primary-500))}ax-button.ax-primary-blank>button:is(ax-button.ax-primary-blank > button:focus-visible){outline-color:rgba(var(--ax-color-primary-500))}ax-button.ax-primary-blank:is(ax-button.ax-primary-blank:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-primary-50));color:rgba(var(--ax-color-primary-800))}ax-button.ax-primary-blank:is(ax-button.ax-primary-blank:focus-visible):not(.ax-state-disabled){color:rgba(var(--ax-color-primary-700));outline-color:rgba(var(--ax-color-primary-600))}ax-button.ax-primary-blank:is(ax-button.ax-primary-blank:active):not(.ax-state-disabled){color:rgba(var(--ax-color-primary-500));background-color:transparent}ax-button.ax-primary-blank.ax-state-selected{background-color:rgba(var(--ax-color-primary-700));color:rgba(var(--ax-color-primary-fore))}ax-button.ax-secondary-default{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore));border-color:rgba(var(--ax-color-secondary-400))}ax-button.ax-secondary-default>button:is(ax-button.ax-secondary-default > button:focus-within){outline-color:rgba(var(--ax-color-secondary-500))}ax-button.ax-secondary-default:is(ax-button.ax-secondary-default:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-secondary-600))}ax-button.ax-secondary-default:is(ax-button.ax-secondary-default:focus-visible):not(.ax-state-disabled){background-color:rgba(var(--ax-color-secondary-600))}ax-button.ax-secondary-default:is(ax-button.ax-secondary-default:active):not(.ax-state-disabled){background-color:rgba(var(--ax-color-secondary-500))}ax-button.ax-secondary-default.ax-state-selected{background-color:rgba(var(--ax-color-secondary-700))}ax-button.ax-secondary-outline{border:2px solid;border-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-500))}ax-button.ax-secondary-outline>button:is(ax-button.ax-secondary-outline > button:focus-visible){outline-color:rgba(var(--ax-color-secondary-500))}ax-button.ax-secondary-outline:is(ax-button.ax-secondary-outline:hover):not(.ax-state-disabled){border-color:rgba(var(--ax-color-secondary-500));background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-button.ax-secondary-outline:is(ax-button.ax-secondary-outline:focus-visible):not(.ax-state-disabled){border-color:rgba(var(--ax-color-secondary-600));background-color:rgba(var(--ax-color-secondary-600));color:rgba(var(--ax-color-secondary-fore))}ax-button.ax-secondary-outline:is(ax-button.ax-secondary-outline:active):not(.ax-state-disabled){border-color:rgba(var(--ax-color-secondary-400));background-color:transparent;color:rgba(var(--ax-color-secondary-500))}ax-button.ax-secondary-outline.ax-state-selected{background-color:rgba(var(--ax-color-secondary-700));border-color:rgba(var(--ax-color-secondary-700));color:rgba(var(--ax-color-secondary-fore))}ax-button.ax-secondary-blank{color:rgba(var(--ax-color-secondary-500))}ax-button.ax-secondary-blank>button:is(ax-button.ax-secondary-blank > button:focus-visible){outline-color:rgba(var(--ax-color-secondary-500))}ax-button.ax-secondary-blank:is(ax-button.ax-secondary-blank:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-secondary-50));color:rgba(var(--ax-color-secondary-800))}ax-button.ax-secondary-blank:is(ax-button.ax-secondary-blank:focus-visible):not(.ax-state-disabled){color:rgba(var(--ax-color-secondary-700));outline-color:rgba(var(--ax-color-secondary-600))}ax-button.ax-secondary-blank:is(ax-button.ax-secondary-blank:active):not(.ax-state-disabled){color:rgba(var(--ax-color-secondary-500));background-color:transparent}ax-button.ax-secondary-blank.ax-state-selected{background-color:rgba(var(--ax-color-secondary-700));color:rgba(var(--ax-color-secondary-fore))}ax-button.ax-success-default{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore));border-color:rgba(var(--ax-color-success-400))}ax-button.ax-success-default>button:is(ax-button.ax-success-default > button:focus-within){outline-color:rgba(var(--ax-color-success-500))}ax-button.ax-success-default:is(ax-button.ax-success-default:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-success-600))}ax-button.ax-success-default:is(ax-button.ax-success-default:focus-visible):not(.ax-state-disabled){background-color:rgba(var(--ax-color-success-600))}ax-button.ax-success-default:is(ax-button.ax-success-default:active):not(.ax-state-disabled){background-color:rgba(var(--ax-color-success-500))}ax-button.ax-success-default.ax-state-selected{background-color:rgba(var(--ax-color-success-700))}ax-button.ax-success-outline{border:2px solid;border-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-500))}ax-button.ax-success-outline>button:is(ax-button.ax-success-outline > button:focus-visible){outline-color:rgba(var(--ax-color-success-500))}ax-button.ax-success-outline:is(ax-button.ax-success-outline:hover):not(.ax-state-disabled){border-color:rgba(var(--ax-color-success-500));background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-button.ax-success-outline:is(ax-button.ax-success-outline:focus-visible):not(.ax-state-disabled){border-color:rgba(var(--ax-color-success-600));background-color:rgba(var(--ax-color-success-600));color:rgba(var(--ax-color-success-fore))}ax-button.ax-success-outline:is(ax-button.ax-success-outline:active):not(.ax-state-disabled){border-color:rgba(var(--ax-color-success-400));background-color:transparent;color:rgba(var(--ax-color-success-500))}ax-button.ax-success-outline.ax-state-selected{background-color:rgba(var(--ax-color-success-700));border-color:rgba(var(--ax-color-success-700));color:rgba(var(--ax-color-success-fore))}ax-button.ax-success-blank{color:rgba(var(--ax-color-success-500))}ax-button.ax-success-blank>button:is(ax-button.ax-success-blank > button:focus-visible){outline-color:rgba(var(--ax-color-success-500))}ax-button.ax-success-blank:is(ax-button.ax-success-blank:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-success-50));color:rgba(var(--ax-color-success-800))}ax-button.ax-success-blank:is(ax-button.ax-success-blank:focus-visible):not(.ax-state-disabled){color:rgba(var(--ax-color-success-700));outline-color:rgba(var(--ax-color-success-600))}ax-button.ax-success-blank:is(ax-button.ax-success-blank:active):not(.ax-state-disabled){color:rgba(var(--ax-color-success-500));background-color:transparent}ax-button.ax-success-blank.ax-state-selected{background-color:rgba(var(--ax-color-success-700));color:rgba(var(--ax-color-success-fore))}ax-button.ax-warning-default{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore));border-color:rgba(var(--ax-color-warning-400))}ax-button.ax-warning-default>button:is(ax-button.ax-warning-default > button:focus-within){outline-color:rgba(var(--ax-color-warning-500))}ax-button.ax-warning-default:is(ax-button.ax-warning-default:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-warning-600))}ax-button.ax-warning-default:is(ax-button.ax-warning-default:focus-visible):not(.ax-state-disabled){background-color:rgba(var(--ax-color-warning-600))}ax-button.ax-warning-default:is(ax-button.ax-warning-default:active):not(.ax-state-disabled){background-color:rgba(var(--ax-color-warning-500))}ax-button.ax-warning-default.ax-state-selected{background-color:rgba(var(--ax-color-warning-700))}ax-button.ax-warning-outline{border:2px solid;border-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-500))}ax-button.ax-warning-outline>button:is(ax-button.ax-warning-outline > button:focus-visible){outline-color:rgba(var(--ax-color-warning-500))}ax-button.ax-warning-outline:is(ax-button.ax-warning-outline:hover):not(.ax-state-disabled){border-color:rgba(var(--ax-color-warning-500));background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-button.ax-warning-outline:is(ax-button.ax-warning-outline:focus-visible):not(.ax-state-disabled){border-color:rgba(var(--ax-color-warning-600));background-color:rgba(var(--ax-color-warning-600));color:rgba(var(--ax-color-warning-fore))}ax-button.ax-warning-outline:is(ax-button.ax-warning-outline:active):not(.ax-state-disabled){border-color:rgba(var(--ax-color-warning-400));background-color:transparent;color:rgba(var(--ax-color-warning-500))}ax-button.ax-warning-outline.ax-state-selected{background-color:rgba(var(--ax-color-warning-700));border-color:rgba(var(--ax-color-warning-700));color:rgba(var(--ax-color-warning-fore))}ax-button.ax-warning-blank{color:rgba(var(--ax-color-warning-500))}ax-button.ax-warning-blank>button:is(ax-button.ax-warning-blank > button:focus-visible){outline-color:rgba(var(--ax-color-warning-500))}ax-button.ax-warning-blank:is(ax-button.ax-warning-blank:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-warning-50));color:rgba(var(--ax-color-warning-800))}ax-button.ax-warning-blank:is(ax-button.ax-warning-blank:focus-visible):not(.ax-state-disabled){color:rgba(var(--ax-color-warning-700));outline-color:rgba(var(--ax-color-warning-600))}ax-button.ax-warning-blank:is(ax-button.ax-warning-blank:active):not(.ax-state-disabled){color:rgba(var(--ax-color-warning-500));background-color:transparent}ax-button.ax-warning-blank.ax-state-selected{background-color:rgba(var(--ax-color-warning-700));color:rgba(var(--ax-color-warning-fore))}ax-button.ax-danger-default{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore));border-color:rgba(var(--ax-color-danger-400))}ax-button.ax-danger-default>button:is(ax-button.ax-danger-default > button:focus-within){outline-color:rgba(var(--ax-color-danger-500))}ax-button.ax-danger-default:is(ax-button.ax-danger-default:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-danger-600))}ax-button.ax-danger-default:is(ax-button.ax-danger-default:focus-visible):not(.ax-state-disabled){background-color:rgba(var(--ax-color-danger-600))}ax-button.ax-danger-default:is(ax-button.ax-danger-default:active):not(.ax-state-disabled){background-color:rgba(var(--ax-color-danger-500))}ax-button.ax-danger-default.ax-state-selected{background-color:rgba(var(--ax-color-danger-700))}ax-button.ax-danger-outline{border:2px solid;border-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-500))}ax-button.ax-danger-outline>button:is(ax-button.ax-danger-outline > button:focus-visible){outline-color:rgba(var(--ax-color-danger-500))}ax-button.ax-danger-outline:is(ax-button.ax-danger-outline:hover):not(.ax-state-disabled){border-color:rgba(var(--ax-color-danger-500));background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-button.ax-danger-outline:is(ax-button.ax-danger-outline:focus-visible):not(.ax-state-disabled){border-color:rgba(var(--ax-color-danger-600));background-color:rgba(var(--ax-color-danger-600));color:rgba(var(--ax-color-danger-fore))}ax-button.ax-danger-outline:is(ax-button.ax-danger-outline:active):not(.ax-state-disabled){border-color:rgba(var(--ax-color-danger-400));background-color:transparent;color:rgba(var(--ax-color-danger-500))}ax-button.ax-danger-outline.ax-state-selected{background-color:rgba(var(--ax-color-danger-700));border-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-fore))}ax-button.ax-danger-blank{color:rgba(var(--ax-color-danger-500))}ax-button.ax-danger-blank>button:is(ax-button.ax-danger-blank > button:focus-visible){outline-color:rgba(var(--ax-color-danger-500))}ax-button.ax-danger-blank:is(ax-button.ax-danger-blank:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-danger-50));color:rgba(var(--ax-color-danger-800))}ax-button.ax-danger-blank:is(ax-button.ax-danger-blank:focus-visible):not(.ax-state-disabled){color:rgba(var(--ax-color-danger-700));outline-color:rgba(var(--ax-color-danger-600))}ax-button.ax-danger-blank:is(ax-button.ax-danger-blank:active):not(.ax-state-disabled){color:rgba(var(--ax-color-danger-500));background-color:transparent}ax-button.ax-danger-blank.ax-state-selected{background-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-fore))}ax-button.ax-info-default{background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore));border-color:rgba(var(--ax-color-info-400))}ax-button.ax-info-default>button:is(ax-button.ax-info-default > button:focus-within){outline-color:rgba(var(--ax-color-info-500))}ax-button.ax-info-default:is(ax-button.ax-info-default:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-info-600))}ax-button.ax-info-default:is(ax-button.ax-info-default:focus-visible):not(.ax-state-disabled){background-color:rgba(var(--ax-color-info-600))}ax-button.ax-info-default:is(ax-button.ax-info-default:active):not(.ax-state-disabled){background-color:rgba(var(--ax-color-info-500))}ax-button.ax-info-default.ax-state-selected{background-color:rgba(var(--ax-color-info-700))}ax-button.ax-info-outline{border:2px solid;border-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-500))}ax-button.ax-info-outline>button:is(ax-button.ax-info-outline > button:focus-visible){outline-color:rgba(var(--ax-color-info-500))}ax-button.ax-info-outline:is(ax-button.ax-info-outline:hover):not(.ax-state-disabled){border-color:rgba(var(--ax-color-info-500));background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}ax-button.ax-info-outline:is(ax-button.ax-info-outline:focus-visible):not(.ax-state-disabled){border-color:rgba(var(--ax-color-info-600));background-color:rgba(var(--ax-color-info-600));color:rgba(var(--ax-color-info-fore))}ax-button.ax-info-outline:is(ax-button.ax-info-outline:active):not(.ax-state-disabled){border-color:rgba(var(--ax-color-info-400));background-color:transparent;color:rgba(var(--ax-color-info-500))}ax-button.ax-info-outline.ax-state-selected{background-color:rgba(var(--ax-color-info-700));border-color:rgba(var(--ax-color-info-700));color:rgba(var(--ax-color-info-fore))}ax-button.ax-info-blank{color:rgba(var(--ax-color-info-500))}ax-button.ax-info-blank>button:is(ax-button.ax-info-blank > button:focus-visible){outline-color:rgba(var(--ax-color-info-500))}ax-button.ax-info-blank:is(ax-button.ax-info-blank:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-info-50));color:rgba(var(--ax-color-info-800))}ax-button.ax-info-blank:is(ax-button.ax-info-blank:focus-visible):not(.ax-state-disabled){color:rgba(var(--ax-color-info-700));outline-color:rgba(var(--ax-color-info-600))}ax-button.ax-info-blank:is(ax-button.ax-info-blank:active):not(.ax-state-disabled){color:rgba(var(--ax-color-info-500));background-color:transparent}ax-button.ax-info-blank.ax-state-selected{background-color:rgba(var(--ax-color-info-700));color:rgba(var(--ax-color-info-fore))}ax-button.ax-default-default{background-color:rgba(var(--ax-color-default));color:rgba(var(--ax-color-default-fore))}ax-button.ax-default-outline{background-color:transparent;border:2px solid;border-color:rgba(var(--ax-color-border-default));color:rgba(var(--ax-color-text-default))}ax-button.ax-default-outline:hover{background-color:rgba(var(--ax-color-background-default))}ax-button.ax-default-outline:active{background-color:transparent}ax-button.ax-default-blank{background-color:transparent;border:none;color:rgba(var(--ax-color-text-default))}ax-button.ax-default-blank:hover{background-color:rgba(var(--ax-color-background-default))}ax-button.ax-default-blank:active{background-color:transparent}ax-button[class^=default]{box-shadow:0 1px 2px #0000000d}ax-button[class^=default]:hover{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}ax-button ax-prefix,ax-button ax-suffix{display:flex}ax-button.ax-xs{font-size:.75rem}ax-button.ax-xs>button{padding-inline-start:.25rem;padding-inline-end:.25rem}ax-button.ax-sm>button{padding-inline-start:.5rem;padding-inline-end:.5rem}ax-button.ax-sm,ax-button.ax-md{font-size:.875rem}ax-button.ax-lg{font-size:1.25rem}ax-button.ax-lg>button{padding-inline-start:1.5rem;padding-inline-end:1.5rem}ax-button.ax-xl{font-size:1.5rem;font-weight:600}ax-button.ax-xl>button{padding-inline-start:2rem;padding-inline-end:2rem}ax-button.ax-button-icon{font-size:1rem;width:var(--ax-size-default);height:var(--ax-size-default)}ax-button.ax-state-disabled,ax-button.ax-state-loading{opacity:.5}ax-button.ax-state-disabled>button,ax-button.ax-state-loading>button{cursor:not-allowed}ax-button>button{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%;padding:0 1rem}ax-button>button:is(ax-button > button:focus-visible){outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-color-default));outline-style:solid;border-radius:inherit}ax-button>button .ax-button-text{padding-inline-start:.5rem;padding-inline-end:.5rem;white-space:nowrap;font-weight:500;line-height:1}.ax-dark ax-button.ax-primary-outline{border:2px solid;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-200))}.ax-dark ax-button.ax-primary-outline>button:is(.ax-dark ax-button.ax-primary-outline > button:focus-visible){outline-color:rgba(var(--ax-color-primary-500))}.ax-dark ax-button.ax-primary-outline:is(.ax-dark ax-button.ax-primary-outline:hover):not(.ax-state-disabled){border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-button.ax-primary-outline:is(.ax-dark ax-button.ax-primary-outline:focus-visible):not(.ax-state-disabled){border-color:rgba(var(--ax-color-primary-600));background-color:rgba(var(--ax-color-primary-600));color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-button.ax-primary-outline:is(.ax-dark ax-button.ax-primary-outline:active):not(.ax-state-disabled){border-color:rgba(var(--ax-color-primary-400));background-color:transparent;color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-button.ax-primary-outline.ax-state-selected{background-color:rgba(var(--ax-color-primary-700));color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-button.ax-primary-blank{color:rgba(var(--ax-color-primary-300))}.ax-dark ax-button.ax-primary-blank>button:is(.ax-dark ax-button.ax-primary-blank > button:focus-visible){outline-color:rgba(var(--ax-color-primary-500))}.ax-dark ax-button.ax-primary-blank:is(.ax-dark ax-button.ax-primary-blank:hover):not(.ax-state-disabled){color:rgba(var(--ax-color-primary-900));background-color:rgba(var(--ax-color-primary-300))}.ax-dark ax-button.ax-primary-blank:is(.ax-dark ax-button.ax-primary-blank:focus-visible):not(.ax-state-disabled){color:rgba(var(--ax-color-primary-300));outline-color:rgba(var(--ax-color-primary-300))}.ax-dark ax-button.ax-primary-blank:is(.ax-dark ax-button.ax-primary-blank:active):not(.ax-state-disabled){background-color:transparent;color:rgba(var(--ax-color-primary-100))}.ax-dark ax-button.ax-primary-blank.ax-state-selected{background-color:rgba(var(--ax-color-primary-700));color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-button.ax-secondary-outline{border:2px solid;border-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-200))}.ax-dark ax-button.ax-secondary-outline>button:is(.ax-dark ax-button.ax-secondary-outline > button:focus-visible){outline-color:rgba(var(--ax-color-secondary-500))}.ax-dark ax-button.ax-secondary-outline:is(.ax-dark ax-button.ax-secondary-outline:hover):not(.ax-state-disabled){border-color:rgba(var(--ax-color-secondary-500));background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-button.ax-secondary-outline:is(.ax-dark ax-button.ax-secondary-outline:focus-visible):not(.ax-state-disabled){border-color:rgba(var(--ax-color-secondary-600));background-color:rgba(var(--ax-color-secondary-600));color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-button.ax-secondary-outline:is(.ax-dark ax-button.ax-secondary-outline:active):not(.ax-state-disabled){border-color:rgba(var(--ax-color-secondary-400));background-color:transparent;color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-button.ax-secondary-outline.ax-state-selected{background-color:rgba(var(--ax-color-secondary-700));color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-button.ax-secondary-blank{color:rgba(var(--ax-color-secondary-300))}.ax-dark ax-button.ax-secondary-blank>button:is(.ax-dark ax-button.ax-secondary-blank > button:focus-visible){outline-color:rgba(var(--ax-color-secondary-500))}.ax-dark ax-button.ax-secondary-blank:is(.ax-dark ax-button.ax-secondary-blank:hover):not(.ax-state-disabled){color:rgba(var(--ax-color-secondary-900));background-color:rgba(var(--ax-color-secondary-300))}.ax-dark ax-button.ax-secondary-blank:is(.ax-dark ax-button.ax-secondary-blank:focus-visible):not(.ax-state-disabled){color:rgba(var(--ax-color-secondary-300));outline-color:rgba(var(--ax-color-secondary-300))}.ax-dark ax-button.ax-secondary-blank:is(.ax-dark ax-button.ax-secondary-blank:active):not(.ax-state-disabled){background-color:transparent;color:rgba(var(--ax-color-secondary-100))}.ax-dark ax-button.ax-secondary-blank.ax-state-selected{background-color:rgba(var(--ax-color-secondary-700));color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-button.ax-success-outline{border:2px solid;border-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-200))}.ax-dark ax-button.ax-success-outline>button:is(.ax-dark ax-button.ax-success-outline > button:focus-visible){outline-color:rgba(var(--ax-color-success-500))}.ax-dark ax-button.ax-success-outline:is(.ax-dark ax-button.ax-success-outline:hover):not(.ax-state-disabled){border-color:rgba(var(--ax-color-success-500));background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}.ax-dark ax-button.ax-success-outline:is(.ax-dark ax-button.ax-success-outline:focus-visible):not(.ax-state-disabled){border-color:rgba(var(--ax-color-success-600));background-color:rgba(var(--ax-color-success-600));color:rgba(var(--ax-color-success-fore))}.ax-dark ax-button.ax-success-outline:is(.ax-dark ax-button.ax-success-outline:active):not(.ax-state-disabled){border-color:rgba(var(--ax-color-success-400));background-color:transparent;color:rgba(var(--ax-color-success-fore))}.ax-dark ax-button.ax-success-outline.ax-state-selected{background-color:rgba(var(--ax-color-success-700));color:rgba(var(--ax-color-success-fore))}.ax-dark ax-button.ax-success-blank{color:rgba(var(--ax-color-success-300))}.ax-dark ax-button.ax-success-blank>button:is(.ax-dark ax-button.ax-success-blank > button:focus-visible){outline-color:rgba(var(--ax-color-success-500))}.ax-dark ax-button.ax-success-blank:is(.ax-dark ax-button.ax-success-blank:hover):not(.ax-state-disabled){color:rgba(var(--ax-color-success-900));background-color:rgba(var(--ax-color-success-300))}.ax-dark ax-button.ax-success-blank:is(.ax-dark ax-button.ax-success-blank:focus-visible):not(.ax-state-disabled){color:rgba(var(--ax-color-success-300));outline-color:rgba(var(--ax-color-success-300))}.ax-dark ax-button.ax-success-blank:is(.ax-dark ax-button.ax-success-blank:active):not(.ax-state-disabled){background-color:transparent;color:rgba(var(--ax-color-success-100))}.ax-dark ax-button.ax-success-blank.ax-state-selected{background-color:rgba(var(--ax-color-success-700));color:rgba(var(--ax-color-success-fore))}.ax-dark ax-button.ax-warning-outline{border:2px solid;border-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-200))}.ax-dark ax-button.ax-warning-outline>button:is(.ax-dark ax-button.ax-warning-outline > button:focus-visible){outline-color:rgba(var(--ax-color-warning-500))}.ax-dark ax-button.ax-warning-outline:is(.ax-dark ax-button.ax-warning-outline:hover):not(.ax-state-disabled){border-color:rgba(var(--ax-color-warning-500));background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-button.ax-warning-outline:is(.ax-dark ax-button.ax-warning-outline:focus-visible):not(.ax-state-disabled){border-color:rgba(var(--ax-color-warning-600));background-color:rgba(var(--ax-color-warning-600));color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-button.ax-warning-outline:is(.ax-dark ax-button.ax-warning-outline:active):not(.ax-state-disabled){border-color:rgba(var(--ax-color-warning-400));background-color:transparent;color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-button.ax-warning-outline.ax-state-selected{background-color:rgba(var(--ax-color-warning-700));color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-button.ax-warning-blank{color:rgba(var(--ax-color-warning-300))}.ax-dark ax-button.ax-warning-blank>button:is(.ax-dark ax-button.ax-warning-blank > button:focus-visible){outline-color:rgba(var(--ax-color-warning-500))}.ax-dark ax-button.ax-warning-blank:is(.ax-dark ax-button.ax-warning-blank:hover):not(.ax-state-disabled){color:rgba(var(--ax-color-warning-900));background-color:rgba(var(--ax-color-warning-300))}.ax-dark ax-button.ax-warning-blank:is(.ax-dark ax-button.ax-warning-blank:focus-visible):not(.ax-state-disabled){color:rgba(var(--ax-color-warning-300));outline-color:rgba(var(--ax-color-warning-300))}.ax-dark ax-button.ax-warning-blank:is(.ax-dark ax-button.ax-warning-blank:active):not(.ax-state-disabled){background-color:transparent;color:rgba(var(--ax-color-warning-100))}.ax-dark ax-button.ax-warning-blank.ax-state-selected{background-color:rgba(var(--ax-color-warning-700));color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-button.ax-danger-outline{border:2px solid;border-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-200))}.ax-dark ax-button.ax-danger-outline>button:is(.ax-dark ax-button.ax-danger-outline > button:focus-visible){outline-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-button.ax-danger-outline:is(.ax-dark ax-button.ax-danger-outline:hover):not(.ax-state-disabled){border-color:rgba(var(--ax-color-danger-500));background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-button.ax-danger-outline:is(.ax-dark ax-button.ax-danger-outline:focus-visible):not(.ax-state-disabled){border-color:rgba(var(--ax-color-danger-600));background-color:rgba(var(--ax-color-danger-600));color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-button.ax-danger-outline:is(.ax-dark ax-button.ax-danger-outline:active):not(.ax-state-disabled){border-color:rgba(var(--ax-color-danger-400));background-color:transparent;color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-button.ax-danger-outline.ax-state-selected{background-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-button.ax-danger-blank{color:rgba(var(--ax-color-danger-300))}.ax-dark ax-button.ax-danger-blank>button:is(.ax-dark ax-button.ax-danger-blank > button:focus-visible){outline-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-button.ax-danger-blank:is(.ax-dark ax-button.ax-danger-blank:hover):not(.ax-state-disabled){color:rgba(var(--ax-color-danger-900));background-color:rgba(var(--ax-color-danger-300))}.ax-dark ax-button.ax-danger-blank:is(.ax-dark ax-button.ax-danger-blank:focus-visible):not(.ax-state-disabled){color:rgba(var(--ax-color-danger-300));outline-color:rgba(var(--ax-color-danger-300))}.ax-dark ax-button.ax-danger-blank:is(.ax-dark ax-button.ax-danger-blank:active):not(.ax-state-disabled){background-color:transparent;color:rgba(var(--ax-color-danger-100))}.ax-dark ax-button.ax-danger-blank.ax-state-selected{background-color:rgba(var(--ax-color-danger-700));color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-button.ax-info-outline{border:2px solid;border-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-200))}.ax-dark ax-button.ax-info-outline>button:is(.ax-dark ax-button.ax-info-outline > button:focus-visible){outline-color:rgba(var(--ax-color-info-500))}.ax-dark ax-button.ax-info-outline:is(.ax-dark ax-button.ax-info-outline:hover):not(.ax-state-disabled){border-color:rgba(var(--ax-color-info-500));background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}.ax-dark ax-button.ax-info-outline:is(.ax-dark ax-button.ax-info-outline:focus-visible):not(.ax-state-disabled){border-color:rgba(var(--ax-color-info-600));background-color:rgba(var(--ax-color-info-600));color:rgba(var(--ax-color-info-fore))}.ax-dark ax-button.ax-info-outline:is(.ax-dark ax-button.ax-info-outline:active):not(.ax-state-disabled){border-color:rgba(var(--ax-color-info-400));background-color:transparent;color:rgba(var(--ax-color-info-fore))}.ax-dark ax-button.ax-info-outline.ax-state-selected{background-color:rgba(var(--ax-color-info-700));color:rgba(var(--ax-color-info-fore))}.ax-dark ax-button.ax-info-blank{color:rgba(var(--ax-color-info-300))}.ax-dark ax-button.ax-info-blank>button:is(.ax-dark ax-button.ax-info-blank > button:focus-visible){outline-color:rgba(var(--ax-color-info-500))}.ax-dark ax-button.ax-info-blank:is(.ax-dark ax-button.ax-info-blank:hover):not(.ax-state-disabled){color:rgba(var(--ax-color-info-900));background-color:rgba(var(--ax-color-info-300))}.ax-dark ax-button.ax-info-blank:is(.ax-dark ax-button.ax-info-blank:focus-visible):not(.ax-state-disabled){color:rgba(var(--ax-color-info-300));outline-color:rgba(var(--ax-color-info-300))}.ax-dark ax-button.ax-info-blank:is(.ax-dark ax-button.ax-info-blank:active):not(.ax-state-disabled){background-color:transparent;color:rgba(var(--ax-color-info-100))}.ax-dark ax-button.ax-info-blank.ax-state-selected{background-color:rgba(var(--ax-color-info-700));color:rgba(var(--ax-color-info-fore))}ax-button-group{display:flex;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:-moz-fit-content;width:fit-content}ax-button-group ax-button{border-radius:0;border:none;border-inline-end:1px solid;box-shadow:none}ax-button-group ax-button[class*=-default]{border:0px!important}ax-button-group ax-button:not(:first-child):not(:last-child){border-inline-start-width:0px}ax-button-group ax-button:first-child{border-start-start-radius:var(--ax-rounded-border-default);border-end-start-radius:var(--ax-rounded-border-default)}ax-button-group ax-button:last-child{border-start-end-radius:var(--ax-rounded-border-default);border-end-end-radius:var(--ax-rounded-border-default);border-inline-end-width:0px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-button', inputs: ['disabled', 'size', 'tabIndex', 'color', 'look', 'text', 'toggleable', 'selected'], outputs: ['onBlur', 'onFocus', 'onClick', 'selectedChange', 'toggleableChange', 'lookChange', 'colorChange'], host: {
                         '(click)': 'emitOnClickEvent($event)',
@@ -133,10 +133,10 @@ class AXButtonGroupComponent extends AXBaseButtonGroupMixin {
             item: button,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXButtonGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXButtonGroupComponent, selector: "ax-button-group", inputs: { disabled: "disabled", tabIndex: "tabIndex", color: "color", look: "look", selection: "selection" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", lookChange: "lookChange", colorChange: "colorChange", selectionChange: "selectionChange", onItemClick: "onItemClick" }, host: { attributes: { "role": "group" } }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-button\"></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXButtonGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXButtonGroupComponent, selector: "ax-button-group", inputs: { disabled: "disabled", tabIndex: "tabIndex", color: "color", look: "look", selection: "selection" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", lookChange: "lookChange", colorChange: "colorChange", selectionChange: "selectionChange", onItemClick: "onItemClick" }, host: { attributes: { "role": "group" } }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-button\"></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-button-group', inputs: ['disabled', 'tabIndex', 'color', 'look'], outputs: ['onBlur', 'onFocus', 'lookChange', 'colorChange'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { role: 'group' }, template: "<ng-content select=\"ax-button\"></ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { selectionChange: [{
@@ -178,15 +178,15 @@ class AXButtonItemComponent extends AXBaseItemButtonMixin {
             .map(c => c[0])
             .join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXButtonItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXButtonItemComponent, selector: "ax-button-item", inputs: { text: "text", tooltip: "tooltip", selected: "selected", seperated: "seperated", name: "name", data: "data", color: "color" }, outputs: { onClick: "onClick" }, host: { attributes: { "tabindex": "0" }, listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass" }, classAttribute: "ax-button-item" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXButtonItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXButtonItemComponent, selector: "ax-button-item", inputs: { text: "text", tooltip: "tooltip", selected: "selected", seperated: "seperated", name: "name", data: "data", color: "color" }, outputs: { onClick: "onClick" }, host: { attributes: { "tabindex": "0" }, listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass" }, classAttribute: "ax-button-item" }, usesInheritance: true, ngImport: i0, template: `
     <ng-content select="ax-prefix"> </ng-content>
     <ng-content select="ax-icon"> </ng-content>
     <span *ngIf="text">{{ text }}</span>
     <ng-content select="ax-suffix"> </ng-content>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXButtonItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXButtonItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-button-item',
@@ -230,15 +230,15 @@ const COMPONENT = [
 ];
 const MODULES = [CommonModule, AXDecoratorModule];
 class AXButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: AXButtonModule, declarations: [AXButtonComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: AXButtonModule, declarations: [AXButtonComponent,
             AXButtonItemComponent,
             AXButtonGroupComponent], imports: [CommonModule, AXDecoratorModule], exports: [AXButtonComponent,
             AXButtonItemComponent,
             AXButtonGroupComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXButtonModule, imports: [MODULES] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXButtonModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MODULES],

package/fesm2022/acorex-components-calendar.mjs CHANGED Viewed

@@ -171,10 +171,10 @@ class MXCalendarBaseComponent extends classes(MXBaseComponent) {
     set holidayDates(v) {
         this.setOption({ name: 'holidayDates', value: v });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: MXCalendarBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: MXCalendarBaseComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MXCalendarBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MXCalendarBaseComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: MXCalendarBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: MXCalendarBaseComponent, decorators: [{
             type: Injectable
         }], propDecorators: { interface: [{
                 type: Input
@@ -274,6 +274,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
     constructor() {
         super();
         this._today = new AXDateTime(new Date(), this.type);
+        this._navUserInteraction = false;
         this._footPrint = {
             year: null,
             month: null,
@@ -447,14 +448,14 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         this.cdr.markForCheck();
     }
     _handlePrevClick() {
-        this.isUserInteraction = true;
+        this._navUserInteraction = true;
         this.prev();
-        this.isUserInteraction = false;
+        this._navUserInteraction = false;
     }
     _handleNextClick() {
-        this.isUserInteraction = true;
+        this._navUserInteraction = true;
         this.next();
-        this.isUserInteraction = false;
+        this._navUserInteraction = false;
     }
     _handleSlotClick(e, slot) {
         if (slot.disabled || this.disabled)
@@ -489,9 +490,9 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         }
     }
     _handleNavClick(e, view) {
-        this.isUserInteraction = true;
+        this._navUserInteraction = true;
         this.activeView = view;
-        this.isUserInteraction = false;
+        this._navUserInteraction = false;
     }
     toggleView() {
         if (this.activeView == 'day')
@@ -523,10 +524,10 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         this.render();
     }
     _handleGoToday() {
-        this.isUserInteraction = true;
+        this._navUserInteraction = true;
         this._setDate(this._today.date);
         this.goToday();
-        this.isUserInteraction = false;
+        this._navUserInteraction = false;
     }
     next() {
         this._navNextPrev(false);
@@ -560,7 +561,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
             const vr = this.displayRange;
             this.onNavigate.emit({
                 component: this,
-                isUserInteraction: this.isUserInteraction,
+                isUserInteraction: this._navUserInteraction,
                 start: vr.startTime?.date,
                 end: vr.endTime?.date,
                 htmlElement: this.getHostElement(),
@@ -579,7 +580,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
     _setDate(value) {
         if (this.readonly || this.disabled)
             return;
-        this.value = AXDateTime.convert(value, this._today.calendar.name()).startOf().date;
+        this.commitValue(AXDateTime.convert(value, this._today.calendar.name()).startOf().date, true);
     }
     isDisabled(date) {
         if (Array.isArray(this.disabledDates) && this.disabledDates.length != 0) {
@@ -603,10 +604,10 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         const weekend = AXConfig.get(`dateTime.calendars.${this.type}.weekend`);
         return weekend.includes(date.dayOfWeek);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation", count: "count" }, 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: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<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                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\">\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                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\">\n                <i\n                  class=\"ax-icon\"\n                  [ngClass]=\"{\n                    'ax-icon-chevron-left': !rtl,\n                    'ax-icon-chevron-right': rtl\n                  }\"></i>\n              </button>\n              <button\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\">\n                <i\n                  class=\"ax-icon\"\n                  [ngClass]=\"{\n                    'ax-icon-chevron-left': rtl,\n                    'ax-icon-chevron-right': !rtl\n                  }\"></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              <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                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\">\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\">\n                <i\n                  class=\"ax-icon\"\n                  [ngClass]=\"{\n                    'ax-icon-chevron-left': !rtl,\n                    'ax-icon-chevron-right': rtl\n                  }\"></i>\n              </button>\n              <button\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\">\n                <i\n                  class=\"ax-icon\"\n                  [ngClass]=\"{\n                    'ax-icon-chevron-left': rtl,\n                    'ax-icon-chevron-right': !rtl\n                  }\"></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              <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                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\">\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\">\n                {{ v.range.startTime.format('MMM') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\">\n                <i\n                  class=\"ax-icon\"\n                  [ngClass]=\"{\n                    'ax-icon-chevron-left': !rtl,\n                    'ax-icon-chevron-right': rtl\n                  }\"></i>\n              </button>\n              <button\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\">\n                <i\n                  class=\"ax-icon\"\n                  [ngClass]=\"{\n                    'ax-icon-chevron-left': rtl,\n                    'ax-icon-chevron-right': !rtl\n                  }\"></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                <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: [".ax-dark ax-calendar{background:rgba(var(--ax-color-default))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));width:max-content}@media (max-width: 599px){ax-calendar{width:100%}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.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:row}ax-calendar .ax-calendar-body>div{flex:1}@media (max-width: 599px){ax-calendar .ax-calendar-body>div{width:100%}}@media (min-width: 600px){ax-calendar .ax-calendar-body>div{width:20rem}}@media (min-width: 1200px){ax-calendar .ax-calendar-body>div{width:19rem}}@media (min-width: 1800px){ax-calendar .ax-calendar-body>div{width:21rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;padding:.5rem;border-bottom:1px solid;border-bottom-color:rgba(var(--ax-color-border-default))}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;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";display:block;clear:both}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){background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}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-style:solid;outline-color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}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-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{color:rgba(var(--ax-color-primary-500));border-width:1px;border-style:solid;border-color:rgba(var(--ax-color-primary-200))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{color:rgba(var(--ax-color-primary-fore))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-500))}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:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}@media (max-width: 599px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 600px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 1200px){ax-calendar .ax-calendar-body{flex-direction:row}}@media (min-width: 1800px){ax-calendar .ax-calendar-body{flex-direction:row}}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-primary-400))}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-600))}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation", count: "count" }, 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: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<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                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\">\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                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\">\n                <i\n                  class=\"ax-icon\"\n                  [ngClass]=\"{\n                    'ax-icon-chevron-left': !rtl,\n                    'ax-icon-chevron-right': rtl\n                  }\"></i>\n              </button>\n              <button\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\">\n                <i\n                  class=\"ax-icon\"\n                  [ngClass]=\"{\n                    'ax-icon-chevron-left': rtl,\n                    'ax-icon-chevron-right': !rtl\n                  }\"></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              <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                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\">\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\">\n                <i\n                  class=\"ax-icon\"\n                  [ngClass]=\"{\n                    'ax-icon-chevron-left': !rtl,\n                    'ax-icon-chevron-right': rtl\n                  }\"></i>\n              </button>\n              <button\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\">\n                <i\n                  class=\"ax-icon\"\n                  [ngClass]=\"{\n                    'ax-icon-chevron-left': rtl,\n                    'ax-icon-chevron-right': !rtl\n                  }\"></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              <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                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\">\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\">\n                {{ v.range.startTime.format('MMM') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\">\n                <i\n                  class=\"ax-icon\"\n                  [ngClass]=\"{\n                    'ax-icon-chevron-left': !rtl,\n                    'ax-icon-chevron-right': rtl\n                  }\"></i>\n              </button>\n              <button\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\">\n                <i\n                  class=\"ax-icon\"\n                  [ngClass]=\"{\n                    'ax-icon-chevron-left': rtl,\n                    'ax-icon-chevron-right': !rtl\n                  }\"></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                <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: [".ax-dark ax-calendar{background:rgba(var(--ax-color-default))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));width:max-content}@media (max-width: 599px){ax-calendar{width:100%}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.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:row}ax-calendar .ax-calendar-body>div{flex:1}@media (max-width: 599px){ax-calendar .ax-calendar-body>div{width:100%}}@media (min-width: 600px){ax-calendar .ax-calendar-body>div{width:20rem}}@media (min-width: 1200px){ax-calendar .ax-calendar-body>div{width:19rem}}@media (min-width: 1800px){ax-calendar .ax-calendar-body>div{width:21rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;padding:.5rem;border-bottom:1px solid;border-bottom-color:rgba(var(--ax-color-border-default))}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;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";display:block;clear:both}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){background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}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-style:solid;outline-color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}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-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{color:rgba(var(--ax-color-primary-500));border-width:1px;border-style:solid;border-color:rgba(var(--ax-color-primary-200))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{color:rgba(var(--ax-color-primary-fore))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-500))}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:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}@media (max-width: 599px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 600px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 1200px){ax-calendar .ax-calendar-body{flex-direction:row}}@media (min-width: 1800px){ax-calendar .ax-calendar-body{flex-direction:row}}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-primary-400))}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-600))}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: [
                         'rtl',
@@ -768,10 +769,10 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
             this._c1.navTo(e.startOf('year'));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXCalendarRangeComponent, selector: "ax-calendar-range", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation" }, 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" }, viewQueries: [{ propertyName: "_c1", first: true, predicate: ["c1"], descendants: true, static: true }, { propertyName: "_c2", first: true, predicate: ["c2"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-range-header\">\n    <ng-content></ng-content>\n    <div class=\"ax-calendar-header-range-info\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\n            {{ _navText }}\n        </button>\n    </div>\n    <div class=\"ax-calendar-header-range-buttons\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handlePrevClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': !rtl,\n                'ax-icon-chevron-right': rtl\n              }\"></i>\n        </button>\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handleNextClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': rtl,\n                'ax-icon-chevron-right': !rtl\n              }\"></i>\n        </button>\n    </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n    <ax-calendar #c1 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (onNavigate)=\"handleNavigate()\" (activeViewChange)=\"handleActiveViewChange1()\">\n    </ax-calendar>\n    <ax-calendar #c2 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (activeViewChange)=\"handleActiveViewChange2()\">\n    </ax-calendar>\n</div>", styles: [".ax-dark ax-calendar-range{background:rgba(var(--ax-color-default))}.ax-dark ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-800));color:rgba(var(--ax-color-primary-fore))}ax-calendar-range{background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.25rem}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-500))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "min", "max", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXCalendarRangeComponent, selector: "ax-calendar-range", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation" }, 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" }, viewQueries: [{ propertyName: "_c1", first: true, predicate: ["c1"], descendants: true, static: true }, { propertyName: "_c2", first: true, predicate: ["c2"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-range-header\">\n    <ng-content></ng-content>\n    <div class=\"ax-calendar-header-range-info\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\n            {{ _navText }}\n        </button>\n    </div>\n    <div class=\"ax-calendar-header-range-buttons\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handlePrevClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': !rtl,\n                'ax-icon-chevron-right': rtl\n              }\"></i>\n        </button>\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handleNextClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': rtl,\n                'ax-icon-chevron-right': !rtl\n              }\"></i>\n        </button>\n    </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n    <ax-calendar #c1 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (onNavigate)=\"handleNavigate()\" (activeViewChange)=\"handleActiveViewChange1()\">\n    </ax-calendar>\n    <ax-calendar #c2 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (activeViewChange)=\"handleActiveViewChange2()\">\n    </ax-calendar>\n</div>", styles: [".ax-dark ax-calendar-range{background:rgba(var(--ax-color-default))}.ax-dark ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-800));color:rgba(var(--ax-color-primary-fore))}ax-calendar-range{background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.25rem}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-500))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "min", "max", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-calendar-range', encapsulation: ViewEncapsulation.None, inputs: [
                         'rtl',
@@ -814,11 +815,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
 const COMPONENT = [AXCalendarComponent, AXCalendarRangeComponent];
 const MODULES = [CommonModule, AXDateTimeModule];
 class AXCalendarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent, AXCalendarRangeComponent], imports: [CommonModule, AXDateTimeModule], exports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXCalendarModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent, AXCalendarRangeComponent], imports: [CommonModule, AXDateTimeModule], exports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXCalendarModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],