@acorex/components 5.8.0 → 6.0.1

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

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

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

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

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

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

package/number-box/index.ts

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

package/number-box/ng-package.json

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

package/number-box/public-api.ts

@@ -0,0 +1,2 @@
+export * from './src/number-box.component';
+export * from './src/number-box.module';

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

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