@acorex/components 6.0.1 → 6.0.7

package/menu/src/menu.component.ts

@@ -1,234 +0,0 @@
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  TemplateRef,
-  ContentChild,
-  ViewChild,
-} from '@angular/core';
-import { AXValueChangedEvent } from '@acorex/components/common';
-
-
-import { AXPopoverComponent } from '@acorex/components/popover';
-import { AXSearchBoxComponent } from '@acorex/components/search-box';
-import { AXBaseMenuMixin } from '@acorex/components/mixin';
-
-export interface AXMenuItems {
-  id?: string;
-  name?: string;
-  text?: string;
-  tooltip?: string;
-  parentId?: string;
-  icon?: string;
-  visibleField?: boolean;
-  disableField?: boolean;
-  selected?: boolean;
-  data?: any;
-  style?: string;
-  children?: AXMenuItems[];
-  isOpen?: boolean;
-  isActive?: boolean;
-  onClick?: (e?: any) => void;
-}
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-@Component({
-  selector: 'ax-menu',
-  templateUrl: './menu.component.html',
-  inputs: ['disabled', 'tabIndex', 'textField',
-  'valueField',
-  'items',
-  'id',
-  'parentId',
-  'iconField',
-  'tooltip',
-  'isOpen',
-  'isActive',
-  'visibleField',
-  'disableField',
-  'hasChildField',
-  'openMode',
-  'direction',],
-  outputs: ['onBlur', 'onFocus', 'onMenuItemClick'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'ax-menu' },
-})
-export class AXMenuComponent extends AXBaseMenuMixin {
-  @ViewChild(AXPopoverComponent, { static: true })
-  popover: AXPopoverComponent;
-
-  @ContentChild('emptyTemplate')
-  private _contentEmptyTemplate: TemplateRef<any>;
-
-  @ContentChild('itemTemplate')
-  private _contentItemTemplate: TemplateRef<any>;
-
-  @ContentChild(AXSearchBoxComponent, { static: true })
-  _searchBox: AXSearchBoxComponent;
-
-  _forceFocus: boolean = false;
-  _target: HTMLDivElement;
-
-  get emptyTemplate(): TemplateRef<any> {
-    return this._contentEmptyTemplate;
-  }
-
-  get itemTemplate(): TemplateRef<any> {
-    return this._contentItemTemplate;
-  }
-  constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-    window.addEventListener('click', (e) => {
-      if (this.displayItems.length > 0) {
-        const target = document.querySelector('UL');
-        if (e.target != target) {
-          this.displayItems.forEach((element) => {
-            element.isActive = false;
-            element.isOpen = false;
-          });
-          cdr.detectChanges();
-        }
-      }
-    });
-  }
-
-  onInit(): void {
-    super.onInit();
-    if (this.hasChildField) {
-      this._fetchData();
-    }
-  }
-
-  ngAfterViewInit(): void {
-    super.onViewInit();
-  }
-
-  _onMenuClick(e: MouseEvent, item: any) {
-    if (this.isLoading) {
-      return;
-    }
-    const checkSpacing = e.target as HTMLDivElement;
-    if (
-      !item[this.disableField] &&
-      this.openMode === 'click' &&
-      checkSpacing.closest('a')
-    ) {
-      if (this.openMode === 'click' && this.direction === 'horizontal') {
-        this.displayItems.forEach((element) => {
-          if (
-            element[this.valueField] != item[this.valueField] &&
-            !item.parentId
-          ) {
-            element.isOpen = false;
-          }
-        });
-      }
-      this._notActive(this.displayItems);
-      if (item.children?.length > 0 || item[this.hasChildField]) {
-        if (item.children?.length > 0) {
-          if (this.openMode === 'click' && this.direction === 'horizontal') {
-            this._setParentNode(item.children, item[this.valueField]);
-          }
-          this._closeChild(item.children);
-        }
-        item.isOpen = !item.isOpen;
-      }
-      item.isActive = !item.isActive;
-      this.onMenuItemClick.emit({
-        component: this,
-        item: item,
-        nativeEvent: e,
-      });
-      if (item.isOpen && item[this.hasChildField] && !item.children) {
-        item.isLoading = true;
-        this._fetchData(item[this.valueField]).then(() => {
-          item.isLoading = false;
-        });
-      }
-    }
-    e.stopPropagation();
-    e.preventDefault();
-  }
-
-  _onMouseEnter(e: MouseEvent, item: any) {
-    if (this.isLoading) {
-      return;
-    }
-    if (!item[this.disableField] && this.openMode === 'hover') {
-      if (item.children?.length > 0 || item[this.hasChildField]) {
-        if (item.children?.length > 0) {
-          this._closeChild(item.children);
-        }
-        item.isOpen = true;
-      }
-      this.onMenuItemClick.emit({
-        component: this,
-        item: item,
-        nativeEvent: e,
-      });
-      if (item.isOpen && item[this.hasChildField] && !item.children) {
-        item.isLoading = true;
-        this._fetchData(item[this.valueField]).then(() => {
-          item.isLoading = false;
-        });
-      }
-    }
-    e.stopPropagation();
-    e.preventDefault();
-  }
-
-  _onMouseLeave(item: any) {
-    if (!item[this.disableField] && this.openMode === 'hover') {
-      if (item.children?.length > 0 || item[this.hasChildField]) {
-        if (item.children?.length > 0) {
-          this._closeChild(item.children);
-        }
-        item.isOpen = false;
-      }
-    }
-  }
-
-  _notActive(items: any[]) {
-    items.forEach((element: any) => {
-      element.isActive = false;
-      if (element.children?.length > 0) {
-        this._notActive(element.children);
-      }
-    });
-  }
-
-  _closeChild(items: any[]) {
-    items.forEach((element: any) => {
-      element.isOpen = false;
-      if (element.children?.length > 0) {
-        this._closeChild(element.children);
-      }
-    });
-  }
-
-  _setParentNode(item, parentId) {
-    item.forEach((element) => {
-      element.parentId = parentId;
-    });
-  }
-
-  _onSearchExprChanged(e: AXValueChangedEvent<string>) {
-    // this.empty();
-    this._forceFocus = true;
-    this._fetchData(0, this._searchBox?.searchExp);
-  }
-
-  _getDirection() {
-    if (this.direction === 'horizontal') {
-      return 'horizontal-mode';
-    } else {
-      return 'vertical-mode';
-    }
-  }
-}

