@acorex/components 5.0.5 → 5.0.9

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

@@ -1,185 +0,0 @@
-import { AXObjectUtil } from '@acorex/core';
-import { EventEmitter } from '@angular/core';
-import { AXSelectionValueChangedEvent } from '../events.class';
-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 | string[] = 'text';
-        multiple: boolean = false;
-        selectionMode: 'value' | 'item' = 'value';
-
-        // for data-list
-        get items(): any[] {
-            return [];
-        }
-
-        get displayItems(): 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[]) {
-            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(),
-                    isUserInput: 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)._setErrorState('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 [];
-                }
-                if (this.displayItems.length > 0) {
-                    return this.displayItems.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;
-                            return fake;
-                        }
-                    });
-                }
-                else {
-                    //&& this.value[this.textField]
-                    if (typeof this.value === 'object') {
-                        return [this.value];
-                    }
-                    else {
-                        const fake: any = {};
-                        fake[this.valueField] = 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.selectedItems.includes(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]);
-        }
-    }
-}

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

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

@@ -1,51 +0,0 @@
-import { EventEmitter } from '@angular/core';
-import { AXHtmlEvent } from '../events.class';
-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 placeholder of text box.
-        */
-        placeholder: string = null;
-
-        /**
-        *  A number value that specifies the maximum characters of text box.
-        */
-        maxLength: number = 100;
-
-        /**
-        *  Specifies that autocomplete is on or off.
-        */
-        autoComplete: boolean = false;
-
-
-        /**
-        *  Fires each time the user press a key.
-        *  @event
-        */
-        onKeyDown: EventEmitter<AXHtmlEvent<KeyboardEvent>> = new EventEmitter<AXHtmlEvent<KeyboardEvent>>();
-
-
-        _emitOnKeydownEvent(e: KeyboardEvent) {
-            this.onKeyDown.emit({
-                component: this,
-                nativeEvent: e
-            });
-        }
-
-
-        /**
-        *  @ignore
-        */
-        constructor(...args: any[]) {
-            super(...args.slice(0, 2))
-        }
-    }
-}
-
-export const TEXTBOX_INPUTS = ['placeholder', 'maxLength', 'allowNull', 'debounceTime', ...VALUE_INPUTS]
-export const TEXTBOX_OUTPUT = [...VALUE_OUTPUT]

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

@@ -1,215 +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 { AXValueChangedEvent } from '../events.class';
-import { AXValidationRuleResult } from '../../validation/validation.class';
-import { Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-
-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;
-    }
-
-    #debounceTime: number = 0;
-    get debounceTime() {
-      return this.#debounceTime;
-    }
-    set debounceTime(value: number) {
-      this.#debounceTime = coerceNumberProperty(value);
-    }
-
-    #valueSubscription = new Subscription();
-    #valueSubject = new Subject();
-
-    #value: any;
-    public get value(): any {
-      return this.#value;
-    }
-    public set value(v: any) {
-      v = this._onValueChanging(v);
-      if (!this._isInited || this.debounceTime == 0) {
-        this._setValue(v);
-      } else {
-        this.#valueSubject.next(v);
-      }
-    }
-
-    _emitOnValueChangedEvent(oldValue?: any, newValue?: any) {
-      this.valueChange.emit(newValue);
-      this.onValueChanged.emit({
-        component: this,
-        value: newValue,
-        oldValue: oldValue,
-        name: this.name
-      });
-      this._onValueChanged(oldValue, this.#value);
-    }
-
-    _onValueChanging(value: any) {
-      return value;
-    }
-    _onValueChanged(oldValue: any, newValue: any): void { }
-
-    _onInternalInit() {
-      this._getHostElement().setAttribute('ax-form-input', 'true');
-      this.#valueSubscription = this.#valueSubject
-        .pipe(debounceTime(this.#debounceTime))
-        .pipe(distinctUntilChanged())
-        .subscribe((v) => {
-          this._setValue(v);
-        });
-      super._onInternalInit();
-    }
-
-    _onInternalDestroy() {
-      this.#valueSubscription.unsubscribe();
-      super.onDestroy();
-    }
-
-    _setValue(v: any) {
-      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 == '') {
-          this._setErrorState('clear');
-        } else {
-          if (this._isInited) {
-            this.validate();
-          }
-        }
-      }
-    }
-
-    clear() {
-      this.value = null;
-    }
-
-    validate(): Promise<AXValidationRuleResult> {
-      const rules = Array.from(
-        this._getHostElement().querySelectorAll('ax-validation-rule')
-      ).filter((c) => (c as any).__axContext__.enabled);
-      //
-      if (!rules || rules.length === 0) {
-        this._setErrorState('clear');
-        return Promise.resolve({ result: true, value: this.value });
-      }
-
-      return new Promise<AXValidationRuleResult>((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._setErrorState('error', error.message);
-            resolve({ result: false, value: this.value });
-          } else {
-            this._setErrorState('success');
-            resolve({ result: true, value: this.value });
-          }
-        });
-      });
-    }
-
-
-    /**
-      *  @ignore
-    */
-    constructor(...args: any[]) {
-      super(...args);
-    }
-
-    _setErrorState(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');
-      const target = container || this._getInnerElement();
-      const parent = target.parentElement;
-
-      switch (state) {
-        case '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._setErrorState('clear');
-          target.classList.add('ax-state-success');
-          break;
-        case 'error':
-          this._setErrorState('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');
-          break;
-      }
-    }
-  }
-}
-
-
-export const VALUE_INPUTS = [
-  'readonly',
-  'allowNull',
-  'value',
-  'debounceTime',
-  'name'
-];
-export const VALUE_OUTPUT = ['valueChange', 'onValueChanged'];

