@acorex/components 6.0.0 → 6.0.1

package/menu/src/menu.component.ts

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

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

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

package/mixin/ng-package.json

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

package/mixin/public-api.ts

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

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

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

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

@@ -0,0 +1,32 @@
+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);
+        }
+    }
+}
+