package/menu/src/menu.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXTranslationModule } from '@acorex/core/translation';
-import { AXLoadingModule } from '@acorex/components/loading';
-import { AXPopoverModule } from '@acorex/components/popover';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import { AXMenuComponent } from './menu.component';
-
-const COMPONENT = [AXMenuComponent];
-const MODULES = [CommonModule, AXDecoratorModule];
-
-@NgModule({
-  declarations: [...COMPONENT],
-  imports: [...MODULES, AXLoadingModule, AXTranslationModule, AXPopoverModule],
-  exports: [...COMPONENT],
-  providers: [],
-})
-export class AXMenuModule {}

package/mixin/index.ts

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

package/mixin/ng-package.json

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

package/mixin/public-api.ts

@@ -1,17 +0,0 @@
-export * from './src/base-components.class';
-export * from './src/base-menu-mixin.class';
-export * from './src/button-mixin.class';
-export * from './src/clickable-mixin.class';
-export * from './src/color-look-mixing.class';
-export * from './src/constratctor';
-export * from './src/datalist-component.class';
-export * from './src/datalist.class';
-export * from './src/dropdown-mixin.class';
-export * from './src/interactive-mixin.class';
-export * from './src/loading-mixin.class';
-export * from './src/mixin.class';
-export * from './src/page-component.class';
-export * from './src/selection-component.class';
-export * from './src/sizable-mixin.class';
-export * from './src/textbox-mixin.class';
-export * from './src/value-mixin.class';

package/mixin/src/base-components.class.ts

