@acorex/components 6.0.1 → 6.0.2

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

@@ -1,212 +0,0 @@
-import { AXObjectUtil } from '@acorex/core/utils';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { EventEmitter } from '@angular/core';
-import { AXSelectionValueChangedEvent } from '@acorex/components/common';
-import { AXBaseComponent } from './base-components.class';
-import { Constructor } from './constratctor';
-
-export function _SelectionComponenetMixin<TBase extends Constructor<AXBaseComponent>>(Base: TBase) {
-    return class extends Base {
-
-        valueField: string = 'id';
-        textField: string = 'text';
-        disabledField: string = 'disabled';
-        disabledCallback: (e: { item: any, index: number }) => boolean;
-        multiple: boolean = false;
-        selectionMode: 'value' | 'item' = 'value';
-
-
-
-        /**
-        *  Defines the primary text to show inside the button.
-        */
-        get items(): any[] {
-            return [];
-        }
-
-        get displayItems(): any[] {
-            return [];
-        }
-
-        get flatItems(): any[] {
-            return [];
-        }
-
-
-        public valueChange: EventEmitter<any> = new EventEmitter<any>();
-        public onValueChanged: EventEmitter<AXSelectionValueChangedEvent> = new EventEmitter<AXSelectionValueChangedEvent>();
-
-
-        constructor(...args: any[]) {
-            super(...args)
-        }
-
-        _onInternalInit() {
-            super._onInternalInit();
-        }
-
-
-        _value: any | any[];
-        get value(): any | any[] {
-            return this._value;
-        }
-        set value(v: any | any[]) {
-            v = (this as any)._internalSetValue(v);
-            if (v !== this._value) {
-                const oldValue = AXObjectUtil.deepJSONClone(this._value);
-                if (this.multiple) {
-                    this._value = Array.isArray(v) ? v : (v ? [v] : []);
-                } else {
-                    this._value = Array.isArray(v) ? v[0] : v;
-                }
-                this.valueChange.emit(this._value);
-                this.onValueChanged.emit({
-                    component: this,
-                    htmlElement: this._getHostElement(),
-                    isUserInteraction: false,
-                    oldValue,
-                    value: this._value,
-                    selectedKeys: this.selectedItems.map(c => c[this.valueField]),
-                    selectedItems: this.selectedItems.slice()
-                });
-                if (v == null || v == undefined || v == "") {
-                    (this as any)._setState('clear');
-                }
-                else {
-                    if (this._isInited) {
-                        (this as any).validate();
-                    }
-                }
-                this._renderSelection();
-            }
-        }
-
-        _selectedItems: any[];
-        get selectedItems(): any[] {
-            return this._selectedItems || [];
-        }
-
-        _renderSelection() {
-            const func = () => {
-                if (this.value == null || this.value == undefined) {
-                    return [];
-                }
-                const items = this.flatItems;
-                if (items.length > 0) {
-                    return items.filter(i => {
-                        if (Array.isArray(this.value)) {
-                            return this.value.some(ii => {
-                                if (typeof ii === 'object') {
-                                    return i[this.valueField] === ii[this.valueField];
-                                }
-                                else {
-                                    return i[this.valueField] === ii;
-                                }
-                            });
-                        }
-                        else {
-                            if (typeof this.value === 'object') {
-                                return i[this.valueField] === this.value[this.valueField];
-                            }
-                            else {
-                                return i[this.valueField] === this.value;
-                            }
-                        }
-                    });
-                }
-                if (Array.isArray(this.value)) {
-                    return this.value.map(ii => () => {
-                        //&& ii[this.textField]
-                        if (typeof ii === 'object') {
-                            return ii;
-                        }
-                        else {
-                            const fake: any = {};
-                            fake[this.valueField] = this.value;
-                            fake[this.textField] = this.value;
-                            return fake;
-                        }
-                    });
-                }
-                else {
-                    //&& this.value[this.textField]
-                    if (typeof this.value === 'object') {
-                        return [this.value];
-                    }
-                    else {
-                        const fake: any = {};
-                        fake[this.valueField] = this.value;
-                        fake[this.textField] = this.value;
-                        return [fake];
-                    }
-                }
-            };
-            this._selectedItems = func();
-        }
-
-        _getItemByDataMode(item: any) {
-            return this.selectionMode === 'item' ? item : item[this.valueField];
-        }
-
-        _getItemValue(item: any) {
-            return typeof item === 'object' ? item[this.valueField] : item;
-        }
-
-        unselectItems(...items: any[]) {
-            if (!items || items.length === 0) {
-                this.value = null;
-            }
-            else if (Array.isArray(this.value)) {
-                this.value = this.value.filter(c => !items.some(d =>
-                    this._getItemValue(c) === this._getItemValue(d))
-                );
-            }
-            else {
-                this.value = null;
-            }
-        }
-
-        selectItems(...items: any[]) {
-            if (items && items.length) {
-                if (this.multiple) {
-                    this.value = (this.value || []).concat(items.map(c => this._getItemByDataMode(c)));
-                }
-                else {
-                    this.value = this._getItemByDataMode(items[0]);
-                }
-            }
-        }
-
-        toggleSelect(...items: any[]) {
-            if (items && items.length) {
-                items.forEach(item => {
-                    if (this.multiple) {
-                        this.isItemSelected(item) ? this.unselectItems(item) : this.selectItems(item);
-                    }
-                    else {
-                        this.selectItems(item)
-                    }
-                });
-            }
-        }
-
-        isItemSelected(item: any): boolean {
-            return this.selectedItems.some(c => c[this.valueField] === item[this.valueField]);
-        }
-
-        isItemDisabled(item: any): boolean {
-            return coerceBooleanProperty(item[this.disabledField]) === true || (this.disabledCallback ? this.disabledCallback({ item, index: -1 }) : false);
-        }
-    }
-}
-
-
-export const SELECTION_INPUTS = [
-    'valueField',
-    'textField',
-    'disabledField',
-    'disabledCallback',
-    'multiple',
-    'selectionMode'
-];
-export const SELECTION_OUTPUT = ['onValueChanged', 'valueChanged'];

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

