@acorex/components 6.0.0 → 6.0.1

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

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

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

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

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

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

@@ -0,0 +1,97 @@
+/**
+ *  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

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

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

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

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

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