@acorex/components 6.0.0 → 6.0.1

package/mixin/src/color-look-mixing.class.ts

@@ -0,0 +1,56 @@
+import { EventEmitter } from "@angular/core";
+import { AXStyleColorType, AXStyleLookType } from "@acorex/components/common";
+import { AXBaseComponent } from "./base-components.class";
+import { Constructor } from "./constratctor";
+
+export function _ColorLookComponentMixin<TBase extends Constructor<AXBaseComponent>>(Base: TBase) {
+    return class extends Base {
+
+        constructor(...args: any[]) {
+            super(...args);
+          }
+
+        colorChange: EventEmitter<AXStyleColorType> = new EventEmitter();
+        _color: AXStyleColorType = 'primary';
+        /**
+        *  Predefined color schemes
+        */
+        get color(): AXStyleColorType {
+            return this._color;
+        }
+        set color(value: AXStyleColorType) {
+            this._setOption({
+                name: 'color',
+                value,
+                afterCallback: () => {
+                    this._cdr.markForCheck();
+                }
+            });
+        }
+
+        lookChange: EventEmitter<AXStyleLookType> = new EventEmitter();
+        _look?: AXStyleLookType = 'default';
+        /**
+        *  Predefined look schemes
+        */
+        get look(): AXStyleLookType {
+            return this._look!;
+        }
+        set look(value: AXStyleLookType) {
+            this._setOption({
+                name: 'look',
+                value,
+                afterCallback: () => {
+                    this._cdr.markForCheck();
+                }
+            });
+        }
+    }
+}
+
+
+export const COLOR_LOOK_INPUTS = [
+    'color',
+    'look',
+  ];
+export const COLOR_LOOK_OUTPUT = ['lookChange','colorChange'];

package/mixin/src/constratctor.ts

@@ -0,0 +1,3 @@
+export type Constructor<T = {}> = new (...args: any[]) => T;
+
+export type AbstractConstructor<T> = Function & { prototype: T };

package/mixin/src/datalist-component.class.ts

@@ -0,0 +1,176 @@
+import { unionBy, flatMapDeep } from 'lodash-es';
+import { AXBaseComponent } from './base-components.class';
+import { Constructor } from './constratctor';
+import { AXDataListFetchDataCallback, AXDataListItems } from './datalist.class';
+
+export function _DatalistComponenetMixin<
+  TBase extends Constructor<AXBaseComponent>
+>(Base: TBase) {
+  return class extends Base {
+    valueField: string = 'id';
+    textField: string = 'text';
+    childrenField: string;
+    pageSize: number = 10;
+
+    #currentPage: number = 0;
+    #isLoading: boolean = false;
+    #loadedItems: any[] = [];
+    #flatItems: any[] = [];
+    #totalItems: number = 0;
+
+    #isLazy: boolean = false;
+
+    get totalCount(): number {
+      return this.#totalItems;
+    }
+
+    get isLazy(): boolean {
+      return this.#isLazy;
+    }
+
+    get loadedCount(): number {
+      return this.#loadedItems?.length || 0;
+    }
+
+    constructor(...args: any[]) {
+      super(...args);
+    }
+
+    #items: AXDataListItems = [];
+    get items(): AXDataListItems {
+      return this.#items;
+    }
+    set items(v: AXDataListItems) {
+      if (Array.isArray(v)) {
+        this.#items = this._formatData(v);
+        this._onDataLoaded();
+        this.#generateFlatItems();
+      } else if (typeof v === 'function') {
+        this.#isLazy = true;
+        this.#items = v;
+      } else {
+        this.#items = [];
+        this._onDataLoaded();
+        this.#generateFlatItems();
+      }
+    }
+
+    get displayItems(): any[] {
+      if (Array.isArray(this.items)) {
+        return (this.#items || []) as any[];
+      } else if (typeof this.#items == 'function') {
+        return this.#loadedItems || [];
+      }
+      return [];
+    }
+
+    get flatItems(): any[] {
+      return this.#flatItems || [];
+    }
+
+    get isLoading(): boolean {
+      return this.#isLoading;
+    }
+
+    _formatData(v: any[]) {
+      return unionBy(
+        v.map((o, i) => {
+          if (typeof o == 'object') return o;
+          else {
+            const no: any = {};
+            no[this.valueField] = o;
+            no[
+              Array.isArray(this.textField) ? this.textField[0] : this.textField
+            ] = o;
+            return no;
+          }
+        }),
+        this.valueField
+      );
+      // return v.map((o, i) => {
+      //     if (typeof o == 'object')
+      //         return o
+      //     else {
+      //         const no: any = {};
+      //         no[this.valueField] = o;
+      //         no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
+      //         return no;
+      //     }
+      // });
+    }
+
+    _fetchData(opts?: { searchQuery?: string }) {
+      const skip = this.#currentPage * this.pageSize,
+        take = this.pageSize;
+      if (
+        (this.loadedCount >= this.totalCount && this.totalCount != 0) ||
+        this.#isLoading ||
+        !this.#isLazy ||
+        skip > this.totalCount
+      ) {
+        return;
+      }
+      if (this.#items) {
+        this.#isLoading = true;
+        const fetchFn = this.#items as AXDataListFetchDataCallback;
+        fetchFn({ skip, take, searchQuery: opts?.searchQuery })
+          .then((c) => {
+            if (Array.isArray(c)) {
+              this.#loadedItems = this._formatData(c);
+              this.#totalItems = c.length;
+            } else {
+              this.#totalItems = c.total || c.items?.length || 0;
+              this.#loadedItems = [
+                ...new Set(this.#loadedItems.concat(this._formatData(c.items))),
+              ];
+              this.#currentPage++;
+            }
+            this._cdr.markForCheck();
+          })
+          .finally(() => {
+            this.#isLoading = false;
+            this._onDataLoaded();
+            this.#generateFlatItems();
+          });
+      }
+    }
+
+    _onDataLoaded() {}
+
+    #generateFlatItems(): void {
+      const flattenFn = (item) => {
+        return [item, flatMapDeep(item.children, flattenFn)];
+      };
+      this.#flatItems = flatMapDeep(this.displayItems, flattenFn);
+    }
+
+    _getItemDisplayTextTemplte(item) {
+      if (item)
+        return Array.isArray(this.textField)
+          ? this.textField.map((c) => item[c]).join(',')
+          : item[this.textField];
+      else return 'Loading...';
+    }
+
+    _trackByFunction(item) {
+      if (!item) return null;
+      return item[this.valueField];
+    }
+
+    refresh() {
+      this.empty();
+      this._fetchData();
+    }
+
+    empty() {
+      this.#isLoading = false;
+      this.#currentPage = 0;
+      if (this.#loadedItems) {
+        this.#loadedItems.length = 0;
+      }
+    }
+  };
+}
+
+export const DATALIST_INPUTS = ['pageSize', 'valueField', 'textField', 'items'];
+export const DATALIST_OUTPUT = [];

