@acorex/components 21.0.2-next.35 → 21.0.2-next.37

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

@@ -13,52 +13,52 @@ class AXDataListComponent extends MXValueComponent {
     constructor() {
         super();
         // Inputs
-        this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
-        this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
-        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
-        this.showCheckbox = input(true, ...(ngDevMode ? [{ debugName: "showCheckbox" }] : []));
-        this.itemHeight = input(40, ...(ngDevMode ? [{ debugName: "itemHeight" }] : []));
-        this.isItemTruncated = input(true, ...(ngDevMode ? [{ debugName: "isItemTruncated" }] : []));
-        this.showItemTooltip = input(true, ...(ngDevMode ? [{ debugName: "showItemTooltip" }] : []));
-        this.disabledField = input('disabled', ...(ngDevMode ? [{ debugName: "disabledField" }] : []));
-        this.tooltipField = input('tooltip', ...(ngDevMode ? [{ debugName: "tooltipField" }] : []));
-        this.textField = input('text', ...(ngDevMode ? [{ debugName: "textField" }] : []));
-        this.descriptionField = input('description', ...(ngDevMode ? [{ debugName: "descriptionField" }] : []));
-        this.levelField = input('level', ...(ngDevMode ? [{ debugName: "levelField" }] : []));
-        this.childrenField = input('children', ...(ngDevMode ? [{ debugName: "childrenField" }] : []));
-        this.expandedField = input('expanded', ...(ngDevMode ? [{ debugName: "expandedField" }] : []));
+        this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        this.showCheckbox = input(true, ...(ngDevMode ? [{ debugName: "showCheckbox" }] : /* istanbul ignore next */ []));
+        this.itemHeight = input(40, ...(ngDevMode ? [{ debugName: "itemHeight" }] : /* istanbul ignore next */ []));
+        this.isItemTruncated = input(true, ...(ngDevMode ? [{ debugName: "isItemTruncated" }] : /* istanbul ignore next */ []));
+        this.showItemTooltip = input(true, ...(ngDevMode ? [{ debugName: "showItemTooltip" }] : /* istanbul ignore next */ []));
+        this.disabledField = input('disabled', ...(ngDevMode ? [{ debugName: "disabledField" }] : /* istanbul ignore next */ []));
+        this.tooltipField = input('tooltip', ...(ngDevMode ? [{ debugName: "tooltipField" }] : /* istanbul ignore next */ []));
+        this.textField = input('text', ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
+        this.descriptionField = input('description', ...(ngDevMode ? [{ debugName: "descriptionField" }] : /* istanbul ignore next */ []));
+        this.levelField = input('level', ...(ngDevMode ? [{ debugName: "levelField" }] : /* istanbul ignore next */ []));
+        this.childrenField = input('children', ...(ngDevMode ? [{ debugName: "childrenField" }] : /* istanbul ignore next */ []));
+        this.expandedField = input('expanded', ...(ngDevMode ? [{ debugName: "expandedField" }] : /* istanbul ignore next */ []));
         // Templates
-        this.itemTemplate = input(...(ngDevMode ? [undefined, { debugName: "itemTemplate" }] : []));
-        this.emptyTemplate = input(...(ngDevMode ? [undefined, { debugName: "emptyTemplate" }] : []));
-        this.loadingTemplate = input(...(ngDevMode ? [undefined, { debugName: "loadingTemplate" }] : []));
+        this.itemTemplate = input(...(ngDevMode ? [undefined, { debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        this.emptyTemplate = input(...(ngDevMode ? [undefined, { debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+        this.loadingTemplate = input(...(ngDevMode ? [undefined, { debugName: "loadingTemplate" }] : /* istanbul ignore next */ []));
         // Outputs
         this.selectionChange = new EventEmitter();
         this.itemClick = new EventEmitter();
         this.itemDoubleClick = new EventEmitter();
         this.expandChange = new EventEmitter();
         // Internal signals
-        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-        this.totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
-        this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
-        this.selectedKeys = signal([], ...(ngDevMode ? [{ debugName: "selectedKeys" }] : []));
-        this.focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
-        this.expandedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedItems" }] : []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+        this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+        this.selectedKeys = signal([], ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+        this.focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+        this.expandedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedItems" }] : /* istanbul ignore next */ []));
         // List data source for virtual scrolling
         this.listDataSource = null;
         // Computed values
         this.hasItems = computed(() => {
             const dataSourceItems = this.listDataSource?.source?.cachedItems?.length > 0;
             return dataSourceItems;
-        }, ...(ngDevMode ? [{ debugName: "hasItems" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "hasItems" }] : /* istanbul ignore next */ []));
         this.isEmpty = computed(() => {
             const notLoading = !this.loading();
             const noDataSourceItems = !this.listDataSource?.source?.cachedItems?.length;
             return notLoading && noDataSourceItems;
-        }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
-        this.isMultipleSelection = computed(() => this.multiple(), ...(ngDevMode ? [{ debugName: "isMultipleSelection" }] : []));
-        this.showCheckboxes = computed(() => this.showCheckbox(), ...(ngDevMode ? [{ debugName: "showCheckboxes" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+        this.isMultipleSelection = computed(() => this.multiple(), ...(ngDevMode ? [{ debugName: "isMultipleSelection" }] : /* istanbul ignore next */ []));
+        this.showCheckboxes = computed(() => this.showCheckbox(), ...(ngDevMode ? [{ debugName: "showCheckboxes" }] : /* istanbul ignore next */ []));
         // Selection model
-        this.selectionModel = model(...(ngDevMode ? [undefined, { debugName: "selectionModel" }] : []));
+        this.selectionModel = model(...(ngDevMode ? [undefined, { debugName: "selectionModel" }] : /* istanbul ignore next */ []));
         // Track by function for virtual scrolling
         this.trackByFn = (index, item) => {
             if (!item) {
@@ -346,13 +346,13 @@ class AXDataListComponent extends MXValueComponent {
     shouldShowTooltip(item) {
         return this.showItemTooltip() && !!this.getItemTooltip(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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: [".ax-data-list{display:flex;flex-direction:column;width:100%;height:100%;background:var(--ax-color-background, #ffffff);border:1px solid var(--ax-color-border, #e5e7eb);border-radius:var(--ax-border-radius, .375rem);overflow:hidden}.ax-data-list--loading .ax-data-list__content{opacity:.6;pointer-events:none}.ax-data-list__loading{display:flex;align-items:center;justify-content:center;padding:2rem;min-height:200px}.ax-data-list__loading-default{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list__loading-spinner{width:2rem;height:2rem;border:2px solid var(--ax-color-border, #e5e7eb);border-top:2px solid var(--ax-color-primary, #3b82f6);border-radius:50%;animation:spin 1s linear infinite}.ax-data-list__empty{display:flex;align-items:center;justify-content:center;padding:2rem;min-height:200px}.ax-data-list__empty-default{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--ax-color-text-secondary, #6b7280);text-align:center}.ax-data-list__empty-icon{width:3rem;height:3rem;opacity:.5}.ax-data-list__content{flex:1;overflow:hidden}.ax-data-list__viewport{height:100%;width:100%}.ax-data-list__viewport--truncated .ax-data-list__text,.ax-data-list__viewport--truncated .ax-data-list__description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ax-data-list__item{display:flex;align-items:center;padding:.5rem 1rem;cursor:pointer;transition:all .15s ease-in-out;border-bottom:1px solid var(--ax-color-border-light, #f3f4f6);position:relative}.ax-data-list__item:hover:not(.ax-data-list__item--disabled){background-color:var(--ax-color-hover, #f9fafb)}.ax-data-list__item:focus{outline:2px solid var(--ax-color-primary, #3b82f6);outline-offset:-2px}.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__item--selected:hover{background-color:var(--ax-color-primary-light-hover, #bfdbfe)}.ax-data-list__item--disabled{cursor:not-allowed;opacity:.6;background-color:var(--ax-color-disabled, #f9fafb);color:var(--ax-color-text-disabled, #9ca3af)}.ax-data-list__item--disabled:hover{background-color:var(--ax-color-disabled, #f9fafb)}.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__item--loading{cursor:default;pointer-events:none;background-color:var(--ax-color-background, #ffffff)}.ax-data-list__item--loading:hover{background-color:var(--ax-color-background, #ffffff)}.ax-data-list__item--level-0{padding-left:1rem}.ax-data-list__item--level-1{padding-left:2.5rem}.ax-data-list__item--level-2{padding-left:4rem}.ax-data-list__item--level-3{padding-left:5.5rem}.ax-data-list__item--level-4{padding-left:7rem}.ax-data-list__item--level-5{padding-left:8.5rem}.ax-data-list__checkbox{margin-right:.75rem;flex-shrink:0}.ax-data-list__expand-button{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-right:.5rem;cursor:pointer;border-radius:.25rem;transition:all .15s ease-in-out;flex-shrink:0}.ax-data-list__expand-button:hover{background-color:var(--ax-color-hover, #f3f4f6)}.ax-data-list__expand-button:focus{outline:2px solid var(--ax-color-primary, #3b82f6);outline-offset:2px}.ax-data-list__expand-button--expanded .ax-data-list__expand-icon{transform:rotate(90deg)}.ax-data-list__expand-icon{width:1rem;height:1rem;transition:transform .15s ease-in-out;color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list__content-wrapper{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.ax-data-list__text{font-weight:500;color:var(--ax-color-text, #111827);line-height:1.25}.ax-data-list__text--truncated{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ax-data-list__description{font-size:.875rem;color:var(--ax-color-text-secondary, #6b7280);line-height:1.25}.ax-data-list__description--truncated{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.ax-data-list__item{padding:.75rem 1rem}.ax-data-list__item--level-1{padding-left:2rem}.ax-data-list__item--level-2{padding-left:3rem}.ax-data-list__item--level-3{padding-left:4rem}.ax-data-list__item--level-4{padding-left:5rem}.ax-data-list__item--level-5{padding-left:6rem}.ax-data-list__checkbox{margin-right:.5rem}.ax-data-list__expand-button{margin-right:.25rem}}@media (prefers-contrast: high){.ax-data-list{border-width:2px}.ax-data-list__item{border-bottom-width:2px}.ax-data-list__item:focus{outline-width:3px}.ax-data-list__item--selected{border-width:2px}.ax-data-list__expand-button:focus{outline-width:3px}}@media (prefers-reduced-motion: reduce){.ax-data-list__item,.ax-data-list__expand-icon{transition:none}.ax-data-list__loading-spinner{animation:none}}.ax-data-list__loading-skeleton{display:flex;align-items:center;width:100%;gap:.75rem}.ax-data-list__skeleton-checkbox{width:1rem;height:1rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;border-radius:.25rem;animation:shimmer 1.5s infinite;flex-shrink:0}.ax-data-list__skeleton-content{flex:1;display:flex;flex-direction:column;gap:.5rem}.ax-data-list__skeleton-text{height:1rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;border-radius:.25rem;animation:shimmer 1.5s infinite;width:80%}.ax-data-list__skeleton-description{height:.75rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;border-radius:.25rem;animation:shimmer 1.5s infinite;width:60%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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: [".ax-data-list{background:var(--ax-color-background,#fff);border:1px solid var(--ax-color-border,#e5e7eb);border-radius:var(--ax-border-radius,.375rem);flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}--loading.ax-data-list .ax-data-list__content{opacity:.6;pointer-events:none}__loading.ax-data-list{justify-content:center;align-items:center;min-height:200px;padding:2rem;display:flex}__loading-default.ax-data-list{color:var(--ax-color-text-secondary,#6b7280);flex-direction:column;align-items:center;gap:1rem;display:flex}__loading-spinner.ax-data-list{border:2px solid var(--ax-color-border,#e5e7eb);border-top:2px solid var(--ax-color-primary,#3b82f6);border-radius:50%;width:2rem;height:2rem;animation:1s linear infinite spin}__empty.ax-data-list{justify-content:center;align-items:center;min-height:200px;padding:2rem;display:flex}__empty-default.ax-data-list{color:var(--ax-color-text-secondary,#6b7280);text-align:center;flex-direction:column;align-items:center;gap:1rem;display:flex}__empty-icon.ax-data-list{opacity:.5;width:3rem;height:3rem}__content.ax-data-list{flex:1;overflow:hidden}__viewport.ax-data-list{width:100%;height:100%}--truncated__viewport.ax-data-list .ax-data-list__text,--truncated__viewport.ax-data-list .ax-data-list__description{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}__item.ax-data-list{cursor:pointer;border-bottom:1px solid var(--ax-color-border-light,#f3f4f6);align-items:center;padding:.5rem 1rem;transition:all .15s ease-in-out;display:flex;position:relative}__item.ax-data-list:hover:not(--disabled__item.ax-data-list){background-color:var(--ax-color-hover,#f9fafb)}__item.ax-data-list:focus{outline:2px solid var(--ax-color-primary,#3b82f6);outline-offset:-2px}--selected__item.ax-data-list{background-color:var(--ax-color-primary-light,#dbeafe);color:var(--ax-color-primary,#3b82f6);border-color:var(--ax-color-primary,#3b82f6)}--selected__item.ax-data-list:hover{background-color:var(--ax-color-primary-light-hover,#bfdbfe)}--disabled__item.ax-data-list{cursor:not-allowed;opacity:.6;background-color:var(--ax-color-disabled,#f9fafb);color:var(--ax-color-text-disabled,#9ca3af)}--disabled__item.ax-data-list:hover{background-color:var(--ax-color-disabled,#f9fafb)}--focused__item.ax-data-list{background-color:var(--ax-color-focus,#eff6ff);outline:2px solid var(--ax-color-primary,#3b82f6);outline-offset:-2px}--loading__item.ax-data-list{cursor:default;pointer-events:none;background-color:var(--ax-color-background,#fff)}--loading__item.ax-data-list:hover{background-color:var(--ax-color-background,#fff)}--level-0__item.ax-data-list{padding-left:1rem}--level-1__item.ax-data-list{padding-left:2.5rem}--level-2__item.ax-data-list{padding-left:4rem}--level-3__item.ax-data-list{padding-left:5.5rem}--level-4__item.ax-data-list{padding-left:7rem}--level-5__item.ax-data-list{padding-left:8.5rem}__checkbox.ax-data-list{flex-shrink:0;margin-right:.75rem}__expand-button.ax-data-list{cursor:pointer;border-radius:.25rem;flex-shrink:0;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;margin-right:.5rem;transition:all .15s ease-in-out;display:flex}__expand-button.ax-data-list:hover{background-color:var(--ax-color-hover,#f3f4f6)}__expand-button.ax-data-list:focus{outline:2px solid var(--ax-color-primary,#3b82f6);outline-offset:2px}--expanded__expand-button.ax-data-list .ax-data-list__expand-icon{transform:rotate(90deg)}__expand-icon.ax-data-list{width:1rem;height:1rem;color:var(--ax-color-text-secondary,#6b7280);transition:transform .15s ease-in-out}__content-wrapper.ax-data-list{flex-direction:column;flex:1;gap:.25rem;min-width:0;display:flex}__text.ax-data-list{color:var(--ax-color-text,#111827);font-weight:500;line-height:1.25}--truncated__text.ax-data-list{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}__description.ax-data-list{color:var(--ax-color-text-secondary,#6b7280);font-size:.875rem;line-height:1.25}--truncated__description.ax-data-list{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:768px){__item.ax-data-list{padding:.75rem 1rem}--level-1__item.ax-data-list{padding-left:2rem}--level-2__item.ax-data-list{padding-left:3rem}--level-3__item.ax-data-list{padding-left:4rem}--level-4__item.ax-data-list{padding-left:5rem}--level-5__item.ax-data-list{padding-left:6rem}__checkbox.ax-data-list{margin-right:.5rem}__expand-button.ax-data-list{margin-right:.25rem}}@media(prefers-contrast:high){.ax-data-list{border-width:2px}__item.ax-data-list{border-bottom-width:2px}__item.ax-data-list:focus{outline-width:3px}--selected__item.ax-data-list{border-width:2px}__expand-button.ax-data-list:focus{outline-width:3px}}@media(prefers-reduced-motion:reduce){__item.ax-data-list,__expand-icon.ax-data-list{transition:none}__loading-spinner.ax-data-list{animation:none}}.ax-data-list__loading-skeleton{align-items:center;gap:.75rem;width:100%;display:flex}.ax-data-list__skeleton-checkbox{background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%) 0 0/200% 100%;border-radius:.25rem;flex-shrink:0;width:1rem;height:1rem;animation:1.5s infinite shimmer}.ax-data-list__skeleton-content{flex-direction:column;flex:1;gap:.5rem;display:flex}.ax-data-list__skeleton-text{background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%) 0 0/200% 100%;border-radius:.25rem;width:80%;height:1rem;animation:1.5s infinite shimmer}.ax-data-list__skeleton-description{background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%) 0 0/200% 100%;border-radius:.25rem;width:60%;height:.75rem;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-data-list', changeDetection: ChangeDetectionStrategy.OnPush, 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: [".ax-data-list{display:flex;flex-direction:column;width:100%;height:100%;background:var(--ax-color-background, #ffffff);border:1px solid var(--ax-color-border, #e5e7eb);border-radius:var(--ax-border-radius, .375rem);overflow:hidden}.ax-data-list--loading .ax-data-list__content{opacity:.6;pointer-events:none}.ax-data-list__loading{display:flex;align-items:center;justify-content:center;padding:2rem;min-height:200px}.ax-data-list__loading-default{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list__loading-spinner{width:2rem;height:2rem;border:2px solid var(--ax-color-border, #e5e7eb);border-top:2px solid var(--ax-color-primary, #3b82f6);border-radius:50%;animation:spin 1s linear infinite}.ax-data-list__empty{display:flex;align-items:center;justify-content:center;padding:2rem;min-height:200px}.ax-data-list__empty-default{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--ax-color-text-secondary, #6b7280);text-align:center}.ax-data-list__empty-icon{width:3rem;height:3rem;opacity:.5}.ax-data-list__content{flex:1;overflow:hidden}.ax-data-list__viewport{height:100%;width:100%}.ax-data-list__viewport--truncated .ax-data-list__text,.ax-data-list__viewport--truncated .ax-data-list__description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ax-data-list__item{display:flex;align-items:center;padding:.5rem 1rem;cursor:pointer;transition:all .15s ease-in-out;border-bottom:1px solid var(--ax-color-border-light, #f3f4f6);position:relative}.ax-data-list__item:hover:not(.ax-data-list__item--disabled){background-color:var(--ax-color-hover, #f9fafb)}.ax-data-list__item:focus{outline:2px solid var(--ax-color-primary, #3b82f6);outline-offset:-2px}.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__item--selected:hover{background-color:var(--ax-color-primary-light-hover, #bfdbfe)}.ax-data-list__item--disabled{cursor:not-allowed;opacity:.6;background-color:var(--ax-color-disabled, #f9fafb);color:var(--ax-color-text-disabled, #9ca3af)}.ax-data-list__item--disabled:hover{background-color:var(--ax-color-disabled, #f9fafb)}.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__item--loading{cursor:default;pointer-events:none;background-color:var(--ax-color-background, #ffffff)}.ax-data-list__item--loading:hover{background-color:var(--ax-color-background, #ffffff)}.ax-data-list__item--level-0{padding-left:1rem}.ax-data-list__item--level-1{padding-left:2.5rem}.ax-data-list__item--level-2{padding-left:4rem}.ax-data-list__item--level-3{padding-left:5.5rem}.ax-data-list__item--level-4{padding-left:7rem}.ax-data-list__item--level-5{padding-left:8.5rem}.ax-data-list__checkbox{margin-right:.75rem;flex-shrink:0}.ax-data-list__expand-button{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-right:.5rem;cursor:pointer;border-radius:.25rem;transition:all .15s ease-in-out;flex-shrink:0}.ax-data-list__expand-button:hover{background-color:var(--ax-color-hover, #f3f4f6)}.ax-data-list__expand-button:focus{outline:2px solid var(--ax-color-primary, #3b82f6);outline-offset:2px}.ax-data-list__expand-button--expanded .ax-data-list__expand-icon{transform:rotate(90deg)}.ax-data-list__expand-icon{width:1rem;height:1rem;transition:transform .15s ease-in-out;color:var(--ax-color-text-secondary, #6b7280)}.ax-data-list__content-wrapper{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.ax-data-list__text{font-weight:500;color:var(--ax-color-text, #111827);line-height:1.25}.ax-data-list__text--truncated{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ax-data-list__description{font-size:.875rem;color:var(--ax-color-text-secondary, #6b7280);line-height:1.25}.ax-data-list__description--truncated{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.ax-data-list__item{padding:.75rem 1rem}.ax-data-list__item--level-1{padding-left:2rem}.ax-data-list__item--level-2{padding-left:3rem}.ax-data-list__item--level-3{padding-left:4rem}.ax-data-list__item--level-4{padding-left:5rem}.ax-data-list__item--level-5{padding-left:6rem}.ax-data-list__checkbox{margin-right:.5rem}.ax-data-list__expand-button{margin-right:.25rem}}@media (prefers-contrast: high){.ax-data-list{border-width:2px}.ax-data-list__item{border-bottom-width:2px}.ax-data-list__item:focus{outline-width:3px}.ax-data-list__item--selected{border-width:2px}.ax-data-list__expand-button:focus{outline-width:3px}}@media (prefers-reduced-motion: reduce){.ax-data-list__item,.ax-data-list__expand-icon{transition:none}.ax-data-list__loading-spinner{animation:none}}.ax-data-list__loading-skeleton{display:flex;align-items:center;width:100%;gap:.75rem}.ax-data-list__skeleton-checkbox{width:1rem;height:1rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;border-radius:.25rem;animation:shimmer 1.5s infinite;flex-shrink:0}.ax-data-list__skeleton-content{flex:1;display:flex;flex-direction:column;gap:.5rem}.ax-data-list__skeleton-text{height:1rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;border-radius:.25rem;animation:shimmer 1.5s infinite;width:80%}.ax-data-list__skeleton-description{height:.75rem;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;border-radius:.25rem;animation:shimmer 1.5s infinite;width:60%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { selectionChange: [{
+            args: [{ selector: 'ax-data-list', changeDetection: ChangeDetectionStrategy.OnPush, 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: [".ax-data-list{background:var(--ax-color-background,#fff);border:1px solid var(--ax-color-border,#e5e7eb);border-radius:var(--ax-border-radius,.375rem);flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}--loading.ax-data-list .ax-data-list__content{opacity:.6;pointer-events:none}__loading.ax-data-list{justify-content:center;align-items:center;min-height:200px;padding:2rem;display:flex}__loading-default.ax-data-list{color:var(--ax-color-text-secondary,#6b7280);flex-direction:column;align-items:center;gap:1rem;display:flex}__loading-spinner.ax-data-list{border:2px solid var(--ax-color-border,#e5e7eb);border-top:2px solid var(--ax-color-primary,#3b82f6);border-radius:50%;width:2rem;height:2rem;animation:1s linear infinite spin}__empty.ax-data-list{justify-content:center;align-items:center;min-height:200px;padding:2rem;display:flex}__empty-default.ax-data-list{color:var(--ax-color-text-secondary,#6b7280);text-align:center;flex-direction:column;align-items:center;gap:1rem;display:flex}__empty-icon.ax-data-list{opacity:.5;width:3rem;height:3rem}__content.ax-data-list{flex:1;overflow:hidden}__viewport.ax-data-list{width:100%;height:100%}--truncated__viewport.ax-data-list .ax-data-list__text,--truncated__viewport.ax-data-list .ax-data-list__description{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}__item.ax-data-list{cursor:pointer;border-bottom:1px solid var(--ax-color-border-light,#f3f4f6);align-items:center;padding:.5rem 1rem;transition:all .15s ease-in-out;display:flex;position:relative}__item.ax-data-list:hover:not(--disabled__item.ax-data-list){background-color:var(--ax-color-hover,#f9fafb)}__item.ax-data-list:focus{outline:2px solid var(--ax-color-primary,#3b82f6);outline-offset:-2px}--selected__item.ax-data-list{background-color:var(--ax-color-primary-light,#dbeafe);color:var(--ax-color-primary,#3b82f6);border-color:var(--ax-color-primary,#3b82f6)}--selected__item.ax-data-list:hover{background-color:var(--ax-color-primary-light-hover,#bfdbfe)}--disabled__item.ax-data-list{cursor:not-allowed;opacity:.6;background-color:var(--ax-color-disabled,#f9fafb);color:var(--ax-color-text-disabled,#9ca3af)}--disabled__item.ax-data-list:hover{background-color:var(--ax-color-disabled,#f9fafb)}--focused__item.ax-data-list{background-color:var(--ax-color-focus,#eff6ff);outline:2px solid var(--ax-color-primary,#3b82f6);outline-offset:-2px}--loading__item.ax-data-list{cursor:default;pointer-events:none;background-color:var(--ax-color-background,#fff)}--loading__item.ax-data-list:hover{background-color:var(--ax-color-background,#fff)}--level-0__item.ax-data-list{padding-left:1rem}--level-1__item.ax-data-list{padding-left:2.5rem}--level-2__item.ax-data-list{padding-left:4rem}--level-3__item.ax-data-list{padding-left:5.5rem}--level-4__item.ax-data-list{padding-left:7rem}--level-5__item.ax-data-list{padding-left:8.5rem}__checkbox.ax-data-list{flex-shrink:0;margin-right:.75rem}__expand-button.ax-data-list{cursor:pointer;border-radius:.25rem;flex-shrink:0;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;margin-right:.5rem;transition:all .15s ease-in-out;display:flex}__expand-button.ax-data-list:hover{background-color:var(--ax-color-hover,#f3f4f6)}__expand-button.ax-data-list:focus{outline:2px solid var(--ax-color-primary,#3b82f6);outline-offset:2px}--expanded__expand-button.ax-data-list .ax-data-list__expand-icon{transform:rotate(90deg)}__expand-icon.ax-data-list{width:1rem;height:1rem;color:var(--ax-color-text-secondary,#6b7280);transition:transform .15s ease-in-out}__content-wrapper.ax-data-list{flex-direction:column;flex:1;gap:.25rem;min-width:0;display:flex}__text.ax-data-list{color:var(--ax-color-text,#111827);font-weight:500;line-height:1.25}--truncated__text.ax-data-list{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}__description.ax-data-list{color:var(--ax-color-text-secondary,#6b7280);font-size:.875rem;line-height:1.25}--truncated__description.ax-data-list{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:768px){__item.ax-data-list{padding:.75rem 1rem}--level-1__item.ax-data-list{padding-left:2rem}--level-2__item.ax-data-list{padding-left:3rem}--level-3__item.ax-data-list{padding-left:4rem}--level-4__item.ax-data-list{padding-left:5rem}--level-5__item.ax-data-list{padding-left:6rem}__checkbox.ax-data-list{margin-right:.5rem}__expand-button.ax-data-list{margin-right:.25rem}}@media(prefers-contrast:high){.ax-data-list{border-width:2px}__item.ax-data-list{border-bottom-width:2px}__item.ax-data-list:focus{outline-width:3px}--selected__item.ax-data-list{border-width:2px}__expand-button.ax-data-list:focus{outline-width:3px}}@media(prefers-reduced-motion:reduce){__item.ax-data-list,__expand-icon.ax-data-list{transition:none}__loading-spinner.ax-data-list{animation:none}}.ax-data-list__loading-skeleton{align-items:center;gap:.75rem;width:100%;display:flex}.ax-data-list__skeleton-checkbox{background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%) 0 0/200% 100%;border-radius:.25rem;flex-shrink:0;width:1rem;height:1rem;animation:1.5s infinite shimmer}.ax-data-list__skeleton-content{flex-direction:column;flex:1;gap:.5rem;display:flex}.ax-data-list__skeleton-text{background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%) 0 0/200% 100%;border-radius:.25rem;width:80%;height:1rem;animation:1.5s infinite shimmer}.ax-data-list__skeleton-description{background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%) 0 0/200% 100%;border-radius:.25rem;width:60%;height:.75rem;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\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: [{
                 type: Output
             }], itemClick: [{
                 type: Output
@@ -363,7 +363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }], viewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
-            }] } });
+            }], selectionModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionModel", required: false }] }, { type: i0.Output, args: ["selectionModelChange"] }] } });
 
 // Secondary entry point for @acorex/components/data-list