@acorex/components 7.4.8 → 7.5.1

package/fesm2022/acorex-components-mixin.mjs

@@ -1,6 +1,8 @@
 import * as i0 from '@angular/core';
 import { Injectable, Inject, EventEmitter } from '@angular/core';
 import { unionBy, flatMapDeep, clone } from 'lodash-es';
+import { defer, Subject, BehaviorSubject, combineLatest } from 'rxjs';
+import { finalize, switchMap, startWith, share, map } from 'rxjs/operators';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 
 class AXBaseComponent {
@@ -14,8 +16,7 @@ class AXBaseComponent {
             return this.#rtl;
         else
             return (this._getHostElement()?.classList?.contains('ax-rtl') ||
-                window.getComputedStyle(this._getHostElement(), null)?.getPropertyValue('direction') ===
-                    'rtl');
+                window.getComputedStyle(this._getHostElement(), null)?.getPropertyValue('direction') === 'rtl');
     }
     set rtl(value) {
         this.#rtl = value;
@@ -318,18 +319,18 @@ function _ClickableComponenetMixin(Base) {
             this.onClick.emit({
                 component: this,
                 htmlElement: this._getHostElement(),
-                nativeEvent: e
+                nativeEvent: e,
             });
         }
         /**
-        *  @ignore
-        */
+         *  @ignore
+         */
         constructor(...args) {
             super(...args);
             /**
-            *  Fires each time the user clicks the button.
-            *  @event
-            */
+             *  Fires each time the user clicks the button.
+             *  @event
+             */
             this.onClick = new EventEmitter();
         }
     };
