@acorex/components 6.0.1 → 6.0.2

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

@@ -1,56 +0,0 @@
-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

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

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

@@ -1,176 +0,0 @@
-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

@@ -1,14 +0,0 @@
-
-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

@@ -1,135 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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))
-        }
-    }
-}