npm - @acorex/components - Versions diffs - 7.5.0 → 7.8.0 - Mend

@acorex/components 7.5.0 → 7.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (452) hide show

package/fesm2022/acorex-components-list.mjs CHANGED Viewed

@@ -1,47 +1,42 @@
-import * as i0 from '@angular/core';
-import { forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostListener, HostBinding, NgModule } from '@angular/core';
-import { MXSelectionValueComponent, AXComponent, AXFocusableComponent, AXValuableComponent } from '@acorex/components/common';
-import { Subscription, BehaviorSubject, debounceTime, distinctUntilChanged } from 'rxjs';
+import { MXSelectionValueComponent, convertArrayToDataSource, AXComponent, AXFocusableComponent, AXValuableComponent } from '@acorex/components/common';
 import { DataSource } from '@angular/cdk/collections';
-import * as i1 from '@angular/cdk/scrolling';
-import { CdkVirtualScrollableElement, ScrollingModule } from '@angular/cdk/scrolling';
+import * as i2 from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, HostListener, HostBinding, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i2 from '@angular/common';
+import { Subscription, BehaviorSubject, debounceTime, distinctUntilChanged } from 'rxjs';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 class AXListDataSource extends DataSource {
-    get cachedItems() {
-        return this._cachedData || [];
-    }
     /**
      * @ignore
      */
     constructor(config) {
         super();
         this.config = config;
-        this.pageSize = 20;
         this.debounceTime = 300;
-        this._cachedData = new Array(this.config.pageSize);
-        this.fetchedPages = new Set();
         this.subscription = new Subscription();
-        this.initiated = false;
-        this.dataStream = new BehaviorSubject(this._cachedData);
-        this.loadingState = new BehaviorSubject(true);
         this.source = config.source;
-        if (config.pageSize)
-            this.pageSize = config.pageSize;
         if (config.debounceTime)
             this.debounceTime = config.debounceTime;
+        //
+        console.log(this.config.source.cachedItems);
+        this.dataStream = new BehaviorSubject(this.config.source.cachedItems);
+        this.source.onChanged.subscribe((data) => {
+            this.dataStream.next(data.cachedItems);
+        });
     }
     connect(collectionViewer) {
         this.subscription.add(collectionViewer.viewChange
             .pipe(debounceTime(this.debounceTime))
             .pipe(distinctUntilChanged())
-            .subscribe(range => {
+            .subscribe((range) => {
             const startPage = this.getPageForIndex(range.start);
             const endPage = this.getPageForIndex(range.end - 1);
             for (let i = startPage; i <= endPage; i++) {
-                this.fetchPage(i);
+                this.source.setPage(i);
             }
         }));
         return this.dataStream;
@@ -50,64 +45,41 @@ class AXListDataSource extends DataSource {
         this.subscription.unsubscribe();
     }
     getPageForIndex(index) {
-        return Math.floor(index / this.pageSize);
-    }
-    fetchPage(page) {
-        if (this.fetchedPages.has(page)) {
-            return;
-        }
-        this.loadingState.next(true);
-        this.fetchedPages.add(page);
-        if (Array.isArray(this.source)) {
-            this._cachedData = this.source;
-            this.dataStream.next(this._cachedData);
-            this.loadingState.next(false);
-        }
-        else if (typeof this.source == 'function') {
-            const promise = this.source({
-                take: this.pageSize,
-                skip: this.pageSize * page
-            });
-            promise.then(result => {
-                if (!this.initiated) {
-                    this._cachedData = new Array(result.total);
-                    this.initiated = true;
-                }
-                this._cachedData.splice(page * this.pageSize, this.pageSize, ...result.items);
-                this.dataStream.next(this._cachedData);
-            }).finally(() => {
-                this.loadingState.next(false);
-            });
-        }
+        return Math.floor(index / this.source.config.pageSize);
     }
 }
 class AXListComponent extends MXSelectionValueComponent {
     constructor() {
         super(...arguments);
-        this.source = [];
+        this.dataSource = convertArrayToDataSource([]);
         this.itemHeight = 40;
+        this.onDataLoad = new EventEmitter();
+        this.onScrolledIndexChanged = new EventEmitter();
         this.checkbox = true;
         this.isLoading = true;
         this.hasItems = false;
+        this.lastIndex = 0;
+        this.postponeFocus = false;
     }
     trackByIdx(i) {
         return i;
     }
     ngOnInit() {
         super.ngOnInit();
-        this.dataSource = new AXListDataSource({
-            source: this.source
+        this.listDataSource = new AXListDataSource({
+            source: this.dataSource,
         });
-        this.dataSource.loadingState.subscribe(data => {
+        this.listDataSource.source.onLoadingChanged.subscribe((data) => {
             this.isLoading = data;
         });
-        this.dataSource.dataStream.subscribe(data => {
-            this.hasItems = data.length > 0;
+        this.listDataSource.source.onChanged.subscribe((data) => {
+            this.hasItems = data.totalCount > 0;
+            this.onDataLoad.emit(data.items);
+            setTimeout(() => {
+                this.render();
+            }, 100);
         });
     }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-    }
     _handleOnItemClick(e, item) {
         if (this.readonly || this.disabled) {
             e.preventDefault();
@@ -139,27 +111,54 @@ class AXListComponent extends MXSelectionValueComponent {
     focusItemByNav(sign) {
         const list = this.getHostElement().querySelector('ul');
         const fn = (s) => list.querySelector(s);
-        const itemDiv = document.activeElement?.closest('li') ||
-            fn(`li.ax-state-selected`) ||
-            fn(`li`);
+        const itemDiv = document.activeElement?.closest('li') || fn(`li.ax-state-selected`) || fn(`li`);
         const next = (sign == 1 ? itemDiv.nextElementSibling : itemDiv.previousElementSibling);
         if (next) {
             next.focus();
         }
     }
+    _handleOnscrolledIndexChange(e) {
+        this.lastIndex = e;
+        this.onScrolledIndexChanged.emit({
+            component: this,
+            index: this.lastIndex,
+            isUserInteraction: true,
+        });
+    }
     /**
      *  @ignore
      */
     get __hostClass() {
-        const _class = `ax-default`;
+        const _class = `ax-solid`;
         return this.itemTemplate ? '' : _class;
     }
     getItemByKey(key) {
-        const cachedItem = this.dataSource.cachedItems.find(c => c && c[this.valueField] == key);
-        return cachedItem || { [this.valueField]: key, [this.textField]: key };
+        return this.dataSource.find(key);
+    }
+    render() {
+        this.viewport.checkViewportSize();
+        this.viewport.scrollToIndex(this.lastIndex);
+        if (this.postponeFocus) {
+            this.postponeFocus = false;
+            this.focus();
+        }
+    }
+    scrollToIndex(index) {
+        this.viewport.scrollToIndex(index);
+    }
+    focus() {
+        const list = this.getHostElement().querySelector('ul');
+        const focusable = list.querySelector('li.ax-state-selected') ??
+            list.querySelector('li.list-item');
+        if (focusable) {
+            focusable.focus();
+        }
+        else {
+            this.postponeFocus = true;
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXListComponent, selector: "ax-list", inputs: { id: "id", name: "name", disabled: "disabled", readonly: "readonly", valueField: "valueField", textField: "textField", disabledField: "disabledField", multiple: "multiple", source: "source", itemHeight: "itemHeight", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate", checkbox: "checkbox" }, outputs: { onValueChanged: "onValueChanged", disabledChange: "disabledChange", readOnlyChange: "readOnlyChange", onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXListComponent, selector: "ax-list", inputs: { id: "id", name: "name", disabled: "disabled", readonly: "readonly", valueField: "valueField", textField: "textField", disabledField: "disabledField", multiple: "multiple", selectionMode: "selectionMode", dataSource: "dataSource", itemHeight: "itemHeight", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate", checkbox: "checkbox" }, outputs: { onValueChanged: "onValueChanged", disabledChange: "disabledChange", readOnlyChange: "readOnlyChange", onBlur: "onBlur", onFocus: "onFocus", onDataLoad: "onDataLoad", onScrolledIndexChanged: "onScrolledIndexChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXComponent, useExisting: AXListComponent },
             { provide: AXFocusableComponent, useExisting: AXListComponent },
             { provide: AXValuableComponent, useExisting: AXListComponent },
@@ -168,7 +167,7 @@ class AXListComponent extends MXSelectionValueComponent {
                 useExisting: forwardRef(() => AXListComponent),
                 multi: true,
             },
-        ], usesInheritance: true, hostDirectives: [{ directive: i1.CdkVirtualScrollableElement }], ngImport: i0, template: "<ng-content select=\"ax-header\"></ng-content>\n<cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n    class=\"ax-list-items-container\">\n    <ul>\n        <!--  Item Template  -->\n        <ng-container *cdkVirtualFor=\"let item of dataSource;let i = index; trackBy: trackByIdx\">\n            <ng-container *ngIf=\"item;else loadingTpl\">\n                <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                    [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event, item)\" [attr.data-id]=\"item\">\n                    <!--  Custom Item Template  -->\n                    <ng-container *ngIf=\"itemTemplate;else defaultItemTpl\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate;context: { $implicit: { data:item } }\">\n                        </ng-container>\n                    </ng-container>\n                    <!--  Default Item Template  -->\n                    <ng-template #defaultItemTpl>\n                        <ng-container *ngIf=\"item;else loadingTpl\">\n                            <div class=\"ax-label-container\">\n                                <input class=\"ax-checkbox\" *ngIf=\"multiple && checkbox\" type=\"checkbox\"\n                                    [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\" tabindex=\"0\" />\n                                <span [class.ax-checkbox-label]=\"multiple && checkbox\">{{getDisplayText(item)}}</span>\n                            </div>\n                            <i class=\"ax-icon ax-icon-done ax-selected-icon\" *ngIf=\"isItemSelected(item) \"></i>\n                        </ng-container>\n                    </ng-template>\n                </li>\n            </ng-container>\n        </ng-container>\n    </ul>\n</cdk-virtual-scroll-viewport>\n<!--  Empty Template  -->\n<ng-container *ngIf=\"emptyTemplate && !hasItems && isLoading===false\">\n    <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n</ng-container>\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n    <!--  Custom Loading Template  -->\n    <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n        </ng-container>\n    </ng-container>\n    <!--  Default Loading Template  -->\n    <ng-template #defaultLoadingTpl>\n        <li>Loading...</li>\n    </ng-template>\n</ng-template>\n<ng-content select=\"ax-footer\"></ng-content>", styles: ["ax-list{width:100%;height:100%;display:flex;flex-direction:column}ax-list.ax-default .cdk-virtual-scroll-viewport li{padding-inline-start:.75rem;padding-inline-end:1rem;position:relative;height:var(--ax-size-default);display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;cursor:pointer}ax-list.ax-default .cdk-virtual-scroll-viewport li:focus,ax-list.ax-default .cdk-virtual-scroll-viewport li:focus-within,ax-list.ax-default .cdk-virtual-scroll-viewport li:focus-visible{outline:transparent;background-color:rgba(var(--ax-color-primary-100))}ax-list.ax-default .cdk-virtual-scroll-viewport li .ax-label-container{display:flex;align-items:center}ax-list.ax-default .cdk-virtual-scroll-viewport li .ax-checkbox-label{margin-inline-start:.5rem}ax-list.ax-default .cdk-virtual-scroll-viewport li .ax-selected-icon{color:rgba(var(--ax-color-primary-500));font-size:1.5rem}ax-list.ax-default .cdk-virtual-scroll-viewport li.ax-state-selected:not(ax-list.ax-default .cdk-virtual-scroll-viewport li:focus,ax-list.ax-default .cdk-virtual-scroll-viewport li:focus-within,ax-list.ax-default .cdk-virtual-scroll-viewport li:focus-visible){background-color:rgba(var(--ax-color-default))!important;color:rgba(var(--ax-color-default-fore))!important}ax-list.ax-default .cdk-virtual-scroll-viewport li.ax-state-disabled{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"list-container\" cdkVirtualScrollingElement>\n    <ng-content select=\"ax-header\"></ng-content>\n    <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n        class=\"ax-list-items-container\" (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <ul>\n            <!--  Item Template  -->\n            <ng-container *cdkVirtualFor=\"let item of listDataSource;let i = index; trackBy: trackByIdx\">\n                <ng-container *ngIf=\"item;else loadingTpl\">\n                    <li [class.ax-state-selected]=\"isItemSelected(item)\" class=\"list-item\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\" [attr.data-id]=\"getValue(item)\">\n                        <!--  Custom Item Template  -->\n                        <ng-container *ngIf=\"itemTemplate;else defaultItemTpl\">\n                            <ng-container *ngTemplateOutlet=\"itemTemplate;context: { $implicit: { data:item } }\">\n                            </ng-container>\n                        </ng-container>\n                        <!--  Default Item Template  -->\n                        <ng-template #defaultItemTpl>\n                            <ng-container *ngIf=\"item;else loadingTpl\">\n                                <div class=\"ax-label-container\">\n                                    <input class=\"ax-checkbox\" *ngIf=\"multiple && checkbox\" type=\"checkbox\"\n                                        [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\"\n                                        tabindex=\"0\" />\n                                    <span\n                                        [class.ax-checkbox-label]=\"multiple && checkbox\">{{getDisplayText(item)}}</span>\n                                </div>\n                                <i class=\"ax-icon ax-icon-done ax-selected-icon\" *ngIf=\"isItemSelected(item) \"></i>\n                            </ng-container>\n                        </ng-template>\n                    </li>\n                </ng-container>\n            </ng-container>\n        </ul>\n    </cdk-virtual-scroll-viewport>\n    <ng-content select=\"ax-footer\"></ng-content>\n</div>\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n    <!--  Custom Loading Template  -->\n    <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n        </ng-container>\n    </ng-container>\n    <!--  Default Loading Template  -->\n    <ng-template #defaultLoadingTpl>\n        <li>Loading...</li>\n    </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n<ng-container *ngIf=\"emptyTemplate && hasItems===false && isLoading===false\">\n    <div class=\"empty-container\">\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n    </div>\n</ng-container>", styles: [".ax-dark ax-list.ax-solid .cdk-virtual-scroll-viewport li:focus,.ax-dark ax-list.ax-solid .cdk-virtual-scroll-viewport li:focus-within,.ax-dark ax-list.ax-solid .cdk-virtual-scroll-viewport li:focus-visible{background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-lighten))}ax-list{width:100%;height:100%;display:block;font-style:.875rem}ax-list .list-container{display:flex;flex-direction:column;height:100%}ax-list .empty-container{width:100%;min-height:var(--ax-size-default);display:flex;align-items:center;padding-inline:.75rem}ax-list.ax-solid .cdk-virtual-scroll-viewport ul li{font-size:.875rem;padding-inline-start:.75rem;padding-inline-end:1rem;position:relative;height:var(--ax-size-default);display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:var(--ax-rounded-border-default)}ax-list.ax-solid .cdk-virtual-scroll-viewport ul li:focus,ax-list.ax-solid .cdk-virtual-scroll-viewport ul li:focus-within,ax-list.ax-solid .cdk-virtual-scroll-viewport ul li:focus-visible{outline:2px solid;outline-color:rgba(var(--ax-color-primary-500));outline-offset:-4px}ax-list.ax-solid .cdk-virtual-scroll-viewport ul li .ax-label-container{display:flex;align-items:center}ax-list.ax-solid .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:.5rem}ax-list.ax-solid .cdk-virtual-scroll-viewport ul li .ax-selected-icon{color:rgba(var(--ax-color-primary-500));font-size:1.5rem}ax-list.ax-solid .cdk-virtual-scroll-viewport ul li.ax-state-selected:not(ax-list.ax-solid .cdk-virtual-scroll-viewport ul li:focus,ax-list.ax-solid .cdk-virtual-scroll-viewport ul li:focus-within,ax-list.ax-solid .cdk-virtual-scroll-viewport ul li:focus-visible){background-color:rgba(var(--ax-color-primary-100))!important;color:rgba(var(--ax-color-primary-fore-lighten))!important}ax-list.ax-solid .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXListComponent, decorators: [{
             type: Component,
@@ -180,18 +179,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                         'valueField',
                         'textField',
                         'disabledField',
-                        'multiple'
-                    ], outputs: [
-                        'onValueChanged',
-                        'disabledChange',
-                        'readOnlyChange',
-                        'onBlur',
-                        'onFocus'
-                    ], hostDirectives: [
-                        {
-                            directive: CdkVirtualScrollableElement
-                        }
-                    ], providers: [
+                        'multiple',
+                        'selectionMode',
+                    ], outputs: ['onValueChanged', 'disabledChange', 'readOnlyChange', 'onBlur', 'onFocus'], providers: [
                         { provide: AXComponent, useExisting: AXListComponent },
                         { provide: AXFocusableComponent, useExisting: AXListComponent },
                         { provide: AXValuableComponent, useExisting: AXListComponent },
@@ -200,8 +190,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                             useExisting: forwardRef(() => AXListComponent),
                             multi: true,
                         },
-                    ], template: "<ng-content select=\"ax-header\"></ng-content>\n<cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n    class=\"ax-list-items-container\">\n    <ul>\n        <!--  Item Template  -->\n        <ng-container *cdkVirtualFor=\"let item of dataSource;let i = index; trackBy: trackByIdx\">\n            <ng-container *ngIf=\"item;else loadingTpl\">\n                <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                    [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event, item)\" [attr.data-id]=\"item\">\n                    <!--  Custom Item Template  -->\n                    <ng-container *ngIf=\"itemTemplate;else defaultItemTpl\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate;context: { $implicit: { data:item } }\">\n                        </ng-container>\n                    </ng-container>\n                    <!--  Default Item Template  -->\n                    <ng-template #defaultItemTpl>\n                        <ng-container *ngIf=\"item;else loadingTpl\">\n                            <div class=\"ax-label-container\">\n                                <input class=\"ax-checkbox\" *ngIf=\"multiple && checkbox\" type=\"checkbox\"\n                                    [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\" tabindex=\"0\" />\n                                <span [class.ax-checkbox-label]=\"multiple && checkbox\">{{getDisplayText(item)}}</span>\n                            </div>\n                            <i class=\"ax-icon ax-icon-done ax-selected-icon\" *ngIf=\"isItemSelected(item) \"></i>\n                        </ng-container>\n                    </ng-template>\n                </li>\n            </ng-container>\n        </ng-container>\n    </ul>\n</cdk-virtual-scroll-viewport>\n<!--  Empty Template  -->\n<ng-container *ngIf=\"emptyTemplate && !hasItems && isLoading===false\">\n    <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n</ng-container>\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n    <!--  Custom Loading Template  -->\n    <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n        </ng-container>\n    </ng-container>\n    <!--  Default Loading Template  -->\n    <ng-template #defaultLoadingTpl>\n        <li>Loading...</li>\n    </ng-template>\n</ng-template>\n<ng-content select=\"ax-footer\"></ng-content>", styles: ["ax-list{width:100%;height:100%;display:flex;flex-direction:column}ax-list.ax-default .cdk-virtual-scroll-viewport li{padding-inline-start:.75rem;padding-inline-end:1rem;position:relative;height:var(--ax-size-default);display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;cursor:pointer}ax-list.ax-default .cdk-virtual-scroll-viewport li:focus,ax-list.ax-default .cdk-virtual-scroll-viewport li:focus-within,ax-list.ax-default .cdk-virtual-scroll-viewport li:focus-visible{outline:transparent;background-color:rgba(var(--ax-color-primary-100))}ax-list.ax-default .cdk-virtual-scroll-viewport li .ax-label-container{display:flex;align-items:center}ax-list.ax-default .cdk-virtual-scroll-viewport li .ax-checkbox-label{margin-inline-start:.5rem}ax-list.ax-default .cdk-virtual-scroll-viewport li .ax-selected-icon{color:rgba(var(--ax-color-primary-500));font-size:1.5rem}ax-list.ax-default .cdk-virtual-scroll-viewport li.ax-state-selected:not(ax-list.ax-default .cdk-virtual-scroll-viewport li:focus,ax-list.ax-default .cdk-virtual-scroll-viewport li:focus-within,ax-list.ax-default .cdk-virtual-scroll-viewport li:focus-visible){background-color:rgba(var(--ax-color-default))!important;color:rgba(var(--ax-color-default-fore))!important}ax-list.ax-default .cdk-virtual-scroll-viewport li.ax-state-disabled{cursor:not-allowed;opacity:.5}\n"] }]
-        }], propDecorators: { source: [{
+                    ], template: "<div class=\"list-container\" cdkVirtualScrollingElement>\n    <ng-content select=\"ax-header\"></ng-content>\n    <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n        class=\"ax-list-items-container\" (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <ul>\n            <!--  Item Template  -->\n            <ng-container *cdkVirtualFor=\"let item of listDataSource;let i = index; trackBy: trackByIdx\">\n                <ng-container *ngIf=\"item;else loadingTpl\">\n                    <li [class.ax-state-selected]=\"isItemSelected(item)\" class=\"list-item\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\" [attr.data-id]=\"getValue(item)\">\n                        <!--  Custom Item Template  -->\n                        <ng-container *ngIf=\"itemTemplate;else defaultItemTpl\">\n                            <ng-container *ngTemplateOutlet=\"itemTemplate;context: { $implicit: { data:item } }\">\n                            </ng-container>\n                        </ng-container>\n                        <!--  Default Item Template  -->\n                        <ng-template #defaultItemTpl>\n                            <ng-container *ngIf=\"item;else loadingTpl\">\n                                <div class=\"ax-label-container\">\n                                    <input class=\"ax-checkbox\" *ngIf=\"multiple && checkbox\" type=\"checkbox\"\n                                        [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\"\n                                        tabindex=\"0\" />\n                                    <span\n                                        [class.ax-checkbox-label]=\"multiple && checkbox\">{{getDisplayText(item)}}</span>\n                                </div>\n                                <i class=\"ax-icon ax-icon-done ax-selected-icon\" *ngIf=\"isItemSelected(item) \"></i>\n                            </ng-container>\n                        </ng-template>\n                    </li>\n                </ng-container>\n            </ng-container>\n        </ul>\n    </cdk-virtual-scroll-viewport>\n    <ng-content select=\"ax-footer\"></ng-content>\n</div>\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n    <!--  Custom Loading Template  -->\n    <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n        </ng-container>\n    </ng-container>\n    <!--  Default Loading Template  -->\n    <ng-template #defaultLoadingTpl>\n        <li>Loading...</li>\n    </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n<ng-container *ngIf=\"emptyTemplate && hasItems===false && isLoading===false\">\n    <div class=\"empty-container\">\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n    </div>\n</ng-container>", styles: [".ax-dark ax-list.ax-solid .cdk-virtual-scroll-viewport li:focus,.ax-dark ax-list.ax-solid .cdk-virtual-scroll-viewport li:focus-within,.ax-dark ax-list.ax-solid .cdk-virtual-scroll-viewport li:focus-visible{background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-lighten))}ax-list{width:100%;height:100%;display:block;font-style:.875rem}ax-list .list-container{display:flex;flex-direction:column;height:100%}ax-list .empty-container{width:100%;min-height:var(--ax-size-default);display:flex;align-items:center;padding-inline:.75rem}ax-list.ax-solid .cdk-virtual-scroll-viewport ul li{font-size:.875rem;padding-inline-start:.75rem;padding-inline-end:1rem;position:relative;height:var(--ax-size-default);display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:var(--ax-rounded-border-default)}ax-list.ax-solid .cdk-virtual-scroll-viewport ul li:focus,ax-list.ax-solid .cdk-virtual-scroll-viewport ul li:focus-within,ax-list.ax-solid .cdk-virtual-scroll-viewport ul li:focus-visible{outline:2px solid;outline-color:rgba(var(--ax-color-primary-500));outline-offset:-4px}ax-list.ax-solid .cdk-virtual-scroll-viewport ul li .ax-label-container{display:flex;align-items:center}ax-list.ax-solid .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:.5rem}ax-list.ax-solid .cdk-virtual-scroll-viewport ul li .ax-selected-icon{color:rgba(var(--ax-color-primary-500));font-size:1.5rem}ax-list.ax-solid .cdk-virtual-scroll-viewport ul li.ax-state-selected:not(ax-list.ax-solid .cdk-virtual-scroll-viewport ul li:focus,ax-list.ax-solid .cdk-virtual-scroll-viewport ul li:focus-within,ax-list.ax-solid .cdk-virtual-scroll-viewport ul li:focus-visible){background-color:rgba(var(--ax-color-primary-100))!important;color:rgba(var(--ax-color-primary-fore-lighten))!important}ax-list.ax-solid .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:.5}\n"] }]
+        }], propDecorators: { dataSource: [{
                 type: Input
             }], itemHeight: [{
                 type: Input
@@ -211,8 +201,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                 type: Input
             }], loadingTemplate: [{
                 type: Input
+            }], onDataLoad: [{
+                type: Output
+            }], onScrolledIndexChanged: [{
+                type: Output
             }], checkbox: [{
                 type: Input
+            }], viewport: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
             }], _handleKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]

package/fesm2022/acorex-components-list.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"acorex-components-list.mjs","sources":["../../../../libs/components/list/src/lib/list.component.ts","../../../../libs/components/list/src/lib/list.component.html","../../../../libs/components/list/src/lib/list.module.ts","../../../../libs/components/list/src/acorex-components-list.ts"],"sourcesContent":["import { Component, ViewEncapsulation, ChangeDetectionStrategy, OnInit, AfterViewInit, Input, TemplateRef, HostBinding, HostListener, forwardRef } from '@angular/core';\nimport { AXDataListFetchCallbackResult, AXDataListItems, MXSelectionValueComponent, AXComponent, AXFocusableComponent, AXValuableComponent } from '@acorex/components/common';\nimport { BehaviorSubject, Observable, Subscription, debounceTime, distinctUntilChanged, of } from 'rxjs';\nimport { CollectionViewer, DataSource } from '@angular/cdk/collections';\nimport { CdkVirtualScrollableElement } from '@angular/cdk/scrolling';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n\nexport class AXListDataSource<T = any> extends DataSource<T> {\n private pageSize = 20;\n private debounceTime = 300;\n private _cachedData: T[] = new Array(this.config.pageSize);\n private fetchedPages = new Set<number>();\n private subscription = new Subscription();\n private initiated = false;\n private source: AXDataListItems;\n\n public dataStream = new BehaviorSubject<T[]>(this._cachedData);\n public loadingState = new BehaviorSubject<boolean>(true);\n public get cachedItems(): T[] {\n return this._cachedData \|\| [];\n }\n\n\n\n /*\n @ignore\n /\n constructor(public config: { source: AXDataListItems, pageSize?: number, debounceTime?: number }) {\n super();\n this.source = config.source;\n if (config.pageSize)\n this.pageSize = config.pageSize;\n if (config.debounceTime)\n this.debounceTime = config.debounceTime;\n }\n\n connect(collectionViewer: CollectionViewer): Observable<T[]> {\n this.subscription.add(\n collectionViewer.viewChange\n .pipe(debounceTime(this.debounceTime))\n .pipe(distinctUntilChanged())\n .subscribe(range => {\n const startPage = this.getPageForIndex(range.start);\n const endPage = this.getPageForIndex(range.end - 1);\n for (let i = startPage; i <= endPage; i++) {\n this.fetchPage(i);\n }\n }));\n return this.dataStream;\n }\n\n disconnect(): void {\n this.subscription.unsubscribe();\n }\n\n private getPageForIndex(index: number): number {\n return Math.floor(index / this.pageSize);\n }\n\n private fetchPage(page: number) {\n if (this.fetchedPages.has(page)) {\n return;\n }\n this.loadingState.next(true);\n this.fetchedPages.add(page);\n if (Array.isArray(this.source)) {\n this._cachedData = this.source;\n this.dataStream.next(this._cachedData);\n this.loadingState.next(false);\n }\n else if (typeof this.source == 'function') {\n const promise = this.source({\n take: this.pageSize,\n skip: this.pageSize page\n }) as Promise<AXDataListFetchCallbackResult>;\n promise.then(result => {\n if (!this.initiated) {\n this._cachedData = new Array(result.total);\n this.initiated = true;\n }\n this._cachedData.splice(page * this.pageSize, this.pageSize,\n ...result.items);\n this.dataStream.next(this._cachedData);\n }).finally(() => {\n this.loadingState.next(false);\n });\n }\n }\n}\n\n\n@Component({\n selector: 'ax-list',\n templateUrl: './list.component.html',\n styleUrls: ['./list.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n inputs: [\n 'id',\n 'name',\n 'disabled',\n 'readonly',\n 'valueField',\n 'textField',\n 'disabledField',\n 'multiple'\n ],\n outputs: [\n 'onValueChanged',\n 'disabledChange',\n 'readOnlyChange',\n 'onBlur',\n 'onFocus'\n ],\n hostDirectives: [\n {\n directive: CdkVirtualScrollableElement\n }\n ],\n providers: [\n { provide: AXComponent, useExisting: AXListComponent },\n { provide: AXFocusableComponent, useExisting: AXListComponent },\n { provide: AXValuableComponent, useExisting: AXListComponent },\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXListComponent),\n multi: true,\n },\n ],\n})\nexport class AXListComponent extends MXSelectionValueComponent implements OnInit, AfterViewInit {\n\n @Input()\n source: AXDataListItems = [];\n\n @Input()\n itemHeight: number \| 'auto' = 40;\n\n @Input()\n itemTemplate: TemplateRef<unknown>\n\n @Input()\n emptyTemplate: TemplateRef<unknown>\n\n @Input()\n loadingTemplate: TemplateRef<unknown>\n\n\n @Input()\n checkbox = true;\n\n protected dataSource: AXListDataSource<unknown>;\n protected isLoading = true;\n protected hasItems = false;\n\n trackByIdx(i) {\n return i;\n }\n\n ngOnInit() {\n super.ngOnInit();\n this.dataSource = new AXListDataSource<unknown>({\n source: this.source\n });\n this.dataSource.loadingState.subscribe(data => {\n this.isLoading = data;\n });\n this.dataSource.dataStream.subscribe(data => {\n this.hasItems = data.length > 0;\n });\n }\n\n ngAfterViewInit() {\n super.ngAfterViewInit();\n }\n\n _handleOnItemClick(e: MouseEvent, item: any) {\n if (this.readonly \|\| this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n if (this.isItemDisabled(item)) {\n return;\n }\n this.toggleSelect(item);\n }\n\n\n @HostListener('keydown', ['$event'])\n _handleKeydown(e: KeyboardEvent) {\n if ((e.code === 'ArrowDown' \|\| e.code === 'ArrowUp') && this.hasItems) {\n this.focusItemByNav(e.key === 'ArrowDown' ? 1 : -1);\n e.preventDefault();\n }\n if ((e.code === 'Space' \|\| e.code === 'Enter') && this.hasItems) {\n if (this.readonly \|\| this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n const id = document.activeElement?.closest('li')?.dataset?.id;\n this.toggleSelect(id);\n e.preventDefault();\n e.stopPropagation()\n }\n }\n\n\n private focusItemByNav(sign: -1 \| 1): void {\n const list = this.getHostElement().querySelector('ul');\n const fn = (s) => list.querySelector<HTMLDivElement>(s);\n const itemDiv: HTMLElement =\n document.activeElement?.closest('li') \|\|\n fn(`li.ax-state-selected`) \|\|\n fn(`li`);\n const next = (sign == 1 ? itemDiv.nextElementSibling : itemDiv.previousElementSibling) as HTMLElement;\n if (next) {\n next.focus();\n }\n }\n\n /*\n @ignore\n /\n @HostBinding('class')\n get __hostClass(): string {\n const _class = `ax-default`;\n return this.itemTemplate ? '' : _class;\n }\n\n getItemByKey(key: unknown): unknown {\n const cachedItem = this.dataSource.cachedItems.find(c => c && c[this.valueField] == key);\n return cachedItem \|\| { [this.valueField]: key, [this.textField]: key };\n }\n\n}\n","<ng-content select=\"ax-header\"></ng-content>\n<cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n class=\"ax-list-items-container\">\n <ul>\n <!-- Item Template -->\n <ng-container cdkVirtualFor=\"let item of dataSource;let i = index; trackBy: trackByIdx\">\n <ng-container ngIf=\"item;else loadingTpl\">\n <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\n [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event, item)\" [attr.data-id]=\"item\">\n <!-- Custom Item Template -->\n <ng-container ngIf=\"itemTemplate;else defaultItemTpl\">\n <ng-container ngTemplateOutlet=\"itemTemplate;context: { $implicit: { data:item } }\">\n </ng-container>\n </ng-container>\n <!-- Default Item Template -->\n <ng-template #defaultItemTpl>\n <ng-container ngIf=\"item;else loadingTpl\">\n <div class=\"ax-label-container\">\n <input class=\"ax-checkbox\" ngIf=\"multiple && checkbox\" type=\"checkbox\"\n [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\" tabindex=\"0\" />\n <span [class.ax-checkbox-label]=\"multiple && checkbox\">{{getDisplayText(item)}}</span>\n </div>\n <i class=\"ax-icon ax-icon-done ax-selected-icon\" ngIf=\"isItemSelected(item) \"></i>\n </ng-container>\n </ng-template>\n </li>\n </ng-container>\n </ng-container>\n </ul>\n</cdk-virtual-scroll-viewport>\n<!-- Empty Template -->\n<ng-container ngIf=\"emptyTemplate && !hasItems && isLoading===false\">\n <ng-container ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n</ng-container>\n<!-- Loading Template -->\n<ng-template #loadingTpl>\n <!-- Custom Loading Template -->\n <ng-container ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n <ng-container ngTemplateOutlet=\"loadingTemplate\">\n </ng-container>\n </ng-container>\n <!-- Default Loading Template -->\n <ng-template #defaultLoadingTpl>\n <li>Loading...</li>\n </ng-template>\n</ng-template>\n<ng-content select=\"ax-footer\"></ng-content>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXListComponent } from './list.component';\nimport { ScrollingModule } from '@angular/cdk/scrolling';\n\nconst COMPONENT = [AXListComponent];\nconst MODULES = [CommonModule, ScrollingModule];\n\n@NgModule({\n declarations: [...COMPONENT],\n imports: [...MODULES],\n exports: [...COMPONENT],\n providers: [],\n})\nexport class AXListModule { }\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"acorex-components-list.mjs","sources":["../../../../libs/components/list/src/lib/list.component.ts","../../../../libs/components/list/src/lib/list.component.html","../../../../libs/components/list/src/lib/list.module.ts","../../../../libs/components/list/src/acorex-components-list.ts"],"sourcesContent":["import {\n AXComponent,\n AXDateSource,\n AXEvent,\n AXFocusableComponent,\n AXValuableComponent,\n MXSelectionValueComponent,\n convertArrayToDataSource,\n} from '@acorex/components/common';\nimport { CollectionViewer, DataSource } from '@angular/cdk/collections';\nimport { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n HostListener,\n Input,\n OnInit,\n Output,\n TemplateRef,\n ViewChild,\n ViewEncapsulation,\n forwardRef,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { BehaviorSubject, Observable, Subscription, debounceTime, distinctUntilChanged } from 'rxjs';\n\nexport class AXListDataSource<T = unknown> extends DataSource<T> {\n private debounceTime = 300;\n private subscription = new Subscription();\n public source: AXDateSource<T>;\n private dataStream: BehaviorSubject<T[]>;\n\n /*\n @ignore\n /\n constructor(private config: { source: AXDateSource<T>; debounceTime?: number }) {\n super();\n this.source = config.source;\n if (config.debounceTime) this.debounceTime = config.debounceTime;\n //\n console.log(this.config.source.cachedItems);\n this.dataStream = new BehaviorSubject<T[]>(this.config.source.cachedItems);\n this.source.onChanged.subscribe((data) => {\n this.dataStream.next(data.cachedItems);\n });\n }\n\n connect(collectionViewer: CollectionViewer): Observable<T[]> {\n this.subscription.add(\n collectionViewer.viewChange\n .pipe(debounceTime(this.debounceTime))\n .pipe(distinctUntilChanged())\n .subscribe((range) => {\n const startPage = this.getPageForIndex(range.start);\n const endPage = this.getPageForIndex(range.end - 1);\n for (let i = startPage; i <= endPage; i++) {\n this.source.setPage(i);\n }\n }),\n );\n return this.dataStream;\n }\n\n disconnect(): void {\n this.subscription.unsubscribe();\n }\n\n private getPageForIndex(index: number): number {\n return Math.floor(index / this.source.config.pageSize);\n }\n}\n\nexport interface AXListScrollIndexChanged extends AXEvent {\n index: number;\n}\n\n@Component({\n selector: 'ax-list',\n templateUrl: './list.component.html',\n styleUrls: ['./list.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n inputs: [\n 'id',\n 'name',\n 'disabled',\n 'readonly',\n 'valueField',\n 'textField',\n 'disabledField',\n 'multiple',\n 'selectionMode',\n ],\n outputs: ['onValueChanged', 'disabledChange', 'readOnlyChange', 'onBlur', 'onFocus'],\n providers: [\n { provide: AXComponent, useExisting: AXListComponent },\n { provide: AXFocusableComponent, useExisting: AXListComponent },\n { provide: AXValuableComponent, useExisting: AXListComponent },\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => AXListComponent),\n multi: true,\n },\n ],\n})\nexport class AXListComponent extends MXSelectionValueComponent implements OnInit {\n @Input()\n dataSource: AXDateSource<unknown> = convertArrayToDataSource([]);\n\n @Input()\n itemHeight: number \| 'auto' = 40;\n\n @Input()\n itemTemplate: TemplateRef<unknown>;\n\n @Input()\n emptyTemplate: TemplateRef<unknown>;\n\n @Input()\n loadingTemplate: TemplateRef<unknown>;\n\n @Output()\n onDataLoad: EventEmitter<unknown[]> = new EventEmitter<unknown[]>();\n\n @Output()\n onScrolledIndexChanged: EventEmitter<AXListScrollIndexChanged> =\n new EventEmitter<AXListScrollIndexChanged>();\n\n @Input()\n checkbox = true;\n\n protected listDataSource: AXListDataSource<unknown>;\n protected isLoading = true;\n protected hasItems = false;\n private lastIndex = 0;\n private postponeFocus = false;\n\n @ViewChild(CdkVirtualScrollViewport)\n viewport: CdkVirtualScrollViewport;\n\n trackByIdx(i) {\n return i;\n }\n\n ngOnInit() {\n super.ngOnInit();\n this.listDataSource = new AXListDataSource<unknown>({\n source: this.dataSource,\n });\n this.listDataSource.source.onLoadingChanged.subscribe((data) => {\n this.isLoading = data;\n });\n this.listDataSource.source.onChanged.subscribe((data) => {\n this.hasItems = data.totalCount > 0;\n this.onDataLoad.emit(data.items);\n setTimeout(() => {\n this.render();\n }, 100);\n });\n }\n\n _handleOnItemClick(e: MouseEvent, item: any) {\n if (this.readonly \|\| this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n if (this.isItemDisabled(item)) {\n return;\n }\n this.toggleSelect(item);\n }\n\n @HostListener('keydown', ['$event'])\n _handleKeydown(e: KeyboardEvent) {\n if ((e.code === 'ArrowDown' \|\| e.code === 'ArrowUp') && this.hasItems) {\n this.focusItemByNav(e.key === 'ArrowDown' ? 1 : -1);\n e.preventDefault();\n }\n if ((e.code === 'Space' \|\| e.code === 'Enter') && this.hasItems) {\n if (this.readonly \|\| this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n const id = document.activeElement?.closest('li')?.dataset?.id;\n this.toggleSelect(id);\n e.preventDefault();\n e.stopPropagation();\n }\n }\n\n private focusItemByNav(sign: -1 \| 1): void {\n const list = this.getHostElement().querySelector('ul');\n const fn = (s) => list.querySelector<HTMLDivElement>(s);\n const itemDiv: HTMLElement =\n document.activeElement?.closest('li') \|\| fn(`li.ax-state-selected`) \|\| fn(`li`);\n const next = (sign == 1 ? itemDiv.nextElementSibling : itemDiv.previousElementSibling) as HTMLElement;\n if (next) {\n next.focus();\n }\n }\n\n protected _handleOnscrolledIndexChange(e: number) {\n this.lastIndex = e;\n this.onScrolledIndexChanged.emit({\n component: this,\n index: this.lastIndex,\n isUserInteraction: true,\n });\n }\n\n /\n @ignore\n /\n @HostBinding('class')\n get __hostClass(): string {\n const _class = `ax-solid`;\n return this.itemTemplate ? '' : _class;\n }\n\n getItemByKey(key: unknown): Promise<unknown> \| unknown {\n return this.dataSource.find(key);\n }\n\n public render() {\n this.viewport.checkViewportSize();\n this.viewport.scrollToIndex(this.lastIndex);\n if (this.postponeFocus) {\n this.postponeFocus = false;\n this.focus();\n }\n }\n\n public scrollToIndex(index: number) {\n this.viewport.scrollToIndex(index);\n }\n\n override focus(): void {\n const list = this.getHostElement().querySelector('ul');\n const focusable =\n list.querySelector<HTMLElement>('li.ax-state-selected') ??\n list.querySelector<HTMLElement>('li.list-item');\n if (focusable) {\n focusable.focus();\n } else {\n this.postponeFocus = true;\n }\n }\n}\n","<div class=\"list-container\" cdkVirtualScrollingElement>\n <ng-content select=\"ax-header\"></ng-content>\n <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n class=\"ax-list-items-container\" (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n <ul>\n <!-- Item Template -->\n <ng-container cdkVirtualFor=\"let item of listDataSource;let i = index; trackBy: trackByIdx\">\n <ng-container ngIf=\"item;else loadingTpl\">\n <li [class.ax-state-selected]=\"isItemSelected(item)\" class=\"list-item\"\n [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\n (click)=\"_handleOnItemClick($event, item)\" [attr.data-id]=\"getValue(item)\">\n <!-- Custom Item Template -->\n <ng-container ngIf=\"itemTemplate;else defaultItemTpl\">\n <ng-container ngTemplateOutlet=\"itemTemplate;context: { $implicit: { data:item } }\">\n </ng-container>\n </ng-container>\n <!-- Default Item Template -->\n <ng-template #defaultItemTpl>\n <ng-container ngIf=\"item;else loadingTpl\">\n <div class=\"ax-label-container\">\n <input class=\"ax-checkbox\" ngIf=\"multiple && checkbox\" type=\"checkbox\"\n [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\"\n tabindex=\"0\" />\n <span\n [class.ax-checkbox-label]=\"multiple && checkbox\">{{getDisplayText(item)}}</span>\n </div>\n <i class=\"ax-icon ax-icon-done ax-selected-icon\" ngIf=\"isItemSelected(item) \"></i>\n </ng-container>\n </ng-template>\n </li>\n </ng-container>\n </ng-container>\n </ul>\n </cdk-virtual-scroll-viewport>\n <ng-content select=\"ax-footer\"></ng-content>\n</div>\n<!-- Loading Template -->\n<ng-template #loadingTpl>\n <!-- Custom Loading Template -->\n <ng-container ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n <ng-container ngTemplateOutlet=\"loadingTemplate\">\n </ng-container>\n </ng-container>\n <!-- Default Loading Template -->\n <ng-template #defaultLoadingTpl>\n <li>Loading...</li>\n </ng-template>\n</ng-template>\n<!-- Empty Template -->\n<ng-container ngIf=\"emptyTemplate && hasItems===false && isLoading===false\">\n <div class=\"empty-container\">\n <ng-container ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </div>\n</ng-container>","import { ScrollingModule } from '@angular/cdk/scrolling';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXListComponent } from './list.component';\n\nconst COMPONENT = [AXListComponent];\nconst MODULES = [CommonModule, ScrollingModule];\n\n@NgModule({\n declarations: [...COMPONENT],\n imports: [...MODULES],\n exports: [...COMPONENT],\n providers: [],\n})\nexport class AXListModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-loading.mjs CHANGED Viewed

@@ -2,9 +2,9 @@ import * as i0 from '@angular/core';
 import { Component, InjectionToken, inject, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, Output, Input, Injectable, Directive, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { MXBaseComponent } from '@acorex/components/common';
 import * as i1$1 from '@angular/cdk/portal';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
-import { MXBaseComponent } from '@acorex/components/common';
 import { Dialog, DialogModule } from '@angular/cdk/dialog';
 import { asyncScheduler, BehaviorSubject } from 'rxjs';
 import { observeOn, finalize } from 'rxjs/operators';
@@ -23,10 +23,12 @@ class AXLoadingSpinnerComponent {
       x="0px"
       y="0px"
       viewBox="0 0 50 50"
-      xml:space="preserve">
+      xml:space="preserve"
+    >
       <path
         fill="current"
-        d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
+        d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"
+      >
         <animateTransform
           attributeType="xml"
           attributeName="transform"
@@ -34,7 +36,8 @@ class AXLoadingSpinnerComponent {
           from="0 25 25"
           to="360 25 25"
           dur="0.6s"
-          repeatCount="indefinite" />
+          repeatCount="indefinite"
+        />
       </path>
     </svg>
     <span *ngIf="text"> {{ text }} </span>
@@ -55,10 +58,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
       x="0px"
       y="0px"
       viewBox="0 0 50 50"
-      xml:space="preserve">
+      xml:space="preserve"
+    >
       <path
         fill="current"
-        d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
+        d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"
+      >
         <animateTransform
           attributeType="xml"
           attributeName="transform"
@@ -66,7 +71,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
           from="0 25 25"
           to="360 25 25"
           dur="0.6s"
-          repeatCount="indefinite" />
+          repeatCount="indefinite"
+        />
       </path>
     </svg>
     <span *ngIf="text"> {{ text }} </span>
@@ -79,7 +85,7 @@ const AX_LOADING_CONFIG = new InjectionToken('AX_LOADING_CONFIG', {
     factory: () => AXLoadingDefaultConfig,
 });
 const AXLoadingDefaultConfig = {
-    spinner: AXLoadingSpinnerComponent
+    spinner: AXLoadingSpinnerComponent,
 };
 function loadingConfig(config = {}) {
     const result = {
@@ -102,9 +108,7 @@ class AXLoadingComponent extends MXBaseComponent {
     set visible(v) {
         if (v != this._visible) {
             this._visible = v;
-            v
-                ? this.getHostElement().classList.remove('ax-hide')
-                : this.getHostElement().classList.add('ax-hide');
+            v ? this.getHostElement().classList.remove('ax-hide') : this.getHostElement().classList.add('ax-hide');
             this.visibleChange.emit(v);
         }
     }
@@ -121,20 +125,14 @@ class AXLoadingComponent extends MXBaseComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXLoadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXLoadingComponent, selector: "ax-loading", inputs: { visible: "visible", type: "type", context: "context" }, outputs: { visibleChange: "visibleChange" }, usesInheritance: true, ngImport: i0, template: `
-    <ng-template
-      [cdkPortalOutlet]="_selectedPortal"
-      (attached)="_handleAttched($event)"
-    ></ng-template>
-  `, isInline: true, styles: ["ax-loading{position:relative}ax-loading:before,ax-loading:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%) scale(0)}ax-loading:before,ax-loading:after{background-color:transparent;animation:pulse2 2s ease-in-out infinite}@keyframes pulse2{0%,to{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1);opacity:0}}ax-loading ax-loading-spinner{display:flex;gap:.75rem}.ax-loading-overlay-backdrop{background:rgba(var(--ax-color-default));opacity:.85!important}.ax-loading-pane{width:100%!important;height:100%!important;inset:0}.ax-loading-pane .cdk-dialog-container{display:flex!important;align-items:center;justify-content:center}.ax-loading-pane .cdk-dialog-container:focus,.ax-loading-pane .cdk-dialog-container:focus-visible,.ax-loading-pane .cdk-dialog-container:focus-within{outline:none}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template>
+  `, isInline: true, styles: ["ax-loading{position:relative}ax-loading:before,ax-loading:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%) scale(0)}ax-loading:before,ax-loading:after{background-color:transparent;animation:pulse2 2s ease-in-out infinite}@keyframes pulse2{0%,to{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1);opacity:0}}ax-loading ax-loading-spinner{display:flex;gap:.75rem}.ax-loading-overlay-backdrop{background:rgba(var(--ax-color-on-surface));opacity:.85!important}.ax-loading-pane{width:100%!important;height:100%!important;inset:0}.ax-loading-pane .cdk-dialog-container{display:flex!important;align-items:center;justify-content:center}.ax-loading-pane .cdk-dialog-container:focus,.ax-loading-pane .cdk-dialog-container:focus-visible,.ax-loading-pane .cdk-dialog-container:focus-within{outline:none}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXLoadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-loading', template: `
-    <ng-template
-      [cdkPortalOutlet]="_selectedPortal"
-      (attached)="_handleAttched($event)"
-    ></ng-template>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["ax-loading{position:relative}ax-loading:before,ax-loading:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%) scale(0)}ax-loading:before,ax-loading:after{background-color:transparent;animation:pulse2 2s ease-in-out infinite}@keyframes pulse2{0%,to{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1);opacity:0}}ax-loading ax-loading-spinner{display:flex;gap:.75rem}.ax-loading-overlay-backdrop{background:rgba(var(--ax-color-default));opacity:.85!important}.ax-loading-pane{width:100%!important;height:100%!important;inset:0}.ax-loading-pane .cdk-dialog-container{display:flex!important;align-items:center;justify-content:center}.ax-loading-pane .cdk-dialog-container:focus,.ax-loading-pane .cdk-dialog-container:focus-visible,.ax-loading-pane .cdk-dialog-container:focus-within{outline:none}\n"] }]
+    <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["ax-loading{position:relative}ax-loading:before,ax-loading:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%) scale(0)}ax-loading:before,ax-loading:after{background-color:transparent;animation:pulse2 2s ease-in-out infinite}@keyframes pulse2{0%,to{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1);opacity:0}}ax-loading ax-loading-spinner{display:flex;gap:.75rem}.ax-loading-overlay-backdrop{background:rgba(var(--ax-color-on-surface));opacity:.85!important}.ax-loading-pane{width:100%!important;height:100%!important;inset:0}.ax-loading-pane .cdk-dialog-container{display:flex!important;align-items:center;justify-content:center}.ax-loading-pane .cdk-dialog-container:focus,.ax-loading-pane .cdk-dialog-container:focus-visible,.ax-loading-pane .cdk-dialog-container:focus-within{outline:none}\n"] }]
         }], propDecorators: { visibleChange: [{
                 type: Output
             }], visible: [{