@acorex/components 7.4.8 → 7.5.1

package/fesm2022/acorex-components-list.mjs

@@ -0,0 +1,269 @@
+import { MXSelectionValueComponent, AXComponent, AXFocusableComponent, AXValuableComponent } from '@acorex/components/common';
+import { DataSource } from '@angular/cdk/collections';
+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 { 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;
+    }
+    connect(collectionViewer) {
+        this.subscription.add(collectionViewer.viewChange
+            .pipe(debounceTime(this.debounceTime))
+            .pipe(distinctUntilChanged())
+            .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);
+            }
+        }));
+        return this.dataStream;
+    }
+    disconnect() {
+        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);
+            });
+        }
+    }
+}
+class AXListComponent extends MXSelectionValueComponent {
+    constructor() {
+        super(...arguments);
+        this.source = [];
+        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.dataSource.loadingState.subscribe((data) => {
+            this.isLoading = data;
+        });
+        this.dataSource.dataStream.subscribe((data) => {
+            this.hasItems = data.length > 0;
+            this.onDataLoad.emit(data);
+            setTimeout(() => {
+                this.render();
+            }, 100);
+        });
+    }
+    _handleOnItemClick(e, item) {
+        if (this.readonly || this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (this.isItemDisabled(item)) {
+            return;
+        }
+        this.toggleSelect(item);
+    }
+    _handleKeydown(e) {
+        if ((e.code === 'ArrowDown' || e.code === 'ArrowUp') && this.hasItems) {
+            this.focusItemByNav(e.key === 'ArrowDown' ? 1 : -1);
+            e.preventDefault();
+        }
+        if ((e.code === 'Space' || e.code === 'Enter') && this.hasItems) {
+            if (this.readonly || this.disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            const id = document.activeElement?.closest('li')?.dataset?.id;
+            this.toggleSelect(id);
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    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 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`;
+        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 };
+    }
+    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", 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 },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXListComponent),
+                multi: true,
+            },
+        ], 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 dataSource;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-list{width:100%;height:100%;display:block}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-default .cdk-virtual-scroll-viewport 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}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-on-surface))!important;color:rgba(var(--ax-color-on-surface-fore))!important}ax-list.ax-default .cdk-virtual-scroll-viewport 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,
+            args: [{ selector: 'ax-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['id', 'name', 'disabled', 'readonly', 'valueField', 'textField', 'disabledField', 'multiple'], outputs: ['onValueChanged', 'disabledChange', 'readOnlyChange', 'onBlur', 'onFocus'], providers: [
+                        { provide: AXComponent, useExisting: AXListComponent },
+                        { provide: AXFocusableComponent, useExisting: AXListComponent },
+                        { provide: AXValuableComponent, useExisting: AXListComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXListComponent),
+                            multi: true,
+                        },
+                    ], 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 dataSource;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-list{width:100%;height:100%;display:block}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-default .cdk-virtual-scroll-viewport 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}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-on-surface))!important;color:rgba(var(--ax-color-on-surface-fore))!important}ax-list.ax-default .cdk-virtual-scroll-viewport li.ax-state-disabled{cursor:not-allowed;opacity:.5}\n"] }]
+        }], propDecorators: { source: [{
+                type: Input
+            }], itemHeight: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], emptyTemplate: [{
+                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']]
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+const COMPONENT = [AXListComponent];
+const MODULES = [CommonModule, ScrollingModule];
+class AXListModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXListModule, declarations: [AXListComponent], imports: [CommonModule, ScrollingModule], exports: [AXListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXListModule, imports: [MODULES] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXListComponent, AXListDataSource, AXListModule };
+//# sourceMappingURL=acorex-components-list.mjs.map

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

@@ -0,0 +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  AXDataListFetchCallbackResult,\n  AXDataListItems,\n  AXEvent,\n  AXFocusableComponent,\n  AXValuableComponent,\n  MXSelectionValueComponent,\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 = 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   * @ignore\n   */\n  constructor(public config: { source: AXDataListItems; pageSize?: number; debounceTime?: number }) {\n    super();\n    this.source = config.source;\n    if (config.pageSize) this.pageSize = config.pageSize;\n    if (config.debounceTime) 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    );\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    } 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\n        .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, ...result.items);\n          this.dataStream.next(this._cachedData);\n        })\n        .finally(() => {\n          this.loadingState.next(false);\n        });\n    }\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: ['id', 'name', 'disabled', 'readonly', 'valueField', 'textField', 'disabledField', 'multiple'],\n  outputs: ['onValueChanged', 'disabledChange', 'readOnlyChange', 'onBlur', 'onFocus'],\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 {\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  @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 dataSource: 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.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      this.onDataLoad.emit(data);\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-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  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 dataSource;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

@@ -2,12 +2,12 @@ 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';
-import { Dialog } from '@angular/cdk/dialog';
 import { OverlayModule } from '@angular/cdk/overlay';
 
 class AXLoadingSpinnerComponent {
@@ -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: [{
@@ -176,18 +174,18 @@ class AXLoadingService {
             const bg = dialogRef.overlayRef.backdropElement;
             const ov = dialogRef.overlayRef.overlayElement;
             ce.style.position = 'relative';
-            ov.style.position = "absolute";
+            ov.style.position = 'absolute';
             ce.appendChild(bg);
             ce.appendChild(ov);
             setTimeout(() => {
-                ov.style.position = "absolute";
+                ov.style.position = 'absolute';
             }, 0);
         }
         return id;
         // TODO: diabled focus and click, maybe we need a service and directive for it
     }
     hide(id) {
-        const f = this.dialog.openDialogs.find(c => c.componentInstance.id === id.toString());
+        const f = this.dialog.openDialogs.find((c) => c.componentInstance.id === id.toString());
         if (f) {
             f.close();
         }
@@ -206,7 +204,7 @@ class AXLoadingService {
                 return loaderStates.get(this.getLoaderId(loaderId)) ?? false;
             }
             else {
-                return [...loaderStates.values()].filter(state => state).length > 0;
+                return [...loaderStates.values()].filter((state) => state).length > 0;
             }
         }
     }
@@ -239,7 +237,6 @@ class AXLoadingService {
             }
         }
         else {
-            // @ts-ignore - loadingStates[context] is surely defined in this branch
             this.loadingStates.get(context).set(loaderId, state);
             this.loadingStates$.get(context).get(loaderId).next(state);
         }
@@ -257,13 +254,10 @@ class AXLoadingService {
         return loaderId ?? DEFAULT_LOADER_ID;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXLoadingService, providedIn: 'root' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXLoadingService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXLoadingService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            type: Injectable
         }] });
 
 // This directive places an overlay with a loading spinner over its host element
@@ -299,12 +293,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                 args: ['axIsLoading']
             }] } });
 
-const COMPONENT = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent, AXLoadingSpinnerComponent];
-const MODULES = [CommonModule, OverlayModule, PortalModule];
+const COMPONENT = [
+    AXLoadingComponent,
+    AXLoadingDirective,
+    AXLoadingSpinnerComponent,
+    AXLoadingSpinnerComponent,
+];
+const MODULES = [CommonModule, OverlayModule, DialogModule, PortalModule];
 class AXLoadingModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXLoadingModule, declarations: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent, AXLoadingSpinnerComponent], imports: [CommonModule, OverlayModule, PortalModule], exports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent, AXLoadingSpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXLoadingModule, imports: [MODULES] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXLoadingModule, declarations: [AXLoadingComponent,
+            AXLoadingDirective,
+            AXLoadingSpinnerComponent,
+            AXLoadingSpinnerComponent], imports: [CommonModule, OverlayModule, DialogModule, PortalModule], exports: [AXLoadingComponent,
+            AXLoadingDirective,
+            AXLoadingSpinnerComponent,
+            AXLoadingSpinnerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXLoadingModule, providers: [AXLoadingService], imports: [MODULES] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXLoadingModule, decorators: [{
             type: NgModule,
@@ -312,6 +317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                     declarations: [...COMPONENT],
                     imports: [...MODULES],
                     exports: [...COMPONENT],
+                    providers: [AXLoadingService],
                 }]
         }] });