npm - @acorex/components - Versions diffs - 7.1.36 → 7.1.38 - Mend

@acorex/components 7.1.36 → 7.1.38

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 (88) hide show

package/esm2022/calendar/src/calendar.component.mjs CHANGED Viewed

@@ -361,12 +361,12 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         return weekend.includes(date.dayOfWeek);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AXCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", 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 [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-state-disabled\" (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 [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-slots ax-calendar-slots-year\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n            <div tabindex=\"0\" *ngFor=\"let slot of v.slots\" class=\"ax-calendar-slot\" [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 [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (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 [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-slots ax-calendar-slots-month\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n            <div tabindex=\"0\" *ngFor=\"let slot of v.slots\" class=\"ax-calendar-slot\" [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 [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event,'year')\">\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (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 [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-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 tabindex=\"0\" class=\"ax-calendar-slot\" [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>", styles: [".ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}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-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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", 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 [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-state-disabled\" (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 [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-slots ax-calendar-slots-year\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n            <div tabindex=\"0\" *ngFor=\"let slot of v.slots\" class=\"ax-calendar-slot\" [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 [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (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 [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-slots ax-calendar-slots-month\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n            <div tabindex=\"0\" *ngFor=\"let slot of v.slots\" class=\"ax-calendar-slot\" [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 [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event,'year')\">\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (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 [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-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 tabindex=\"0\" class=\"ax-calendar-slot\" [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>", 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-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 });
 }
 export { AXCalendarComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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'], 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 [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-state-disabled\" (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 [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-slots ax-calendar-slots-year\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n            <div tabindex=\"0\" *ngFor=\"let slot of v.slots\" class=\"ax-calendar-slot\" [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 [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (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 [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-slots ax-calendar-slots-month\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n            <div tabindex=\"0\" *ngFor=\"let slot of v.slots\" class=\"ax-calendar-slot\" [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 [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event,'year')\">\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (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 [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-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 tabindex=\"0\" class=\"ax-calendar-slot\" [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>", styles: [".ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}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-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"] }]
+            args: [{ selector: 'ax-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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'], 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 [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-state-disabled\" (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 [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-slots ax-calendar-slots-year\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n            <div tabindex=\"0\" *ngFor=\"let slot of v.slots\" class=\"ax-calendar-slot\" [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 [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (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 [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-slots ax-calendar-slots-month\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n            <div tabindex=\"0\" *ngFor=\"let slot of v.slots\" class=\"ax-calendar-slot\" [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 [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event,'year')\">\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (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 [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-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 tabindex=\"0\" class=\"ax-calendar-slot\" [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>", 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-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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']

package/esm2022/chips/src/chips.component.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ import * as i1 from "@angular/common";
 export const AXBaseChipsMixin = _InteractiveComponenetMixin(_ClickableComponenetMixin(AXBaseComponent));
 class AXChipsComponent extends AXBaseChipsMixin {
     look = 'default';
-    color = 'ghost';
+    color = 'default';
     text = '';
     constructor() {
         super();
@@ -15,12 +15,12 @@ class AXChipsComponent extends AXBaseChipsMixin {
         return `ax-${this.color}-${this.look}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AXChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: AXChipsComponent, selector: "ax-chips", inputs: { tabIndex: "tabIndex", look: "look", color: "color", text: "text" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-chips-text\" *ngIf=\"text\">{{text }}</div>\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-chips{font-size:.875rem;padding:.375rem .5rem;border-radius:99rem;display:inline-flex;align-items:center;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;font-weight:500}ax-chips:focus-visible{outline-offset:2px;outline-width:2px;outline-style:solid;outline-color:rgba(var(--ax-color-ghost-300))}ax-chips .ax-chips-text{padding:0 .5rem}ax-chips ax-prefix,ax-chips ax-suffix{display:flex;align-items:center;font-size:1rem}ax-chips ax-prefix ax-icon,ax-chips ax-suffix ax-icon{font-size:1rem!important}ax-chips.ax-primary-default{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-chips.ax-primary-default:hover{background-color:rgba(var(--ax-color-primary-500),.8)}ax-chips.ax-primary-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-primary-outline{border:2px solid;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500),.87)}ax-chips.ax-primary-outline:hover{background:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-chips.ax-primary-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-secondary-default{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-chips.ax-secondary-default:hover{background-color:rgba(var(--ax-color-secondary-500),.8)}ax-chips.ax-secondary-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-secondary-outline{border:2px solid;border-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-500),.87)}ax-chips.ax-secondary-outline:hover{background:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-chips.ax-secondary-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-success-default{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-chips.ax-success-default:hover{background-color:rgba(var(--ax-color-success-500),.8)}ax-chips.ax-success-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-success-outline{border:2px solid;border-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-500),.87)}ax-chips.ax-success-outline:hover{background:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-chips.ax-success-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-warning-default{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-chips.ax-warning-default:hover{background-color:rgba(var(--ax-color-warning-500),.8)}ax-chips.ax-warning-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-warning-outline{border:2px solid;border-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-500),.87)}ax-chips.ax-warning-outline:hover{background:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-chips.ax-warning-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-danger-default{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-chips.ax-danger-default:hover{background-color:rgba(var(--ax-color-danger-500),.8)}ax-chips.ax-danger-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-danger-outline{border:2px solid;border-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-500),.87)}ax-chips.ax-danger-outline:hover{background:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-chips.ax-danger-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-info-default{background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}ax-chips.ax-info-default:hover{background-color:rgba(var(--ax-color-info-500),.8)}ax-chips.ax-info-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-info-outline{border:2px solid;border-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-500),.87)}ax-chips.ax-info-outline:hover{background:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}ax-chips.ax-info-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-ghost-default{background-color:rgba(var(--ax-color-ghost-100));color:rgba(var(--ax-color-ghost-fore))}ax-chips.ax-ghost-default:hover{background-color:rgba(var(--ax-color-ghost-200))}ax-chips.ax-ghost-outline{border:2px solid;border-color:rgba(var(--ax-color-ghost-300));color:rgba(var(--ax-color-ghost-fore))}ax-chips.ax-ghost-outline:hover{background:rgba(var(--ax-color-ghost-200));border-color:rgba(var(--ax-color-ghost-200))}.ax-dark ax-chips.ax-primary-outline{border:2px solid;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-50))}.ax-dark ax-chips.ax-primary-outline:hover{background:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-chips.ax-primary-outline:focus-visible{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-chips.ax-secondary-outline{border:2px solid;border-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-50))}.ax-dark ax-chips.ax-secondary-outline:hover{background:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-chips.ax-secondary-outline:focus-visible{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-chips.ax-success-outline{border:2px solid;border-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-50))}.ax-dark ax-chips.ax-success-outline:hover{background:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}.ax-dark ax-chips.ax-success-outline:focus-visible{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-chips.ax-warning-outline{border:2px solid;border-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-50))}.ax-dark ax-chips.ax-warning-outline:hover{background:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-chips.ax-warning-outline:focus-visible{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-chips.ax-danger-outline{border:2px solid;border-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-50))}.ax-dark ax-chips.ax-danger-outline:hover{background:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-chips.ax-danger-outline:focus-visible{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-chips.ax-info-outline{border:2px solid;border-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-50))}.ax-dark ax-chips.ax-info-outline:hover{background:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}.ax-dark ax-chips.ax-info-outline:focus-visible{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-chips.ax-ghost-default{background-color:rgba(var(--ax-color-ghost-300));color:rgba(var(--ax-color-ghost-fore))}.ax-dark ax-chips.ax-ghost-default:hover{background-color:rgba(var(--ax-color-ghost-300))}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: AXChipsComponent, selector: "ax-chips", inputs: { tabIndex: "tabIndex", look: "look", color: "color", text: "text" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-chips-text\" *ngIf=\"text\">{{text }}</div>\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-chips{font-size:.875rem;line-height:1.25rem;padding:.25rem .75rem;border-radius:99rem;display:inline-flex;align-items:center;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;font-weight:500}ax-chips.ax-default-default{border:1px solid;border-color:rgba(var(--ax-color-default));background-color:rgba(var(--ax-color-default));color:rgba(var(--ax-color-default-fore))}ax-chips.ax-default-outline{background-color:transparent;border:2px solid;border-color:rgba(var(--ax-color-default))}ax-chips.ax-default-blank{background-color:transparent;border:none;color:rgba(var(--ax-color-default-fore))}ax-chips:hover{opacity:.85}ax-chips:active{opacity:.75}ax-chips:focus-visible{outline-offset:2px;outline-width:2px;outline-style:solid;outline-color:rgba(var(--ax-color-default))}ax-chips .ax-chips-text{padding:0 .5rem}ax-chips ax-prefix,ax-chips ax-suffix{display:flex;align-items:center;font-size:1.125rem}ax-chips.ax-primary-default{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-chips.ax-primary-default:hover{background-color:rgba(var(--ax-color-primary-500),.8)}ax-chips.ax-primary-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-primary-outline{border:2px solid;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500),.87)}ax-chips.ax-primary-outline:hover{background:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-chips.ax-primary-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-secondary-default{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-chips.ax-secondary-default:hover{background-color:rgba(var(--ax-color-secondary-500),.8)}ax-chips.ax-secondary-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-secondary-outline{border:2px solid;border-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-500),.87)}ax-chips.ax-secondary-outline:hover{background:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-chips.ax-secondary-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-success-default{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-chips.ax-success-default:hover{background-color:rgba(var(--ax-color-success-500),.8)}ax-chips.ax-success-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-success-outline{border:2px solid;border-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-500),.87)}ax-chips.ax-success-outline:hover{background:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-chips.ax-success-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-warning-default{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-chips.ax-warning-default:hover{background-color:rgba(var(--ax-color-warning-500),.8)}ax-chips.ax-warning-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-warning-outline{border:2px solid;border-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-500),.87)}ax-chips.ax-warning-outline:hover{background:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-chips.ax-warning-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-danger-default{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-chips.ax-danger-default:hover{background-color:rgba(var(--ax-color-danger-500),.8)}ax-chips.ax-danger-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-danger-outline{border:2px solid;border-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-500),.87)}ax-chips.ax-danger-outline:hover{background:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-chips.ax-danger-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-info-default{background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}ax-chips.ax-info-default:hover{background-color:rgba(var(--ax-color-info-500),.8)}ax-chips.ax-info-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-info-outline{border:2px solid;border-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-500),.87)}ax-chips.ax-info-outline:hover{background:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}ax-chips.ax-info-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 export { AXChipsComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AXChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-chips', inputs: ['tabIndex'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-chips-text\" *ngIf=\"text\">{{text }}</div>\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-chips{font-size:.875rem;padding:.375rem .5rem;border-radius:99rem;display:inline-flex;align-items:center;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;font-weight:500}ax-chips:focus-visible{outline-offset:2px;outline-width:2px;outline-style:solid;outline-color:rgba(var(--ax-color-ghost-300))}ax-chips .ax-chips-text{padding:0 .5rem}ax-chips ax-prefix,ax-chips ax-suffix{display:flex;align-items:center;font-size:1rem}ax-chips ax-prefix ax-icon,ax-chips ax-suffix ax-icon{font-size:1rem!important}ax-chips.ax-primary-default{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-chips.ax-primary-default:hover{background-color:rgba(var(--ax-color-primary-500),.8)}ax-chips.ax-primary-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-primary-outline{border:2px solid;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500),.87)}ax-chips.ax-primary-outline:hover{background:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-chips.ax-primary-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-secondary-default{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-chips.ax-secondary-default:hover{background-color:rgba(var(--ax-color-secondary-500),.8)}ax-chips.ax-secondary-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-secondary-outline{border:2px solid;border-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-500),.87)}ax-chips.ax-secondary-outline:hover{background:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-chips.ax-secondary-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-success-default{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-chips.ax-success-default:hover{background-color:rgba(var(--ax-color-success-500),.8)}ax-chips.ax-success-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-success-outline{border:2px solid;border-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-500),.87)}ax-chips.ax-success-outline:hover{background:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-chips.ax-success-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-warning-default{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-chips.ax-warning-default:hover{background-color:rgba(var(--ax-color-warning-500),.8)}ax-chips.ax-warning-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-warning-outline{border:2px solid;border-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-500),.87)}ax-chips.ax-warning-outline:hover{background:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-chips.ax-warning-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-danger-default{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-chips.ax-danger-default:hover{background-color:rgba(var(--ax-color-danger-500),.8)}ax-chips.ax-danger-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-danger-outline{border:2px solid;border-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-500),.87)}ax-chips.ax-danger-outline:hover{background:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-chips.ax-danger-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-info-default{background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}ax-chips.ax-info-default:hover{background-color:rgba(var(--ax-color-info-500),.8)}ax-chips.ax-info-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-info-outline{border:2px solid;border-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-500),.87)}ax-chips.ax-info-outline:hover{background:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}ax-chips.ax-info-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-ghost-default{background-color:rgba(var(--ax-color-ghost-100));color:rgba(var(--ax-color-ghost-fore))}ax-chips.ax-ghost-default:hover{background-color:rgba(var(--ax-color-ghost-200))}ax-chips.ax-ghost-outline{border:2px solid;border-color:rgba(var(--ax-color-ghost-300));color:rgba(var(--ax-color-ghost-fore))}ax-chips.ax-ghost-outline:hover{background:rgba(var(--ax-color-ghost-200));border-color:rgba(var(--ax-color-ghost-200))}.ax-dark ax-chips.ax-primary-outline{border:2px solid;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-50))}.ax-dark ax-chips.ax-primary-outline:hover{background:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-chips.ax-primary-outline:focus-visible{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-chips.ax-secondary-outline{border:2px solid;border-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-50))}.ax-dark ax-chips.ax-secondary-outline:hover{background:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-chips.ax-secondary-outline:focus-visible{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-chips.ax-success-outline{border:2px solid;border-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-50))}.ax-dark ax-chips.ax-success-outline:hover{background:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}.ax-dark ax-chips.ax-success-outline:focus-visible{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-chips.ax-warning-outline{border:2px solid;border-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-50))}.ax-dark ax-chips.ax-warning-outline:hover{background:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-chips.ax-warning-outline:focus-visible{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-chips.ax-danger-outline{border:2px solid;border-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-50))}.ax-dark ax-chips.ax-danger-outline:hover{background:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-chips.ax-danger-outline:focus-visible{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-chips.ax-info-outline{border:2px solid;border-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-50))}.ax-dark ax-chips.ax-info-outline:hover{background:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}.ax-dark ax-chips.ax-info-outline:focus-visible{background-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-chips.ax-ghost-default{background-color:rgba(var(--ax-color-ghost-300));color:rgba(var(--ax-color-ghost-fore))}.ax-dark ax-chips.ax-ghost-default:hover{background-color:rgba(var(--ax-color-ghost-300))}\n"] }]
+            args: [{ selector: 'ax-chips', inputs: ['tabIndex'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-chips-text\" *ngIf=\"text\">{{text }}</div>\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-chips{font-size:.875rem;line-height:1.25rem;padding:.25rem .75rem;border-radius:99rem;display:inline-flex;align-items:center;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;font-weight:500}ax-chips.ax-default-default{border:1px solid;border-color:rgba(var(--ax-color-default));background-color:rgba(var(--ax-color-default));color:rgba(var(--ax-color-default-fore))}ax-chips.ax-default-outline{background-color:transparent;border:2px solid;border-color:rgba(var(--ax-color-default))}ax-chips.ax-default-blank{background-color:transparent;border:none;color:rgba(var(--ax-color-default-fore))}ax-chips:hover{opacity:.85}ax-chips:active{opacity:.75}ax-chips:focus-visible{outline-offset:2px;outline-width:2px;outline-style:solid;outline-color:rgba(var(--ax-color-default))}ax-chips .ax-chips-text{padding:0 .5rem}ax-chips ax-prefix,ax-chips ax-suffix{display:flex;align-items:center;font-size:1.125rem}ax-chips.ax-primary-default{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-chips.ax-primary-default:hover{background-color:rgba(var(--ax-color-primary-500),.8)}ax-chips.ax-primary-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-primary-outline{border:2px solid;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500),.87)}ax-chips.ax-primary-outline:hover{background:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-chips.ax-primary-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-secondary-default{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-chips.ax-secondary-default:hover{background-color:rgba(var(--ax-color-secondary-500),.8)}ax-chips.ax-secondary-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-secondary-outline{border:2px solid;border-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-500),.87)}ax-chips.ax-secondary-outline:hover{background:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-chips.ax-secondary-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-success-default{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-chips.ax-success-default:hover{background-color:rgba(var(--ax-color-success-500),.8)}ax-chips.ax-success-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-success-outline{border:2px solid;border-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-500),.87)}ax-chips.ax-success-outline:hover{background:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-chips.ax-success-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-warning-default{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-chips.ax-warning-default:hover{background-color:rgba(var(--ax-color-warning-500),.8)}ax-chips.ax-warning-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-warning-outline{border:2px solid;border-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-500),.87)}ax-chips.ax-warning-outline:hover{background:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-chips.ax-warning-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-danger-default{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-chips.ax-danger-default:hover{background-color:rgba(var(--ax-color-danger-500),.8)}ax-chips.ax-danger-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-danger-outline{border:2px solid;border-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-500),.87)}ax-chips.ax-danger-outline:hover{background:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-chips.ax-danger-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-info-default{background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}ax-chips.ax-info-default:hover{background-color:rgba(var(--ax-color-info-500),.8)}ax-chips.ax-info-default:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-chips.ax-info-outline{border:2px solid;border-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-500),.87)}ax-chips.ax-info-outline:hover{background:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}ax-chips.ax-info-outline:focus-visible{background-color:rgba(var(--ax-color-primary-500))}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { look: [{
                 type: Input
             }], color: [{
@@ -31,4 +31,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
                 type: HostBinding,
                 args: ['class']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hpcHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWNvcmV4L2NvbXBvbmVudHMvY2hpcHMvc3JjL2NoaXBzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Fjb3JleC9jb21wb25lbnRzL2NoaXBzL3NyYy9jaGlwcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsZUFBZSxFQUFFLHlCQUF5QixFQUFFLDJCQUEyQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDbkgsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLHVCQUF1QixFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFFMUcsTUFBTSxDQUFDLE1BQU0sZ0JBQWdCLEdBQUcsMkJBQTJCLENBQUMseUJBQXlCLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQztBQUN4RyxNQVFhLGdCQUFpQixTQUFRLGdCQUFnQjtJQUVwRCxJQUFJLEdBQTBCLFNBQVMsQ0FBQztJQUd4QyxLQUFLLEdBQXFCLE9BQU8sQ0FBQztJQUdsQyxJQUFJLEdBQVcsRUFBRSxDQUFDO0lBRWxCO1FBQ0UsS0FBSyxFQUFFLENBQUM7SUFDVixDQUFDO0lBRUQsUUFBUSxLQUFVLENBQUM7SUFFbkIsSUFDWSxXQUFXO1FBQ3JCLE9BQU8sTUFBTSxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN6QyxDQUFDO3VHQW5CVSxnQkFBZ0I7MkZBQWhCLGdCQUFnQiw0TUNiN0IsNkpBRTRDOztTRFcvQixnQkFBZ0I7MkZBQWhCLGdCQUFnQjtrQkFSNUIsU0FBUzsrQkFDRSxVQUFVLFVBR1osQ0FBQyxVQUFVLENBQUMsbUJBQ0gsdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSTswRUFJckMsSUFBSTtzQkFESCxLQUFLO2dCQUlOLEtBQUs7c0JBREosS0FBSztnQkFJTixJQUFJO3NCQURILEtBQUs7Z0JBVU0sV0FBVztzQkFEdEIsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQVhTdHlsZUNvbG9yVHlwZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9jb21tb24nO1xuaW1wb3J0IHsgQVhCYXNlQ29tcG9uZW50LCBfQ2xpY2thYmxlQ29tcG9uZW5ldE1peGluLCBfSW50ZXJhY3RpdmVDb21wb25lbmV0TWl4aW4gfSBmcm9tICdAYWNvcmV4L2NvbXBvbmVudHMvbWl4aW4nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgSG9zdEJpbmRpbmcsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgY29uc3QgQVhCYXNlQ2hpcHNNaXhpbiA9IF9JbnRlcmFjdGl2ZUNvbXBvbmVuZXRNaXhpbihfQ2xpY2thYmxlQ29tcG9uZW5ldE1peGluKEFYQmFzZUNvbXBvbmVudCkpO1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXgtY2hpcHMnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hpcHMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jaGlwcy5jb21wb25lbnQuc2NzcyddLFxuICBpbnB1dHM6IFsndGFiSW5kZXgnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIEFYQ2hpcHNDb21wb25lbnQgZXh0ZW5kcyBBWEJhc2VDaGlwc01peGluIHtcbiAgQElucHV0KClcbiAgbG9vazogJ2RlZmF1bHQnIHwgJ291dGxpbmUnID0gJ2RlZmF1bHQnO1xuXG4gIEBJbnB1dCgpXG4gIGNvbG9yOiBBWFN0eWxlQ29sb3JUeXBlID0gJ2dob3N0JztcblxuICBASW5wdXQoKVxuICB0ZXh0OiBzdHJpbmcgPSAnJztcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7fVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBwcml2YXRlIGdldCBfX2hvc3RDbGFzcygpOiBzdHJpbmcge1xuICAgIHJldHVybiBgYXgtJHt0aGlzLmNvbG9yfS0ke3RoaXMubG9va31gO1xuICB9XG59XG4iLCI8bmctY29udGVudCBzZWxlY3Q9XCJheC1wcmVmaXhcIj48L25nLWNvbnRlbnQ+XG48ZGl2IGNsYXNzPVwiYXgtY2hpcHMtdGV4dFwiICpuZ0lmPVwidGV4dFwiPnt7dGV4dCB9fTwvZGl2PlxuPG5nLWNvbnRlbnQgc2VsZWN0PVwiYXgtc3VmZml4XCI+PC9uZy1jb250ZW50PiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hpcHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWNvcmV4L2NvbXBvbmVudHMvY2hpcHMvc3JjL2NoaXBzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Fjb3JleC9jb21wb25lbnRzL2NoaXBzL3NyYy9jaGlwcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsZUFBZSxFQUFFLHlCQUF5QixFQUFFLDJCQUEyQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDbkgsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLHVCQUF1QixFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFFMUcsTUFBTSxDQUFDLE1BQU0sZ0JBQWdCLEdBQUcsMkJBQTJCLENBQUMseUJBQXlCLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQztBQUN4RyxNQVFhLGdCQUFpQixTQUFRLGdCQUFnQjtJQUVwRCxJQUFJLEdBQTBCLFNBQVMsQ0FBQztJQUd4QyxLQUFLLEdBQXFCLFNBQVMsQ0FBQztJQUdwQyxJQUFJLEdBQVcsRUFBRSxDQUFDO0lBRWxCO1FBQ0UsS0FBSyxFQUFFLENBQUM7SUFDVixDQUFDO0lBRUQsUUFBUSxLQUFVLENBQUM7SUFFbkIsSUFDWSxXQUFXO1FBQ3JCLE9BQU8sTUFBTSxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN6QyxDQUFDO3VHQW5CVSxnQkFBZ0I7MkZBQWhCLGdCQUFnQiw0TUNiN0IsNkpBRTRDOztTRFcvQixnQkFBZ0I7MkZBQWhCLGdCQUFnQjtrQkFSNUIsU0FBUzsrQkFDRSxVQUFVLFVBR1osQ0FBQyxVQUFVLENBQUMsbUJBQ0gsdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSTswRUFJckMsSUFBSTtzQkFESCxLQUFLO2dCQUlOLEtBQUs7c0JBREosS0FBSztnQkFJTixJQUFJO3NCQURILEtBQUs7Z0JBVU0sV0FBVztzQkFEdEIsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQVhTdHlsZUNvbG9yVHlwZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9jb21tb24nO1xuaW1wb3J0IHsgQVhCYXNlQ29tcG9uZW50LCBfQ2xpY2thYmxlQ29tcG9uZW5ldE1peGluLCBfSW50ZXJhY3RpdmVDb21wb25lbmV0TWl4aW4gfSBmcm9tICdAYWNvcmV4L2NvbXBvbmVudHMvbWl4aW4nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgSG9zdEJpbmRpbmcsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgY29uc3QgQVhCYXNlQ2hpcHNNaXhpbiA9IF9JbnRlcmFjdGl2ZUNvbXBvbmVuZXRNaXhpbihfQ2xpY2thYmxlQ29tcG9uZW5ldE1peGluKEFYQmFzZUNvbXBvbmVudCkpO1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXgtY2hpcHMnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hpcHMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jaGlwcy5jb21wb25lbnQuc2NzcyddLFxuICBpbnB1dHM6IFsndGFiSW5kZXgnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIEFYQ2hpcHNDb21wb25lbnQgZXh0ZW5kcyBBWEJhc2VDaGlwc01peGluIHtcbiAgQElucHV0KClcbiAgbG9vazogJ2RlZmF1bHQnIHwgJ291dGxpbmUnID0gJ2RlZmF1bHQnO1xuXG4gIEBJbnB1dCgpXG4gIGNvbG9yOiBBWFN0eWxlQ29sb3JUeXBlID0gJ2RlZmF1bHQnO1xuXG4gIEBJbnB1dCgpXG4gIHRleHQ6IHN0cmluZyA9ICcnO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHt9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIHByaXZhdGUgZ2V0IF9faG9zdENsYXNzKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGBheC0ke3RoaXMuY29sb3J9LSR7dGhpcy5sb29rfWA7XG4gIH1cbn1cbiIsIjxuZy1jb250ZW50IHNlbGVjdD1cImF4LXByZWZpeFwiPjwvbmctY29udGVudD5cbjxkaXYgY2xhc3M9XCJheC1jaGlwcy10ZXh0XCIgKm5nSWY9XCJ0ZXh0XCI+e3t0ZXh0IH19PC9kaXY+XG48bmctY29udGVudCBzZWxlY3Q9XCJheC1zdWZmaXhcIj48L25nLWNvbnRlbnQ+Il19

package/esm2022/collapse/src/collapse.component.mjs CHANGED Viewed

@@ -27,12 +27,12 @@ class AXCollapseComponent extends AXBaseComponent {
         this.isCollapsed = !this.isCollapsed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AXCollapseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: AXCollapseComponent, selector: "ax-collapse", inputs: { isCollapsed: "isCollapsed", caption: "caption", icon: "icon" }, outputs: { isCollapsedChange: "isCollapsedChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["collapseHeader"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick()\">\n  <ng-container *ngIf=\"headerTemplate; else collapseHeader\">\n    <div class=\"ax-collapse-custom-header-container\">\n      <ng-container [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-template #collapseHeader>\n    <div class=\"ax-collapse-header-container\">\n      <div class=\"ax-collapse-header-start\">\n        <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n        <span>\n          {{ caption }}\n        </span>\n      </div>\n\n      <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow ax-transition-all\" [ngClass]=\"{ '-ax-rotation-90': isCollapsed, 'ax-rotation-90': !isCollapsed }\"></span>\n    </div>\n  </ng-template>\n</div>\n\n<div class=\"ax-collapse-body\" *ngIf=\"!isCollapsed\">\n  <ng-content></ng-content>\n</div>\n", styles: ["ax-collapse,ax-collapse-group{display:block;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);overflow:hidden;font-size:1rem}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{color:rgba(var(--ax-color-text-default));padding:.75rem}ax-collapse .ax-collapse-header{background-color:rgba(var(--ax-color-on-surface));cursor:pointer;-webkit-user-select:none;user-select:none}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start .ax-collapse-header-icon{font-size:1.25rem;padding-inline-end:.5rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-arrow{font-size:1.5rem}ax-collapse .ax-collapse-body{background-color:rgba(var(--ax-color-surface))}ax-collapse-group ax-collapse{border:0!important;border-radius:0!important}ax-collapse-group ax-collapse:not(ax-collapse-group ax-collapse:last-child){border-bottom:1px solid!important;border-color:rgba(var(--ax-color-border-default))!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: AXCollapseComponent, selector: "ax-collapse", inputs: { isCollapsed: "isCollapsed", caption: "caption", icon: "icon" }, outputs: { isCollapsedChange: "isCollapsedChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["collapseHeader"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick()\">\n  <ng-container *ngIf=\"headerTemplate; else collapseHeader\">\n    <div class=\"ax-collapse-custom-header-container\">\n      <ng-container [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-template #collapseHeader>\n    <div class=\"ax-collapse-header-container\">\n      <div class=\"ax-collapse-header-start\">\n        <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n        <span>\n          {{ caption }}\n        </span>\n      </div>\n\n      <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow ax-transition-all\" [ngClass]=\"{ '-ax-rotation-90': isCollapsed, 'ax-rotation-90': !isCollapsed }\"></span>\n    </div>\n  </ng-template>\n</div>\n\n<div class=\"ax-collapse-body\" *ngIf=\"!isCollapsed\">\n  <ng-content></ng-content>\n</div>\n", styles: ["ax-collapse,ax-collapse-group{display:block;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);overflow:hidden;font-size:1rem}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{color:rgba(var(--ax-color-text-default));padding:.75rem}ax-collapse .ax-collapse-header{background-color:rgba(var(--ax-color-surface));cursor:pointer;-webkit-user-select:none;user-select:none}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start .ax-collapse-header-icon{font-size:1.25rem;padding-inline-end:.5rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-arrow{font-size:1.5rem}ax-collapse .ax-collapse-body{background-color:rgba(var(--ax-color-surface))}ax-collapse-group ax-collapse{border:0!important;border-radius:0!important}ax-collapse-group ax-collapse:not(ax-collapse-group ax-collapse:last-child){border-bottom:1px solid!important;border-color:rgba(var(--ax-color-border-default))!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 export { AXCollapseComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AXCollapseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-collapse', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick()\">\n  <ng-container *ngIf=\"headerTemplate; else collapseHeader\">\n    <div class=\"ax-collapse-custom-header-container\">\n      <ng-container [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-template #collapseHeader>\n    <div class=\"ax-collapse-header-container\">\n      <div class=\"ax-collapse-header-start\">\n        <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n        <span>\n          {{ caption }}\n        </span>\n      </div>\n\n      <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow ax-transition-all\" [ngClass]=\"{ '-ax-rotation-90': isCollapsed, 'ax-rotation-90': !isCollapsed }\"></span>\n    </div>\n  </ng-template>\n</div>\n\n<div class=\"ax-collapse-body\" *ngIf=\"!isCollapsed\">\n  <ng-content></ng-content>\n</div>\n", styles: ["ax-collapse,ax-collapse-group{display:block;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);overflow:hidden;font-size:1rem}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{color:rgba(var(--ax-color-text-default));padding:.75rem}ax-collapse .ax-collapse-header{background-color:rgba(var(--ax-color-on-surface));cursor:pointer;-webkit-user-select:none;user-select:none}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start .ax-collapse-header-icon{font-size:1.25rem;padding-inline-end:.5rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-arrow{font-size:1.5rem}ax-collapse .ax-collapse-body{background-color:rgba(var(--ax-color-surface))}ax-collapse-group ax-collapse{border:0!important;border-radius:0!important}ax-collapse-group ax-collapse:not(ax-collapse-group ax-collapse:last-child){border-bottom:1px solid!important;border-color:rgba(var(--ax-color-border-default))!important}\n"] }]
+            args: [{ selector: 'ax-collapse', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick()\">\n  <ng-container *ngIf=\"headerTemplate; else collapseHeader\">\n    <div class=\"ax-collapse-custom-header-container\">\n      <ng-container [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-template #collapseHeader>\n    <div class=\"ax-collapse-header-container\">\n      <div class=\"ax-collapse-header-start\">\n        <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n        <span>\n          {{ caption }}\n        </span>\n      </div>\n\n      <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow ax-transition-all\" [ngClass]=\"{ '-ax-rotation-90': isCollapsed, 'ax-rotation-90': !isCollapsed }\"></span>\n    </div>\n  </ng-template>\n</div>\n\n<div class=\"ax-collapse-body\" *ngIf=\"!isCollapsed\">\n  <ng-content></ng-content>\n</div>\n", styles: ["ax-collapse,ax-collapse-group{display:block;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);overflow:hidden;font-size:1rem}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{color:rgba(var(--ax-color-text-default));padding:.75rem}ax-collapse .ax-collapse-header{background-color:rgba(var(--ax-color-surface));cursor:pointer;-webkit-user-select:none;user-select:none}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start .ax-collapse-header-icon{font-size:1.25rem;padding-inline-end:.5rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-arrow{font-size:1.5rem}ax-collapse .ax-collapse-body{background-color:rgba(var(--ax-color-surface))}ax-collapse-group ax-collapse{border:0!important;border-radius:0!important}ax-collapse-group ax-collapse:not(ax-collapse-group ax-collapse:last-child){border-bottom:1px solid!important;border-color:rgba(var(--ax-color-border-default))!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { isCollapsedChange: [{
                 type: Output
             }], isCollapsed: [{

package/esm2022/common/src/classes/styles.class.mjs CHANGED Viewed

@@ -1,13 +1,4 @@
-export const AX_STYLE_COLOR_TYPES = ['primary', 'secondary', 'info', 'danger', 'success', 'warning', 'light', 'dark'];
-export const AX_LOCATIONS = [
-    'bottom-start',
-    'bottom-center',
-    'bottom-end',
-    'top-start',
-    'top-center',
-    'top-end',
-    'center-end',
-    'center-start',
-];
+export const AX_STYLE_COLOR_TYPES = ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'default'];
+export const AX_LOCATIONS = ['bottom-start', 'bottom-center', 'bottom-end', 'top-start', 'top-center', 'top-end', 'center-end', 'center-start'];
 export const AX_DIRECTIONS = ['vertical', 'horizontal'];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmNsYXNzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWNvcmV4L2NvbXBvbmVudHMvY29tbW9uL3NyYy9jbGFzc2VzL3N0eWxlcy5jbGFzcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQUMsTUFBTSxvQkFBb0IsR0FBRyxDQUFDLFNBQVMsRUFBRSxXQUFXLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxNQUFNLENBQUMsQ0FBQztBQVN0SCxNQUFNLENBQUMsTUFBTSxZQUFZLEdBQUc7SUFDMUIsY0FBYztJQUNkLGVBQWU7SUFDZixZQUFZO0lBQ1osV0FBVztJQUNYLFlBQVk7SUFDWixTQUFTO0lBQ1QsWUFBWTtJQUNaLGNBQWM7Q0FDZixDQUFDO0FBWUYsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLENBQUMsVUFBVSxFQUFFLFlBQVksQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IEFYX1NUWUxFX0NPTE9SX1RZUEVTID0gWydwcmltYXJ5JywgJ3NlY29uZGFyeScsICdpbmZvJywgJ2RhbmdlcicsICdzdWNjZXNzJywgJ3dhcm5pbmcnLCAnbGlnaHQnLCAnZGFyayddO1xuXG4vKipcbiAqIEEgdG9rZW4gdGhhdCBzcGVjaWZpZXMgdGhlICBjb2xvciBzdHlsZSBvZiBjb21wb25lbnQuXG4gKi9cbmV4cG9ydCB0eXBlIEFYU3R5bGVDb2xvclR5cGUgPSAncHJpbWFyeScgfCAnc2Vjb25kYXJ5JyB8ICdzdWNjZXNzJyB8ICd3YXJuaW5nJyB8ICdkYW5nZXInIHwgJ2luZm8nIHwgJ2dob3N0JztcblxuZXhwb3J0IHR5cGUgQVhTdHlsZUxvb2tUeXBlID0gJ2RlZmF1bHQnIHwgJ2JsYW5rJyB8ICdvdXRsaW5lJztcblxuZXhwb3J0IGNvbnN0IEFYX0xPQ0FUSU9OUyA9IFtcbiAgJ2JvdHRvbS1zdGFydCcsXG4gICdib3R0b20tY2VudGVyJyxcbiAgJ2JvdHRvbS1lbmQnLFxuICAndG9wLXN0YXJ0JyxcbiAgJ3RvcC1jZW50ZXInLFxuICAndG9wLWVuZCcsXG4gICdjZW50ZXItZW5kJyxcbiAgJ2NlbnRlci1zdGFydCcsXG5dO1xuXG5leHBvcnQgdHlwZSBBWExvY2F0aW9uID1cbiAgfCAnYm90dG9tLXN0YXJ0J1xuICB8ICdib3R0b20tY2VudGVyJ1xuICB8ICdib3R0b20tZW5kJ1xuICB8ICd0b3Atc3RhcnQnXG4gIHwgJ3RvcC1jZW50ZXInXG4gIHwgJ3RvcC1lbmQnXG4gIHwgJ2NlbnRlci1lbmQnXG4gIHwgJ2NlbnRlci1zdGFydCc7XG5cbmV4cG9ydCBjb25zdCBBWF9ESVJFQ1RJT05TID0gWyd2ZXJ0aWNhbCcsICdob3Jpem9udGFsJ107XG4vKipcbiAqIEEgdG9rZW4gdGhhdCBzcGVjaWZpZXMgdGhlICBkaXJlY3Rpb24gb2YgY29tcG9uZW50LlxuICovXG5leHBvcnQgdHlwZSBBWERpcmVjdGlvbiA9ICd2ZXJ0aWNhbCcgfCAnaG9yaXpvbnRhbCc7XG5cbi8qKlxuICogQSB0b2tlbiB0aGF0IHNwZWNpZmllcyB0aGUgIHNlbGVjdGlvbiBtb2RlIG9mIGNvbXBvbmVudC5cbiAqL1xuZXhwb3J0IHR5cGUgQVhTZWxlY3Rpb25Nb2RlID0gJ3NpbmdsZScgfCAnbXVsdGlwbGUnO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmNsYXNzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWNvcmV4L2NvbXBvbmVudHMvY29tbW9uL3NyYy9jbGFzc2VzL3N0eWxlcy5jbGFzcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQUMsTUFBTSxvQkFBb0IsR0FBRyxDQUFDLFNBQVMsRUFBRSxXQUFXLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLFNBQVMsQ0FBQyxDQUFDO0FBU2hILE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxDQUFDLGNBQWMsRUFBRSxlQUFlLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxZQUFZLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxjQUFjLENBQUMsQ0FBQztBQUloSixNQUFNLENBQUMsTUFBTSxhQUFhLEdBQUcsQ0FBQyxVQUFVLEVBQUUsWUFBWSxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgQVhfU1RZTEVfQ09MT1JfVFlQRVMgPSBbJ3ByaW1hcnknLCAnc2Vjb25kYXJ5JywgJ3N1Y2Nlc3MnLCAnd2FybmluZycsICdkYW5nZXInLCAnaW5mbycsICdkZWZhdWx0J107XG5cbi8qKlxuICogQSB0b2tlbiB0aGF0IHNwZWNpZmllcyB0aGUgIGNvbG9yIHN0eWxlIG9mIGNvbXBvbmVudC5cbiAqL1xuZXhwb3J0IHR5cGUgQVhTdHlsZUNvbG9yVHlwZSA9ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknIHwgJ3N1Y2Nlc3MnIHwgJ3dhcm5pbmcnIHwgJ2RhbmdlcicgfCAnaW5mbycgfCAnZGVmYXVsdCc7XG5cbmV4cG9ydCB0eXBlIEFYU3R5bGVMb29rVHlwZSA9ICdkZWZhdWx0JyB8ICdibGFuaycgfCAnb3V0bGluZSc7XG5cbmV4cG9ydCBjb25zdCBBWF9MT0NBVElPTlMgPSBbJ2JvdHRvbS1zdGFydCcsICdib3R0b20tY2VudGVyJywgJ2JvdHRvbS1lbmQnLCAndG9wLXN0YXJ0JywgJ3RvcC1jZW50ZXInLCAndG9wLWVuZCcsICdjZW50ZXItZW5kJywgJ2NlbnRlci1zdGFydCddO1xuXG5leHBvcnQgdHlwZSBBWExvY2F0aW9uID0gJ2JvdHRvbS1zdGFydCcgfCAnYm90dG9tLWNlbnRlcicgfCAnYm90dG9tLWVuZCcgfCAndG9wLXN0YXJ0JyB8ICd0b3AtY2VudGVyJyB8ICd0b3AtZW5kJyB8ICdjZW50ZXItZW5kJyB8ICdjZW50ZXItc3RhcnQnO1xuXG5leHBvcnQgY29uc3QgQVhfRElSRUNUSU9OUyA9IFsndmVydGljYWwnLCAnaG9yaXpvbnRhbCddO1xuLyoqXG4gKiBBIHRva2VuIHRoYXQgc3BlY2lmaWVzIHRoZSAgZGlyZWN0aW9uIG9mIGNvbXBvbmVudC5cbiAqL1xuZXhwb3J0IHR5cGUgQVhEaXJlY3Rpb24gPSAndmVydGljYWwnIHwgJ2hvcml6b250YWwnO1xuXG4vKipcbiAqIEEgdG9rZW4gdGhhdCBzcGVjaWZpZXMgdGhlICBzZWxlY3Rpb24gbW9kZSBvZiBjb21wb25lbnQuXG4gKi9cbmV4cG9ydCB0eXBlIEFYU2VsZWN0aW9uTW9kZSA9ICdzaW5nbGUnIHwgJ211bHRpcGxlJztcbiJdfQ==

package/esm2022/common/src/components/color-component.class.mjs CHANGED Viewed

@@ -1,14 +1,14 @@
-import { EventEmitter } from "@angular/core";
-import { BASE_INPUTS, BASE_OUTPUT, MXBaseComponent } from "./base-component.class";
+import { EventEmitter } from '@angular/core';
+import { BASE_INPUTS, BASE_OUTPUT, MXBaseComponent } from './base-component.class';
 export class MXColorComponent extends MXBaseComponent {
     constructor() {
         super();
     }
     colorChange = new EventEmitter();
-    _color = 'primary';
+    _color = 'default';
     /**
-    *  Predefined color schemes
-    */
+     *  Predefined color schemes
+     */
     get color() {
         return this._color;
     }
@@ -18,10 +18,10 @@ export class MXColorComponent extends MXBaseComponent {
             value,
             afterCallback: () => {
                 this.cdr.markForCheck();
-            }
+            },
         });
     }
 }
 export const COLOR_INPUTS = ['color', ...BASE_INPUTS];
 export const COLOR_OUTPUT = ['colorChange', ...BASE_OUTPUT];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItY29tcG9uZW50LmNsYXNzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWNvcmV4L2NvbXBvbmVudHMvY29tbW9uL3NyYy9jb21wb25lbnRzL2NvbG9yLWNvbXBvbmVudC5jbGFzcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTdDLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLGVBQWUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBRW5GLE1BQU0sT0FBTyxnQkFBaUIsU0FBUSxlQUFlO0lBRWpEO1FBQ0ksS0FBSyxFQUFFLENBQUM7SUFDWixDQUFDO0lBRUQsV0FBVyxHQUFtQyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBQ3pELE1BQU0sR0FBcUIsU0FBUyxDQUFDO0lBQzdDOztNQUVFO0lBQ0YsSUFBSSxLQUFLO1FBQ0wsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3ZCLENBQUM7SUFDRCxJQUFJLEtBQUssQ0FBQyxLQUF1QjtRQUM3QixJQUFJLENBQUMsU0FBUyxDQUFDO1lBQ1gsSUFBSSxFQUFFLE9BQU87WUFDYixLQUFLO1lBQ0wsYUFBYSxFQUFFLEdBQUcsRUFBRTtnQkFDaEIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQztZQUM1QixDQUFDO1NBQ0osQ0FBQyxDQUFDO0lBQ1AsQ0FBQztDQUNKO0FBR0QsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLENBQUMsT0FBTyxFQUFFLEdBQUcsV0FBVyxDQUFDLENBQUM7QUFDdEQsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLENBQUMsYUFBYSxFQUFFLEdBQUcsV0FBVyxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBFdmVudEVtaXR0ZXIgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQVhTdHlsZUNvbG9yVHlwZSB9IGZyb20gXCIuLi9jbGFzc2VzL3N0eWxlcy5jbGFzc1wiO1xuaW1wb3J0IHsgQkFTRV9JTlBVVFMsIEJBU0VfT1VUUFVULCBNWEJhc2VDb21wb25lbnQgfSBmcm9tIFwiLi9iYXNlLWNvbXBvbmVudC5jbGFzc1wiO1xuXG5leHBvcnQgY2xhc3MgTVhDb2xvckNvbXBvbmVudCBleHRlbmRzIE1YQmFzZUNvbXBvbmVudCB7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgc3VwZXIoKTtcbiAgICB9XG5cbiAgICBjb2xvckNoYW5nZTogRXZlbnRFbWl0dGVyPEFYU3R5bGVDb2xvclR5cGU+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICAgIHByaXZhdGUgX2NvbG9yOiBBWFN0eWxlQ29sb3JUeXBlID0gJ3ByaW1hcnknO1xuICAgIC8qKlxuICAgICogIFByZWRlZmluZWQgY29sb3Igc2NoZW1lc1xuICAgICovXG4gICAgZ2V0IGNvbG9yKCk6IEFYU3R5bGVDb2xvclR5cGUge1xuICAgICAgICByZXR1cm4gdGhpcy5fY29sb3I7XG4gICAgfVxuICAgIHNldCBjb2xvcih2YWx1ZTogQVhTdHlsZUNvbG9yVHlwZSkge1xuICAgICAgICB0aGlzLnNldE9wdGlvbih7XG4gICAgICAgICAgICBuYW1lOiAnY29sb3InLFxuICAgICAgICAgICAgdmFsdWUsXG4gICAgICAgICAgICBhZnRlckNhbGxiYWNrOiAoKSA9PiB7XG4gICAgICAgICAgICAgICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0pO1xuICAgIH1cbn1cblxuXG5leHBvcnQgY29uc3QgQ09MT1JfSU5QVVRTID0gWydjb2xvcicsIC4uLkJBU0VfSU5QVVRTXTtcbmV4cG9ydCBjb25zdCBDT0xPUl9PVVRQVVQgPSBbJ2NvbG9yQ2hhbmdlJywgLi4uQkFTRV9PVVRQVVRdOyJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItY29tcG9uZW50LmNsYXNzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWNvcmV4L2NvbXBvbmVudHMvY29tbW9uL3NyYy9jb21wb25lbnRzL2NvbG9yLWNvbXBvbmVudC5jbGFzcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTdDLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLGVBQWUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBRW5GLE1BQU0sT0FBTyxnQkFBaUIsU0FBUSxlQUFlO0lBQ25EO1FBQ0UsS0FBSyxFQUFFLENBQUM7SUFDVixDQUFDO0lBRUQsV0FBVyxHQUFtQyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBQ3pELE1BQU0sR0FBcUIsU0FBUyxDQUFDO0lBQzdDOztPQUVHO0lBQ0gsSUFBSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3JCLENBQUM7SUFDRCxJQUFJLEtBQUssQ0FBQyxLQUF1QjtRQUMvQixJQUFJLENBQUMsU0FBUyxDQUFDO1lBQ2IsSUFBSSxFQUFFLE9BQU87WUFDYixLQUFLO1lBQ0wsYUFBYSxFQUFFLEdBQUcsRUFBRTtnQkFDbEIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQztZQUMxQixDQUFDO1NBQ0YsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztDQUNGO0FBRUQsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLENBQUMsT0FBTyxFQUFFLEdBQUcsV0FBVyxDQUFDLENBQUM7QUFDdEQsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLENBQUMsYUFBYSxFQUFFLEdBQUcsV0FBVyxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFYU3R5bGVDb2xvclR5cGUgfSBmcm9tICcuLi9jbGFzc2VzL3N0eWxlcy5jbGFzcyc7XG5pbXBvcnQgeyBCQVNFX0lOUFVUUywgQkFTRV9PVVRQVVQsIE1YQmFzZUNvbXBvbmVudCB9IGZyb20gJy4vYmFzZS1jb21wb25lbnQuY2xhc3MnO1xuXG5leHBvcnQgY2xhc3MgTVhDb2xvckNvbXBvbmVudCBleHRlbmRzIE1YQmFzZUNvbXBvbmVudCB7XG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBjb2xvckNoYW5nZTogRXZlbnRFbWl0dGVyPEFYU3R5bGVDb2xvclR5cGU+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBwcml2YXRlIF9jb2xvcjogQVhTdHlsZUNvbG9yVHlwZSA9ICdkZWZhdWx0JztcbiAgLyoqXG4gICAqICBQcmVkZWZpbmVkIGNvbG9yIHNjaGVtZXNcbiAgICovXG4gIGdldCBjb2xvcigpOiBBWFN0eWxlQ29sb3JUeXBlIHtcbiAgICByZXR1cm4gdGhpcy5fY29sb3I7XG4gIH1cbiAgc2V0IGNvbG9yKHZhbHVlOiBBWFN0eWxlQ29sb3JUeXBlKSB7XG4gICAgdGhpcy5zZXRPcHRpb24oe1xuICAgICAgbmFtZTogJ2NvbG9yJyxcbiAgICAgIHZhbHVlLFxuICAgICAgYWZ0ZXJDYWxsYmFjazogKCkgPT4ge1xuICAgICAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgICAgIH0sXG4gICAgfSk7XG4gIH1cbn1cblxuZXhwb3J0IGNvbnN0IENPTE9SX0lOUFVUUyA9IFsnY29sb3InLCAuLi5CQVNFX0lOUFVUU107XG5leHBvcnQgY29uc3QgQ09MT1JfT1VUUFVUID0gWydjb2xvckNoYW5nZScsIC4uLkJBU0VfT1VUUFVUXTtcbiJdfQ==

package/esm2022/data-pager/src/data-pager-next-buttons.components.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, Inject } from "@angular/core";
-import { AXDataPagerChild, AXPagerComponent } from "./data-pager-base.component";
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Inject } from '@angular/core';
+import { AXDataPagerChild, AXPagerComponent } from './data-pager-base.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@acorex/components/button";
@@ -33,14 +33,14 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AXDataPagerNextButtonsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXPagerComponent }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNextButtonsComponent }], usesInheritance: true, ngImport: i0, template: `
-            <ax-button  [disabled]="disabled" look="blank" color="ghost" class="ax-sm"  title="Go to the next page" (onClick)="_emitOnNextPageClick($event)" >
-                <ax-icon [ngClass]="{'ax-icon-chevron-left': rtl,'ax-icon-chevron-right': !rtl}"></ax-icon>
-                <i ></i>
-            </ax-button>
-            <ax-button  [disabled]="disabled" look="blank" color="ghost" class="ax-sm" title="Go to the last page" (onClick)="_emitOnLastPageClick($event)">
-                <ax-icon [ngClass]="{'ax-icon-first-page': rtl,'ax-icon-last-page': !rtl}"></ax-icon>
-            </ax-button>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    <ax-button [disabled]="disabled" look="blank" class="ax-sm" title="Go to the next page" (onClick)="_emitOnNextPageClick($event)">
+      <ax-icon [ngClass]="{ 'ax-icon-chevron-left': rtl, 'ax-icon-chevron-right': !rtl }"></ax-icon>
+      <i></i>
+    </ax-button>
+    <ax-button [disabled]="disabled" look="blank" class="ax-sm" title="Go to the last page" (onClick)="_emitOnLastPageClick($event)">
+      <ax-icon [ngClass]="{ 'ax-icon-first-page': rtl, 'ax-icon-last-page': !rtl }"></ax-icon>
+    </ax-button>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 export { AXDataPagerNextButtonsComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: AXDataPagerNextButtonsComponent, decorators: [{
@@ -48,20 +48,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
             args: [{
                     selector: 'ax-data-pager-next-buttons',
                     template: `
-            <ax-button  [disabled]="disabled" look="blank" color="ghost" class="ax-sm"  title="Go to the next page" (onClick)="_emitOnNextPageClick($event)" >
-                <ax-icon [ngClass]="{'ax-icon-chevron-left': rtl,'ax-icon-chevron-right': !rtl}"></ax-icon>
-                <i ></i>
-            </ax-button>
-            <ax-button  [disabled]="disabled" look="blank" color="ghost" class="ax-sm" title="Go to the last page" (onClick)="_emitOnLastPageClick($event)">
-                <ax-icon [ngClass]="{'ax-icon-first-page': rtl,'ax-icon-last-page': !rtl}"></ax-icon>
-            </ax-button>
-    `,
+    <ax-button [disabled]="disabled" look="blank" class="ax-sm" title="Go to the next page" (onClick)="_emitOnNextPageClick($event)">
+      <ax-icon [ngClass]="{ 'ax-icon-chevron-left': rtl, 'ax-icon-chevron-right': !rtl }"></ax-icon>
+      <i></i>
+    </ax-button>
+    <ax-button [disabled]="disabled" look="blank" class="ax-sm" title="Go to the last page" (onClick)="_emitOnLastPageClick($event)">
+      <ax-icon [ngClass]="{ 'ax-icon-first-page': rtl, 'ax-icon-last-page': !rtl }"></ax-icon>
+    </ax-button>
+  `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNextButtonsComponent }]
+                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNextButtonsComponent }],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i4.AXPagerComponent, decorators: [{
                     type: Inject,
                     args: [AXPagerComponent]
                 }] }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1wYWdlci1uZXh0LWJ1dHRvbnMuY29tcG9uZW50cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Fjb3JleC9jb21wb25lbnRzL2RhdGEtcGFnZXIvc3JjL2RhdGEtcGFnZXItbmV4dC1idXR0b25zLmNvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSx1QkFBdUIsRUFBRSxpQkFBaUIsRUFBaUMsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTdILE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDOzs7Ozs7QUFFakYsTUFlYSwrQkFBZ0MsU0FBUSxnQkFBZ0I7SUFHckQ7SUFDQTtJQUVBO0lBSlosWUFDWSxVQUFzQixFQUN0QixHQUFzQixFQUV0QixPQUF5QjtRQUVqQyxLQUFLLENBQUMsVUFBVSxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBTGYsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUN0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUV0QixZQUFPLEdBQVAsT0FBTyxDQUFrQjtJQUdyQyxDQUFDO0lBRUQsVUFBVTtRQUNOLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN0QixFQUFFO1FBQ0YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxjQUFjLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFO1lBQ3RDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUMxQixDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFTyxjQUFjO1FBQ2xCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQztJQUM3RSxDQUFDO0lBRUQsb0JBQW9CLENBQUMsQ0FBZTtRQUNoQyxJQUFJLENBQUMsT0FBTyxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQzlCLENBQUM7SUFFRCxvQkFBb0IsQ0FBQyxDQUFlO1FBQ2hDLElBQUksQ0FBQyxPQUFPLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDOUIsQ0FBQzt1R0E3QlEsK0JBQStCLDZFQUs1QixnQkFBZ0I7MkZBTG5CLCtCQUErQixxREFGN0IsQ0FBQyxFQUFFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxXQUFXLEVBQUUsK0JBQStCLEVBQUUsQ0FBQyxpREFYOUU7Ozs7Ozs7O0tBUVQ7O1NBS1EsK0JBQStCOzJGQUEvQiwrQkFBK0I7a0JBZjNDLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLDRCQUE0QjtvQkFDdEMsUUFBUSxFQUFFOzs7Ozs7OztLQVFUO29CQUNELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO29CQUMvQyxhQUFhLEVBQUUsaUJBQWlCLENBQUMsSUFBSTtvQkFDckMsU0FBUyxFQUFFLENBQUMsRUFBRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsV0FBVyxpQ0FBaUMsRUFBRSxDQUFDO2lCQUMzRjs7MEJBTVEsTUFBTTsyQkFBQyxnQkFBZ0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBWaWV3RW5jYXBzdWxhdGlvbiwgRWxlbWVudFJlZiwgQ2hhbmdlRGV0ZWN0b3JSZWYsIEluamVjdCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBBWENsaWNrRXZlbnQgfSBmcm9tIFwiQGFjb3JleC9jb21wb25lbnRzL2NvbW1vblwiO1xuaW1wb3J0IHsgQVhEYXRhUGFnZXJDaGlsZCwgQVhQYWdlckNvbXBvbmVudCB9IGZyb20gXCIuL2RhdGEtcGFnZXItYmFzZS5jb21wb25lbnRcIjtcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdheC1kYXRhLXBhZ2VyLW5leHQtYnV0dG9ucycsXG4gICAgdGVtcGxhdGU6IGBcbiAgICAgICAgICAgIDxheC1idXR0b24gIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiIGxvb2s9XCJibGFua1wiIGNvbG9yPVwiZ2hvc3RcIiBjbGFzcz1cImF4LXNtXCIgIHRpdGxlPVwiR28gdG8gdGhlIG5leHQgcGFnZVwiIChvbkNsaWNrKT1cIl9lbWl0T25OZXh0UGFnZUNsaWNrKCRldmVudClcIiA+XG4gICAgICAgICAgICAgICAgPGF4LWljb24gW25nQ2xhc3NdPVwieydheC1pY29uLWNoZXZyb24tbGVmdCc6IHJ0bCwnYXgtaWNvbi1jaGV2cm9uLXJpZ2h0JzogIXJ0bH1cIj48L2F4LWljb24+ICBcbiAgICAgICAgICAgICAgICA8aSA+PC9pPiAgICAgICAgICAgICAgXG4gICAgICAgICAgICA8L2F4LWJ1dHRvbj5cbiAgICAgICAgICAgIDxheC1idXR0b24gIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiIGxvb2s9XCJibGFua1wiIGNvbG9yPVwiZ2hvc3RcIiBjbGFzcz1cImF4LXNtXCIgdGl0bGU9XCJHbyB0byB0aGUgbGFzdCBwYWdlXCIgKG9uQ2xpY2spPVwiX2VtaXRPbkxhc3RQYWdlQ2xpY2soJGV2ZW50KVwiPlxuICAgICAgICAgICAgICAgIDxheC1pY29uIFtuZ0NsYXNzXT1cInsnYXgtaWNvbi1maXJzdC1wYWdlJzogcnRsLCdheC1pY29uLWxhc3QtcGFnZSc6ICFydGx9XCI+PC9heC1pY29uPlxuICAgICAgICAgICAgPC9heC1idXR0b24+XG4gICAgYCxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIHByb3ZpZGVyczogW3sgcHJvdmlkZTogQVhEYXRhUGFnZXJDaGlsZCwgdXNlRXhpc3Rpbmc6IEFYRGF0YVBhZ2VyTmV4dEJ1dHRvbnNDb21wb25lbnQgfV1cbn0pXG5leHBvcnQgY2xhc3MgQVhEYXRhUGFnZXJOZXh0QnV0dG9uc0NvbXBvbmVudCBleHRlbmRzIEFYRGF0YVBhZ2VyQ2hpbGQge1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICAgICAgcHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmLFxuICAgICAgICBASW5qZWN0KEFYUGFnZXJDb21wb25lbnQpXG4gICAgICAgIHByaXZhdGUgX3BhcmVudDogQVhQYWdlckNvbXBvbmVudCxcbiAgICApIHtcbiAgICAgICAgc3VwZXIoZWxlbWVudFJlZiwgY2RyKTtcbiAgICB9XG5cbiAgICBvblZpZXdJbml0KCkge1xuICAgICAgICB0aGlzLl9jaGVja0Rpc2FibGVkKCk7XG4gICAgICAgIC8vXG4gICAgICAgIHRoaXMuX3BhcmVudC5vblN0YXRlQ2hhbmdlZC5zdWJzY3JpYmUoYyA9PiB7XG4gICAgICAgICAgICB0aGlzLl9jaGVja0Rpc2FibGVkKCk7XG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIHByaXZhdGUgX2NoZWNrRGlzYWJsZWQoKSB7XG4gICAgICAgIHRoaXMuZGlzYWJsZWQgPSB0aGlzLl9wYXJlbnQuc3RhdGUucGFnZSA9PSB0aGlzLl9wYXJlbnQuc3RhdGUudG90YWxQYWdlcztcbiAgICB9XG5cbiAgICBfZW1pdE9uTGFzdFBhZ2VDbGljayhlOiBBWENsaWNrRXZlbnQpIHtcbiAgICAgICAgdGhpcy5fcGFyZW50LmdvTGFzdFBhZ2UoKTtcbiAgICB9XG5cbiAgICBfZW1pdE9uTmV4dFBhZ2VDbGljayhlOiBBWENsaWNrRXZlbnQpIHtcbiAgICAgICAgdGhpcy5fcGFyZW50LmdvTmV4dFBhZ2UoKTtcbiAgICB9XG59Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1wYWdlci1uZXh0LWJ1dHRvbnMuY29tcG9uZW50cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Fjb3JleC9jb21wb25lbnRzL2RhdGEtcGFnZXIvc3JjL2RhdGEtcGFnZXItbmV4dC1idXR0b25zLmNvbXBvbmVudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSx1QkFBdUIsRUFBRSxpQkFBaUIsRUFBaUMsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTdILE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDOzs7Ozs7QUFFakYsTUFlYSwrQkFBZ0MsU0FBUSxnQkFBZ0I7SUFFekQ7SUFDQTtJQUVBO0lBSlYsWUFDVSxVQUFzQixFQUN0QixHQUFzQixFQUV0QixPQUF5QjtRQUVqQyxLQUFLLENBQUMsVUFBVSxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBTGYsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUN0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUV0QixZQUFPLEdBQVAsT0FBTyxDQUFrQjtJQUduQyxDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN0QixFQUFFO1FBQ0YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxjQUFjLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFO1lBQ3hDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN4QixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFTyxjQUFjO1FBQ3BCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQztJQUMzRSxDQUFDO0lBRUQsb0JBQW9CLENBQUMsQ0FBZTtRQUNsQyxJQUFJLENBQUMsT0FBTyxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFRCxvQkFBb0IsQ0FBQyxDQUFlO1FBQ2xDLElBQUksQ0FBQyxPQUFPLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDNUIsQ0FBQzt1R0E1QlUsK0JBQStCLDZFQUloQyxnQkFBZ0I7MkZBSmYsK0JBQStCLHFEQUYvQixDQUFDLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFdBQVcsRUFBRSwrQkFBK0IsRUFBRSxDQUFDLGlEQVg5RTs7Ozs7Ozs7R0FRVDs7U0FLVSwrQkFBK0I7MkZBQS9CLCtCQUErQjtrQkFmM0MsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsNEJBQTRCO29CQUN0QyxRQUFRLEVBQUU7Ozs7Ozs7O0dBUVQ7b0JBQ0QsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07b0JBQy9DLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO29CQUNyQyxTQUFTLEVBQUUsQ0FBQyxFQUFFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxXQUFXLGlDQUFpQyxFQUFFLENBQUM7aUJBQ3pGOzswQkFLSSxNQUFNOzJCQUFDLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIFZpZXdFbmNhcHN1bGF0aW9uLCBFbGVtZW50UmVmLCBDaGFuZ2VEZXRlY3RvclJlZiwgSW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBWENsaWNrRXZlbnQgfSBmcm9tICdAYWNvcmV4L2NvbXBvbmVudHMvY29tbW9uJztcbmltcG9ydCB7IEFYRGF0YVBhZ2VyQ2hpbGQsIEFYUGFnZXJDb21wb25lbnQgfSBmcm9tICcuL2RhdGEtcGFnZXItYmFzZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdheC1kYXRhLXBhZ2VyLW5leHQtYnV0dG9ucycsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGF4LWJ1dHRvbiBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIiBsb29rPVwiYmxhbmtcIiBjbGFzcz1cImF4LXNtXCIgdGl0bGU9XCJHbyB0byB0aGUgbmV4dCBwYWdlXCIgKG9uQ2xpY2spPVwiX2VtaXRPbk5leHRQYWdlQ2xpY2soJGV2ZW50KVwiPlxuICAgICAgPGF4LWljb24gW25nQ2xhc3NdPVwieyAnYXgtaWNvbi1jaGV2cm9uLWxlZnQnOiBydGwsICdheC1pY29uLWNoZXZyb24tcmlnaHQnOiAhcnRsIH1cIj48L2F4LWljb24+XG4gICAgICA8aT48L2k+XG4gICAgPC9heC1idXR0b24+XG4gICAgPGF4LWJ1dHRvbiBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIiBsb29rPVwiYmxhbmtcIiBjbGFzcz1cImF4LXNtXCIgdGl0bGU9XCJHbyB0byB0aGUgbGFzdCBwYWdlXCIgKG9uQ2xpY2spPVwiX2VtaXRPbkxhc3RQYWdlQ2xpY2soJGV2ZW50KVwiPlxuICAgICAgPGF4LWljb24gW25nQ2xhc3NdPVwieyAnYXgtaWNvbi1maXJzdC1wYWdlJzogcnRsLCAnYXgtaWNvbi1sYXN0LXBhZ2UnOiAhcnRsIH1cIj48L2F4LWljb24+XG4gICAgPC9heC1idXR0b24+XG4gIGAsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBwcm92aWRlcnM6IFt7IHByb3ZpZGU6IEFYRGF0YVBhZ2VyQ2hpbGQsIHVzZUV4aXN0aW5nOiBBWERhdGFQYWdlck5leHRCdXR0b25zQ29tcG9uZW50IH1dLFxufSlcbmV4cG9ydCBjbGFzcyBBWERhdGFQYWdlck5leHRCdXR0b25zQ29tcG9uZW50IGV4dGVuZHMgQVhEYXRhUGFnZXJDaGlsZCB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgQEluamVjdChBWFBhZ2VyQ29tcG9uZW50KVxuICAgIHByaXZhdGUgX3BhcmVudDogQVhQYWdlckNvbXBvbmVudFxuICApIHtcbiAgICBzdXBlcihlbGVtZW50UmVmLCBjZHIpO1xuICB9XG5cbiAgb25WaWV3SW5pdCgpIHtcbiAgICB0aGlzLl9jaGVja0Rpc2FibGVkKCk7XG4gICAgLy9cbiAgICB0aGlzLl9wYXJlbnQub25TdGF0ZUNoYW5nZWQuc3Vic2NyaWJlKGMgPT4ge1xuICAgICAgdGhpcy5fY2hlY2tEaXNhYmxlZCgpO1xuICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSBfY2hlY2tEaXNhYmxlZCgpIHtcbiAgICB0aGlzLmRpc2FibGVkID0gdGhpcy5fcGFyZW50LnN0YXRlLnBhZ2UgPT0gdGhpcy5fcGFyZW50LnN0YXRlLnRvdGFsUGFnZXM7XG4gIH1cblxuICBfZW1pdE9uTGFzdFBhZ2VDbGljayhlOiBBWENsaWNrRXZlbnQpIHtcbiAgICB0aGlzLl9wYXJlbnQuZ29MYXN0UGFnZSgpO1xuICB9XG5cbiAgX2VtaXRPbk5leHRQYWdlQ2xpY2soZTogQVhDbGlja0V2ZW50KSB7XG4gICAgdGhpcy5fcGFyZW50LmdvTmV4dFBhZ2UoKTtcbiAgfVxufVxuIl19