@acorex/components 5.0.5 → 5.0.9

package/src/lib/base/mixin/button-mixin.class.ts

@@ -1,145 +0,0 @@
-import { EventEmitter } from '@angular/core';
-import { AXStyleColorType, AXStyleButtonLook } from '../styles.class';
-import { AXBaseComponent } from './base-components.class';
-import { Constructor } from './constratctor';
-
-export function _ButtonComponentMixin<TBase extends Constructor<AXBaseComponent>>(Base: TBase) {
-  return class extends Base {
-    /**
-    *  Defines the primary text to show inside the button.
-    */
-    text: string = '';
-
-    /**
-    *  Trigger click event by Enter Key 
-    */
-    submitBehavior: boolean = false;
-
-    /**
-    *  Trigger click event by Esc Key
-    */
-    cancelBehavior: boolean = false;
-
-
-
-
-    colorChange: EventEmitter<AXStyleColorType> = new EventEmitter();
-    #color: AXStyleColorType = 'primary';
-    /**
-    *  Predefined color schemes
-    */
-    get color(): AXStyleColorType {
-      return this.#color;
-    }
-    set color(value: AXStyleColorType) {
-      value = this.onOptionChanging({ name: 'color', value: value });
-      if (value != this.#color) {
-        const oldValue = this.color;
-        this.#color = value;
-        this.colorChange.emit(value);
-        this.onOptionChanged({ name: 'color', oldValue, newValue: value });
-        this._cdr.markForCheck();
-      }
-    }
-
-    lookChange: EventEmitter<AXStyleButtonLook> = new EventEmitter();
-    #look?: AXStyleButtonLook = null;
-    /**
-    *  Predefined look schemes
-    */
-    get look(): AXStyleButtonLook {
-      return this.#look;
-    }
-    set look(value: AXStyleButtonLook) {
-      value = this.onOptionChanging({ name: 'look', value: value });
-      if (value != this.#look) {
-        const oldValue = this.color;
-        this.#look = value;
-        this.lookChange.emit(value);
-        this.onOptionChanged({ name: 'look', oldValue, newValue: value });
-        this._cdr.markForCheck();
-      }
-    }
-
-
-    toggleableChange: EventEmitter<boolean> = new EventEmitter();
-    #toggleable?: boolean = false;
-    /**
-    *  Provides visual styling that indicates if the Button is active
-    */
-    get toggleable(): boolean {
-      return this.#toggleable;
-    }
-    set toggleable(value: boolean) {
-      value = this.onOptionChanging({ name: 'toggleable', value: value });
-      if (value != this.#toggleable) {
-        const oldValue = this.toggleable;
-        this.#toggleable = value;
-        this.toggleableChange.emit(value);
-        this.onOptionChanged({ name: 'toggleable', oldValue, newValue: value });
-      }
-    }
-
-
-    selectedChange: EventEmitter<boolean> = new EventEmitter();
-    #selected?: boolean = false;
-    /**
-    *  Indicates if the Button is selected or not
-    */
-    get selected(): boolean {
-      return this.#selected;
-    }
-    set selected(value: boolean) {
-      value = this.onOptionChanging({ name: 'selected', value: value });
-      if (value != this.#selected) {
-        const oldValue = this.selected;
-        this.#selected = value;
-        this.selectedChange.emit(value);
-        this._cdr.markForCheck();
-        this.onOptionChanged({ name: 'selected', oldValue, newValue: value });
-      }
-    }
-
-
-
-
-    constructor(...args: any[]) {
-      super(...args);
-    }
-
-    _onInternalViewInit() {
-      super._onInternalViewInit();
-      if (this.submitBehavior) {
-        setTimeout(() => {
-          (this as any).focus();
-        }, 0);
-      }
-    }
-
-    _onInternalDestroy() {
-      super._onInternalDestroy();
-    }
-
-
-    get _classes() {
-      const cssClasses = {
-        'ax-button-icon': !this.text,
-        'ax-state-disabled': this["disabled"],
-        'ax-state-selected': this.selected,
-      };
-      cssClasses[`ax-${this.color || 'primary'}${this.look ? '-' + this.look : ''}`] = true;
-      return cssClasses;
-    }
-  };
-}
-
-export const BUTTON_INPUTS = [
-  'text',
-  'submitBehavior',
-  'cancelBehavior',
-  'color',
-  'look',
-  'toggleable',
-  'selected',
-];
-export const BUTTON_OUTPUT = ['onBlur', 'onFocus', 'onClick', 'selectedChange', 'toggleableChange'];

package/src/lib/base/mixin/clickable-mixin.class.ts

@@ -1,33 +0,0 @@
-import { EventEmitter } from "@angular/core";
-import { AXBaseComponent } from "./base-components.class";
-import { Constructor } from "./constratctor";
-import { AXClickEvent } from "../events.class";
-
-
-export function _ClickableComponenetMixin<TBase extends Constructor<AXBaseComponent>>(Base: TBase){
-    return class extends Base {
-
-        /**
-        *  Fires each time the user clicks the button.
-        *  @event
-        */
-        onClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();
-
-        _emitOnClickEvent(e: MouseEvent): void {
-            
-            this.onClick.emit({
-                component: this,
-                htmlElement: this._getHostElement(),
-                nativeEvent: e
-            });
-        }
-
-        /**
-        *  @ignore
-        */
-        constructor(...args: any[]) {
-            super(...args);
-        }
-    }
-}
-

package/src/lib/base/mixin/constratctor.ts

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

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

