@acorex/components 6.0.1 → 6.0.7

package/common/src/auto-focus.directive.ts

@@ -1,51 +0,0 @@
-import {
-  AfterContentInit,
-  Directive,
-  ElementRef,
-  Host,
-  Input,
-  Optional,
-  Self,
-} from '@angular/core';
-import { AXFocusableComponent } from './components.class';
-
-@Directive({
-  selector: '[axAutoFocus]',
-})
-export class AXAutoFocusDirective implements AfterContentInit {
-  @Input('axAutoFocus')
-  public autoFocus?: boolean = true;
-
-  constructor(
-    private el: ElementRef<HTMLElement>,
-    @Host()
-    @Self()
-    @Optional()
-    public _host: AXFocusableComponent
-  ) {}
-
-  ngAfterContentInit(): void {
-    if (this.autoFocus) {
-      const list = [
-        'button',
-        'input',
-        '[href]',
-        'select',
-        'textarea',
-        '[tabindex]',
-      ].map((c) => c + ':not([tabindex="-1"])');
-      const focusable =
-        this.el.nativeElement.querySelector<HTMLElement>(list.join(', ')) ??
-        this.el.nativeElement;
-      const attr = document.createAttribute('autofocus');
-      focusable.setAttributeNode(attr);
-      const hasTabindex = focusable.hasAttribute('tabindex');
-      if (!hasTabindex) {
-        focusable.setAttribute('tabIndex', '0');
-      }
-      setTimeout(() => {
-        focusable.focus();
-      }, 250);
-    }
-  }
-}

package/common/src/common.module.ts

@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { AXAutoFocusDirective } from './auto-focus.directive';
-import { AXHotkeyDirective } from './hotkey.directive';
-import { AXInfiniteScrollerDirective } from './infinite-scroll.directive';
-import { AXResponsiveDirective } from './responsive.directive';
-@NgModule({
-  imports: [],
-  exports: [
-    AXResponsiveDirective,
-    AXInfiniteScrollerDirective,
-    AXAutoFocusDirective,
-    AXHotkeyDirective,
-  ],
-  declarations: [
-    AXResponsiveDirective,
-    AXInfiniteScrollerDirective,
-    AXAutoFocusDirective,
-    AXHotkeyDirective,
-  ],
-  providers: [],
-})
-export class AXCommonModule {}

package/common/src/components.class.ts

@@ -1,44 +0,0 @@
-import { EventEmitter, Injectable } from '@angular/core';
-import { AXValueChangedEvent } from './events.class';
-
-@Injectable()
-export abstract class AXComponent {}
-
-@Injectable()
-export abstract class AXClosbaleComponent extends AXComponent {
-  abstract close(): void;
-}
-
-@Injectable()
-export abstract class AXSearchableComponent extends AXComponent {
-  abstract search(value: string): void;
-}
-
-@Injectable()
-export abstract class AXValuableComponent extends AXComponent {
-  abstract onValueChanged: EventEmitter<AXValueChangedEvent<any>>;
-  abstract value: any;
-}
-
-@Injectable()
-export abstract class AXFocusableComponent extends AXComponent {
-  abstract focus();
-}
-
-export interface AXPagedComponentInterface {
-  goToPage(page: number);
-  get totalCount(): number;
-  get pageSize(): number;
-  onPageChanged: EventEmitter<AXValueChangedEvent<number>>;
-}
-
-@Injectable()
-export abstract class AXPagedComponent
-  extends AXComponent
-  implements AXPagedComponentInterface
-{
-  abstract goToPage(page: number);
-  abstract get totalCount(): number;
-  abstract get pageSize(): number;
-  abstract onPageChanged: EventEmitter<AXValueChangedEvent<number>>;
-}

package/common/src/custom-cdk-overlay.service.ts

