@acorex/components 22.2.14 → 22.2.15

package/fesm2022/acorex-components-data-list.mjs

@@ -374,10 +374,10 @@ class AXDataListComponent extends MXValueComponent {
     shouldShowTooltip(item) {
         return this.showItemTooltip() && !!this.getItemTooltip(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXDataListComponent, isStandalone: true, selector: "ax-data-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, isItemTruncated: { classPropertyName: "isItemTruncated", publicName: "isItemTruncated", isSignal: true, isRequired: false, transformFunction: null }, showItemTooltip: { classPropertyName: "showItemTooltip", publicName: "showItemTooltip", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, tooltipField: { classPropertyName: "tooltipField", publicName: "tooltipField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, descriptionField: { classPropertyName: "descriptionField", publicName: "descriptionField", isSignal: true, isRequired: false, transformFunction: null }, levelField: { classPropertyName: "levelField", publicName: "levelField", isSignal: true, isRequired: false, transformFunction: null }, childrenField: { classPropertyName: "childrenField", publicName: "childrenField", isSignal: true, isRequired: false, transformFunction: null }, expandedField: { classPropertyName: "expandedField", publicName: "expandedField", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectionModel: { classPropertyName: "selectionModel", publicName: "selectionModel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", itemClick: "itemClick", itemDoubleClick: "itemDoubleClick", expandChange: "expandChange", selectionModel: "selectionModelChange" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-data-list\" [class.ax-data-list--loading]=\"loading()\">\n  <!-- Loading State -->\n  @if (loading()) {\n    <div class=\"ax-data-list__loading\">\n      <ng-container *ngTemplateOutlet=\"loadingTemplate() || defaultLoadingTemplate\"></ng-container>\n    </div>\n  }\n\n  <!-- Empty State -->\n  @if (isEmpty()) {\n    <div class=\"ax-data-list__empty\">\n      <ng-container *ngTemplateOutlet=\"emptyTemplate() || defaultEmptyTemplate\"></ng-container>\n    </div>\n  }\n\n  <!-- List Content -->\n  @if (hasItems() && listDataSource !== null) {\n    <div class=\"ax-data-list__content\">\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"itemHeight()\"\n        class=\"ax-data-list__viewport\"\n        [class.ax-data-list__viewport--truncated]=\"isItemTruncated()\"\n      >\n        <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByFn\">\n          @if (item) {\n            <div\n              class=\"ax-data-list__item\"\n              [class.ax-data-list__item--selected]=\"isItemSelected(item)\"\n              [class.ax-data-list__item--disabled]=\"isItemDisabled(item)\"\n              [class.ax-data-list__item--focused]=\"focusedIndex() === i\"\n              [class]=\"'ax-data-list__item--level-' + getItemLevel(item)\"\n              [style.height.px]=\"itemHeight()\"\n              (click)=\"onItemClick(item, $event)\"\n              (dblclick)=\"onItemDoubleClick(item)\"\n              (keydown)=\"onKeyDown($event, item, i)\"\n              tabindex=\"0\"\n              role=\"listitem\"\n              [attr.aria-selected]=\"isItemSelected(item)\"\n              [attr.aria-disabled]=\"isItemDisabled(item)\"\n              [attr.aria-level]=\"getItemLevel(item) + 1\"\n            >\n              <!-- Checkbox -->\n              @if (showCheckboxes()) {\n                <div class=\"ax-data-list__checkbox\" (click)=\"onCheckboxClick($event)\">\n                  <ax-check-box\n                    [value]=\"isItemSelected(item)\"\n                    [disabled]=\"isItemDisabled(item)\"\n                    (valueChange)=\"onCheckboxChange(item, $event)\"\n                  >\n                  </ax-check-box>\n                </div>\n              }\n\n              <!-- Expand/Collapse Button for Tree Items -->\n              @if (hasChildren(item)) {\n                <div\n                  class=\"ax-data-list__expand-button\"\n                  [class.ax-data-list__expand-button--expanded]=\"isExpanded(item)\"\n                  (click)=\"toggleExpanded(item, $event)\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  [attr.aria-expanded]=\"isExpanded(item)\"\n                >\n                  <svg class=\"ax-data-list__expand-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <path d=\"M7 10l5 5 5-5z\" />\n                  </svg>\n                </div>\n              }\n\n              <!-- Item Content -->\n              <div class=\"ax-data-list__content-wrapper\">\n                <!-- Custom Item Template -->\n                @if (itemTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      itemTemplate();\n                      context: {\n                        $implicit: item,\n                        index: i,\n                        selected: isItemSelected(item),\n                        disabled: isItemDisabled(item),\n                      }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"defaultItemTemplate\"></ng-container>\n                }\n\n                <!-- Default Item Template -->\n                <ng-template #defaultItemTemplate>\n                  <div\n                    class=\"ax-data-list__text\"\n                    [class.ax-data-list__text--truncated]=\"isItemTruncated()\"\n                    [axTooltip]=\"shouldShowTooltip(item) ? getItemTooltip(item) : null\"\n                    [axTooltipDisabled]=\"!shouldShowTooltip(item)\"\n                  >\n                    {{ getItemText(item) }}\n                  </div>\n\n                  @if (getItemDescription(item)) {\n                    <div\n                      class=\"ax-data-list__description\"\n                      [class.ax-data-list__description--truncated]=\"isItemTruncated()\"\n                    >\n                      {{ getItemDescription(item) }}\n                    </div>\n                  }\n                </ng-template>\n              </div>\n            </div>\n          } @else {\n            <!-- Loading skeleton for null items -->\n            <div class=\"ax-data-list__item ax-data-list__item--loading\" [style.height.px]=\"itemHeight()\">\n              <div class=\"ax-data-list__loading-skeleton\">\n                <div class=\"ax-data-list__skeleton-checkbox\"></div>\n                <div class=\"ax-data-list__skeleton-content\">\n                  <div class=\"ax-data-list__skeleton-text\"></div>\n                  <div class=\"ax-data-list__skeleton-description\"></div>\n                </div>\n              </div>\n            </div>\n          }\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  }\n</div>\n\n<!-- Default Loading Template -->\n<ng-template #defaultLoadingTemplate>\n  <div class=\"ax-data-list__loading-default\">\n    <div class=\"ax-data-list__loading-spinner\"></div>\n    <span>Loading...</span>\n  </div>\n</ng-template>\n\n<!-- Default Empty Template -->\n<ng-template #defaultEmptyTemplate>\n  <div class=\"ax-data-list__empty-default\">\n    <svg class=\"ax-data-list__empty-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path\n        d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\n      />\n    </svg>\n    <span>No items to display</span>\n  </div>\n</ng-template>\n", styles: ["@layer properties;@layer components{.ax-data-list{display:flex;height:100%;width:100%;flex-direction:column;overflow:hidden;background:var(--ax-color-background, #ffffff);border:1px solid var(--ax-color-border, #e5e7eb);border-radius:var(--ax-border-radius, .375rem)}.ax-data-list.ax-data-list--loading .ax-data-list__content{pointer-events:none;opacity:60%}.ax-data-list .ax-data-list__loading{display:flex;min-height:calc(var(--spacing, .25rem) * 50);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8)}.ax-data-list .ax-data-list__loading-default{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 4);color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list .ax-data-list__loading-spinner{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border:2px solid var(--ax-color-border, #e5e7eb);border-top:2px solid var(--ax-color-primary, #3b82f6);animation:spin 1s linear infinite}.ax-data-list .ax-data-list__empty{display:flex;min-height:calc(var(--spacing, .25rem) * 50);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8)}.ax-data-list .ax-data-list__empty-default{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 4);text-align:center;color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list .ax-data-list__empty-icon{width:calc(var(--spacing, .25rem) * 12);height:calc(var(--spacing, .25rem) * 12);opacity:50%}.ax-data-list .ax-data-list__content{flex:1;overflow:hidden}.ax-data-list .ax-data-list__viewport{width:100%;height:100%}.ax-data-list .ax-data-list__viewport.ax-data-list__viewport--truncated .ax-data-list__text,.ax-data-list .ax-data-list__viewport.ax-data-list__viewport--truncated .ax-data-list__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-data-list .ax-data-list__item{position:relative;display:flex;cursor:pointer;align-items:center;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);transition:all .15s ease-in-out;border-bottom:1px solid var(--ax-color-border-light, #f3f4f6)}.ax-data-list .ax-data-list__item:hover:not(.ax-data-list__item--disabled){background-color:var(--ax-color-hover, #f9fafb)}.ax-data-list .ax-data-list__item:focus{outline:2px solid var(--ax-color-primary, #3b82f6);outline-offset:-2px}.ax-data-list .ax-data-list__item.ax-data-list__item--selected{background-color:var(--ax-color-primary-light, #dbeafe);color:var(--ax-color-primary, #3b82f6);border-color:var(--ax-color-primary, #3b82f6)}.ax-data-list .ax-data-list__item.ax-data-list__item--selected:hover{background-color:var(--ax-color-primary-light-hover, #bfdbfe)}.ax-data-list .ax-data-list__item.ax-data-list__item--disabled{cursor:not-allowed;opacity:60%;background-color:var(--ax-color-disabled, #f9fafb);color:var(--ax-color-text-disabled, #9ca3af)}.ax-data-list .ax-data-list__item.ax-data-list__item--disabled:hover{background-color:var(--ax-color-disabled, #f9fafb)}.ax-data-list .ax-data-list__item.ax-data-list__item--focused{background-color:var(--ax-color-focus, #eff6ff);outline:2px solid var(--ax-color-primary, #3b82f6);outline-offset:-2px}.ax-data-list .ax-data-list__item.ax-data-list__item--loading{pointer-events:none;cursor:default;background-color:var(--ax-color-background, #ffffff)}.ax-data-list .ax-data-list__item.ax-data-list__item--loading:hover{background-color:var(--ax-color-background, #ffffff)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-0{padding-inline-start:calc(var(--spacing, .25rem) * 4)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-1{padding-inline-start:calc(var(--spacing, .25rem) * 10)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-2{padding-inline-start:calc(var(--spacing, .25rem) * 16)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-3{padding-inline-start:5.5rem}.ax-data-list .ax-data-list__item.ax-data-list__item--level-4{padding-inline-start:calc(var(--spacing, .25rem) * 28)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-5{padding-inline-start:8.5rem}.ax-data-list .ax-data-list__checkbox{margin-inline-end:calc(var(--spacing, .25rem) * 3);flex-shrink:0}.ax-data-list .ax-data-list__expand-button{margin-inline-end:calc(var(--spacing, .25rem) * 2);display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;transition:all .15s ease-in-out}.ax-data-list .ax-data-list__expand-button:hover{background-color:var(--ax-color-hover, #f3f4f6)}.ax-data-list .ax-data-list__expand-button:focus{outline:2px solid var(--ax-color-primary, #3b82f6);outline-offset:2px}.ax-data-list .ax-data-list__expand-button.ax-data-list__expand-button--expanded .ax-data-list__expand-icon{rotate:90deg}.ax-data-list .ax-data-list__expand-icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);transition:transform .15s ease-in-out;color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list .ax-data-list__content-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}.ax-data-list .ax-data-list__text{--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--ax-color-text, #111827)}.ax-data-list .ax-data-list__text.ax-data-list__text--truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-data-list .ax-data-list__description{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list .ax-data-list__description.ax-data-list__description--truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-data-list__loading-skeleton{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.ax-data-list__skeleton-checkbox{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;border-radius:.25rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.ax-data-list__skeleton-content{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.ax-data-list__skeleton-text{height:calc(var(--spacing, .25rem) * 4);width:80%;border-radius:.25rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.ax-data-list__skeleton-description{height:calc(var(--spacing, .25rem) * 3);width:calc(3/5 * 100%);border-radius:.25rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(max-width:768px){.ax-data-list .ax-data-list__item{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-1{padding-inline-start:calc(var(--spacing, .25rem) * 8)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-2{padding-inline-start:calc(var(--spacing, .25rem) * 12)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-3{padding-inline-start:calc(var(--spacing, .25rem) * 16)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-4{padding-inline-start:calc(var(--spacing, .25rem) * 20)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-5{padding-inline-start:calc(var(--spacing, .25rem) * 24)}.ax-data-list .ax-data-list__checkbox{margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ax-data-list .ax-data-list__expand-button{margin-inline-end:calc(var(--spacing, .25rem) * 1)}}@media(prefers-contrast:high){.ax-data-list{border-width:2px}.ax-data-list .ax-data-list__item{border-bottom-width:2px}.ax-data-list .ax-data-list__item:focus{outline-width:3px}.ax-data-list .ax-data-list__item.ax-data-list__item--selected{border-width:2px}.ax-data-list .ax-data-list__expand-button:focus{outline-width:3px}}@media(prefers-reduced-motion:reduce){.ax-data-list .ax-data-list__item,.ax-data-list .ax-data-list__expand-icon{transition:none}.ax-data-list .ax-data-list__loading-spinner{animation:none}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@keyframes spin{to{transform:rotate(360deg)}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ScrollingModule }, { 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: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXDataListComponent, isStandalone: true, selector: "ax-data-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, isItemTruncated: { classPropertyName: "isItemTruncated", publicName: "isItemTruncated", isSignal: true, isRequired: false, transformFunction: null }, showItemTooltip: { classPropertyName: "showItemTooltip", publicName: "showItemTooltip", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, tooltipField: { classPropertyName: "tooltipField", publicName: "tooltipField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, descriptionField: { classPropertyName: "descriptionField", publicName: "descriptionField", isSignal: true, isRequired: false, transformFunction: null }, levelField: { classPropertyName: "levelField", publicName: "levelField", isSignal: true, isRequired: false, transformFunction: null }, childrenField: { classPropertyName: "childrenField", publicName: "childrenField", isSignal: true, isRequired: false, transformFunction: null }, expandedField: { classPropertyName: "expandedField", publicName: "expandedField", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectionModel: { classPropertyName: "selectionModel", publicName: "selectionModel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", itemClick: "itemClick", itemDoubleClick: "itemDoubleClick", expandChange: "expandChange", selectionModel: "selectionModelChange" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-data-list\" [class.ax-data-list--loading]=\"loading()\">\n  <!-- Loading State -->\n  @if (loading()) {\n    <div class=\"ax-data-list__loading\">\n      <ng-container *ngTemplateOutlet=\"loadingTemplate() || defaultLoadingTemplate\"></ng-container>\n    </div>\n  }\n\n  <!-- Empty State -->\n  @if (isEmpty()) {\n    <div class=\"ax-data-list__empty\">\n      <ng-container *ngTemplateOutlet=\"emptyTemplate() || defaultEmptyTemplate\"></ng-container>\n    </div>\n  }\n\n  <!-- List Content -->\n  @if (hasItems() && listDataSource !== null) {\n    <div class=\"ax-data-list__content\">\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"itemHeight()\"\n        class=\"ax-data-list__viewport\"\n        [class.ax-data-list__viewport--truncated]=\"isItemTruncated()\"\n      >\n        <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByFn\">\n          @if (item) {\n            <div\n              class=\"ax-data-list__item\"\n              [class.ax-data-list__item--selected]=\"isItemSelected(item)\"\n              [class.ax-data-list__item--disabled]=\"isItemDisabled(item)\"\n              [class.ax-data-list__item--focused]=\"focusedIndex() === i\"\n              [class]=\"'ax-data-list__item--level-' + getItemLevel(item)\"\n              [style.height.px]=\"itemHeight()\"\n              (click)=\"onItemClick(item, $event)\"\n              (dblclick)=\"onItemDoubleClick(item)\"\n              (keydown)=\"onKeyDown($event, item, i)\"\n              tabindex=\"0\"\n              role=\"listitem\"\n              [attr.aria-selected]=\"isItemSelected(item)\"\n              [attr.aria-disabled]=\"isItemDisabled(item)\"\n              [attr.aria-level]=\"getItemLevel(item) + 1\"\n            >\n              <!-- Checkbox -->\n              @if (showCheckboxes()) {\n                <div class=\"ax-data-list__checkbox\" (click)=\"onCheckboxClick($event)\">\n                  <ax-check-box\n                    [value]=\"isItemSelected(item)\"\n                    [disabled]=\"isItemDisabled(item)\"\n                    (valueChange)=\"onCheckboxChange(item, $event)\"\n                  >\n                  </ax-check-box>\n                </div>\n              }\n\n              <!-- Expand/Collapse Button for Tree Items -->\n              @if (hasChildren(item)) {\n                <div\n                  class=\"ax-data-list__expand-button\"\n                  [class.ax-data-list__expand-button--expanded]=\"isExpanded(item)\"\n                  (click)=\"toggleExpanded(item, $event)\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  [attr.aria-expanded]=\"isExpanded(item)\"\n                >\n                  <svg class=\"ax-data-list__expand-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <path d=\"M7 10l5 5 5-5z\" />\n                  </svg>\n                </div>\n              }\n\n              <!-- Item Content -->\n              <div class=\"ax-data-list__content-wrapper\">\n                <!-- Custom Item Template -->\n                @if (itemTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      itemTemplate();\n                      context: {\n                        $implicit: item,\n                        index: i,\n                        selected: isItemSelected(item),\n                        disabled: isItemDisabled(item),\n                      }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"defaultItemTemplate\"></ng-container>\n                }\n\n                <!-- Default Item Template -->\n                <ng-template #defaultItemTemplate>\n                  <div\n                    class=\"ax-data-list__text\"\n                    [class.ax-data-list__text--truncated]=\"isItemTruncated()\"\n                    [axTooltip]=\"shouldShowTooltip(item) ? getItemTooltip(item) : null\"\n                    [axTooltipDisabled]=\"!shouldShowTooltip(item)\"\n                  >\n                    {{ getItemText(item) }}\n                  </div>\n\n                  @if (getItemDescription(item)) {\n                    <div\n                      class=\"ax-data-list__description\"\n                      [class.ax-data-list__description--truncated]=\"isItemTruncated()\"\n                    >\n                      {{ getItemDescription(item) }}\n                    </div>\n                  }\n                </ng-template>\n              </div>\n            </div>\n          } @else {\n            <!-- Loading skeleton for null items -->\n            <div class=\"ax-data-list__item ax-data-list__item--loading\" [style.height.px]=\"itemHeight()\">\n              <div class=\"ax-data-list__loading-skeleton\">\n                <div class=\"ax-data-list__skeleton-checkbox\"></div>\n                <div class=\"ax-data-list__skeleton-content\">\n                  <div class=\"ax-data-list__skeleton-text\"></div>\n                  <div class=\"ax-data-list__skeleton-description\"></div>\n                </div>\n              </div>\n            </div>\n          }\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  }\n</div>\n\n<!-- Default Loading Template -->\n<ng-template #defaultLoadingTemplate>\n  <div class=\"ax-data-list__loading-default\">\n    <div class=\"ax-data-list__loading-spinner\"></div>\n    <span>Loading...</span>\n  </div>\n</ng-template>\n\n<!-- Default Empty Template -->\n<ng-template #defaultEmptyTemplate>\n  <div class=\"ax-data-list__empty-default\">\n    <svg class=\"ax-data-list__empty-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path\n        d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\n      />\n    </svg>\n    <span>No items to display</span>\n  </div>\n</ng-template>\n", styles: ["@layer properties;@layer components{.ax-data-list{display:flex;height:100%;width:100%;flex-direction:column;overflow:hidden;background:var(--ax-color-background, #ffffff);border:1px solid var(--ax-color-border, #e5e7eb);border-radius:var(--ax-border-radius, .375rem)}.ax-data-list.ax-data-list--loading .ax-data-list__content{pointer-events:none;opacity:60%}.ax-data-list .ax-data-list__loading{display:flex;min-height:calc(var(--spacing, .25rem) * 50);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8)}.ax-data-list .ax-data-list__loading-default{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 4);color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list .ax-data-list__loading-spinner{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border:2px solid var(--ax-color-border, #e5e7eb);border-top:2px solid var(--ax-color-primary, #3b82f6);animation:spin 1s linear infinite}.ax-data-list .ax-data-list__empty{display:flex;min-height:calc(var(--spacing, .25rem) * 50);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8)}.ax-data-list .ax-data-list__empty-default{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 4);text-align:center;color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list .ax-data-list__empty-icon{width:calc(var(--spacing, .25rem) * 12);height:calc(var(--spacing, .25rem) * 12);opacity:50%}.ax-data-list .ax-data-list__content{flex:1;overflow:hidden}.ax-data-list .ax-data-list__viewport{width:100%;height:100%}.ax-data-list .ax-data-list__viewport.ax-data-list__viewport--truncated .ax-data-list__text,.ax-data-list .ax-data-list__viewport.ax-data-list__viewport--truncated .ax-data-list__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-data-list .ax-data-list__item{position:relative;display:flex;cursor:pointer;align-items:center;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);transition:all .15s ease-in-out;border-bottom:1px solid var(--ax-color-border-light, #f3f4f6)}.ax-data-list .ax-data-list__item:hover:not(.ax-data-list__item--disabled){background-color:var(--ax-color-hover, #f9fafb)}.ax-data-list .ax-data-list__item:focus{outline:2px solid var(--ax-color-primary, #3b82f6);outline-offset:-2px}.ax-data-list .ax-data-list__item.ax-data-list__item--selected{background-color:var(--ax-color-primary-light, #dbeafe);color:var(--ax-color-primary, #3b82f6);border-color:var(--ax-color-primary, #3b82f6)}.ax-data-list .ax-data-list__item.ax-data-list__item--selected:hover{background-color:var(--ax-color-primary-light-hover, #bfdbfe)}.ax-data-list .ax-data-list__item.ax-data-list__item--disabled{cursor:not-allowed;opacity:60%;background-color:var(--ax-color-disabled, #f9fafb);color:var(--ax-color-text-disabled, #9ca3af)}.ax-data-list .ax-data-list__item.ax-data-list__item--disabled:hover{background-color:var(--ax-color-disabled, #f9fafb)}.ax-data-list .ax-data-list__item.ax-data-list__item--focused{background-color:var(--ax-color-focus, #eff6ff);outline:2px solid var(--ax-color-primary, #3b82f6);outline-offset:-2px}.ax-data-list .ax-data-list__item.ax-data-list__item--loading{pointer-events:none;cursor:default;background-color:var(--ax-color-background, #ffffff)}.ax-data-list .ax-data-list__item.ax-data-list__item--loading:hover{background-color:var(--ax-color-background, #ffffff)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-0{padding-inline-start:calc(var(--spacing, .25rem) * 4)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-1{padding-inline-start:calc(var(--spacing, .25rem) * 10)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-2{padding-inline-start:calc(var(--spacing, .25rem) * 16)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-3{padding-inline-start:5.5rem}.ax-data-list .ax-data-list__item.ax-data-list__item--level-4{padding-inline-start:calc(var(--spacing, .25rem) * 28)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-5{padding-inline-start:8.5rem}.ax-data-list .ax-data-list__checkbox{margin-inline-end:calc(var(--spacing, .25rem) * 3);flex-shrink:0}.ax-data-list .ax-data-list__expand-button{margin-inline-end:calc(var(--spacing, .25rem) * 2);display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;transition:all .15s ease-in-out}.ax-data-list .ax-data-list__expand-button:hover{background-color:var(--ax-color-hover, #f3f4f6)}.ax-data-list .ax-data-list__expand-button:focus{outline:2px solid var(--ax-color-primary, #3b82f6);outline-offset:2px}.ax-data-list .ax-data-list__expand-button.ax-data-list__expand-button--expanded .ax-data-list__expand-icon{rotate:90deg}.ax-data-list .ax-data-list__expand-icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);transition:transform .15s ease-in-out;color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list .ax-data-list__content-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}.ax-data-list .ax-data-list__text{--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--ax-color-text, #111827)}.ax-data-list .ax-data-list__text.ax-data-list__text--truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-data-list .ax-data-list__description{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list .ax-data-list__description.ax-data-list__description--truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-data-list__loading-skeleton{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.ax-data-list__skeleton-checkbox{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;border-radius:.25rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.ax-data-list__skeleton-content{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.ax-data-list__skeleton-text{height:calc(var(--spacing, .25rem) * 4);width:80%;border-radius:.25rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.ax-data-list__skeleton-description{height:calc(var(--spacing, .25rem) * 3);width:calc(3/5 * 100%);border-radius:.25rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(max-width:768px){.ax-data-list .ax-data-list__item{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-1{padding-inline-start:calc(var(--spacing, .25rem) * 8)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-2{padding-inline-start:calc(var(--spacing, .25rem) * 12)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-3{padding-inline-start:calc(var(--spacing, .25rem) * 16)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-4{padding-inline-start:calc(var(--spacing, .25rem) * 20)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-5{padding-inline-start:calc(var(--spacing, .25rem) * 24)}.ax-data-list .ax-data-list__checkbox{margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ax-data-list .ax-data-list__expand-button{margin-inline-end:calc(var(--spacing, .25rem) * 1)}}@media(prefers-contrast:high){.ax-data-list{border-width:2px}.ax-data-list .ax-data-list__item{border-bottom-width:2px}.ax-data-list .ax-data-list__item:focus{outline-width:3px}.ax-data-list .ax-data-list__item.ax-data-list__item--selected{border-width:2px}.ax-data-list .ax-data-list__expand-button:focus{outline-width:3px}}@media(prefers-reduced-motion:reduce){.ax-data-list .ax-data-list__item,.ax-data-list .ax-data-list__expand-icon{transition:none}.ax-data-list .ax-data-list__loading-spinner{animation:none}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@keyframes spin{to{transform:rotate(360deg)}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ScrollingModule }, { 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: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-data-list', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, FormsModule, ScrollingModule, AXTooltipDirective, AXCheckBoxComponent], template: "<div class=\"ax-data-list\" [class.ax-data-list--loading]=\"loading()\">\n  <!-- Loading State -->\n  @if (loading()) {\n    <div class=\"ax-data-list__loading\">\n      <ng-container *ngTemplateOutlet=\"loadingTemplate() || defaultLoadingTemplate\"></ng-container>\n    </div>\n  }\n\n  <!-- Empty State -->\n  @if (isEmpty()) {\n    <div class=\"ax-data-list__empty\">\n      <ng-container *ngTemplateOutlet=\"emptyTemplate() || defaultEmptyTemplate\"></ng-container>\n    </div>\n  }\n\n  <!-- List Content -->\n  @if (hasItems() && listDataSource !== null) {\n    <div class=\"ax-data-list__content\">\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"itemHeight()\"\n        class=\"ax-data-list__viewport\"\n        [class.ax-data-list__viewport--truncated]=\"isItemTruncated()\"\n      >\n        <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByFn\">\n          @if (item) {\n            <div\n              class=\"ax-data-list__item\"\n              [class.ax-data-list__item--selected]=\"isItemSelected(item)\"\n              [class.ax-data-list__item--disabled]=\"isItemDisabled(item)\"\n              [class.ax-data-list__item--focused]=\"focusedIndex() === i\"\n              [class]=\"'ax-data-list__item--level-' + getItemLevel(item)\"\n              [style.height.px]=\"itemHeight()\"\n              (click)=\"onItemClick(item, $event)\"\n              (dblclick)=\"onItemDoubleClick(item)\"\n              (keydown)=\"onKeyDown($event, item, i)\"\n              tabindex=\"0\"\n              role=\"listitem\"\n              [attr.aria-selected]=\"isItemSelected(item)\"\n              [attr.aria-disabled]=\"isItemDisabled(item)\"\n              [attr.aria-level]=\"getItemLevel(item) + 1\"\n            >\n              <!-- Checkbox -->\n              @if (showCheckboxes()) {\n                <div class=\"ax-data-list__checkbox\" (click)=\"onCheckboxClick($event)\">\n                  <ax-check-box\n                    [value]=\"isItemSelected(item)\"\n                    [disabled]=\"isItemDisabled(item)\"\n                    (valueChange)=\"onCheckboxChange(item, $event)\"\n                  >\n                  </ax-check-box>\n                </div>\n              }\n\n              <!-- Expand/Collapse Button for Tree Items -->\n              @if (hasChildren(item)) {\n                <div\n                  class=\"ax-data-list__expand-button\"\n                  [class.ax-data-list__expand-button--expanded]=\"isExpanded(item)\"\n                  (click)=\"toggleExpanded(item, $event)\"\n                  role=\"button\"\n                  tabindex=\"0\"\n                  [attr.aria-expanded]=\"isExpanded(item)\"\n                >\n                  <svg class=\"ax-data-list__expand-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <path d=\"M7 10l5 5 5-5z\" />\n                  </svg>\n                </div>\n              }\n\n              <!-- Item Content -->\n              <div class=\"ax-data-list__content-wrapper\">\n                <!-- Custom Item Template -->\n                @if (itemTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      itemTemplate();\n                      context: {\n                        $implicit: item,\n                        index: i,\n                        selected: isItemSelected(item),\n                        disabled: isItemDisabled(item),\n                      }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"defaultItemTemplate\"></ng-container>\n                }\n\n                <!-- Default Item Template -->\n                <ng-template #defaultItemTemplate>\n                  <div\n                    class=\"ax-data-list__text\"\n                    [class.ax-data-list__text--truncated]=\"isItemTruncated()\"\n                    [axTooltip]=\"shouldShowTooltip(item) ? getItemTooltip(item) : null\"\n                    [axTooltipDisabled]=\"!shouldShowTooltip(item)\"\n                  >\n                    {{ getItemText(item) }}\n                  </div>\n\n                  @if (getItemDescription(item)) {\n                    <div\n                      class=\"ax-data-list__description\"\n                      [class.ax-data-list__description--truncated]=\"isItemTruncated()\"\n                    >\n                      {{ getItemDescription(item) }}\n                    </div>\n                  }\n                </ng-template>\n              </div>\n            </div>\n          } @else {\n            <!-- Loading skeleton for null items -->\n            <div class=\"ax-data-list__item ax-data-list__item--loading\" [style.height.px]=\"itemHeight()\">\n              <div class=\"ax-data-list__loading-skeleton\">\n                <div class=\"ax-data-list__skeleton-checkbox\"></div>\n                <div class=\"ax-data-list__skeleton-content\">\n                  <div class=\"ax-data-list__skeleton-text\"></div>\n                  <div class=\"ax-data-list__skeleton-description\"></div>\n                </div>\n              </div>\n            </div>\n          }\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  }\n</div>\n\n<!-- Default Loading Template -->\n<ng-template #defaultLoadingTemplate>\n  <div class=\"ax-data-list__loading-default\">\n    <div class=\"ax-data-list__loading-spinner\"></div>\n    <span>Loading...</span>\n  </div>\n</ng-template>\n\n<!-- Default Empty Template -->\n<ng-template #defaultEmptyTemplate>\n  <div class=\"ax-data-list__empty-default\">\n    <svg class=\"ax-data-list__empty-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path\n        d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\n      />\n    </svg>\n    <span>No items to display</span>\n  </div>\n</ng-template>\n", styles: ["@layer properties;@layer components{.ax-data-list{display:flex;height:100%;width:100%;flex-direction:column;overflow:hidden;background:var(--ax-color-background, #ffffff);border:1px solid var(--ax-color-border, #e5e7eb);border-radius:var(--ax-border-radius, .375rem)}.ax-data-list.ax-data-list--loading .ax-data-list__content{pointer-events:none;opacity:60%}.ax-data-list .ax-data-list__loading{display:flex;min-height:calc(var(--spacing, .25rem) * 50);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8)}.ax-data-list .ax-data-list__loading-default{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 4);color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list .ax-data-list__loading-spinner{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border:2px solid var(--ax-color-border, #e5e7eb);border-top:2px solid var(--ax-color-primary, #3b82f6);animation:spin 1s linear infinite}.ax-data-list .ax-data-list__empty{display:flex;min-height:calc(var(--spacing, .25rem) * 50);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8)}.ax-data-list .ax-data-list__empty-default{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 4);text-align:center;color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list .ax-data-list__empty-icon{width:calc(var(--spacing, .25rem) * 12);height:calc(var(--spacing, .25rem) * 12);opacity:50%}.ax-data-list .ax-data-list__content{flex:1;overflow:hidden}.ax-data-list .ax-data-list__viewport{width:100%;height:100%}.ax-data-list .ax-data-list__viewport.ax-data-list__viewport--truncated .ax-data-list__text,.ax-data-list .ax-data-list__viewport.ax-data-list__viewport--truncated .ax-data-list__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-data-list .ax-data-list__item{position:relative;display:flex;cursor:pointer;align-items:center;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);transition:all .15s ease-in-out;border-bottom:1px solid var(--ax-color-border-light, #f3f4f6)}.ax-data-list .ax-data-list__item:hover:not(.ax-data-list__item--disabled){background-color:var(--ax-color-hover, #f9fafb)}.ax-data-list .ax-data-list__item:focus{outline:2px solid var(--ax-color-primary, #3b82f6);outline-offset:-2px}.ax-data-list .ax-data-list__item.ax-data-list__item--selected{background-color:var(--ax-color-primary-light, #dbeafe);color:var(--ax-color-primary, #3b82f6);border-color:var(--ax-color-primary, #3b82f6)}.ax-data-list .ax-data-list__item.ax-data-list__item--selected:hover{background-color:var(--ax-color-primary-light-hover, #bfdbfe)}.ax-data-list .ax-data-list__item.ax-data-list__item--disabled{cursor:not-allowed;opacity:60%;background-color:var(--ax-color-disabled, #f9fafb);color:var(--ax-color-text-disabled, #9ca3af)}.ax-data-list .ax-data-list__item.ax-data-list__item--disabled:hover{background-color:var(--ax-color-disabled, #f9fafb)}.ax-data-list .ax-data-list__item.ax-data-list__item--focused{background-color:var(--ax-color-focus, #eff6ff);outline:2px solid var(--ax-color-primary, #3b82f6);outline-offset:-2px}.ax-data-list .ax-data-list__item.ax-data-list__item--loading{pointer-events:none;cursor:default;background-color:var(--ax-color-background, #ffffff)}.ax-data-list .ax-data-list__item.ax-data-list__item--loading:hover{background-color:var(--ax-color-background, #ffffff)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-0{padding-inline-start:calc(var(--spacing, .25rem) * 4)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-1{padding-inline-start:calc(var(--spacing, .25rem) * 10)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-2{padding-inline-start:calc(var(--spacing, .25rem) * 16)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-3{padding-inline-start:5.5rem}.ax-data-list .ax-data-list__item.ax-data-list__item--level-4{padding-inline-start:calc(var(--spacing, .25rem) * 28)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-5{padding-inline-start:8.5rem}.ax-data-list .ax-data-list__checkbox{margin-inline-end:calc(var(--spacing, .25rem) * 3);flex-shrink:0}.ax-data-list .ax-data-list__expand-button{margin-inline-end:calc(var(--spacing, .25rem) * 2);display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;transition:all .15s ease-in-out}.ax-data-list .ax-data-list__expand-button:hover{background-color:var(--ax-color-hover, #f3f4f6)}.ax-data-list .ax-data-list__expand-button:focus{outline:2px solid var(--ax-color-primary, #3b82f6);outline-offset:2px}.ax-data-list .ax-data-list__expand-button.ax-data-list__expand-button--expanded .ax-data-list__expand-icon{rotate:90deg}.ax-data-list .ax-data-list__expand-icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);transition:transform .15s ease-in-out;color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list .ax-data-list__content-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}.ax-data-list .ax-data-list__text{--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--ax-color-text, #111827)}.ax-data-list .ax-data-list__text.ax-data-list__text--truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-data-list .ax-data-list__description{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list .ax-data-list__description.ax-data-list__description--truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-data-list__loading-skeleton{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.ax-data-list__skeleton-checkbox{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;border-radius:.25rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.ax-data-list__skeleton-content{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.ax-data-list__skeleton-text{height:calc(var(--spacing, .25rem) * 4);width:80%;border-radius:.25rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.ax-data-list__skeleton-description{height:calc(var(--spacing, .25rem) * 3);width:calc(3/5 * 100%);border-radius:.25rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(max-width:768px){.ax-data-list .ax-data-list__item{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-1{padding-inline-start:calc(var(--spacing, .25rem) * 8)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-2{padding-inline-start:calc(var(--spacing, .25rem) * 12)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-3{padding-inline-start:calc(var(--spacing, .25rem) * 16)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-4{padding-inline-start:calc(var(--spacing, .25rem) * 20)}.ax-data-list .ax-data-list__item.ax-data-list__item--level-5{padding-inline-start:calc(var(--spacing, .25rem) * 24)}.ax-data-list .ax-data-list__checkbox{margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ax-data-list .ax-data-list__expand-button{margin-inline-end:calc(var(--spacing, .25rem) * 1)}}@media(prefers-contrast:high){.ax-data-list{border-width:2px}.ax-data-list .ax-data-list__item{border-bottom-width:2px}.ax-data-list .ax-data-list__item:focus{outline-width:3px}.ax-data-list .ax-data-list__item.ax-data-list__item--selected{border-width:2px}.ax-data-list .ax-data-list__expand-button:focus{outline-width:3px}}@media(prefers-reduced-motion:reduce){.ax-data-list .ax-data-list__item,.ax-data-list .ax-data-list__expand-icon{transition:none}.ax-data-list .ax-data-list__loading-spinner{animation:none}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@keyframes spin{to{transform:rotate(360deg)}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], isItemTruncated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemTruncated", required: false }] }], showItemTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemTooltip", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], tooltipField: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], descriptionField: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionField", required: false }] }], levelField: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelField", required: false }] }], childrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenField", required: false }] }], expandedField: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedField", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], selectionChange: [{

