@acorex/components 21.0.0-next.54 → 21.0.0-next.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data-list/index.d.ts +1 -1
- package/fesm2022/acorex-components-data-list.mjs +11 -22
- package/fesm2022/acorex-components-data-list.mjs.map +1 -1
- package/fesm2022/acorex-components-data-pager.mjs +0 -1
- package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
- package/fesm2022/acorex-components-data-table.mjs +1 -1
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-tree-view.mjs +64 -7
- package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
- package/package.json +11 -11
- package/tree-view/index.d.ts +22 -4
package/data-list/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { OnInit, TemplateRef, EventEmitter } from '@angular/core';
|
|
3
|
-
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
4
3
|
import { MXValueComponent, AXDataSource, AXListDataSource } from '@acorex/cdk/common';
|
|
4
|
+
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
5
5
|
|
|
6
6
|
interface AXDataListItem {
|
|
7
7
|
id: string;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import { MXValueComponent, AXListDataSource } from '@acorex/cdk/common';
|
|
2
|
+
import { AXCheckBoxComponent } from '@acorex/components/check-box';
|
|
3
|
+
import { AXTooltipDirective } from '@acorex/components/tooltip';
|
|
4
|
+
import * as i2 from '@angular/cdk/scrolling';
|
|
5
|
+
import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
3
6
|
import * as i1 from '@angular/common';
|
|
4
7
|
import { CommonModule } from '@angular/common';
|
|
8
|
+
import * as i0 from '@angular/core';
|
|
9
|
+
import { input, EventEmitter, signal, computed, model, effect, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
10
|
import { FormsModule } from '@angular/forms';
|
|
6
|
-
import * as i2 from '@angular/cdk/scrolling';
|
|
7
|
-
import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
8
|
-
import { MXValueComponent, AXListDataSource } from '@acorex/cdk/common';
|
|
9
|
-
import { AXTooltipDirective } from '@acorex/components/tooltip';
|
|
10
|
-
import { AXCheckBoxComponent } from '@acorex/components/check-box';
|
|
11
11
|
|
|
12
12
|
class AXDataListComponent extends MXValueComponent {
|
|
13
13
|
constructor() {
|
|
@@ -96,12 +96,10 @@ class AXDataListComponent extends MXValueComponent {
|
|
|
96
96
|
effect(() => {
|
|
97
97
|
const dataSource = this.dataSource();
|
|
98
98
|
if (dataSource) {
|
|
99
|
-
console.log('Data source changed, creating AXListDataSource...');
|
|
100
99
|
this.listDataSource = new AXListDataSource({
|
|
101
100
|
source: dataSource,
|
|
102
101
|
debounceTime: 100, // Add debounce to prevent too many page requests
|
|
103
102
|
});
|
|
104
|
-
console.log('Created AXListDataSource:', this.listDataSource);
|
|
105
103
|
// Set up subscriptions
|
|
106
104
|
this.setupDataSourceSubscription();
|
|
107
105
|
}
|
|
@@ -114,16 +112,13 @@ class AXDataListComponent extends MXValueComponent {
|
|
|
114
112
|
setupDataSourceSubscription() {
|
|
115
113
|
if (!this.dataSource() || !this.listDataSource)
|
|
116
114
|
return;
|
|
117
|
-
console.log('Setting up data source subscription for:', this.dataSource());
|
|
118
115
|
// Subscribe to data source changes
|
|
119
116
|
this.dataSource().onChanged.subscribe((data) => {
|
|
120
|
-
console.log('Data source changed:', data);
|
|
121
117
|
if (data && data.cachedItems) {
|
|
122
118
|
this.totalItems.set(data.totalCount || data.cachedItems.length);
|
|
123
119
|
}
|
|
124
120
|
});
|
|
125
121
|
this.dataSource().onLoadingChanged.subscribe((loading) => {
|
|
126
|
-
console.log('Loading changed:', loading);
|
|
127
122
|
this.loading.set(loading);
|
|
128
123
|
});
|
|
129
124
|
// Load initial data - just trigger the first page load
|
|
@@ -148,7 +143,7 @@ class AXDataListComponent extends MXValueComponent {
|
|
|
148
143
|
const currentKeys = this.selectedKeys();
|
|
149
144
|
const itemKey = this.getItemKey(item);
|
|
150
145
|
if (currentKeys.includes(itemKey)) {
|
|
151
|
-
this.selectedKeys.set(currentKeys.filter(key => key !== itemKey));
|
|
146
|
+
this.selectedKeys.set(currentKeys.filter((key) => key !== itemKey));
|
|
152
147
|
}
|
|
153
148
|
else {
|
|
154
149
|
this.selectedKeys.set([...currentKeys, itemKey]);
|
|
@@ -163,7 +158,7 @@ class AXDataListComponent extends MXValueComponent {
|
|
|
163
158
|
deselectItem(item) {
|
|
164
159
|
const currentKeys = this.selectedKeys();
|
|
165
160
|
const itemKey = this.getItemKey(item);
|
|
166
|
-
const newKeys = currentKeys.filter(key => key !== itemKey);
|
|
161
|
+
const newKeys = currentKeys.filter((key) => key !== itemKey);
|
|
167
162
|
this.selectedKeys.set(newKeys);
|
|
168
163
|
this.updateSelectedItems();
|
|
169
164
|
}
|
|
@@ -172,7 +167,7 @@ class AXDataListComponent extends MXValueComponent {
|
|
|
172
167
|
const dataSource = this.listDataSource?.source;
|
|
173
168
|
if (!dataSource)
|
|
174
169
|
return;
|
|
175
|
-
const selected = dataSource.cachedItems.filter(item => keys.includes(this.getItemKey(item)));
|
|
170
|
+
const selected = dataSource.cachedItems.filter((item) => keys.includes(this.getItemKey(item)));
|
|
176
171
|
this.selectedItems.set(selected);
|
|
177
172
|
// Update selection model
|
|
178
173
|
if (this.isMultipleSelection()) {
|
|
@@ -356,13 +351,7 @@ class AXDataListComponent extends MXValueComponent {
|
|
|
356
351
|
}
|
|
357
352
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDataListComponent, decorators: [{
|
|
358
353
|
type: Component,
|
|
359
|
-
args: [{ selector: 'ax-data-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
|
|
360
|
-
CommonModule,
|
|
361
|
-
FormsModule,
|
|
362
|
-
ScrollingModule,
|
|
363
|
-
AXTooltipDirective,
|
|
364
|
-
AXCheckBoxComponent,
|
|
365
|
-
], 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"] }]
|
|
354
|
+
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"] }]
|
|
366
355
|
}], 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: [{
|
|
367
356
|
type: Output
|
|
368
357
|
}], itemClick: [{
|