@@ -1,105 +0,0 @@
-import { AXBaseComponent } from './base-components.class';
-import { Constructor } from './constratctor';
-
-
-export function _DatalistComponenetMixin<TBase extends Constructor<AXBaseComponent>>(Base: TBase) {
-    return class extends Base {
-
-        valueField: string = 'id';
-        textField: string | string[] = 'text';
-        groupValueField: string = 'group';
-        groupTextField: string | string[] = 'group';
-        pageSize: number = 10;
-
-        #currentPage: number = 0;
-        #isLoading: boolean = false;
-        #loadedItems: any[] = [];
-        #totalItems: number = 0;
-
-        #isLazy: boolean = false;
-
-        get totalCount(): number {
-            return this.#totalItems;
-        }
-
-        get loadedCount(): number {
-            return this.#loadedItems?.length || 0;
-        }
-
-        constructor(...args: any[]) {
-            super(...args);
-
-        }
-
-        #items: any = [];
-        get items(): any {
-            return this.#items;
-        }
-        set items(v: any) {
-            this.#items = v;
-        }
-
-        get displayItems() {
-            if (Array.isArray(this.items)) {
-                return this.#items || [];
-            }
-            else if (typeof this.#items == 'function') {
-                return this.#loadedItems || [];
-            }
-            return [];
-        }
-
-        get isLoading() {
-            return this.#isLoading;
-        }
-
-        _fetchData() {
-            if ((this.loadedCount >= this.totalCount && this.totalCount != 0) || this.#isLoading || !this.#isLazy) {
-                return;
-            }
-            if (this.#items) {
-                this.#isLoading = true;
-                this.#items({ skip: this.#currentPage * this.pageSize, take: this.pageSize }).then(c => {
-                    if (Array.isArray(c)) {
-                        this.#loadedItems = c;
-                        this.#totalItems = c.length;
-                    }
-                    else {
-                        this.#totalItems = c.total || c.items?.length || 0;
-                        this.#loadedItems = this.#loadedItems.concat(c.items);
-                        this.#currentPage++;
-                    }
-                    this._cdr.markForCheck();
-                }).finally(() => {
-                    this.#isLoading = false;
-                    this._onDataLoaded();
-                });
-            }
-        }
-
-        _onInternalInit() {
-            if (typeof this.#items == 'function') {
-                this.#isLazy = true;
-                this._fetchData();
-            }
-            super._onInternalInit();
-        }
-
-        _onDataLoaded() {
-
-        }
-
-        _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];
-        }
-
-    }
-}

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

@@ -1,55 +0,0 @@
-import { coerceBooleanProperty } from "@angular/cdk/coercion";
-import { EventEmitter } from "@angular/core";
-import { AXBaseComponent } from "./base-components.class";
-import { Constructor } from "./constratctor";
-import { AXEvent } from "../events.class";
-
-
-
-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;
-        get readonly() { return this.#readonly; }
-        set readonly(value: any) { this.#readonly = coerceBooleanProperty(value); }
-    
-        fitParent: boolean = true;
-    
-        onOpened: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();
-        onClosed: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();
-    
-        _emitOnOpenedEvent() {
-            //** call from interactive mixin **//
-            //(this as any).focus();
-            //
-            this.onOpened.emit({
-                component: this,
-                htmlElement: this._getHostElement()
-            });
-        }
-    
-        _emitOnClosedEvent() {
-            (this as any).focus();
-            this.onClosed.emit({
-                component: this,
-                htmlElement: this._getHostElement()
-            });
-        }
-    
-        constructor(...args: any[]) {
-            super(...args);
-        }
-
-    }
-
-    return Mixin;
-}

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

@@ -1,83 +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 "../events.class";
-
-
-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 || (this as any).readonly ? -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 focusable = this._getHostElement().querySelector<HTMLElement>('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-            if (focusable) {
-                focusable.focus();
-            }
-        }
-
-        /**
-        *  @ignore
-        */
-        constructor(...args: any[]) {
-            super(...args);
-        }
-    }
-    return Mixin;
-}

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

@@ -1,32 +0,0 @@
-import { AXConfig } from '@acorex/core';
-import { AXBaseComponent, AXElementSize } 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/src/lib/base/mixin/mixin.class.ts

@@ -1,70 +0,0 @@
-import { AXBaseComponent, _BaseComponenetMixin } from './base-components.class';
-import { _ButtonComponentMixin } from './button-mixin.class';
-import { _ClickableComponenetMixin } from './clickable-mixin.class';
-import { _DatalistComponenetMixin } from './datalist-component.class';
-import { _DropdownComponenetMixin } from './dropdown-mixin.class';
-import { _InteractiveComponenetMixin } from './interactive-mixin.class';
-import { _LoadingComponenetMixin } from './loading-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 = _SizableComponenetMixin(
-  _InteractiveComponenetMixin(_ClickableComponenetMixin(AXBaseComponent))
-);
-
-export const AXBaseButtonMixin = _SizableComponenetMixin(
-  _InteractiveComponenetMixin(
-    _ClickableComponenetMixin(_ButtonComponentMixin(AXBaseComponent))
-  )
-);
-
-export const AXBaseValueComponentMixin = _SizableComponenetMixin(
-  _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 = _SizableComponenetMixin(
-  _InteractiveComponenetMixin(
-    _DropdownComponenetMixin(
-      _DatalistComponenetMixin(_ValueComponenetMixin<any>(AXBaseComponent))
-    )
-  )
-);
-
-export const AXBaseSelectionDropdownMixin = _SizableComponenetMixin(
-  _InteractiveComponenetMixin(
-    _DropdownComponenetMixin(
-      _DatalistComponenetMixin(
-        _SelectionComponenetMixin(_ValueComponenetMixin<any>(AXBaseComponent))
-      )
-    )
-  )
-);
-
-export const AXCalendarMixin = _ClickableComponenetMixin(_ButtonComponentMixin(_SizableComponenetMixin(AXBaseComponent)));

package/src/lib/base/mixin/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))
-        }
-    }
-}