package/mixin/src/datalist.class.ts

@@ -0,0 +1,14 @@
+
+export interface AXDataListQuery {
+    take?: number;
+    skip?: number;
+    searchQuery?: string;
+}
+export interface AXDataListFetchCallbackResult {
+    items: any[];
+    total: number;
+};
+
+export type AXDataListFetchDataCallback = (e: AXDataListQuery) => Promise<any[] | AXDataListFetchCallbackResult>;
+
+export type AXDataListItems = any[] | AXDataListFetchDataCallback;

package/mixin/src/dropdown-mixin.class.ts

@@ -0,0 +1,135 @@
+import { EventEmitter } from "@angular/core";
+import { AXBaseComponent } from "./base-components.class";
+import { Constructor } from "./constratctor";
+import { AXEvent,AXConnectedPosition } from "@acorex/components/common";
+
+
+
+export interface DropdownComponentInterface {
+    open(): void;
+    close(): void;
+    toggle(): void;
+    isOpen: boolean;
+}
+
+
+export function _DropdownComponenetMixin<TBase extends Constructor<AXBaseComponent>>(Base: TBase) {
+
+    abstract class Mixin extends Base {
+
+        readonly: boolean = false;
+
+
+        onOpened: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();
+        onClosed: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();
+
+        //TODO: Circular dependency on AXPopverComponent
+        abstract popover: any;
+
+        position: AXConnectedPosition[] = [];
+
+        _emitOnOpenedEvent() {
+
+            this.onOpened.emit({
+                component: this,
+                htmlElement: this._getHostElement()
+            });
+        }
+
+        _emitOnClosedEvent() {
+            this.onClosed.emit({
+                component: this,
+                htmlElement: this._getHostElement()
+            });
+        }
+
+
+        onInit(): void {
+            super.onInit();
+            this.popover.onOpened.subscribe(this.onOpened);
+            this.popover.onClosed.subscribe(this.onClosed);
+        }
+
+        onViewInit() {
+            // wait for documentElement
+            setTimeout(() => {
+                if (this.position.length == 0) {
+                    const offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));
+                    const list: AXConnectedPosition[] = [
+                        {
+                            originX: 'start',
+                            originY: 'bottom',
+                            overlayX: 'start',
+                            overlayY: 'top',
+                            offsetY: offset
+                        },
+                        {
+                            originX: 'start',
+                            originY: 'top',
+                            overlayX: 'start',
+                            overlayY: 'bottom',
+                            offsetY: -offset
+                        },
+                        {
+                            originX: 'end',
+                            originY: 'bottom',
+                            overlayX: 'end',
+                            overlayY: 'top',
+                            offsetY: offset
+                        },
+                        {
+                            originX: 'end',
+                            originY: 'top',
+                            overlayX: 'end',
+                            overlayY: 'bottom',
+                            offsetY: -offset
+                        },
+                    ];
+                    this.position.push(...list);
+                }
+            }, 500);
+        }
+
+        toggle() {
+            if (this['disabled'] !== true) {
+                this.popover.toggle();
+            }
+        }
+
+        close() {
+            if (!this.isOpen || this['disabled']) {
+                return;
+            }
+            this.popover.close();
+            (this as any)?.focus();
+        }
+
+        open() {
+            if (this.isOpen || this['disabled']) {
+                return;
+            }
+            this.popover.open();
+            this.popover.focus();
+        }
+
+        get isOpen(): boolean {
+            return this.popover?.isOpen;
+        }
+
+        constructor(...args: any[]) {
+            super(...args);
+        }
+
+    }
+
+    return Mixin;
+}
+
+
+export const DROPDOWN_INPUTS = [
+    'isOpen',
+    'fitParent',
+    'dropdownWidth',
+    'position'
+];
+export const DROPDOWN_OUTPUT = ['onOpened', 'onClosed'];