package/src/lib/base/overlay.service.ts

@@ -1,117 +0,0 @@
-import { Injectable, ApplicationRef, ViewContainerRef, TemplateRef, EventEmitter } from '@angular/core';
-import { Overlay, PositionStrategy, ScrollStrategy } from '@angular/cdk/overlay';
-import { TemplatePortal, Portal, ComponentPortal } from '@angular/cdk/portal';
-import { AXConnectedPosition } from '.';
-import { merge } from 'rxjs';
-import { DynamicOverlay } from './custom-cdk-overlay.service';
-
-export interface AXOverlayViewRef {
-    instance: any;
-    dispose: () => void;
-    isOpen: () => boolean;
-}
-
-export interface AXOverlayConfigs {
-    position?: AXConnectedPosition | AXConnectedPosition[];
-    hasBackdrop?: boolean;
-    transparentBackdrop?: boolean;
-    closeOnClickOutside?: boolean;
-    targetElement?: HTMLElement;
-    containerElement?: HTMLElement;
-    onBackdropClick?: () => void;
-    panelClass?: string[] | string;
-    backdropClass?: string[] | string;
-    scroll?: 'auto' | 'block' | 'close';
-}
-
-@Injectable({ providedIn: 'root' })
-export class AXOverlayService {
-    constructor(
-        private overlayService: DynamicOverlay,
-        private overlayService2: Overlay,
-        private appRef: ApplicationRef) {
-
-    }
-
-    show(content: any, context?: any, configs?: AXOverlayConfigs): AXOverlayViewRef {
-        configs = Object.assign({
-            hasBackdrop: true,
-            transparentBackdrop: true,
-            closeOnClickOutside: true
-        }, configs || {});
-        // get root viewref
-        const viewRef: ViewContainerRef = this.appRef.components[0].instance.viewRef;
-
-        let portal: Portal<any>;
-        // get component by route
-        if (typeof content === 'string') {
-            // TODO
-        }
-        // create portal from component
-        else if (content instanceof TemplateRef) {
-            portal = new TemplatePortal(content, viewRef, context);
-        }
-        else if (typeof content === 'function') {
-            portal = new ComponentPortal(content, viewRef);
-        }
-        let positionStrategy: PositionStrategy;
-        if (configs.position && configs.targetElement) {
-            positionStrategy = this.overlayService.position()
-                .flexibleConnectedTo(configs.targetElement)
-                .withPositions(
-                    Array.isArray(configs.position) ? configs.position : [configs.position]
-                )
-                .withPush(true);
-        }
-        else {
-            positionStrategy = this.overlayService.position().global().centerHorizontally().centerVertically();
-        }
-        let scrollStrategy: ScrollStrategy = this.overlayService.scrollStrategies.reposition({ autoClose: true });
-        if (configs.scroll === 'block') {
-            scrollStrategy = this.overlayService.scrollStrategies.block();
-        }
-        if (configs.scroll === 'close') {
-            scrollStrategy = this.overlayService.scrollStrategies.close();
-        }
-
-        const config = {
-            positionStrategy,
-            scrollStrategy,
-            hasBackdrop: configs.hasBackdrop,
-            disposeOnNavigation: true,
-            backdropClass: configs.backdropClass ? configs.backdropClass : (configs.transparentBackdrop ? 'cdk-overlay-transparent-backdrop' : undefined),
-            panelClass: configs.panelClass ? configs.panelClass : ['animate__animated', 'animate__fadeIn','animate__faster']
-        };
-        // joon nanat dorost sho
-        let overlayRef = configs.containerElement ? this.overlayService.createOn(configs.containerElement, config) : this.overlayService2.create(config);
-
-        const host = overlayRef.attach(portal);
-        if (host.instance) {
-            Object.assign(host.instance, context);
-            setTimeout(() => {
-                host.changeDetectorRef.detectChanges();
-            }, 0);
-        }
-        if (configs.closeOnClickOutside) {
-            merge(
-                overlayRef.backdropClick(),
-                overlayRef.detachments(),
-            ).subscribe(() => {
-                overlayRef.dispose();
-                overlayRef = undefined;
-                if (configs.onBackdropClick) {
-                    configs.onBackdropClick();
-                }
-            });
-
-        }
-        return {
-            instance: host.instance,
-            dispose: overlayRef.dispose.bind(overlayRef),
-            isOpen: () => {
-                return overlayRef.hasAttached();
-            }
-        };
-    }
-
-}

