@acorex/components 7.12.7 → 7.17.0

package/esm2022/data-table/lib/data-table.component.mjs

@@ -192,10 +192,10 @@ export class AXDataTableComponent extends MXBaseComponent {
     _handleOnScroll(e) {
         this.updateHScroll();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", dataSource: "dataSource", focusedRow: "focusedRow", selectedRows: "selectedRows", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", focusedRowChange: "focusedRowChange", selectedRowsChange: "selectedRowsChange", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "footerContainer", first: true, predicate: ["footerContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\">\n</ng-content>\n<!------------------- Header contents ------------------->\n<div class=\"ax-header-content\" *ngIf=\"showHeader\">\n  <div class=\"ax-header-columns ax-header-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col style=\"width: 10px;\">\n      </colgroup>\n      <thead>\n        <tr>\n          <!------------------- start fixed column ------------------->\n          <th *ngFor=\"let c of startFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\" class=\"ax-column-fixed\">\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{c.caption }}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <!------------------- not fixed column ------------------->\n          <th [attr.colspan]=\"notFixedColumnCount()\">\n\n          </th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <colgroup>\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col style=\"width: auto;\">\n      </colgroup>\n      <thead>\n        <tr>\n          <th *ngFor=\"let c of startFixedColumn()\">\n          </th>\n          <th *ngFor=\"let c of notFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\">\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{c.caption}}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <th></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n</div>\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns ax-body-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col>\n      </colgroup>\n      <tbody>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll($event)\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n          <colgroup>\n            <!------------------- start fixed column ------------------->\n            <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n            <!------------------- not fixed column ------------------->\n            <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n            <col>\n          </colgroup>\n          <tbody>\n            <ng-container\n              *cdkVirtualFor=\"let item of listDataSource;  let i = index; trackBy: trackByIdx;let rIndex=index;\">\n              <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n                <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                </ng-container>\n              </ng-template>\n              <ng-template #rowTpl>\n                <tr [class.ax-state-focused]=\"focusedRow && item===focusedRow\" [attr.data-index]=\"rIndex\"\n                  [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event,item)\">\n                  <!------------------- start fixed column ------------------->\n                  <ng-container *ngFor=\"let c of startFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                      <div class=\"ax-content\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\" [attr.data-fixed]=\"c.fixed\"\n                        class=\"ax-column-fixed\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container>\n                  <!------------------- Not fixed column ------------------->\n                  <ng-container *ngFor=\"let c of notFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                      <div class=\"ax-content\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container>\n                  <td></td>\n                </tr>\n              </ng-template>\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n  <div class=\"ax-table-info\">\n    <div>\n      Showing {{startRowIndex}} of {{totalRows}} items\n    </div>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n      <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n    </ax-button>\n  </div>\n  <ng-content select=\"ax-footer\">\n  </ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n    </ng-container>\n  </ng-container>\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <ax-skeleton [animated]=\"true\"></ax-skeleton>\n  </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n<ng-template #emptyTpl>\n  <tr>\n    <td [attr.colspan]=\"columns.length\">\n      <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n      </ng-template>\n      <ng-template #defaultEmptyTemplate>\n        <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\n      </ng-template>\n    </td>\n  </tr>\n</ng-template>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-neutral),var(--tw-bg-opacity))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 50%)!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 70%)!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 50%)!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 70%)!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 50%)!important}ax-data-table{height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-neutral),var(--tw-bg-opacity)) 30%,white)}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(odd) td{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(odd) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 30%,white)}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 30%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-text-opacity)),black 30%)}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 50%,white)}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 50%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-text-opacity)),black 30%)}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 70%,white);--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}ax-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.5rem 1rem}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content{justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content{position:relative}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-color-ghost-fore),var(--tw-text-opacity))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-icon{font-size:1.125rem;line-height:1.75rem}ax-data-table .ax-body-content .ax-body-columns table td>.ax-content{display:flex;width:100%;justify-content:flex-start}ax-data-table .ax-body-content .ax-body-columns table td>.ax-content>span{display:inline-block}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"], dependencies: [{ 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: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: i3.AXResultComponent, selector: "ax-result", inputs: ["type", "caption", "description"] }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", dataSource: "dataSource", focusedRow: "focusedRow", selectedRows: "selectedRows", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", focusedRowChange: "focusedRowChange", selectedRowsChange: "selectedRowsChange", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "footerContainer", first: true, predicate: ["footerContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\">\n</ng-content>\n<!------------------- Header contents ------------------->\n<div class=\"ax-header-content\" *ngIf=\"showHeader\">\n  <div class=\"ax-header-columns ax-header-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col style=\"width: 10px;\">\n      </colgroup>\n      <thead>\n        <tr>\n          <!------------------- start fixed column ------------------->\n          <th *ngFor=\"let c of startFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\" class=\"ax-column-fixed\">\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{c.caption }}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <!------------------- not fixed column ------------------->\n          <th [attr.colspan]=\"notFixedColumnCount()\">\n\n          </th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <colgroup>\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col style=\"width: auto;\">\n      </colgroup>\n      <thead>\n        <tr>\n          <th *ngFor=\"let c of startFixedColumn()\">\n          </th>\n          <th *ngFor=\"let c of notFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\">\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{c.caption}}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <th></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n</div>\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns ax-body-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col>\n      </colgroup>\n      <tbody>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll($event)\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n          <colgroup>\n            <!------------------- start fixed column ------------------->\n            <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n            <!------------------- not fixed column ------------------->\n            <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n            <col>\n          </colgroup>\n          <tbody>\n            <ng-container\n              *cdkVirtualFor=\"let item of listDataSource;  let i = index; trackBy: trackByIdx;let rIndex=index;\">\n              <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n                <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                </ng-container>\n              </ng-template>\n              <ng-template #rowTpl>\n                <tr [class.ax-state-focused]=\"focusedRow && item===focusedRow\" [attr.data-index]=\"rIndex\"\n                  [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event,item)\">\n                  <!------------------- start fixed column ------------------->\n                  <ng-container *ngFor=\"let c of startFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                      <div class=\"ax-content\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\" [attr.data-fixed]=\"c.fixed\"\n                        class=\"ax-column-fixed\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container>\n                  <!------------------- Not fixed column ------------------->\n                  <ng-container *ngFor=\"let c of notFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                      <div class=\"ax-content\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container>\n                  <td></td>\n                </tr>\n              </ng-template>\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n  <div class=\"ax-table-info\">\n    <div>\n      Showing {{startRowIndex}} of {{totalRows}} items\n    </div>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n      <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n    </ax-button>\n  </div>\n  <ng-content select=\"ax-footer\">\n  </ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n    </ng-container>\n  </ng-container>\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <ax-skeleton [animated]=\"true\"></ax-skeleton>\n  </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n<ng-template #emptyTpl>\n  <tr>\n    <td [attr.colspan]=\"columns.length\">\n      <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n      </ng-template>\n      <ng-template #defaultEmptyTemplate>\n        <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\n      </ng-template>\n    </td>\n  </tr>\n</ng-template>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-neutral),var(--tw-bg-opacity))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 50%)!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 70%)!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 50%)!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 70%)!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 50%)!important}ax-data-table{height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-neutral),var(--tw-bg-opacity)) 30%,white)}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(odd) td{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(odd) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 30%,white)}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 30%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-text-opacity)),black 30%)}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 50%,white)}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 50%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-text-opacity)),black 30%)}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 70%,white);--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}ax-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.5rem 1rem}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content{justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content{position:relative}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-color-ghost-fore),var(--tw-text-opacity))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-icon{font-size:1.125rem;line-height:1.75rem}ax-data-table .ax-body-content .ax-body-columns table td>.ax-content{display:flex;width:100%;justify-content:flex-start}ax-data-table .ax-body-content .ax-body-columns table td>.ax-content>span{display:inline-block}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"], dependencies: [{ 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: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: i3.AXResultComponent, selector: "ax-result", inputs: ["type", "caption", "description"] }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDataTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-data-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], template: "<ng-content select=\"ax-header\">\n</ng-content>\n<!------------------- Header contents ------------------->\n<div class=\"ax-header-content\" *ngIf=\"showHeader\">\n  <div class=\"ax-header-columns ax-header-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col style=\"width: 10px;\">\n      </colgroup>\n      <thead>\n        <tr>\n          <!------------------- start fixed column ------------------->\n          <th *ngFor=\"let c of startFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\" class=\"ax-column-fixed\">\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{c.caption }}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <!------------------- not fixed column ------------------->\n          <th [attr.colspan]=\"notFixedColumnCount()\">\n\n          </th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <colgroup>\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col style=\"width: auto;\">\n      </colgroup>\n      <thead>\n        <tr>\n          <th *ngFor=\"let c of startFixedColumn()\">\n          </th>\n          <th *ngFor=\"let c of notFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\">\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{c.caption}}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <th></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n</div>\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns ax-body-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col>\n      </colgroup>\n      <tbody>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll($event)\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n          <colgroup>\n            <!------------------- start fixed column ------------------->\n            <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n            <!------------------- not fixed column ------------------->\n            <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n            <col>\n          </colgroup>\n          <tbody>\n            <ng-container\n              *cdkVirtualFor=\"let item of listDataSource;  let i = index; trackBy: trackByIdx;let rIndex=index;\">\n              <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n                <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                </ng-container>\n              </ng-template>\n              <ng-template #rowTpl>\n                <tr [class.ax-state-focused]=\"focusedRow && item===focusedRow\" [attr.data-index]=\"rIndex\"\n                  [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event,item)\">\n                  <!------------------- start fixed column ------------------->\n                  <ng-container *ngFor=\"let c of startFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                      <div class=\"ax-content\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\" [attr.data-fixed]=\"c.fixed\"\n                        class=\"ax-column-fixed\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container>\n                  <!------------------- Not fixed column ------------------->\n                  <ng-container *ngFor=\"let c of notFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                      <div class=\"ax-content\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container>\n                  <td></td>\n                </tr>\n              </ng-template>\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n  <div class=\"ax-table-info\">\n    <div>\n      Showing {{startRowIndex}} of {{totalRows}} items\n    </div>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n      <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n    </ax-button>\n  </div>\n  <ng-content select=\"ax-footer\">\n  </ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n    </ng-container>\n  </ng-container>\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <ax-skeleton [animated]=\"true\"></ax-skeleton>\n  </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n<ng-template #emptyTpl>\n  <tr>\n    <td [attr.colspan]=\"columns.length\">\n      <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n      </ng-template>\n      <ng-template #defaultEmptyTemplate>\n        <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\n      </ng-template>\n    </td>\n  </tr>\n</ng-template>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-neutral),var(--tw-bg-opacity))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 50%)!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 70%)!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 50%)!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 70%)!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)),black 50%)!important}ax-data-table{height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-neutral),var(--tw-bg-opacity)) 30%,white)}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(odd) td{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(odd) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 30%,white)}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 30%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-text-opacity)),black 30%)}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 50%,white)}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 50%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-text-opacity)),black 30%)}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-primary),var(--tw-bg-opacity)) 70%,white);--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}ax-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.5rem 1rem}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content{justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content{position:relative}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-color-ghost-fore),var(--tw-text-opacity))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-icon{font-size:1.125rem;line-height:1.75rem}ax-data-table .ax-body-content .ax-body-columns table td>.ax-content{display:flex;width:100%;justify-content:flex-start}ax-data-table .ax-body-content .ax-body-columns table td>.ax-content>span{display:inline-block}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"] }]
         }], propDecorators: { columns: [{

package/esm2022/data-table/lib/data-table.module.mjs

@@ -39,8 +39,8 @@ const MODULES = [
     AXRippleDirective,
 ];
 export class AXDataTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, declarations: [AXDataTableComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: AXDataTableModule, declarations: [AXDataTableComponent,
             AXDataTableTextColumnComponent,
             AXRowIndexColumnComponent,
             AXRowSelectColumnComponent,
@@ -62,7 +62,7 @@ export class AXDataTableModule {
             AXRowSelectColumnComponent,
             AXRowCommandColumnComponent,
             AXRowDropdownCommandColumnComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDataTableModule, imports: [CommonModule,
             AXCommonModule,
             ScrollingModule,
             AXTranslationModule,
@@ -74,7 +74,7 @@ export class AXDataTableModule {
             AXDropdownModule,
             AXFormatModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDataTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDataTableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

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

@@ -53,8 +53,8 @@ export class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent),
     _handleInputOnClick() {
         this.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDateTimeBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", minValue: "minValue", maxValue: "maxValue", value: "value", state: "state", name: "name", id: "id", type: "type", look: "look", format: "format" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", formatChange: "formatChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDateTimeBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", minValue: "minValue", maxValue: "maxValue", value: "value", state: "state", name: "name", id: "id", type: "type", look: "look", format: "format" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", formatChange: "formatChange" }, providers: [
             { provide: AXComponent, useExisting: AXDateTimeBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXDateTimeBoxComponent },
             { provide: AXValuableComponent, useExisting: AXDateTimeBoxComponent },
@@ -66,7 +66,7 @@ export class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent),
             },
         ], viewQueries: [{ propertyName: "input", first: true, predicate: AXDateTimeInputComponent, descendants: true }, { propertyName: "picker", first: true, predicate: AXDateTimePickerComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent()\" (onClosed)=\"_handleOnClosedEvent()\"\n  [look]=\"look\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <ax-datetime-input id=\"{{ id }}-input\" [ngModel]=\"value\" (ngModelChange)=\"_handleInputModelChange($event)\"\n      [placeholder]=\"placeholder\" [format]=\"format\" [disabled]=\"disabled\" [readonly]=\"readonly\" [type]=\"type\"\n      (onFocus)=\"emitOnFocusEvent($event.nativeEvent)\" (onBlur)=\"emitOnBlurEvent($event.nativeEvent)\"\n      (onClick)=\"_handleInputOnClick()\"></ax-datetime-input>\n    <ng-content select=\"ax-clear-button\"></ng-content>\n    <button type=\"button\" class=\"ax-general-button ax-button-icon\" [tabIndex]=\"-1\" [disabled]=\"disabled\"\n      (click)=\"toggle()\">\n      <span class=\"ax-icon ax-icon-calendar\"></span>\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-datetime-picker id=\"{{ id }}-picker\" #picker [ngModel]=\"value\"\n      (ngModelChange)=\"_handlePickerModelChange($event)\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n      [minValue]=\"minValue\" [maxValue]=\"maxValue\" [format]=\"format\" [disabledDates]=\"disabledDates\"\n      [holidayDates]=\"holidayDates\" [depth]=\"depth\" [type]=\"type\"\n      (onNavigate)=\"_handleCalendarOnNavigate($event)\"></ax-datetime-picker>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.AXDateTimeInputComponent, selector: "ax-datetime-input", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "type", "minValue", "maxValue", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onClick", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "component", type: i3.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: i4.AXDateTimePickerComponent, selector: "ax-datetime-picker", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "currentTimeButton", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onClick", "readonlyChange", "disabledChange", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "formatChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDateTimeBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDateTimeBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-datetime-box', inputs: [
                         'disabled',

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

@@ -17,16 +17,16 @@ const MODULES = [
     AXDateTimePickerModule,
 ];
 export class AXDateTimeBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDateTimeBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: AXDateTimeBoxModule, declarations: [AXDateTimeBoxComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDateTimeBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: AXDateTimeBoxModule, declarations: [AXDateTimeBoxComponent], imports: [CommonModule,
             FormsModule,
             AXDateTimeInputModule,
             AXDropdownModule,
             AXCalendarModule,
             AXDateTimePickerModule], exports: [AXDateTimeBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDateTimeBoxModule, imports: [MODULES] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDateTimeBoxModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDateTimeBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDateTimeBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/esm2022/datetime-input/lib/datetime-input.component.mjs

@@ -466,8 +466,8 @@ export class AXDateTimeInputComponent extends MXInputBaseValueComponent {
     _detectValueChanges() {
         this.commitValue(this._editingDateObj.date, true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDateTimeInputComponent, selector: "ax-datetime-input", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", type: "type", minValue: "minValue", maxValue: "maxValue", format: "format" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", readonlyChange: "readonlyChange", disabledChange: "disabledChange", formatChange: "formatChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)", "keyup": "_handleKeyUpEvent($event)" }, classAttribute: "ax-editor-input" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXDateTimeInputComponent, selector: "ax-datetime-input", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", type: "type", minValue: "minValue", maxValue: "maxValue", format: "format" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", readonlyChange: "readonlyChange", disabledChange: "disabledChange", formatChange: "formatChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)", "keyup": "_handleKeyUpEvent($event)" }, classAttribute: "ax-editor-input" }, providers: [
             { provide: AXComponent, useExisting: AXDateTimeInputComponent },
             { provide: AXFocusableComponent, useExisting: AXDateTimeInputComponent },
             { provide: AXValuableComponent, useExisting: AXDateTimeInputComponent },
@@ -479,7 +479,7 @@ export class AXDateTimeInputComponent extends MXInputBaseValueComponent {
             },
         ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "input2", first: true, predicate: ["input2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input #input id=\"input\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" class=\"ax-input\"\n    type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"true\" [ngModel]=\"_editingText\"\n    (mouseup)=\"_handleOnInputClickEvent($event)\" (blur)=\"_handleBlurEvent($event)\" (focus)=\"_handleFocusEvent($event)\">\n<ng-content select=\"ax-validation-rule\">\n</ng-content>", dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDateTimeInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDateTimeInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-datetime-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'], host: { class: 'ax-editor-input' }, outputs: [
                         'valueChange',

package/esm2022/datetime-input/lib/datetime-input.module.mjs

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

package/esm2022/datetime-picker/lib/datetime-picker.component.mjs

@@ -181,8 +181,8 @@ export class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent,
         this._editingDateObj = this._calendarService.now(this.type);
         this.commitValue(this.editingDateObj.date, true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDateTimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDateTimePickerComponent, selector: "ax-datetime-picker", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation", currentTimeButton: "currentTimeButton", format: "format" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", readonlyChange: "readonlyChange", disabledChange: "disabledChange", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", formatChange: "formatChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDateTimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXDateTimePickerComponent, selector: "ax-datetime-picker", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation", currentTimeButton: "currentTimeButton", format: "format" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", readonlyChange: "readonlyChange", disabledChange: "disabledChange", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", formatChange: "formatChange" }, providers: [
             { provide: AXComponent, useExisting: AXDateTimePickerComponent },
             { provide: AXFocusableComponent, useExisting: AXDateTimePickerComponent },
             { provide: AXValuableComponent, useExisting: AXDateTimePickerComponent },
@@ -193,7 +193,7 @@ export class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent,
             },
         ], viewQueries: [{ propertyName: "picker", first: true, predicate: AXPickerComponent, descendants: true }, { propertyName: "tabs", first: true, predicate: AXTabsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-header\" *ngIf=\"_hasDatePart && _hasTimePart\">\n  <ax-tabs [look]=\"'default'\" [fitParent]=\"true\" [location]=\"'top'\" (onActiveTabChanged)=\"_handleViewChanged($event)\">\n    <ax-tab-item text=\"Date\" [key]=\"'date'\" [disabled]=\"disabled\"></ax-tab-item>\n    <ax-tab-item text=\"Time\" [key]=\"'time'\" [disabled]=\"disabled\"></ax-tab-item>\n  </ax-tabs>\n</div>\n<div class=\"ax-content\">\n  <div class=\"ax-calendar-part\" *ngIf=\"_activePart === 'date'\">\n    <ax-calendar #calendar id=\"calendar\" [disabled]=\"disabled\" [readonly]=\"readonly\" [ngModel]=\"editingDateObj.date\"\n      [minValue]=\"minValue\" [maxValue]=\"maxValue\" [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\"\n      [depth]=\"depth\" (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n      (onValueChanged)=\"_handleCalendarOnValueChanged($event)\" [type]=\"type\">\n    </ax-calendar>\n  </div>\n  <div class=\"ax-picker-part\" *ngIf=\"_activePart === 'time'\">\n    <div class=\"ax-header\">\n      {{ editingDateObj | axDate: format : type }}\n    </div>\n    <ax-picker>\n      <ax-picker-column title=\"Hour\" [items]=\"hours\" [ngModel]=\"editingDateObj.hour\"\n        (onValueChanged)=\"_handlePickerOnValueChanged($event, 'hour')\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n        *ngIf=\"_parts.hour.enabled\"></ax-picker-column>\n      <ax-picker-column title=\"Minute\" [items]=\"minutes\" [ngModel]=\"editingDateObj.minute\"\n        (onValueChanged)=\"_handlePickerOnValueChanged($event, 'minute')\" [step]=\"3\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" *ngIf=\"_parts.minute.enabled\"></ax-picker-column>\n      <ax-picker-column title=\"Second\" [items]=\"minutes\" [ngModel]=\"editingDateObj.second\"\n        (onValueChanged)=\"_handlePickerOnValueChanged($event, 'second')\" [step]=\"3\" [disabled]=\"disabled\"\n        [readonly]=\"readonly\" *ngIf=\"_parts.second.enabled\"></ax-picker-column>\n    </ax-picker>\n  </div>\n</div>\n<div class=\"ax-footer\" *ngIf=\"!disabled && !readonly && (currentTimeButton || _hasTimePart)\">\n  <div>\n    <ax-button [text]=\"_activePart === 'date' ? 'Today' : 'Now'\" class=\"ax-sm\" (onClick)=\"_handleNowClick($event)\"\n      *ngIf=\"currentTimeButton\"></ax-button>\n  </div>\n  <div>\n    <ax-button color=\"primary\" text=\"Set\" *ngIf=\"_hasTimePart\" class=\"ax-sm\"\n      (onClick)=\"_handleSetClick($event)\"></ax-button>\n  </div>\n</div>", styles: ["ax-datetime-picker{display:flex;flex-direction:column}ax-datetime-picker>.ax-header{display:flex;justify-content:center;padding-left:.5rem;padding-right:.5rem;padding-top:.5rem}ax-datetime-picker>.ax-content{width:100%;overflow:hidden}@media (min-width: 768px){ax-datetime-picker>.ax-content{width:20rem}}ax-datetime-picker>.ax-content .ax-picker-part{display:flex;height:376px;width:100%;flex-direction:column}ax-datetime-picker>.ax-content .ax-picker-part>.ax-header{display:flex;justify-content:flex-start;padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500}ax-datetime-picker>.ax-content .ax-picker-part ax-picker{flex:1 1 0%}ax-datetime-picker>.ax-content .ax-calendar-part{padding-top:.25rem;padding-bottom:.25rem}ax-datetime-picker>.ax-content .ax-calendar-part ax-calendar{width:100%}ax-datetime-picker>.ax-footer{display:flex;justify-content:space-between;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem}ax-datetime-picker>.ax-footer ax-button{min-width:100px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i3.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i5.AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { kind: "component", type: i6.AXPickerComponent, selector: "ax-picker" }, { kind: "directive", type: i6.AXPickerColumnDirective, selector: "ax-picker-column", inputs: ["disabled", "readonly", "readonlyChange", "disabledChange", "valueField", "textField", "title", "step", "items"], outputs: ["onValueChanged", "itemsChange"] }, { kind: "pipe", type: i7.AXDateTimePipe, name: "axDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDateTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDateTimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-datetime-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: [
                         'disabled',

package/esm2022/datetime-picker/lib/datetime-picker.module.mjs

@@ -19,17 +19,17 @@ const MODULES = [
     AXPickerModule,
 ];
 export class AXDateTimePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: AXDateTimePickerModule, declarations: [AXDateTimePickerComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: AXDateTimePickerModule, declarations: [AXDateTimePickerComponent], imports: [CommonModule,
             FormsModule,
             AXTabsModule,
             AXDateTimeModule,
             AXButtonModule,
             AXCalendarModule,
             AXPickerModule], exports: [AXDateTimePickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDateTimePickerModule, imports: [MODULES] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDateTimePickerModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDateTimePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDateTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/esm2022/decorators/lib/components/clear-button.component.mjs

@@ -26,12 +26,12 @@ export class AXDecoratorClearButtonComponent extends MXBaseComponent {
         if (!this._parent.disabled && !this._parent.readonly)
             this._parent?.clear(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDecoratorClearButtonComponent, deps: [{ token: AXClearableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: { icon: "icon" }, host: { listeners: { "click": "_handleOnClick($event)" }, properties: { "class": "this.hostClass" } }, usesInheritance: true, ngImport: i0, template: `<button type="button" tabIndex="-1" role="button" aria-label="Clear" title="Clear">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDecoratorClearButtonComponent, deps: [{ token: AXClearableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: { icon: "icon" }, host: { listeners: { "click": "_handleOnClick($event)" }, properties: { "class": "this.hostClass" } }, usesInheritance: true, ngImport: i0, template: `<button type="button" tabIndex="-1" role="button" aria-label="Clear" title="Clear">
     <i [ngClass]="icon"></i>
   </button>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDecoratorClearButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDecoratorClearButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-clear-button',
@@ -41,12 +41,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return [{ type: i2.AXClearableComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i2.AXClearableComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [AXClearableComponent]
-                }] }]; }, propDecorators: { icon: [{
+                }] }], propDecorators: { icon: [{
                 type: Input
             }], hostClass: [{
                 type: HostBinding,
@@ -55,4 +55,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xlYXItYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9kZWNvcmF0b3JzL3NyYy9saWIvY29tcG9uZW50cy9jbGVhci1idXR0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxlQUFlLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRixPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxXQUFXLEVBQ1gsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBQ0wsUUFBUSxFQUNSLGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQzs7OztBQVV2QixNQUFNLE9BQU8sK0JBQWdDLFNBQVEsZUFBZTtJQUNsRSxZQUdVLE9BQThCO1FBRXRDLEtBQUssRUFBRSxDQUFDO1FBRkEsWUFBTyxHQUFQLE9BQU8sQ0FBdUI7UUFLaEMsVUFBSyxHQUFHLDZCQUE2QixDQUFDO0lBRjlDLENBQUM7SUFHRCxJQUNXLElBQUk7UUFDYixPQUFPLElBQUksQ0FBQyxLQUFLLElBQUksZUFBZSxDQUFDO0lBQ3ZDLENBQUM7SUFDRCxJQUFXLElBQUksQ0FBQyxDQUFTO1FBQ3ZCLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO0lBQ2pCLENBQUM7SUFFRCxJQUNZLFNBQVM7UUFDbkIsTUFBTSxNQUFNLEdBQ1YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRO1lBQ3JCLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUTtZQUNyQixJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssSUFBSSxJQUFJO1lBQzFCLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxJQUFJLEVBQUUsQ0FBQztRQUMzQixPQUFPLDJCQUEyQixNQUFNLENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUM7SUFDaEUsQ0FBQztJQUdTLGNBQWM7UUFDdEIsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRO1lBQUUsSUFBSSxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDbEYsQ0FBQzs4R0EvQlUsK0JBQStCLGtCQUdoQyxvQkFBb0I7a0dBSG5CLCtCQUErQiwrTUFOaEM7O1lBRUE7OzJGQUlDLCtCQUErQjtrQkFSM0MsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsaUJBQWlCO29CQUMzQixRQUFRLEVBQUU7O1lBRUE7b0JBQ1YsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07b0JBQy9DLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO2lCQUN0Qzs7MEJBR0ksUUFBUTs7MEJBQ1IsTUFBTTsyQkFBQyxvQkFBb0I7NENBUW5CLElBQUk7c0JBRGQsS0FBSztnQkFTTSxTQUFTO3NCQURwQixXQUFXO3VCQUFDLE9BQU87Z0JBV1YsY0FBYztzQkFEdkIsWUFBWTt1QkFBQyxPQUFPLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBWENsZWFyYWJsZUNvbXBvbmVudCwgTVhCYXNlQ29tcG9uZW50IH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2NvbW1vbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBIb3N0QmluZGluZyxcbiAgSG9zdExpc3RlbmVyLFxuICBJbmplY3QsXG4gIElucHV0LFxuICBPcHRpb25hbCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdheC1jbGVhci1idXR0b24nLFxuICB0ZW1wbGF0ZTogYDxidXR0b24gdHlwZT1cImJ1dHRvblwiIHRhYkluZGV4PVwiLTFcIiByb2xlPVwiYnV0dG9uXCIgYXJpYS1sYWJlbD1cIkNsZWFyXCIgdGl0bGU9XCJDbGVhclwiPlxuICAgIDxpIFtuZ0NsYXNzXT1cImljb25cIj48L2k+XG4gIDwvYnV0dG9uPmAsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBBWERlY29yYXRvckNsZWFyQnV0dG9uQ29tcG9uZW50IGV4dGVuZHMgTVhCYXNlQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IoXG4gICAgQE9wdGlvbmFsKClcbiAgICBASW5qZWN0KEFYQ2xlYXJhYmxlQ29tcG9uZW50KVxuICAgIHByaXZhdGUgX3BhcmVudD86IEFYQ2xlYXJhYmxlQ29tcG9uZW50LFxuICApIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgcHJpdmF0ZSBfaWNvbiA9ICdheC1pY29uIGF4LWljb24tY2FuY2VsLWZpbGwnO1xuICBASW5wdXQoKVxuICBwdWJsaWMgZ2V0IGljb24oKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5faWNvbiB8fCAnYXgtaWNvbi1jbG9zZSc7XG4gIH1cbiAgcHVibGljIHNldCBpY29uKHY6IHN0cmluZykge1xuICAgIHRoaXMuX2ljb24gPSB2O1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIHByaXZhdGUgZ2V0IGhvc3RDbGFzcygpOiBzdHJpbmcge1xuICAgIGNvbnN0IGhpZGRlbiA9XG4gICAgICB0aGlzLl9wYXJlbnQuZGlzYWJsZWQgfHxcbiAgICAgIHRoaXMuX3BhcmVudC5yZWFkb25seSB8fFxuICAgICAgdGhpcy5fcGFyZW50LnZhbHVlID09IG51bGwgfHxcbiAgICAgIHRoaXMuX3BhcmVudC52YWx1ZSA9PSAnJztcbiAgICByZXR1cm4gYGF4LWljb24gYXgtY2xlYXItYnV0dG9uICR7aGlkZGVuID8gJ2F4LWhpZGRlbicgOiAnJ31gO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snLCBbJyRldmVudCddKVxuICBwcm90ZWN0ZWQgX2hhbmRsZU9uQ2xpY2soKSB7XG4gICAgaWYgKCF0aGlzLl9wYXJlbnQuZGlzYWJsZWQgJiYgIXRoaXMuX3BhcmVudC5yZWFkb25seSkgdGhpcy5fcGFyZW50Py5jbGVhcih0cnVlKTtcbiAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xlYXItYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9kZWNvcmF0b3JzL3NyYy9saWIvY29tcG9uZW50cy9jbGVhci1idXR0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxlQUFlLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRixPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxXQUFXLEVBQ1gsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBQ0wsUUFBUSxFQUNSLGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQzs7OztBQVV2QixNQUFNLE9BQU8sK0JBQWdDLFNBQVEsZUFBZTtJQUNsRSxZQUdVLE9BQThCO1FBRXRDLEtBQUssRUFBRSxDQUFDO1FBRkEsWUFBTyxHQUFQLE9BQU8sQ0FBdUI7UUFLaEMsVUFBSyxHQUFHLDZCQUE2QixDQUFDO0lBRjlDLENBQUM7SUFHRCxJQUNXLElBQUk7UUFDYixPQUFPLElBQUksQ0FBQyxLQUFLLElBQUksZUFBZSxDQUFDO0lBQ3ZDLENBQUM7SUFDRCxJQUFXLElBQUksQ0FBQyxDQUFTO1FBQ3ZCLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO0lBQ2pCLENBQUM7SUFFRCxJQUNZLFNBQVM7UUFDbkIsTUFBTSxNQUFNLEdBQ1YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRO1lBQ3JCLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUTtZQUNyQixJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssSUFBSSxJQUFJO1lBQzFCLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxJQUFJLEVBQUUsQ0FBQztRQUMzQixPQUFPLDJCQUEyQixNQUFNLENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUM7SUFDaEUsQ0FBQztJQUdTLGNBQWM7UUFDdEIsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRO1lBQUUsSUFBSSxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDbEYsQ0FBQzs4R0EvQlUsK0JBQStCLGtCQUdoQyxvQkFBb0I7a0dBSG5CLCtCQUErQiwrTUFOaEM7O1lBRUE7OzJGQUlDLCtCQUErQjtrQkFSM0MsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsaUJBQWlCO29CQUMzQixRQUFRLEVBQUU7O1lBRUE7b0JBQ1YsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07b0JBQy9DLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO2lCQUN0Qzs7MEJBR0ksUUFBUTs7MEJBQ1IsTUFBTTsyQkFBQyxvQkFBb0I7eUNBUW5CLElBQUk7c0JBRGQsS0FBSztnQkFTTSxTQUFTO3NCQURwQixXQUFXO3VCQUFDLE9BQU87Z0JBV1YsY0FBYztzQkFEdkIsWUFBWTt1QkFBQyxPQUFPLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBWENsZWFyYWJsZUNvbXBvbmVudCwgTVhCYXNlQ29tcG9uZW50IH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2NvbW1vbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBIb3N0QmluZGluZyxcbiAgSG9zdExpc3RlbmVyLFxuICBJbmplY3QsXG4gIElucHV0LFxuICBPcHRpb25hbCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdheC1jbGVhci1idXR0b24nLFxuICB0ZW1wbGF0ZTogYDxidXR0b24gdHlwZT1cImJ1dHRvblwiIHRhYkluZGV4PVwiLTFcIiByb2xlPVwiYnV0dG9uXCIgYXJpYS1sYWJlbD1cIkNsZWFyXCIgdGl0bGU9XCJDbGVhclwiPlxuICAgIDxpIFtuZ0NsYXNzXT1cImljb25cIj48L2k+XG4gIDwvYnV0dG9uPmAsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBBWERlY29yYXRvckNsZWFyQnV0dG9uQ29tcG9uZW50IGV4dGVuZHMgTVhCYXNlQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IoXG4gICAgQE9wdGlvbmFsKClcbiAgICBASW5qZWN0KEFYQ2xlYXJhYmxlQ29tcG9uZW50KVxuICAgIHByaXZhdGUgX3BhcmVudD86IEFYQ2xlYXJhYmxlQ29tcG9uZW50LFxuICApIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgcHJpdmF0ZSBfaWNvbiA9ICdheC1pY29uIGF4LWljb24tY2FuY2VsLWZpbGwnO1xuICBASW5wdXQoKVxuICBwdWJsaWMgZ2V0IGljb24oKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5faWNvbiB8fCAnYXgtaWNvbi1jbG9zZSc7XG4gIH1cbiAgcHVibGljIHNldCBpY29uKHY6IHN0cmluZykge1xuICAgIHRoaXMuX2ljb24gPSB2O1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIHByaXZhdGUgZ2V0IGhvc3RDbGFzcygpOiBzdHJpbmcge1xuICAgIGNvbnN0IGhpZGRlbiA9XG4gICAgICB0aGlzLl9wYXJlbnQuZGlzYWJsZWQgfHxcbiAgICAgIHRoaXMuX3BhcmVudC5yZWFkb25seSB8fFxuICAgICAgdGhpcy5fcGFyZW50LnZhbHVlID09IG51bGwgfHxcbiAgICAgIHRoaXMuX3BhcmVudC52YWx1ZSA9PSAnJztcbiAgICByZXR1cm4gYGF4LWljb24gYXgtY2xlYXItYnV0dG9uICR7aGlkZGVuID8gJ2F4LWhpZGRlbicgOiAnJ31gO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snLCBbJyRldmVudCddKVxuICBwcm90ZWN0ZWQgX2hhbmRsZU9uQ2xpY2soKSB7XG4gICAgaWYgKCF0aGlzLl9wYXJlbnQuZGlzYWJsZWQgJiYgIXRoaXMuX3BhcmVudC5yZWFkb25seSkgdGhpcy5fcGFyZW50Py5jbGVhcih0cnVlKTtcbiAgfVxufVxuIl19

package/esm2022/decorators/lib/components/close-button.component.mjs

@@ -18,12 +18,12 @@ export class AXDecoratorCloseButtonComponent extends MXBaseComponent {
     _handleOnClick() {
         this._parent?.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDecoratorCloseButtonComponent, deps: [{ token: AXClosbaleComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: { icon: "icon" }, host: { listeners: { "click": "_handleOnClick($event)" } }, usesInheritance: true, ngImport: i0, template: `<button type="button" role="button" aria-label="Close" title="Close">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDecoratorCloseButtonComponent, deps: [{ token: AXClosbaleComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: { icon: "icon" }, host: { listeners: { "click": "_handleOnClick($event)" } }, usesInheritance: true, ngImport: i0, template: `<button type="button" role="button" aria-label="Close" title="Close">
     <i [ngClass]="icon"></i>
   </button>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDecoratorCloseButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDecoratorCloseButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-close-button',
@@ -33,15 +33,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return [{ type: i2.AXClosbaleComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i2.AXClosbaleComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [AXClosbaleComponent]
-                }] }]; }, propDecorators: { icon: [{
+                }] }], propDecorators: { icon: [{
                 type: Input
             }], _handleOnClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xvc2UtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9kZWNvcmF0b3JzL3NyYy9saWIvY29tcG9uZW50cy9jbG9zZS1idXR0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxlQUFlLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNqRixPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssRUFDTCxRQUFRLEVBQ1IsaUJBQWlCLEdBQ2xCLE1BQU0sZUFBZSxDQUFDOzs7O0FBVXZCLE1BQU0sT0FBTywrQkFBZ0MsU0FBUSxlQUFlO0lBQ2xFLFlBR1UsT0FBNkI7UUFFckMsS0FBSyxFQUFFLENBQUM7UUFGQSxZQUFPLEdBQVAsT0FBTyxDQUFzQjtRQUsvQixVQUFLLEdBQUcsdUJBQXVCLENBQUM7SUFGeEMsQ0FBQztJQUdELElBQ1csSUFBSTtRQUNiLE9BQU8sSUFBSSxDQUFDLEtBQUssSUFBSSxlQUFlLENBQUM7SUFDdkMsQ0FBQztJQUNELElBQVcsSUFBSSxDQUFDLENBQVM7UUFDdkIsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUM7SUFDakIsQ0FBQztJQUdTLGNBQWM7UUFDdEIsSUFBSSxDQUFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsQ0FBQztJQUN4QixDQUFDOzhHQXJCVSwrQkFBK0Isa0JBR2hDLG1CQUFtQjtrR0FIbEIsK0JBQStCLG9LQU5oQzs7WUFFQTs7MkZBSUMsK0JBQStCO2tCQVIzQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxpQkFBaUI7b0JBQzNCLFFBQVEsRUFBRTs7WUFFQTtvQkFDVixlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7aUJBQ3RDOzswQkFHSSxRQUFROzswQkFDUixNQUFNOzJCQUFDLG1CQUFtQjs0Q0FRbEIsSUFBSTtzQkFEZCxLQUFLO2dCQVNJLGNBQWM7c0JBRHZCLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQVhDbG9zYmFsZUNvbXBvbmVudCwgTVhCYXNlQ29tcG9uZW50IH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2NvbW1vbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBIb3N0TGlzdGVuZXIsXG4gIEluamVjdCxcbiAgSW5wdXQsXG4gIE9wdGlvbmFsLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2F4LWNsb3NlLWJ1dHRvbicsXG4gIHRlbXBsYXRlOiBgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgcm9sZT1cImJ1dHRvblwiIGFyaWEtbGFiZWw9XCJDbG9zZVwiIHRpdGxlPVwiQ2xvc2VcIj5cbiAgICA8aSBbbmdDbGFzc109XCJpY29uXCI+PC9pPlxuICA8L2J1dHRvbj5gLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgQVhEZWNvcmF0b3JDbG9zZUJ1dHRvbkNvbXBvbmVudCBleHRlbmRzIE1YQmFzZUNvbXBvbmVudCB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIEBPcHRpb25hbCgpXG4gICAgQEluamVjdChBWENsb3NiYWxlQ29tcG9uZW50KVxuICAgIHByaXZhdGUgX3BhcmVudD86IEFYQ2xvc2JhbGVDb21wb25lbnQsXG4gICkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBwcml2YXRlIF9pY29uID0gJ2F4LWljb24gYXgtaWNvbi1jbG9zZSc7XG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBnZXQgaWNvbigpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLl9pY29uIHx8ICdheC1pY29uLWNsb3NlJztcbiAgfVxuICBwdWJsaWMgc2V0IGljb24odjogc3RyaW5nKSB7XG4gICAgdGhpcy5faWNvbiA9IHY7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdjbGljaycsIFsnJGV2ZW50J10pXG4gIHByb3RlY3RlZCBfaGFuZGxlT25DbGljaygpIHtcbiAgICB0aGlzLl9wYXJlbnQ/LmNsb3NlKCk7XG4gIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xvc2UtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9kZWNvcmF0b3JzL3NyYy9saWIvY29tcG9uZW50cy9jbG9zZS1idXR0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxlQUFlLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNqRixPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssRUFDTCxRQUFRLEVBQ1IsaUJBQWlCLEdBQ2xCLE1BQU0sZUFBZSxDQUFDOzs7O0FBVXZCLE1BQU0sT0FBTywrQkFBZ0MsU0FBUSxlQUFlO0lBQ2xFLFlBR1UsT0FBNkI7UUFFckMsS0FBSyxFQUFFLENBQUM7UUFGQSxZQUFPLEdBQVAsT0FBTyxDQUFzQjtRQUsvQixVQUFLLEdBQUcsdUJBQXVCLENBQUM7SUFGeEMsQ0FBQztJQUdELElBQ1csSUFBSTtRQUNiLE9BQU8sSUFBSSxDQUFDLEtBQUssSUFBSSxlQUFlLENBQUM7SUFDdkMsQ0FBQztJQUNELElBQVcsSUFBSSxDQUFDLENBQVM7UUFDdkIsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUM7SUFDakIsQ0FBQztJQUdTLGNBQWM7UUFDdEIsSUFBSSxDQUFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsQ0FBQztJQUN4QixDQUFDOzhHQXJCVSwrQkFBK0Isa0JBR2hDLG1CQUFtQjtrR0FIbEIsK0JBQStCLG9LQU5oQzs7WUFFQTs7MkZBSUMsK0JBQStCO2tCQVIzQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxpQkFBaUI7b0JBQzNCLFFBQVEsRUFBRTs7WUFFQTtvQkFDVixlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7aUJBQ3RDOzswQkFHSSxRQUFROzswQkFDUixNQUFNOzJCQUFDLG1CQUFtQjt5Q0FRbEIsSUFBSTtzQkFEZCxLQUFLO2dCQVNJLGNBQWM7c0JBRHZCLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQVhDbG9zYmFsZUNvbXBvbmVudCwgTVhCYXNlQ29tcG9uZW50IH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2NvbW1vbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBIb3N0TGlzdGVuZXIsXG4gIEluamVjdCxcbiAgSW5wdXQsXG4gIE9wdGlvbmFsLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2F4LWNsb3NlLWJ1dHRvbicsXG4gIHRlbXBsYXRlOiBgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgcm9sZT1cImJ1dHRvblwiIGFyaWEtbGFiZWw9XCJDbG9zZVwiIHRpdGxlPVwiQ2xvc2VcIj5cbiAgICA8aSBbbmdDbGFzc109XCJpY29uXCI+PC9pPlxuICA8L2J1dHRvbj5gLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgQVhEZWNvcmF0b3JDbG9zZUJ1dHRvbkNvbXBvbmVudCBleHRlbmRzIE1YQmFzZUNvbXBvbmVudCB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIEBPcHRpb25hbCgpXG4gICAgQEluamVjdChBWENsb3NiYWxlQ29tcG9uZW50KVxuICAgIHByaXZhdGUgX3BhcmVudD86IEFYQ2xvc2JhbGVDb21wb25lbnQsXG4gICkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBwcml2YXRlIF9pY29uID0gJ2F4LWljb24gYXgtaWNvbi1jbG9zZSc7XG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBnZXQgaWNvbigpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLl9pY29uIHx8ICdheC1pY29uLWNsb3NlJztcbiAgfVxuICBwdWJsaWMgc2V0IGljb24odjogc3RyaW5nKSB7XG4gICAgdGhpcy5faWNvbiA9IHY7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdjbGljaycsIFsnJGV2ZW50J10pXG4gIHByb3RlY3RlZCBfaGFuZGxlT25DbGljaygpIHtcbiAgICB0aGlzLl9wYXJlbnQ/LmNsb3NlKCk7XG4gIH1cbn1cbiJdfQ==

package/esm2022/decorators/lib/components/generic-content.component.mjs

@@ -2,8 +2,8 @@ import { MXBaseComponent } from '@acorex/components/common';
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import * as i0 from "@angular/core";
 export class AXDecoratorGenericComponent extends MXBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDecoratorGenericComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDecoratorGenericComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay", providers: [
             { provide: 'ax-footer', useExisting: AXDecoratorGenericComponent },
             { provide: 'ax-header', useExisting: AXDecoratorGenericComponent },
             { provide: 'ax-content', useExisting: AXDecoratorGenericComponent },
@@ -18,7 +18,7 @@ export class AXDecoratorGenericComponent extends MXBaseComponent {
             { provide: 'ax-overlay', useExisting: AXDecoratorGenericComponent },
         ], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDecoratorGenericComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDecoratorGenericComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay',

package/esm2022/decorators/lib/components/icon.component.mjs

@@ -5,10 +5,10 @@ export class AXDecoratorIconComponent extends MXBaseComponent {
     get __iconClass() {
         return `${this.icon}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDecoratorIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, providers: [{ provide: 'ax-icon', useExisting: AXDecoratorIconComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content select="i,span,svg,img"></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDecoratorIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, providers: [{ provide: 'ax-icon', useExisting: AXDecoratorIconComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content select="i,span,svg,img"></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDecoratorIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDecoratorIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-icon',

package/esm2022/decorators/lib/decorators.module.mjs

@@ -13,17 +13,17 @@ const COMPONENT = [
 ];
 const MODULES = [CommonModule];
 export class AXDecoratorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: AXDecoratorModule, declarations: [AXDecoratorIconComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: AXDecoratorModule, declarations: [AXDecoratorIconComponent,
             AXDecoratorClearButtonComponent,
             AXDecoratorCloseButtonComponent,
             AXDecoratorGenericComponent], imports: [CommonModule], exports: [AXDecoratorIconComponent,
             AXDecoratorClearButtonComponent,
             AXDecoratorCloseButtonComponent,
             AXDecoratorGenericComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDecoratorModule, imports: [MODULES] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDecoratorModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXDecoratorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: AXDecoratorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],