@@ -1,140 +0,0 @@
-import {
-  ChangeDetectorRef,
-  EventEmitter,
-  Inject,
-  Injectable,
-  ElementRef
-} from '@angular/core';
-import { Constructor } from './constratctor';
-
-/**
- * A token that specifies the size of component.
- */
-export type AXElementSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type AXComponentOptionChanging = { name: string; value?: any };
-export type AXComponentOptionChanged = {
-  name: string;
-  newValue?: any;
-  oldValue?: any;
-};
-export type AXComponentSetOption = {
-  name: string;
-  value?: any;
-  afterCallback?: (oldValue?: any, newValue?: any) => void;
-  beforeCallback?: (oldValue?: any, newValue?: any) => void;
-};
-
-@Injectable()
-export class AXBaseComponent {
-  id: string = `AX${Math.round(Math.random() * Math.pow(10, 10))}`;
-
-  /**
-   * A token that specifies the layout direction of component.
-   */
-  rtl: boolean;
-
-  #elementRef: ElementRef;
-  _cdr: ChangeDetectorRef;
-
-  _isInited: boolean;
-  _isRendered: boolean;
-
-  /**
-   *  @ignore
-   */
-  constructor(@Inject(Array) ...args: any[]) {
-    this.#elementRef = args[0];
-    this._cdr = args[1];
-  }
-
-  ngOnInit() {
-    this._isInited = true;
-    this._onInternalInit();
-  }
-
-  ngAfterViewInit() {
-    this._isRendered = true;
-    this._onInternalViewInit();
-  }
-
-  ngOnDestroy() {
-    this._onInternalDestroy();
-  }
-
-  _getHostElement<T = HTMLElement>(): T {
-    return this.#elementRef.nativeElement as T;
-  }
-
-  _getInnerElement<T = HTMLElement>(): T {
-    return this._getHostElement().firstElementChild as unknown as T;
-  }
-
-  _onInternalInit() {
-    (this._getHostElement() as any).__axContext__ = this;
-
-    if (this.rtl == null) {
-      this.rtl =
-        window
-          .getComputedStyle(this._getHostElement(), null)
-          .getPropertyValue('direction') === 'rtl';
-    }
-    //TODO: Apply
-    // this._getHostElement().classList.add(this.rtl ? 'ax-rtl' : 'ax-ltr');
-    // this._getInnerElement()?.classList.add(this.rtl ? 'ax-rtl' : 'ax-ltr');
-    // this._getHostElement().setAttribute('data-id', this.id);
-    this.onInit();
-    this.onRenderCssClass();
-  }
-
-  _onInternalViewInit() {
-    this.onViewInit();
-  }
-
-  _onInternalDestroy() {
-    this.onDestroy();
-  }
-
-  onInit() {}
-
-  onRenderCssClass() {}
-
-  onViewInit() {}
-
-  onDestroy() {}
-
-  _onOptionChanging(option: AXComponentOptionChanging) {
-    return option?.value;
-  }
-  _onOptionChanged(option: AXComponentOptionChanged): void {}
-
-  _setOption(option: AXComponentSetOption) {
-    const oldValue = this[option.name];
-    const newValue = this._onOptionChanging({
-      name: option.name,
-      value: option.value,
-    });
-    //TODO : check real changes
-    if (option.beforeCallback) option.beforeCallback(oldValue, newValue);
-    if (oldValue != newValue) {
-      this[`_${option.name}`] = option.value;
-      this._onOptionChanged({ name: option.name, newValue, oldValue });
-      const emitter = this[`${option.name}Change`] as EventEmitter<any>;
-      if (emitter) emitter.emit(newValue);
-    }
-    if (option.afterCallback) option.afterCallback(oldValue, newValue);
-  }
-}
-
-export function _BaseComponenetMixin<
-  TBase extends Constructor<AXBaseComponent>
->(Base: TBase) {
-  return class extends Base {
-    constructor(...args: any[]) {
-      super(...args);
-    }
-  };
-}
-
-export const BASE_INPUTS = ['rtl'];
-export const BASE_OUTPUT = [];

package/mixin/src/base-menu-mixin.class.ts