@@ -340,9 +341,9 @@ function _ColorLookComponentMixin(Base) {
         constructor(...args) {
             super(...args);
             this.colorChange = new EventEmitter();
-            this._color = 'default';
+            this._color = 'ghost';
             this.lookChange = new EventEmitter();
-            this._look = 'default';
+            this._look = 'solid';
         }
         /**
          *  Predefined color schemes
@@ -483,9 +484,7 @@ function _DatalistComponenetMixin(Base) {
                     }
                     else {
                         this.#totalItems = c.total || c.items?.length || 0;
-                        this.#loadedItems = [
-                            ...new Set(this.#loadedItems.concat(this._formatData(c.items))),
-                        ];
+                        this.#loadedItems = [...new Set(this.#loadedItems.concat(this._formatData(c.items)))];
                         this.#currentPage++;
                     }
                     this._cdr.markForCheck();
@@ -533,7 +532,49 @@ function _DatalistComponenetMixin(Base) {
 const DATALIST_INPUTS = ['pageSize', 'valueField', 'textField', 'items'];
 const DATALIST_OUTPUT = [];
 
-;
+function prepare(callback) {
+    return (source) => defer(() => {
+        callback();
+        return source;
+    });
+}
+function indicate(indicator) {
+    return (source) => source.pipe(prepare(() => indicator.next(true)), finalize(() => indicator.next(false)));
+}
+class AXPaginatedDataSource {
+    constructor(endpoint, initialSort, initialQuery, take = 20) {
+        this.endpoint = endpoint;
+        this.take = take;
+        this.pageNumber = new Subject();
+        this.loading = new Subject();
+        this.loading$ = this.loading.asObservable();
+        this.query = new BehaviorSubject(initialQuery);
+        this.sort = new BehaviorSubject(initialSort);
+        const param$ = combineLatest([this.query, this.sort]);
+        this.page$ = param$.pipe(switchMap(([query, sort]) => this.pageNumber.pipe(startWith(0), switchMap((page) => this.endpoint({
+            take,
+            skip: page * take,
+            sort,
+        }, query).pipe(indicate(this.loading))))), share());
+    }
+    sortBy(sort) {
+        const lastSort = this.sort.getValue();
+        const nextSort = { ...lastSort, ...sort };
+        this.sort.next(nextSort);
+    }
+    queryBy(query) {
+        const lastQuery = this.query.getValue();
+        const nextQuery = { ...lastQuery, ...query };
+        this.query.next(nextQuery);
+    }
+    fetch(page) {
+        this.pageNumber.next(page);
+    }
+    connect() {
+        return this.page$.pipe(map((page) => page.items));
+    }
+    disconnect() { }
+}
 
 function _DropdownComponenetMixin(Base) {
     class Mixin extends Base {
@@ -559,9 +600,7 @@ function _DropdownComponenetMixin(Base) {
             setTimeout(() => {
                 if (this.position.length == 0) {
                     const a = 0;
-                    const offset = Number(getComputedStyle(document.documentElement)
-                        .getPropertyValue('--ax-base-size')
-                        .replace('px', ''));
+                    const offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));
                     const list = [
                         {
                             originX: 'start',
@@ -635,9 +674,11 @@ function _InteractiveComponenetMixin(Base) {
     class Mixin extends Base {
         #disabled;
         /**
-        *  If set to true, it disables the component.
-        */
-        get disabled() { return this.#disabled; }
+         *  If set to true, it disables the component.
+         */
+        get disabled() {
+            return this.#disabled;
+        }
         set disabled(value) {
             value = this._onOptionChanging({ name: 'disabled', value: value });
             if (value != this.disabled) {
@@ -649,9 +690,11 @@ function _InteractiveComponenetMixin(Base) {
         }
         #tabIndex;
         /**
-        *  Specifies the tabindex of the component.
-        */
-        get tabIndex() { return this.disabled ? -1 : this.#tabIndex; }
+         *  Specifies the tabindex of the component.
+         */
+        get tabIndex() {
+            return this.disabled ? -1 : this.#tabIndex;
+        }
         set tabIndex(value) {
             this.#tabIndex = value != null ? coerceNumberProperty(value) : 0;
         }
@@ -659,57 +702,54 @@ function _InteractiveComponenetMixin(Base) {
             this.onFocus.emit({
                 component: this,
                 htmlElement: this._getHostElement(),
-                nativeEvent: e
+                nativeEvent: e,
             });
         }
         _emitOnBlurEvent(e) {
             this.onBlur.emit({
                 component: this,
                 htmlElement: this._getHostElement(),
-                nativeEvent: e
+                nativeEvent: e,
             });
         }
         /**
-        *  Focuses the component.
-        */
+         *  Focuses the component.
+         */
         focus() {
-            const list = ['button', 'input', '[href]', 'select', 'textarea', '[tabindex]'].map(c => c + ':not([tabindex="-1"])');
+            const list = ['button', 'input', '[href]', 'select', 'textarea', '[tabindex]'].map((c) => c + ':not([tabindex="-1"])');
             const focusable = this._getHostElement().querySelector(list.join(', '));
             if (focusable) {
                 focusable.focus();
             }
         }
         /**
-        *  Check component is focused or has any focused element.
-        */
+         *  Check component is focused or has any focused element.
+         */
         hasFocus() {
             return this._getHostElement().matches(':focus-within') || this._getHostElement().matches(':focus');
         }
         /**
-        *  @ignore
-        */
+         *  @ignore
+         */
         constructor(...args) {
             super(...args);
             this.#disabled = false;
             this.#tabIndex = 0;
             /**
-            *  Fires each time the component gets focused.
-            *  @event
-            */
+             *  Fires each time the component gets focused.
+             *  @event
+             */
             this.onFocus = new EventEmitter();
             /**
-            *  Fires each time the component gets blurred.
-            *  @event
-            */
+             *  Fires each time the component gets blurred.
+             *  @event
+             */
             this.onBlur = new EventEmitter();
         }
     }
     return Mixin;
 }
-const INTERACTIVE_INPUTS = [
-    'disabled',
-    'tabIndex',
-];
+const INTERACTIVE_INPUTS = ['disabled', 'tabIndex'];
 const INTERACTIVE_OUTPUT = ['onBlur', 'onFocus'];
 
 function _SelectionComponenetMixin(Base) {
@@ -910,56 +950,65 @@ function _TextboxComponenetMixin(Base) {
         _emitOnKeydownEvent(e) {
             this.onKeyDown.emit({
                 component: this,
-                nativeEvent: e
+                nativeEvent: e,
             });
             this._setUserInteraction();
         }
         _emitOnKeyupEvent(e) {
             this.onKeyUp.emit({
                 component: this,
-                nativeEvent: e
+                nativeEvent: e,
             });
             this._setUserInteraction();
         }
         _emitOnKeypressEvent(e) {
             this.onKeyPress.emit({
                 component: this,
-                nativeEvent: e
+                nativeEvent: e,
             });
             this._setUserInteraction();
         }
         /**
-        *  @ignore
-        */
+         *  @ignore
+         */
         constructor(...args) {
             super(...args.slice(0, 2));
             /**
-           *  A string value that specifies the type of text box.
-           */
+             *  A string value that specifies the type of text box.
+             */
             this.type = 'text';
             /**
-            *  A string value that specifies the placeholder of text box.
-            */
+             *  A string value that specifies the placeholder of text box.
+             */
             this.placeholder = '';
             /**
-            *  Fires each time the user press a key.
-            *  @event
-            */
+             *  Fires each time the user press a key.
+             *  @event
+             */
             this.onKeyDown = new EventEmitter();
             /**
-          *  Fires each time the user press a key.
-          *  @event
-          */
+             *  Fires each time the user press a key.
+             *  @event
+             */
             this.onKeyUp = new EventEmitter();
             /**
-            *  Fires each time the user press a key.
-            *  @event
-            */
+             *  Fires each time the user press a key.
+             *  @event
+             */
             this.onKeyPress = new EventEmitter();
         }
     };
 }
-const TEXTBOX_INPUTS = ['placeholder', 'maxLength', 'allowNull', 'type', 'autoComplete', 'readonly', 'value', 'name'];
+const TEXTBOX_INPUTS = [
+    'placeholder',
+    'maxLength',
+    'allowNull',
+    'type',
+    'autoComplete',
+    'readonly',
+    'value',
+    'name',
+];
 const TEXTBOX_OUTPUT = ['valueChange', 'onValueChanged'];
 
 function _ValueComponenetMixin(Base) {
@@ -1203,8 +1252,8 @@ const AXAvatarMixin = _ColorLookComponentMixin(AXBaseComponent);
 function _PageComponenetMixin(Base) {
     return class extends Base {
         /**
-       *  @ignore
-       */
+         *  @ignore
+         */
         constructor(...args) {
             super(...args.slice(0, 2));
         }
@@ -1215,5 +1264,5 @@ function _PageComponenetMixin(Base) {
  * Generated bundle index. Do not edit.
  */
 
-export { AXAvatarMixin, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDropdownMixin, AXBaseMenuMixin, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXInteractiveComponenetMixin, AXSizableComponentMixin, BASEMENU_INPUTS, BASEMENU_OUTPUT, BASE_INPUTS, BASE_OUTPUT, BUTTON_INPUTS, BUTTON_OUTPUT, DATALIST_INPUTS, DATALIST_OUTPUT, DROPDOWN_INPUTS, DROPDOWN_OUTPUT, INTERACTIVE_INPUTS, INTERACTIVE_OUTPUT, SELECTION_INPUTS, SELECTION_OUTPUT, SIZABLE_INPUTS, SIZABLE_OUTPUT, TEXTBOX_INPUTS, TEXTBOX_OUTPUT, _BaseComponenetMixin, _BaseMenuComponentMixin, _ButtonComponentMixin, _ClickableComponenetMixin, _ColorLookComponentMixin, _DatalistComponenetMixin, _DropdownComponenetMixin, _InteractiveComponenetMixin, _PageComponenetMixin, _SelectionComponenetMixin, _SizableComponenetMixin, _TextboxComponenetMixin, _ValueComponenetMixin };
+export { AXAvatarMixin, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDropdownMixin, AXBaseMenuMixin, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXInteractiveComponenetMixin, AXPaginatedDataSource, AXSizableComponentMixin, BASEMENU_INPUTS, BASEMENU_OUTPUT, BASE_INPUTS, BASE_OUTPUT, BUTTON_INPUTS, BUTTON_OUTPUT, DATALIST_INPUTS, DATALIST_OUTPUT, DROPDOWN_INPUTS, DROPDOWN_OUTPUT, INTERACTIVE_INPUTS, INTERACTIVE_OUTPUT, SELECTION_INPUTS, SELECTION_OUTPUT, SIZABLE_INPUTS, SIZABLE_OUTPUT, TEXTBOX_INPUTS, TEXTBOX_OUTPUT, _BaseComponenetMixin, _BaseMenuComponentMixin, _ButtonComponentMixin, _ClickableComponenetMixin, _ColorLookComponentMixin, _DatalistComponenetMixin, _DropdownComponenetMixin, _InteractiveComponenetMixin, _PageComponenetMixin, _SelectionComponenetMixin, _SizableComponenetMixin, _TextboxComponenetMixin, _ValueComponenetMixin, indicate, prepare };
 //# sourceMappingURL=acorex-components-mixin.mjs.map