package/mixin/src/interactive-mixin.class.ts

@@ -0,0 +1,97 @@
+import { coerceBooleanProperty, coerceNumberProperty } from "@angular/cdk/coercion";
+import { EventEmitter } from "@angular/core";
+import { AXBaseComponent } from "./base-components.class";
+import { Constructor } from "./constratctor";
+import { AXFocusEvent } from "@acorex/components/common";
+
+
+export function _InteractiveComponenetMixin<TBase extends Constructor<AXBaseComponent>>(Base: TBase) {
+    abstract class Mixin extends Base {
+
+        #disabled: boolean = false;
+        /**
+        *  If set to true, it disables the component.
+        */
+        get disabled(): boolean { return this.#disabled; }
+        set disabled(value: boolean) {
+            value = this._onOptionChanging({ name: 'disabled', value: value });
+            if (value != this.disabled) {
+                const oldValue = this.disabled;
+                this.#disabled = coerceBooleanProperty(value);
+                this._onOptionChanged({ name: 'disabled', oldValue, newValue: value });
+                this._cdr.markForCheck();
+            }
+        }
+
+
+
+        #tabIndex: number = 0;
+        /**
+        *  Specifies the tabindex of the component.
+        */
+        get tabIndex(): number { return this.disabled ? -1 : this.#tabIndex; }
+        set tabIndex(value: number) {
+            this.#tabIndex = value != null ? coerceNumberProperty(value) : 0;
+        }
+
+        /**
+        *  Fires each time the component gets focused.
+        *  @event
+        */
+        onFocus: EventEmitter<AXFocusEvent> = new EventEmitter<AXFocusEvent>();
+
+        _emitOnFocusEvent(e: FocusEvent): void {
+            this.onFocus.emit({
+                component: this,
+                htmlElement: this._getHostElement(),
+                nativeEvent: e
+            });
+        }
+
+        /**
+        *  Fires each time the component gets blurred.
+        *  @event
+        */
+        onBlur: EventEmitter<AXFocusEvent> = new EventEmitter<AXFocusEvent>();
+
+        _emitOnBlurEvent(e: FocusEvent): void {
+            this.onBlur.emit({
+                component: this,
+                htmlElement: this._getHostElement(),
+                nativeEvent: e
+            });
+        }
+
+        /**
+        *  Focuses the component.
+        */
+        focus(): void {
+            const list = ['button', 'input', '[href]', 'select', 'textarea', '[tabindex]'].map(c => c + ':not([tabindex="-1"])');
+            const focusable = this._getHostElement().querySelector<HTMLElement>(list.join(', '));
+            if (focusable) {
+                focusable.focus();
+            }
+        }
+
+        /**
+        *  Check component is focused or has any focused element.
+        */
+        hasFocus(): boolean {
+            return this._getHostElement().matches(':focus-within') || this._getHostElement().matches(':focus');
+        }
+
+        /**
+        *  @ignore
+        */
+        constructor(...args: any[]) {
+            super(...args);
+        }
+    }
+    return Mixin;
+}
+
+export const INTERACTIVE_INPUTS = [
+    'disabled',
+    'tabIndex',
+];
+export const INTERACTIVE_OUTPUT = ['onBlur', 'onFocus'];

package/mixin/src/loading-mixin.class.ts

@@ -0,0 +1,31 @@
+import { AXBaseComponent } from './base-components.class';
+import { Constructor } from './constratctor';
+
+export function _LoadingComponenetMixin<TBase extends Constructor<AXBaseComponent>>(Base: TBase) {
+    return class extends Base {
+        /**
+       *  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons.
+       */
+        loading: boolean = false;
+        /**
+       *  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons.
+       */
+        loadingIconClass: string;
+        /**
+       *  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons.
+       */
+        loadingText: string;
+
+
+        constructor(...args: any[]) {
+            super(...args.slice(0, 2))
+        }
+
+        _onInternalInit() {
+            // if (!this.size) {
+            //     this.size = AXConfig.get('layout.size', 'sm');
+            // }
+            super._onInternalInit();
+        }
+    }
+}

package/mixin/src/mixin.class.ts

@@ -0,0 +1,70 @@
+import { AXBaseComponent, _BaseComponenetMixin } from './base-components.class';
+import { _BaseMenuComponentMixin } from './base-menu-mixin.class';
+import { _ButtonComponentMixin } from './button-mixin.class';
+import { _ClickableComponenetMixin } from './clickable-mixin.class';
+import { _ColorLookComponentMixin } from './color-look-mixing.class';
+import { _DatalistComponenetMixin } from './datalist-component.class';
+import { _DropdownComponenetMixin } from './dropdown-mixin.class';
+import { _InteractiveComponenetMixin } from './interactive-mixin.class';
+import { _SelectionComponenetMixin } from './selection-component.class';
+import { _SizableComponenetMixin } from './sizable-mixin.class';
+import { _TextboxComponenetMixin } from './textbox-mixin.class';
+import { _ValueComponenetMixin } from './value-mixin.class';
+
+export const AXBaseComponentMixin = _BaseComponenetMixin(AXBaseComponent);
+
+export const AXSizableComponentMixin = _SizableComponenetMixin(
+  _BaseComponenetMixin(AXBaseComponent)
+);
+
+export const AXInteractiveComponenetMixin = _SizableComponenetMixin(
+  _InteractiveComponenetMixin(AXBaseComponent)
+);
+
+export const AXBaseClickableMixin = _InteractiveComponenetMixin(
+  _ClickableComponenetMixin(AXBaseComponent)
+);
+
+export const AXBaseButtonMixin = _SizableComponenetMixin(
+  _InteractiveComponenetMixin(
+    _ClickableComponenetMixin(
+      _ColorLookComponentMixin(_ButtonComponentMixin(AXBaseComponent))
+    )
+  )
+);
+
+export const AXBaseValueComponentMixin = _InteractiveComponenetMixin(_ValueComponenetMixin<any>(AXBaseComponent))
+
+
+export const AXBaseTextBoxMixin = _SizableComponenetMixin(
+  _InteractiveComponenetMixin(
+    _ValueComponenetMixin(_TextboxComponenetMixin(AXBaseComponent))
+  )
+);
+
+export const AXBaseSelectionValueMixin = _SizableComponenetMixin(
+  _InteractiveComponenetMixin(
+    _DatalistComponenetMixin(
+      _SelectionComponenetMixin(_ValueComponenetMixin<any>(AXBaseComponent))
+    )
+  )
+);
+
+export const AXBaseValueDropdownMixin = _InteractiveComponenetMixin(
+  _DropdownComponenetMixin(
+    _DatalistComponenetMixin(_ValueComponenetMixin<any>(AXBaseComponent))
+  )
+);
+
+export const AXBaseSelectionDropdownMixin = _DropdownComponenetMixin(
+  AXBaseSelectionValueMixin
+);
+
+export const AXBaseDropdownMixin = _SizableComponenetMixin(
+  _InteractiveComponenetMixin(_DropdownComponenetMixin(AXBaseComponent))
+);
+
+export const AXBaseMenuMixin = _InteractiveComponenetMixin(
+  _BaseMenuComponentMixin(AXBaseComponent)
+);
+export const AXAvatarMixin = _ColorLookComponentMixin(AXBaseComponent);

package/mixin/src/page-component.class.ts

@@ -0,0 +1,15 @@
+import { AXBaseComponent } from "./base-components.class";
+import { Constructor } from "./constratctor";
+
+export function _PageComponenetMixin<TBase extends Constructor<AXBaseComponent>>(Base: TBase) {
+    return class extends Base {
+
+
+         /**
+        *  @ignore
+        */
+          constructor(...args: any[]) {
+            super(...args.slice(0, 2))
+        }
+    }
+}