@@ -1,165 +0,0 @@
-import { EventEmitter } from '@angular/core';
-import { unionBy } from 'lodash-es';
-import { AXItemClickEvent } from '@acorex/components/common';
-import { AXBaseComponent } from './base-components.class';
-import { Constructor } from './constratctor';
-
-export function _BaseMenuComponentMixin<
-  TBase extends Constructor<AXBaseComponent>
->(Base: TBase) {
-  return class extends Base {
-    textField: string = 'text';
-
-    valueField: string = 'id';
-
-    #isLoading: boolean = false;
-
-    #loadedItems: any = [];
-
-    visibleField: string;
-
-    disableField: string;
-
-    hasChildField: string;
-
-    iconField: string;
-
-    openMode: 'click' | 'hover' = 'click';
-
-    direction: 'horizontal' | 'vertical' = 'vertical';
-
-    onMenuItemClick: EventEmitter<AXItemClickEvent<any>> = new EventEmitter<
-      AXItemClickEvent<any>
-    >();
-
-    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) {
-      if (Array.isArray(v)) {
-        this.#items = this._formatData(v);
-      } else if (typeof v === 'function') {
-        this.#items = v;
-      } else {
-        this.#items = [];
-      }
-    }
-
-    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;
-    }
-
-    _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
-      );
-    }
-
-    _findNode(parentId: number, _children: any, source: any) {
-      if (source.length > 0) {
-        source.forEach((element) => {
-          if (element[this.valueField] == parentId) {
-            element.children = _children;
-          } else {
-            if (element?.children)
-              this._findNode(parentId, _children, element.children);
-          }
-        });
-      }
-    }
-
-    _fetchData(parentId?: number, searchText?: string) {
-      return new Promise((resolve) => {
-        if (this.#isLoading) {
-          return;
-        }
-        if (this.#items) {
-          this.#isLoading = true;
-          this.#items({
-            parentId: parentId,
-            searchQuery: searchText,
-          })
-            .then((c) => {
-              if (Array.isArray(c)) {
-                if (parentId) {
-                  resolve(this._findNode(parentId, c, this.displayItems));
-                } else {
-                  resolve((this.#loadedItems = c));
-                }
-              }
-              this._cdr.markForCheck();
-            })
-            .finally(() => {
-              this.#isLoading = false;
-            });
-        }
-      });
-    }
-
-    _onInternalInit() {
-      if (typeof this.#items == 'function') {
-        this._fetchData();
-      }
-      super._onInternalInit();
-    }
-
-    _getItemDisplayTextTemplte(item) {
-      if (item)
-        return Array.isArray(this.textField)
-          ? this.textField.map((c) => item[c]).join(',')
-          : item[this.textField];
-      else return 'Loading...';
-    }
-
-    _trackLoaded(index, item) {
-      return item[this.textField];
-    }
-  };
-}
-
-export const BASEMENU_INPUTS = [
-  'textField',
-  'valueField',
-  'items',
-  'id',
-  'parentId',
-  'iconField',
-  'tooltip',
-  'isOpen',
-  'isActive',
-  'visibleField',
-  'disableField',
-  'hasChildField',
-  'openMode',
-  'direction',
-];
-export const BASEMENU_OUTPUT = ['onMenuItemClick'];

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

@@ -1,84 +0,0 @@
-import { EventEmitter } from '@angular/core';
-import { AXBaseComponent } from './base-components.class';
-import { Constructor } from './constratctor';
-
-export function _ButtonComponentMixin<TBase extends Constructor<AXBaseComponent>>(Base: TBase) {
-  return class extends Base {
-  
-
-    _text: string;
-    /**
-    *  Defines the primary text to show inside the button.
-    */
-    get text(): string {
-      return this._text;
-    }
-    set text(v: string) {
-      this._setOption({
-        name: 'text',
-        value: v,
-        afterCallback: () => {
-          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) {
-      this._setOption({
-        name: 'toggleable',
-        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) {
-      this._setOption({
-        name: 'selected',
-        value,
-        afterCallback: () => {
-          this._cdr.markForCheck();
-        }
-      });
-    }
-
-    constructor(...args: any[]) {
-      super(...args);
-    }
-
-
-    get _classes() {
-      const cssClasses = {
-        'ax-button-icon': !this.text,
-        'ax-state-disabled': this["disabled"],
-        'ax-state-selected': this.selected
-      };
-      cssClasses[`ax-${this['color'] || 'default'}${this['look'] ? '-' + this['look'] : '-default'}`] = true;
-      return cssClasses;
-    }
-  };
-}
-
-export const BUTTON_INPUTS = [
-  'text',
-  'toggleable',
-  'selected',
-];
-export const BUTTON_OUTPUT = ['onBlur', 'onFocus', 'onClick', 'selectedChange', 'toggleableChange'];

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

@@ -1,32 +0,0 @@
-import { EventEmitter } from "@angular/core";
-import { AXBaseComponent } from "./base-components.class";
-import { Constructor } from "./constratctor";
-import { AXClickEvent } from "@acorex/components/common";
-
-
-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);
-        }
-    }
-}
-