package/fesm2022/acorex-components-data-pager.mjs

@@ -27,10 +27,10 @@ class AXDataPagerChangedEvent extends AXEvent {
     }
 }
 class AXDataPagerParentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerParentComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerParentComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerParentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerParentComponent, decorators: [{
             type: Injectable
         }] });
 class AXDataPagerChild extends MXInteractiveComponent {
@@ -58,10 +58,10 @@ class AXDataPagerChild extends MXInteractiveComponent {
     async ngAfterViewInit() {
         await this.applyParent();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerChild, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerChild }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerChild, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerChild }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerChild, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerChild, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -90,14 +90,14 @@ class AXDataPagerInfoComponent extends AXDataPagerChild {
             this.cdr.markForCheck();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXDataPagerInfoComponent, isStandalone: true, selector: "ax-data-pager-info", inputs: { text: "text" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: AXDataPagerInfoComponent, isStandalone: true, selector: "ax-data-pager-info", inputs: { text: "text" }, providers: [
             { provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXDataPagerInfoComponent },
         ], usesInheritance: true, ngImport: i0, template: `<ax-text> {{ _textFormatted | translate | async }}</ax-text>`, isInline: true, dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerInfoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-info',
@@ -148,8 +148,8 @@ class AXDataPagerInputSelectorComponent extends AXDataPagerChild {
             this._parent.goToPage(e.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerInputSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXDataPagerInputSelectorComponent, isStandalone: true, selector: "ax-data-pager-input-selector", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerInputSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: AXDataPagerInputSelectorComponent, isStandalone: true, selector: "ax-data-pager-input-selector", providers: [
             {
                 provide: AXDataPagerChild,
                 useExisting: AXDataPagerInputSelectorComponent,
@@ -170,7 +170,7 @@ class AXDataPagerInputSelectorComponent extends AXDataPagerChild {
     </ax-number-box>
   `, isInline: true, dependencies: [{ kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerInputSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerInputSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-input-selector',
@@ -233,8 +233,8 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
             return;
         this._parent.goNextPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerNextButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXDataPagerNextButtonsComponent, isStandalone: true, selector: "ax-data-pager-next-buttons", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerNextButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: AXDataPagerNextButtonsComponent, isStandalone: true, selector: "ax-data-pager-next-buttons", providers: [
             { provide: AXDataPagerChild, useExisting: AXDataPagerNextButtonsComponent },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXDataPagerNextButtonsComponent },
@@ -268,7 +268,7 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
     </ax-button>
   `, isInline: true, dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerNextButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-next-buttons',
@@ -396,8 +396,8 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
             this._parent.goToPage(Number(e.data));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerNumericSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXDataPagerNumericSelectorComponent, isStandalone: true, selector: "ax-data-pager-numeric-selector", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerNumericSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXDataPagerNumericSelectorComponent, isStandalone: true, selector: "ax-data-pager-numeric-selector", providers: [
             {
                 provide: AXDataPagerChild,
                 useExisting: AXDataPagerNumericSelectorComponent,
@@ -451,7 +451,7 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
     </ax-button>
   `, isInline: true, dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerNumericSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerNumericSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-numeric-selector',
@@ -566,8 +566,8 @@ class AXDataPagerPageSizesComponent extends AXDataPagerChild {
         this._size = this._parent.size = Number(e.data.size);
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerPageSizesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXDataPagerPageSizesComponent, isStandalone: true, selector: "ax-data-pager-page-sizes", inputs: { sizes: "sizes" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerPageSizesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXDataPagerPageSizesComponent, isStandalone: true, selector: "ax-data-pager-page-sizes", inputs: { sizes: "sizes" }, providers: [
             { provide: AXDataPagerChild, useExisting: AXDataPagerPageSizesComponent },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXDataPagerPageSizesComponent },
@@ -588,7 +588,7 @@ class AXDataPagerPageSizesComponent extends AXDataPagerChild {
     <!-- <span >items per page</span> -->
   `, isInline: true, dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerPageSizesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-page-sizes',
@@ -661,8 +661,8 @@ class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
             return;
         this._parent.goPrevPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerPrevButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXDataPagerPrevButtonsComponent, isStandalone: true, selector: "ax-data-pager-prev-buttons", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerPrevButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: AXDataPagerPrevButtonsComponent, isStandalone: true, selector: "ax-data-pager-prev-buttons", providers: [
             { provide: AXDataPagerChild, useExisting: AXDataPagerPrevButtonsComponent },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXDataPagerPrevButtonsComponent },
@@ -696,7 +696,7 @@ class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
     </ax-button>
   `, isInline: true, dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerPrevButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-prev-buttons',
@@ -987,8 +987,8 @@ class AXDataPagerComponent extends MXValueComponent {
     get __hostClass() {
         return `ax-sm`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXDataPagerComponent, isStandalone: true, selector: "ax-data-pager", inputs: { value: "value", name: "name", disabled: "disabled", readonly: "readonly", isLoading: "isLoading", size: "size", total: "total", displayMode: "displayMode" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", disabledChange: "disabledChange", readonlyChange: "readonlyChange", displayModeChange: "displayModeChange", onChanged: "onChanged" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXDataPagerComponent, isStandalone: true, selector: "ax-data-pager", inputs: { value: "value", name: "name", disabled: "disabled", readonly: "readonly", isLoading: "isLoading", size: "size", total: "total", displayMode: "displayMode" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", disabledChange: "disabledChange", readonlyChange: "readonlyChange", displayModeChange: "displayModeChange", onChanged: "onChanged" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXDataPagerParentComponent, useExisting: AXDataPagerComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -998,7 +998,7 @@ class AXDataPagerComponent extends MXValueComponent {
             { provide: AXComponent, useExisting: AXDataPagerComponent },
         ], usesInheritance: true, ngImport: i0, template: "@switch (displayMode) {\n  @case ('full') {\n    <ax-prefix class=\"ax-full-prefix\">\n      <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n      <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n    </ax-prefix>\n    <ax-suffix class=\"ax-full-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @case ('compact') {\n    <ax-prefix class=\"ax-compact-prefix\">\n      <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n      <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n      <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n    </ax-prefix>\n    <ax-suffix class=\"ax-compact-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @default {\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  }\n}\n", styles: ["@layer properties;@layer components{html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-first-page,html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-last-page{rotate:180deg}ax-data-pager{display:flex;width:100%;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);overflow-x:auto;padding-inline:calc(var(--spacing, .25rem) * 0);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5)}ax-data-pager ax-button-group{display:flex!important;gap:calc(var(--spacing, .25rem) * 4)!important;border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ax-data-pager ax-button-group ax-button-item{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;padding:calc(var(--spacing, .25rem) * 0)!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-style:var(--tw-border-style)!important;border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:calc(var(--spacing, .25rem) * 16)!important;max-width:calc(var(--spacing, .25rem) * 40)!important;text-align:center!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{margin-inline-end:calc(var(--spacing, .25rem) * 2)}:is(ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector) ax-skeleton{width:calc(var(--spacing, .25rem) * 28);border-radius:var(--ax-sys-border-radius)}ax-data-pager ax-data-pager-next-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-prev-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-numeric-selector .ax-data-pager-num-button{margin-inline:.2}ax-data-pager ax-data-pager-numeric-selector{display:flex;flex-wrap:nowrap}ax-data-pager .ax-full-prefix,ax-data-pager .ax-full-suffix,ax-data-pager .ax-compact-prefix{display:flex}ax-data-pager .ax-compact-prefix ax-data-pager-next-buttons,ax-data-pager .ax-compact-prefix ax-data-pager-prev-buttons{display:flex;flex-wrap:nowrap}ax-data-pager ax-data-pager-info ax-text{margin-inline-end:.2;white-space:nowrap;color:rgba(var(--ax-sys-color-lightest-surface))}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "component", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-data-pager', inputs: ['value', 'name', 'disabled', 'readonly'], outputs: ['valueChange', 'onValueChanged', 'disabledChange', 'readonlyChange'], encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXDataPagerParentComponent, useExisting: AXDataPagerComponent },
@@ -1055,8 +1055,8 @@ const MODULES = [
     AXSkeletonModule,
 ];
 class AXDataPagerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerModule, imports: [CommonModule,
             FormsModule,
             AXButtonModule,
             AXButtonGroupModule,
@@ -1077,9 +1077,9 @@ class AXDataPagerModule {
             AXDataPagerNumericSelectorComponent,
             AXDataPagerInputSelectorComponent,
             AXDataPagerInfoComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerModule, imports: [MODULES, COMPONENT] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerModule, imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDataPagerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],