@acorex/components 7.5.1 → 7.8.0

package/fesm2022/acorex-components-common.mjs

@@ -1,7 +1,8 @@
 import { flatten, clone } from 'lodash-es';
 import * as i0 from '@angular/core';
 import { Injectable, Directive, Host, Self, Optional, Input, Inject, NgModule, inject, ChangeDetectorRef, ElementRef, ViewContainerRef, EventEmitter, Output } from '@angular/core';
-import { BehaviorSubject, fromEvent, noop, skip, distinctUntilChanged, debounceTime } from 'rxjs';
+import _ from 'lodash';
+import { Subject, fromEvent, noop, skip, distinctUntilChanged, debounceTime } from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
 import { Observable } from 'rxjs/internal/Observable';
@@ -328,41 +329,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
         }] });
 
 class AXDateSource {
+    get totalCount() {
+        return this._totalCount;
+    }
+    ;
+    get totalPages() {
+        return Math.floor(this.totalCount / this.config.pageSize);
+    }
+    ;
+    get cachedItems() {
+        return this._cachedItems;
+    }
     get items() {
         return this._items;
     }
+    get isLoading() {
+        return this._isLoading;
+    }
     constructor(config) {
-        this.config = config;
         this._totalCount = 0;
-        this._items = new Array(this.config.pageSize);
+        this._items = [];
         this.fetchedPages = new Set();
+        this._page = 0;
+        this.onChanged = new Subject();
+        this.onLoadingChanged = new Subject();
+        this._isLoading = false;
+        this.config = config;
+        this._cachedItems = new Array(this.config.pageSize);
+        this._items = new Array(0);
         this._query = { skip: 0, take: this.config.pageSize };
-        this.loadingChanged = new BehaviorSubject(false);
-        this.dataStream = new BehaviorSubject(this._items);
     }
-    async fetchPage(page) {
+    load() {
+        const page = this._page;
         if (this.fetchedPages.has(page)) {
             return;
         }
-        this.loadingChanged.next(true);
+        this.setLoadingState(true);
         this.fetchedPages.add(page);
         this._query.skip = page * this.config.pageSize;
-        const result = await this.config.load(this._query);
-        if (this._totalCount != result.total) {
-            this._items = new Array(result.total);
-            this._totalCount = result.total;
+        this.config.load({ ...this._query }).then(result => {
+            if (this._totalCount != result.total) {
+                this._cachedItems = new Array(result.total);
+                this._totalCount = result.total;
+            }
+            this._items = result.items;
+            this._cachedItems.splice(page * this.config.pageSize, this.config.pageSize, ...result.items);
+            const event = {
+                cachedItems: this.cachedItems,
+                items: this.items,
+                page: page,
+                totalCount: this.totalCount,
+                totalPages: this.totalPages
+            };
+            this.onChanged.next(event);
+        }).finally(() => {
+            this.setLoadingState(false);
+        });
+    }
+    setLoadingState(value) {
+        this._isLoading = value;
+        this.onLoadingChanged.next(this._isLoading);
+    }
+    setPage(page) {
+        if (this._page != page || this._items.length == 0) {
+            this._page = page;
+            this.load();
         }
-        this._items.splice(page * this.config.pageSize, this.config.pageSize, ...result.items);
-        this.dataStream.next(this.items);
-        this.loadingChanged.next(false);
+    }
+    filter(predicate = null) {
+        this.reset();
+        this._query.predicate = predicate;
+        this.load();
+    }
+    reset() {
+        this._query.predicate = null;
+        this._query.skip = 0;
+        this._cachedItems = new Array(this.config.pageSize);
+        this.fetchedPages.clear();
+        this._page = 0;
+        this._totalCount = 0;
+    }
+    find(key) {
+        const fromCache = this.cachedItems.find(c => (!this.config.key && c == key) || (c && this.config.key && c[this.config.key] == key));
+        if (fromCache)
+            return fromCache;
+        return this.config.byKey ? this.config.byKey(key) : null;
     }
 }
-function convertArrayToDataSource(key, items) {
+function convertArrayToDataSource(items, options = { key: 'id', pageSize: 20 }) {
     const config = {
-        key,
-        pageSize: items.length,
-        load: (e) => Promise.resolve({ items, total: items.length }),
-        byKey: (v) => Promise.resolve(items.find((c) => c[key] == v)),
+        key: options.key,
+        pageSize: options.pageSize,
+        load: (e) => {
+            const result = e.predicate ? _.filter(items, e.predicate) : items;
+            return Promise.resolve({
+                items: result.slice(e.skip, e.skip + e.take),
+                total: result.length
+            });
+        },
+        byKey: (v) => Promise.resolve(items.find(c => c[options.key] == v))
     };
     return new AXDateSource(config);
 }
@@ -640,12 +705,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
 class AXRippleDirective {
     constructor(el) {
         this.el = el;
-        el.nativeElement.addEventListener('click', this.createRipple);
+        this.axRippleColor = 'rgb(0, 0, 0 , 0.1)';
+        el.nativeElement.addEventListener('click', this.createRipple.bind(this));
     }
     ngOnDestroy() {
-        this.el.nativeElement.removeEventListener('click', this.createRipple);
+        this.el.nativeElement.removeEventListener('click', this.createRipple.bind(this));
     }
     createRipple(event) {
+        this.el.nativeElement.style.overflow = 'hidden';
         const element = event.currentTarget;
         const rect = element.getBoundingClientRect();
         const x = Math.floor(((event.clientX - rect.left) / (rect.right - rect.left)) * element.clientWidth);
@@ -656,22 +723,26 @@ class AXRippleDirective {
         circle.style.width = circle.style.height = `${diameter}px`;
         circle.style.left = `${x - radius}px`;
         circle.style.top = `${y - radius}px`;
-        circle.classList.add('ripple');
-        const ripple = element.getElementsByClassName('ripple')[0];
+        circle.style.backgroundColor = `${this.axRippleColor}`;
+        circle.classList.add('ax-ripple');
+        const ripple = element.getElementsByClassName('ax-ripple')[0];
         if (ripple) {
             ripple.remove();
+            // this.el.nativeElement.style.overflow = 'initial';
         }
         element.appendChild(circle);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXRippleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.9", type: AXRippleDirective, selector: "[axRipple]", ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.9", type: AXRippleDirective, selector: "[axRipple]", inputs: { axRippleColor: "axRippleColor" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXRippleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axRipple]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { axRippleColor: [{
+                type: Input
+            }] } });
 
 class AXCommonModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -863,11 +934,6 @@ class MXInteractiveComponent extends MXBaseComponent {
          *  @event
          */
         this.onBlur = new EventEmitter();
-        /**
-         *  Fires each time the user clicks the button.
-         *  @event
-         */
-        this.onClick = new EventEmitter();
     }
     registerOnTouched(fn) {
         this.onTouchedCallback = fn;
@@ -924,13 +990,18 @@ class MXInteractiveComponent extends MXBaseComponent {
             nativeEvent: e,
         });
     }
-    emitOnClickEvent(e) {
-        this.onClick.emit({
-            component: this,
-            htmlElement: this.getHostElement(),
-            nativeEvent: e,
-        });
-    }
+    // /**
+    //  *  Fires each time the user clicks the button.
+    //  *  @event
+    //  */
+    // onClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();
+    // protected emitOnClickEvent(e: MouseEvent): void {
+    //   this.onClick.emit({
+    //     component: this,
+    //     htmlElement: this.getHostElement(),
+    //     nativeEvent: e,
+    //   });
+    // }
     focus() {
         AXHtmlUtil.focusElement(this.getHostElement());
     }
@@ -1282,10 +1353,10 @@ class MXSelectionValueComponent extends MXValueComponent {
         super(...arguments);
         this._valueField = 'id';
         this._textField = 'text';
-        this._hintField = 'hint';
         this._disabledField = 'disabled';
         this._multiple = false;
         this._selectedItems = [];
+        this._cacheList = [];
     }
     get valueField() {
         return this._valueField;
@@ -1305,15 +1376,6 @@ class MXSelectionValueComponent extends MXValueComponent {
             value: v,
         });
     }
-    get hintField() {
-        return this._hintField;
-    }
-    set hintField(v) {
-        this.setOption({
-            name: 'hintField',
-            value: v,
-        });
-    }
     get disabledField() {
         return this._disabledField;
     }
@@ -1336,41 +1398,78 @@ class MXSelectionValueComponent extends MXValueComponent {
         return this._selectedItems || [];
     }
     internalSetValue(value) {
-        const normalizedItems = Array.isArray(value)
-            ? this.normalizeItemsList(value)
-            : this.normalizeItemsList([value]);
-        return this.multiple ? normalizedItems : normalizedItems[0];
+        const isArray = Array.isArray(value);
+        if (value == null || (isArray && value.length == 0)) {
+            return this.multiple ? [] : null;
+        }
+        const normalizedItems = isArray
+            ? this.normalizeItemsList(value, true)
+            : this.normalizeItemsList([value], true);
+        if (normalizedItems.length == 0) {
+            return this.multiple ? [] : null;
+        }
+        const result = this.multiple
+            ? normalizedItems.map((c) => c[this.valueField])
+            : normalizedItems[0][this.valueField];
+        return result;
     }
     emitOnValueChangedEvent(oldValue, newValue) {
         this._normalizeSelectedItems();
         super.emitOnValueChangedEvent(oldValue, newValue);
     }
-    normalizeItemsList(items) {
+    normalizeItemsList(items, findBykey = false) {
         if (items == null)
             return [];
-        return items.filter((c) => c != null).map((i) => this.normalizeItem(i));
+        return items.filter((c) => c != null).map((i) => this.normalizeItem(i, findBykey));
     }
-    normalizeItem(item) {
+    normalizeItem(item, findBykey = false) {
+        const complex = typeof item == 'object';
+        const key = complex ? item[this.valueField] : `${item}`;
+        const cacheKey = `k-${key}`;
+        const hasText = !complex || item[this.textField] != null;
+        //
+        if (this._cacheList[cacheKey])
+            return this._cacheList[cacheKey];
+        //
         const obj = {};
-        if (typeof item == 'object') {
+        if (complex && hasText) {
             Object.assign(obj, item);
         }
-        else if (typeof item != 'function') {
-            const existsItem = this.getItemByKey(item);
-            if (existsItem)
-                Object.assign(obj, existsItem);
+        else {
+            const existsItem = findBykey ? this.getItemByKey(key) : null;
+            if (existsItem && existsItem instanceof Promise) {
+                obj[this.valueField] = key;
+                obj[this.textField] = key;
+                obj['isLoading'] = true;
+                //
+                existsItem.then((r) => {
+                    if (typeof r === 'object') {
+                        obj[this.valueField] = r[this.valueField];
+                        obj[this.textField] = r[this.textField];
+                    }
+                    else {
+                        obj[this.valueField] = obj[this.textField] = r || key;
+                    }
+                }).finally(() => {
+                    obj['isLoading'] = false;
+                    this.cdr.markForCheck();
+                });
+            }
+            else if (existsItem) {
+                obj[this.valueField] = existsItem;
+            }
             else {
                 obj[this.valueField] = item;
-                obj[this.textField] = item.toString();
             }
         }
         if (!obj[this.textField]) {
             obj[this.textField] = obj[this.valueField];
         }
+        this._cacheList[cacheKey] = obj;
         return obj;
     }
     _normalizeSelectedItems() {
-        const values = Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
+        const values = Array.isArray(this.value) ? this.value : this.value != null ? [this.value] : [];
         this._selectedItems = values.map((v) => this.normalizeItem(v));
     }
     unselectItems(...items) {
@@ -1419,7 +1518,7 @@ class MXSelectionValueComponent extends MXValueComponent {
     }
     getDisplayText(item) {
         const normalizeItem = this.normalizeItem(item);
-        return normalizeItem[this.textField];
+        return normalizeItem['isLoading'] ? 'Loading...' : normalizeItem[this.textField];
     }
     getValue(item) {
         const normalizeItem = this.normalizeItem(item);