package/src/lib/base/responsive.directive.ts

@@ -1,31 +0,0 @@
-import { Directive, ElementRef, OnDestroy } from '@angular/core';
-
-@Directive({ selector: '[ax-responsive]' })
-export class AXResponsiveDirective implements OnDestroy {
-
-    private _observer: ResizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-
-            if (entry.target) {
-                const e = entry.target;
-                const elements = [e, ...Array.from(e.querySelectorAll(`[class*='sm:']`))];
-                elements.map(c => ({
-                    element: c,
-                    classList: Array.from(c.classList).filter(c => c.includes('sm')).map(c => c.slice(3))
-                })).forEach(c => {
-                    e.clientWidth < 320 ? c.element.classList.add(...c.classList) : c.element.classList.remove(...c.classList);
-                });
-            }
-        }
-    });;
-
-    constructor(private _elementRef: ElementRef<HTMLDivElement>) {
-        this._observer.observe(_elementRef.nativeElement);
-    }
-
-    ngOnDestroy() {
-        this._observer.disconnect();
-        this._observer.unobserve(this._elementRef.nativeElement);
-    }
-
-}

package/src/lib/base/styles.class.ts

@@ -1,24 +0,0 @@
-
-export const AX_STYLE_TYPES = ['info', 'danger', 'success', 'warning'];
-
-/**
-* A token that specifies the  color style of component.
-*/
-export type AXStyleColorType = 'primary' | 'secondary' | 'info' | 'danger' | 'success' | 'warning' | 'light' | 'dark';
-export type AXStyleButtonLook = 'blank' | 'outline' | 'twotone' | 'link';
-
-export const AX_LOCATIONS = ['bottom-start', 'bottom-center', 'bottom-end', 'top-start', 'top-center', 'top-end'];
-export type AXLocation = 'bottom-start' | 'bottom-center' | 'bottom-end' | 'top-start' | 'top-center' | 'top-end';
-
-
-export const AX_DIRECTIONS = ['vertical', 'horizontal'];
-/**
-* A token that specifies the  direction of component.
-*/
-export type AXDirection = 'vertical' | 'horizontal';
-
-
-/**
-* A token that specifies the  selection mode of component.
-*/
-export type AXSelectionMode = 'single' | 'multiple';

package/src/lib/button/button-group.component.html

@@ -1,2 +0,0 @@
-<ng-content select="ax-button">
-</ng-content>