@@ -1,86 +0,0 @@
-import {
-  Overlay,
-  OverlayKeyboardDispatcher,
-  OverlayPositionBuilder,
-  ScrollStrategyOptions,
-  OverlayContainer,
-  OverlayRef,
-  OverlayConfig,
-  OverlayOutsideClickDispatcher,
-} from '@angular/cdk/overlay';
-
-// TODO: 'ComponentFactoryResolver' is deprecated.
-import {
-  ComponentFactoryResolver,
-  Inject,
-  Injector,
-  NgZone,
-  Renderer2,
-  RendererFactory2,
-  Injectable,
-} from '@angular/core';
-
-import { Directionality } from '@angular/cdk/bidi';
-import { DOCUMENT, Location } from '@angular/common';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class DynamicOverlayContainer extends OverlayContainer {
-  public setContainerElement(containerElement: HTMLElement): void {
-    this._containerElement = containerElement;
-  }
-}
-
-@Injectable({
-  providedIn: 'root',
-})
-export class DynamicOverlay extends Overlay {
-  private readonly _dynamicOverlayContainer: DynamicOverlayContainer;
-  private renderer: Renderer2;
-
-  constructor(
-    scrollStrategies: ScrollStrategyOptions,
-    _overlayContainer: DynamicOverlayContainer,
-    _componentFactoryResolver: ComponentFactoryResolver,
-    _positionBuilder: OverlayPositionBuilder,
-    _keyboardDispatcher: OverlayKeyboardDispatcher,
-    _injector: Injector,
-    _ngZone: NgZone,
-    @Inject(DOCUMENT) _document: any,
-    _directionality: Directionality,
-    rendererFactory: RendererFactory2,
-    _location: Location,
-    _outsideClickDispatcher: OverlayOutsideClickDispatcher
-  ) {
-    super(
-      scrollStrategies,
-      _overlayContainer,
-      _componentFactoryResolver,
-      _positionBuilder,
-      _keyboardDispatcher,
-      _injector,
-      _ngZone,
-      _document,
-      _directionality,
-      _location,
-      _outsideClickDispatcher
-    );
-    this.renderer = rendererFactory.createRenderer(null, null);
-
-    this._dynamicOverlayContainer = _overlayContainer;
-  }
-
-  private setContainerElement(containerElement: HTMLElement): void {
-    this.renderer.setStyle(containerElement, 'transform', 'translateZ(0)');
-    this._dynamicOverlayContainer.setContainerElement(containerElement);
-  }
-
-  public createOn(
-    containerElement: HTMLElement,
-    config?: OverlayConfig
-  ): OverlayRef {
-    this.setContainerElement(containerElement);
-    return super.create(config);
-  }
-}

package/common/src/drawing.class.ts

@@ -1,9 +0,0 @@
-export interface AXConnectedPosition {
-  originX: 'start' | 'center' | 'end';
-  originY: 'top' | 'center' | 'bottom';
-  overlayX: 'start' | 'center' | 'end';
-  overlayY: 'top' | 'center' | 'bottom';
-  weight?: number;
-  offsetX?: number;
-  offsetY?: number;
-}

package/common/src/events.class.ts

@@ -1,97 +0,0 @@
-/**
- *  Contains native event
- * @category Events
- */
-export class AXEvent {
-  /**
-   *  The sender component
-   */
-  component: any;
-  /**
-   *  The root native element
-   */
-  htmlElement?: HTMLElement;
-
-  isUserInteraction?: boolean = false;
-}
-
-/**
- *  Contains native event
- * @category Events
- */
-export class AXHtmlEvent<E extends Event> extends AXEvent {
-  nativeEvent?: E;
-}
-
-/**
- *  Contains native event
- * @category Events
- */
-export class AXValueChangedEvent<T> extends AXEvent {
-  name?: string;
-  value?: T;
-  oldValue?: T;
-}
-
-/**
- *  Fires each time the user click the element.
- * @category Events
- */
-export class AXClickEvent extends AXHtmlEvent<MouseEvent> {
-  /**
-   *  uses for extra data
-   */
-  data?: any;
-
-  nativeEvent?:any;
-}
-
-/**
- *  Fires each time the user click the element.
- * @category Events
- */
-export class AXButtonClickEvent extends AXClickEvent {
-  name: string;
-}
-
-/**
- *  Fires each time the user click the element.
- * @category Events
- */
-export class AXItemClickEvent<T> extends AXHtmlEvent<MouseEvent> {
-  item: T;
-}
-
-/**
- *  Fires each time the component gets focused.
- * @category Events
- */
-export class AXFocusEvent extends AXHtmlEvent<FocusEvent> {}
-
-/**
- *  Fires each time an item or multiple items selected by the user or value.
- * @category Events
- */
-export class AXSelectionValueChangedEvent extends AXValueChangedEvent<
-  any | any[]
-> {
-  value?: any;
-  oldValue?: any;
-  selectedKeys?: any[];
-  selectedItems?: any[];
-}
-
-/**
- *  Contains range start & end values
- * @category Events
- */
-export class AXRangeChangedEvent<T> extends AXEvent {
-  /**
-   *  The range start value
-   */
-  start?: T;
-  /**
-   *  The range end value
-   */
-  end?: T;
-}