@@ -1,29 +0,0 @@
-import { AXBaseComponent, AXElementSize } from './base-components.class';
-import { Constructor } from './constratctor';
-
-export function _SizableComponenetMixin<TBase extends Constructor<AXBaseComponent>>(Base: TBase) {
-    return class extends Base {
-
-        /**
-        *  A token that specifies the size of component.
-        */
-        size: AXElementSize;
-
-        /**
-        *  @ignore
-        */
-        constructor(...args: any[]) {
-            super(...args.slice(0, 2))
-        }
-
-        _onInternalInit() {
-            super._onInternalInit();
-        }
-    }
-}
-
-
-export const SIZABLE_INPUTS = [
-    'size',
-];
-export const SIZABLE_OUTPUT = [];

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

@@ -1,116 +0,0 @@
-import { EventEmitter } from '@angular/core';
-import { Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { AXHtmlEvent } from '@acorex/components/common';
-import { AXBaseComponent } from './base-components.class';
-import { Constructor } from './constratctor';
-import { VALUE_INPUTS, VALUE_OUTPUT } from './value-mixin.class';
-
-export function _TextboxComponenetMixin<TBase extends Constructor<AXBaseComponent>>(Base: TBase) {
-    return class extends Base {
-
-        /**
-       *  A string value that specifies the type of text box.
-       */
-        type = 'text'
-
-        /**
-        *  A string value that specifies the placeholder of text box.
-        */
-        placeholder: string = '';
-
-        /**
-        *  A number value that specifies the maximum characters of text box.
-        */
-        maxLength: number;
-
-        /**
-        *  Specifies that autocomplete is on or off.
-        */
-        autoComplete: string;
-
-        debounceTime: number = 0;
-
-        #valueSubscription = new Subscription();
-        #valueSubject = new Subject();
-
-
-        /**
-        *  Fires each time the user press a key.
-        *  @event
-        */
-        onKeyDown: EventEmitter<AXHtmlEvent<KeyboardEvent>> = new EventEmitter<AXHtmlEvent<KeyboardEvent>>();
-
-        /**
-      *  Fires each time the user press a key.
-      *  @event
-      */
-        onKeyUp: EventEmitter<AXHtmlEvent<KeyboardEvent>> = new EventEmitter<AXHtmlEvent<KeyboardEvent>>();
-
-        /**
-        *  Fires each time the user press a key.
-        *  @event
-        */
-        onKeyPress: EventEmitter<AXHtmlEvent<KeyboardEvent>> = new EventEmitter<AXHtmlEvent<KeyboardEvent>>();
-
-
-        _emitOnKeydownEvent(e: KeyboardEvent) {
-            this.onKeyDown.emit({
-                component: this,
-                nativeEvent: e
-            });
-            (this as any)._setUserInteraction();
-        }
-
-        _emitOnKeyupEvent(e: KeyboardEvent) {
-            this.onKeyUp.emit({
-                component: this,
-                nativeEvent: e
-            });
-            (this as any)._setUserInteraction();
-        }
-        
-        _emitOnKeypressEvent(e: KeyboardEvent) {
-            this.onKeyPress.emit({
-                component: this,
-                nativeEvent: e
-            });
-            (this as any)._setUserInteraction();
-        }
-
-        _handleModleChange(value) {
-            if (!this.debounceTime)
-                this._settleValue(value);
-            else {
-                this.#valueSubject.next(value);
-            }
-        }
-
-        _settleValue(value: any) {
-            (this as any).value = value;
-        }
-
-        /**
-        *  @ignore
-        */
-        constructor(...args: any[]) {
-            super(...args.slice(0, 2))
-        }
-
-        onInit(): void {
-            this.#valueSubscription = this.#valueSubject
-                .pipe(debounceTime(this.debounceTime))
-                .pipe(distinctUntilChanged())
-                .subscribe((v) => {
-                    this._settleValue(v);
-                });
-        }
-
-        onDestroy(): void {
-            this.#valueSubscription.unsubscribe();
-        }
-    }
-}
-
-export const TEXTBOX_INPUTS = ['placeholder', 'maxLength', 'allowNull', 'debounceTime', 'type', 'autoComplete', 'readonly','allowNull','value','name', 'checked']
-export const TEXTBOX_OUTPUT = ['valueChange', 'onValueChanged']

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

@@ -1,230 +0,0 @@
-import {
-  coerceBooleanProperty,
-} from '@angular/cdk/coercion';
-import { EventEmitter } from '@angular/core';
-import { AXBaseComponent } from './base-components.class';
-import { Constructor } from './constratctor';
-import { AXValueChangedEvent } from '@acorex/components/common';
-
-export function _ValueComponenetMixin<TBase extends Constructor<AXBaseComponent>>(Base: TBase) {
-
-  return class extends Base {
-
-    /**
-    *  Fires each time the user press a key.
-    *  @event
-    */
-    onValueChanged: EventEmitter<AXValueChangedEvent<any>> = new EventEmitter<AXValueChangedEvent<any>>();
-
-    valueChange: EventEmitter<any> = new EventEmitter<any>();
-
-
-    #readonly: boolean = false;
-
-    /**
-    *  If set to true, user cannot change the value of component.
-    */
-    get readonly() {
-      return this.#readonly;
-    }
-    set readonly(value: boolean) {
-      this.#readonly = coerceBooleanProperty(value);
-    }
-
-    #allowNull: boolean = true;
-    get allowNull() {
-      return this.#allowNull;
-    }
-    set allowNull(value: boolean) {
-      this.#allowNull = coerceBooleanProperty(value);
-    }
-
-
-    #name: string;
-    get name() {
-      return this.#name;
-    }
-    set name(value: string) {
-      this.#name = value;
-    }
-
-
-    #isUserInteraction: boolean = false;
-
-    get isUserInteraction(): boolean {
-      return this.#isUserInteraction;
-    }
-
-    #value: any;
-    get value(): any {
-      return this._internalGetValue();
-    }
-    set value(v: any) {
-      v = this._internalSetValue(v);
-      //if (!this._isInited ) {
-      const old = this.#value;
-      // TODO: check real equality
-      if (v != old) {
-        this.#value = v;
-        this._emitOnValueChangedEvent(old, this.#value);
-        this._cdr.markForCheck();
-        if (v == null || v == undefined || v == '' || (Array.isArray(v) && v.length == 0)) {
-          this._setState('clear');
-        } else {
-          if (this._isInited) {
-            this.validate();
-          }
-        }
-      }
-      this.#isUserInteraction = false;
-      //} 
-    }
-
-    #state: 'clear' | 'success' | 'error' = 'clear';
-
-    get state() {
-      return this.#state;
-    }
-
-    _emitOnValueChangedEvent(oldValue?: any, newValue?: any) {
-      this.valueChange.emit(newValue);
-      this.onValueChanged.emit({
-        component: this,
-        value: newValue,
-        oldValue: oldValue,
-        name: this.name,
-        isUserInteraction: this.isUserInteraction
-      });
-      this._onValueChanged(oldValue, this.#value);
-    }
-
-    _internalSetValue(value: any) {
-      return this._setValue(value);
-    }
-
-    _internalGetValue() {
-      return this._getValue(this.#value);
-    }
-
-    _setValue(value: any) {
-      return value;
-    }
-
-    _getValue(value: any) {
-      return value;
-    }
-
-    _setUserInteraction() {
-      this.#isUserInteraction = true;
-    }
-
-    _onValueChanged(oldValue: any, newValue: any): void { }
-
-    _onInternalInit() {
-      this._getHostElement().setAttribute('ax-form-input', 'true');
-      super._onInternalInit();
-    }
-
-    _onInternalDestroy() {
-      super.onDestroy();
-    }
-
-
-
-    clear() {
-      this.value = null;
-    }
-
-    validate(): Promise<any> {
-      const rules = Array.from(
-        this._getHostElement().querySelectorAll('ax-validation-rule')
-      ).filter((c) => (c as any).__axContext__.enabled);
-      //
-      if (!rules || rules.length === 0) {
-        this._setState('clear');
-        return Promise.resolve({ result: true, value: this.value, name: this.name, id: this.id });
-      }
-
-      return new Promise<any>((resolve) => {
-        Promise.all(
-          rules
-            .filter((c) => typeof (c as any)?.validate === 'function')
-            .map((c) => {
-              return (c as any).validate(this.value);
-            })
-        ).then((d) => {
-          const error = d.find((c) => c.result === false);
-          if (error) {
-            this._setState('error', error.message);
-            resolve({ result: false, value: this.value, message: error.message, name: this.name, id: this.id });
-          } else {
-            this._setState('success');
-            resolve({ result: true, value: this.value, name: this.name, id: this.id });
-          }
-        });
-      });
-    }
-
-    /**
-      *  @ignore
-    */
-    constructor(...args: any[]) {
-      super(...args);
-    }
-
-    _setState(state: 'clear' | 'success' | 'error', ...args) {
-      const container = this._getHostElement().classList.contains('ax-editor-container') ?
-        this._getHostElement() :
-        this._getHostElement().querySelector('.ax-editor-container');
-      const formField = container?.closest('.ax-form-field');
-      const label = formField?.querySelector('ax-label') || formField?.querySelector('label');
-      let target = container || this._getInnerElement();
-      if (target?.querySelector('.ax-error-container')) {
-        target = target.querySelector('.ax-error-container');
-      }
-      const parent = target?.parentElement;
-      if (!target || !parent)
-        return;
-
-      switch (state) {
-        case 'clear':
-          this.#state = 'clear';
-          if (parent.querySelector('span.ax-error-msg')) {
-            parent.removeChild(parent.querySelector('span.ax-error-msg')!);
-          }
-          label?.classList.remove('ax-state-error');
-          target.classList.remove('ax-state-error', 'ax-state-success');
-          break;
-        case 'success':
-          this._setState('clear');
-          target.classList.add('ax-state-success');
-          this.#state = 'success';
-          break;
-        case 'error':
-          this._setState('clear');
-          if (args[0]) {
-            const span = document.createElement('span');
-            span.innerText = args[0];
-            span.classList.add('ax-error-msg');
-            parent.appendChild(span);
-          }
-          label?.classList.add('ax-state-error');
-          target.classList.add('ax-state-error');
-
-          this.#state = 'error';
-          break;
-      }
-      this._cdr.markForCheck();
-    }
-  }
-}
-
-
-export const VALUE_INPUTS = [
-  'readonly',
-  'allowNull',
-  'value',
-  'name',
-  'checked'
-];
-export const VALUE_OUTPUT = ['valueChange', 'onValueChanged'];

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../../dist/acorex/components",
-  "lib": {
-    "entryFile": "public-api.ts"
-  }
-}

package/number-box/index.ts

@@ -1 +0,0 @@
-export * from './public-api'

package/number-box/ng-package.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "public-api.ts"
-  }
-}

package/number-box/src/number-box.component.html

@@ -1,40 +0,0 @@
-<ng-content select="ax-prefix">
-</ng-content>
-<input class="ax-input" type="text"  
-    [attr.placeholder]="placeholder" 
-    [attr.autocomplete]="autoComplete"
-    [imask]="_maskObj" 
-    [unmask]="'typed'"
-    [attr.min]="minValue"
-    [attr.max]="maxValue" 
-    [class.ax-state-disabled]="disabled" 
-    [class.ax-state-readonly]="readonly"
-    [disabled]="disabled" 
-    [readonly]="readonly" 
-    [tabindex]="tabIndex" 
-    [ngModel]="value" (ngModelChange)="_handleModleChange($event)"
-    (keydown)="_handleOnKeydownEvent($event)" 
-    (keyup)="_emitOnKeyupEvent($event)"
-    (keypress)="_emitOnKeypressEvent($event)"
-    (focus)="_emitOnFocusEvent($event)"
-    (blur)="_emitOnBlurEvent($event)"
-    >
-
-<div class="ax-number-box-arrows" *ngIf="showSpinButtons && !(disabled || readonly)">
-    <ax-button color="light" look="blank" (onClick)="_handleUpDownClick($event,1)" [tabIndex]="-1">
-        <ax-prefix>
-            <ax-icon class="ax-ic-arrow-fill ax-rotate-90">
-            </ax-icon>
-        </ax-prefix>
-    </ax-button>
-    <ax-button color="light" look="blank" (onClick)="_handleUpDownClick($event,-1)" [tabIndex]="-1">
-        <ax-prefix>
-            <ax-icon class="ax-ic-arrow-fill ax--rotate-90">
-            </ax-icon>
-        </ax-prefix>
-    </ax-button>
-</div>
-<ng-content select="ax-suffix">
-</ng-content>
-<ng-content select="ax-validation-rule">
-</ng-content>