package/common/src/hotkey.directive.ts

@@ -1,86 +0,0 @@
-import {
-  AfterViewInit,
-  Directive,
-  ElementRef,
-  Host,
-  Input,
-  Optional,
-  Self,
-} from '@angular/core';
-import { Subscription } from 'rxjs';
-import { AXComponent } from './components.class';
-import { AXHotkeysService } from './hotkey.service';
-
-export type AXHotKeyAction = { [key: string]: string | Function; parmas?: any };
-
-@Directive({
-  selector: '[hotkey]',
-})
-export class AXHotkeyDirective implements AfterViewInit {
-  @Input('hotkey')
-  public hotkey: string | AXHotKeyAction | AXHotKeyAction[] = '';
-
-  private _subs: Subscription[] = [];
-
-  constructor(
-    private el: ElementRef<HTMLElement>,
-    @Host()
-    @Self()
-    @Optional()
-    public _host: AXComponent,
-    private hs: AXHotkeysService
-  ) {}
-
-  ngAfterViewInit(): void {
-    if (!this.hotkey || !this._host) return;
-
-    if (typeof this.hotkey == 'string') {
-      this._addDefaultAction(this.hotkey);
-    } else if (typeof this.hotkey == 'object' && !Array.isArray(this.hotkey)) {
-      this._addHotKeyAction([this.hotkey as AXHotKeyAction]);
-    } else if (Array.isArray(this.hotkey)) {
-      this._addHotKeyAction(this.hotkey);
-    }
-  }
-
-  private _addDefaultAction(hotkey: string) {
-    this._subs.push(
-      this.hs.addShortcut({ keys: hotkey }).subscribe(() => {
-        ['click', 'toggle', 'open', 'focus'].forEach((a) => {
-          if (this._host[a]) {
-            this._host[a]();
-            return;
-          }
-        });
-      })
-    );
-  }
-
-  private _addHotKeyAction(hotkeys: AXHotKeyAction[]) {
-    hotkeys.forEach((k) => {
-      const hotkey = (<unknown>Object.entries(k)[0][0]) as string;
-      const action = <unknown>Object.entries(k)[0][1];
-      if (!action) this._addDefaultAction(hotkey);
-      else {
-        this._subs.push(
-          this.hs.addShortcut({ keys: hotkey }).subscribe(() => {
-            if (typeof action == 'string' && this._host[action]) {
-              this._host[action]();
-              return;
-            }
-            if (typeof action == 'function') {
-              action();
-              return;
-            }
-          })
-        );
-      }
-    });
-  }
-
-  ngOnDestroy() {
-    this._subs.forEach((s) => {
-      s.unsubscribe();
-    });
-  }
-}

package/common/src/hotkey.service.ts

@@ -1,43 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
-import { EventManager } from '@angular/platform-browser';
-import { Observable } from 'rxjs/internal/Observable';
-
-type Options = {
-  element: any;
-  keys: string;
-};
-
-@Injectable({ providedIn: 'root' })
-export class AXHotkeysService {
-  defaults: Partial<Options> = {
-    element: this.document,
-  };
-
-  constructor(
-    private eventManager: EventManager,
-    @Inject(DOCUMENT) private document: Document
-  ) {}
-
-  addShortcut(options: Partial<Options>) {
-    const merged = { ...this.defaults, ...options };
-    const event = `keydown.${merged.keys}`;
-
-    return new Observable((observer) => {
-      const handler = (e: UIEvent) => {
-        e.preventDefault();
-        observer.next(e);
-      };
-
-      const dispose = this.eventManager.addEventListener(
-        merged.element,
-        event,
-        handler
-      );
-
-      return () => {
-        dispose();
-      };
-    });
-  }
-}

package/common/src/infinite-scroll.directive.ts

@@ -1,95 +0,0 @@
-import { Directive, AfterViewInit, ElementRef, Input } from '@angular/core';
-import { fromEvent, Observable } from 'rxjs';
-import { exhaustMap, filter, map, pairwise, startWith } from 'rxjs/operators';
-
-
-export interface AXScrollPosition {
-    scrollHeight: number;
-    scrollTop: number;
-    clientHeight: number;
-};
-
-const AX_DEFAULT_SCROLL_POSITION: AXScrollPosition = {
-    scrollHeight: 0,
-    scrollTop: 0,
-    clientHeight: 0
-};
-
-@Directive({
-    selector: '[axInfiniteScroller]'
-})
-export class AXInfiniteScrollerDirective implements AfterViewInit {
-
-    private scrollEvent$: Observable<any>;
-
-    private userScrolledDown$: Observable<any>;
-
-
-    private requestOnScroll$: Observable<any>;
-
-    @Input()
-    scrollCallback: Function;
-
-    @Input()
-    immediateCallback;
-
-    @Input()
-    scrollPercent = 70;
-
-    constructor(private elm: ElementRef) { }
-
-    ngAfterViewInit() {
-
-        this.registerScrollEvent();
-
-        this.streamScrollEvents();
-
-        this.requestCallbackOnScroll();
-
-    }
-
-    private registerScrollEvent() {
-
-        this.scrollEvent$ = fromEvent(this.elm.nativeElement, 'scroll');
-
-    }
-
-    private streamScrollEvents() {
-        this.userScrolledDown$ = this.scrollEvent$
-            .pipe(
-                map((e: any): AXScrollPosition => ({
-                    scrollHeight: e.target.scrollHeight,
-                    scrollTop: e.target.scrollTop,
-                    clientHeight: e.target.clientHeight
-                })),
-                pairwise(),
-                filter(positions => this.isUserScrollingDown(positions) && this.isScrollExpectedPercent(positions[1]))
-            );
-    }
-
-    private requestCallbackOnScroll() {
-        this.requestOnScroll$ = this.userScrolledDown$;
-
-        if (this.immediateCallback) {
-            this.requestOnScroll$ = this.requestOnScroll$.pipe(
-                startWith([AX_DEFAULT_SCROLL_POSITION, AX_DEFAULT_SCROLL_POSITION])
-            );
-        }
-
-        this.requestOnScroll$.pipe(
-            exhaustMap(() => {
-                return this.scrollCallback();
-            }))
-            //.subscribe((data) => { console.log(data) }, (err) => console.log(err));
-
-    }
-
-    private isUserScrollingDown = (positions) => {
-        return positions[0].sT < positions[1].sT;
-    }
-
-    private isScrollExpectedPercent = (position) => {
-        return ((position.sT + position.cH) / position.sH) > (this.scrollPercent / 100);
-    }
-
-}

package/common/src/overlay.service.ts

@@ -1,117 +0,0 @@
-import { Injectable, ApplicationRef, ViewContainerRef, TemplateRef } from '@angular/core';
-import { Overlay, PositionStrategy, ScrollStrategy } from '@angular/cdk/overlay';
-import { TemplatePortal, Portal, ComponentPortal } from '@angular/cdk/portal';
-import { AXConnectedPosition } from './drawing.class';
-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 : ['ax-animate-animated', 'ax-animate-zoomIn','ax-animate-faster']
-        };
-        // joon nanat dorost sho
-        let overlayRef:any = 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/common/src/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);
-    }
-
-}