@acorex/components 5.8.0 → 6.0.1

package/popover/src/popover.component.ts

@@ -0,0 +1,309 @@
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+  NgZone,
+  ViewContainerRef,
+  Input,
+  ViewChild,
+  TemplateRef,
+  Output,
+  EventEmitter,
+  HostListener,
+} from '@angular/core';
+import { some, includes } from 'lodash-es';
+import { Subscription, fromEvent, throttleTime } from 'rxjs';
+import { AXConnectedPosition, AXEvent } from '@acorex/components/common';
+import { AXPlatform } from '@acorex/core/platform';
+import { AXPoint, AXDrawingUtil } from '@acorex/core/utils';
+import { AXInteractiveComponenetMixin, AXBaseComponent } from '@acorex/components/mixin';
+
+
+@Component({
+  selector: 'ax-popover',
+  templateUrl: './popover.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AXPopoverComponent extends AXInteractiveComponenetMixin {
+  constructor(
+    private _elementRef: ElementRef,
+    public _cdr: ChangeDetectorRef,
+    private _zone: NgZone,
+    private _overlay: Overlay,
+    private _platform: AXPlatform,
+    private _viewContainerRef: ViewContainerRef
+  ) {
+    super(_elementRef, _cdr);
+  }
+  //
+  private _target: HTMLElement;
+  @Input()
+  public get target(): HTMLElement | ElementRef | AXBaseComponent {
+    return this._target;
+  }
+  public set target(v: HTMLElement | ElementRef | AXBaseComponent) {
+    if (v instanceof HTMLElement) this._target = v;
+    else if (v instanceof ElementRef) this._target = v.nativeElement;
+    else if (v instanceof AXBaseComponent) this._target = v._getInnerElement();
+  }
+
+  @Input()
+  position: AXConnectedPosition | AXConnectedPosition[] = [
+    {
+      originX: 'start',
+      originY: 'bottom',
+      overlayX: 'start',
+      overlayY: 'top',
+    },
+    {
+      originX: 'start',
+      originY: 'top',
+      overlayX: 'start',
+      overlayY: 'bottom',
+    },
+  ];
+  //
+  @ViewChild('baseTemplate')
+  _baseTemplate: TemplateRef<any>;
+  _overlayRef: OverlayRef | any;
+  _templatePortal: TemplatePortal;
+
+  _subs: Subscription[] = [];
+  //
+  @Input()
+  openTrigger: 'manual' | 'click' | 'mouseover' | 'toggle' = 'toggle';
+  //
+  @Input()
+  closeTrigger: 'manual' | 'clickout' | 'mouseout' = 'clickout';
+  //
+  @Input()
+  hasBackdrop: boolean = false;
+
+  @Input()
+  backdropClass: string;
+
+  @Input()
+  adaptivityEnabled: boolean = false;
+  //
+  private _mousePos: AXPoint = { x: 0, y: 0 };
+  private _isScrollAttached: boolean = false;
+  //
+  @Output()
+  onOpened: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();
+  @Output()
+  onClosed: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();
+
+  _emitOnOpenedEvent() {
+    this.onOpened.emit({
+      component: this,
+      htmlElement: this._getHostElement(),
+    });
+  }
+
+  _emitOnClosedEvent() {
+    this.onClosed.emit({
+      component: this,
+      htmlElement: this._getHostElement(),
+    });
+  }
+  //
+  onViewInit() {
+    if (this._target) {
+      if (this.openTrigger === 'mouseover') {
+        const mouseEnter$ = fromEvent<MouseEvent>(this._target, 'mouseover');
+        this._addSub(
+          mouseEnter$.subscribe((e) => {
+            const point = { x: e.clientX, y: e.clientY };
+            if (AXDrawingUtil.isInElementBound(point, this._target))
+              this.open();
+          })
+        );
+      }
+      if (this.closeTrigger === 'mouseout') {
+        const mouseMove$ = fromEvent<MouseEvent>(document, 'mousemove');
+        this._addSub(
+          mouseMove$.pipe(throttleTime(50)).subscribe((e) => {
+            this._mousePos.x = e.clientX;
+            this._mousePos.y = e.clientY;
+            if (this.isOpen) {
+              setTimeout(() => {
+                if (
+                  some([this._target, this._overlayRef.overlayElement], (el) =>
+                    includes(
+                      document.elementsFromPoint(
+                        this._mousePos.x,
+                        this._mousePos.y
+                      ),
+                      el
+                    )
+                  )
+                )
+                  this.close();
+              }, 100);
+            }
+          })
+        );
+      }
+      //
+      if (this.openTrigger === 'click' || this.openTrigger === 'toggle') {
+        const click$ = fromEvent<MouseEvent>(this._target, 'click');
+        this._addSub(
+          click$.subscribe((e) => {
+            this.openTrigger == 'toggle' ? this.toggle() : this.open();
+          })
+        );
+      }
+    }
+  }
+  //
+  onDestroy(): void {
+    this._overlayRef?.detach();
+    this._overlayRef?.dispose();
+    this._subs.forEach((s) => {
+      s?.unsubscribe();
+    });
+  }
+
+  @HostListener('keydown', ['$event'])
+  _handleKeydownHandler(e: KeyboardEvent) {
+    // if (e.key === 'Enter' && e.type === 'keydown') {
+    //   this.toggle();
+    // }
+    if (e.key === 'Escape') {
+      if (this.isOpen) {
+        this.close();
+        e.stopPropagation();
+      }
+    }
+  }
+
+  toggle() {
+    this.isOpen ? this.close() : this.open();
+  }
+  //
+  close() {
+    if (!this.isOpen) {
+      return;
+    }
+    this._overlayRef?.detach();
+    this._emitOnClosedEvent();
+  }
+
+  dispose() {
+    this.close();
+    this._overlayRef?.dispose();
+    this._overlayRef = null as any;
+  }
+  //
+  open() {
+    if (this.isOpen) {
+      return;
+    }
+    this._ensureOverlayCreated();
+    this._overlayRef?.attach(this._templatePortal);
+    this._emitOnOpenedEvent();
+  }
+
+  private _ensureOverlayCreated() {
+    const targetRef = this._target;
+    if (!targetRef) return;
+
+    if (!this._overlayRef) {
+      if (this._platform.is('Mobile') && this.adaptivityEnabled) {
+        this._openAsActionsheet();
+      } else {
+        this._openAsPopover(targetRef);
+      }
+
+      if (this.closeTrigger == 'clickout') {
+        this._addSub(
+          this._overlayRef._outsidePointerEvents.subscribe((c) => {
+            const target = c.target as HTMLElement;
+            const comElem = targetRef;
+            if (!comElem.contains(target)) {
+              this.close();
+            }
+          })
+        );
+      }
+      this._addSub(
+        this._overlayRef.attachments().subscribe(() => {
+          if (!this._isScrollAttached) {
+            this._addSub(
+              this._platform.scroll.subscribe((c) => {
+                if (
+                  !(c.nativeEvent.target as HTMLElement).closest(
+                    '.ax-overlay-pane'
+                  )
+                )
+                  this.updatePosition();
+              })
+            );
+            this._isScrollAttached = true;
+          }
+        })
+      );
+    }
+    if (!this._templatePortal) {
+      this._templatePortal = new TemplatePortal(
+        this._baseTemplate,
+        this._viewContainerRef
+      );
+    }
+  }
+
+  private _openAsPopover(targetRef: HTMLElement) {
+    this._overlayRef = this._overlay.create({
+      positionStrategy: this._overlay
+        .position()
+        .flexibleConnectedTo(targetRef)
+        .withPositions(
+          Array.isArray(this.position) ? this.position : [this.position]
+        )
+        .withPush(false),
+      disposeOnNavigation: true,
+      panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
+      maxHeight: 'unset',
+      hasBackdrop: this.hasBackdrop,
+      backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop'],
+    });
+  }
+
+  private _openAsActionsheet() {
+    this._overlayRef = this._overlay.create({
+      positionStrategy: this._overlay
+        .position()
+        .flexibleConnectedTo(document.body)
+        .withPositions([
+          {
+            originX: 'center',
+            originY: 'bottom',
+            overlayX: 'center',
+            overlayY: 'bottom',
+          },
+        ]),
+      disposeOnNavigation: true,
+      panelClass: ['ax-animate-slideInUp', 'ax-animate-faster'],
+      hasBackdrop: true,
+      width: '100%',
+    });
+  }
+
+  get isOpen(): boolean {
+    return this._overlayRef ? this._overlayRef.hasAttached() : false;
+  }
+
+  private _addSub(sub: Subscription) {
+    this._subs.push(sub);
+  }
+
+  updatePosition(): void {
+    this._overlayRef?.updatePosition();
+    this.focus();
+  }
+}

package/popover/src/popover.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXPopoverComponent } from './popover.component';
+
+@NgModule({
+  declarations: [AXPopoverComponent],
+  imports: [CommonModule],
+  exports: [AXPopoverComponent],
+  providers: [],
+})
+export class AXPopoverModule {}

package/popup/index.ts

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

package/popup/ng-package.json

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

package/popup/public-api.ts

@@ -0,0 +1,3 @@
+export * from './src/popup.component';
+export * from './src/popup.service';
+export * from './src/popup.module';

package/popup/src/popup.component.html

@@ -0,0 +1,14 @@
+<div class="ax-popup-wrapper" aria-modal="true" [cdkTrapFocus]="true">
+    <div class="ax-popup ax-popup-{{size}}" tabindex="0" cdkDrag [cdkDragDisabled]="!draggable">
+        <div cdkDragHandle class="ax-popup-header-container">
+            <ax-header *ngIf="showHeader">
+                <ax-title [text]="title"></ax-title>
+                <ax-close-button *ngIf="showCloseButton"></ax-close-button>
+            </ax-header>
+        </div>
+        <div class="ax-popup-main-container">
+            <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template>
+        </div>
+        <div class="ax-popup-footer-container"></div>
+    </div>
+</div>

package/popup/src/popup.component.ts

@@ -0,0 +1,178 @@
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+  ViewContainerRef,
+  HostListener,
+  ComponentRef,
+  EventEmitter,
+  TemplateRef,
+  NgZone,
+} from '@angular/core';
+import {
+  CdkPortalOutletAttachedRef,
+  ComponentPortal,
+  Portal,
+  TemplatePortal,
+} from '@angular/cdk/portal';
+import { AXPlatform } from '@acorex/core/platform';
+
+import { AXClosbaleComponent } from '@acorex/components/common';
+import { AXPageCloseEvent, TAB_META_KEY } from '@acorex/components/page';
+import { AXLoadingService } from '@acorex/components/loading';
+import { AXBaseComponentMixin } from '@acorex/components/mixin';
+
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+@Component({
+  selector: 'ax-popup',
+  templateUrl: './popup.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }],
+})
+export class AXPopupComponent extends AXBaseComponentMixin {
+  isLoading: boolean = true;
+  private _loadingId: number;
+
+  title: string;
+
+  onClosed: EventEmitter<AXPageCloseEvent> =
+    new EventEmitter<AXPageCloseEvent>();
+
+  size: 'sm' | 'md' | 'lg' | 'full' = 'sm';
+  draggable: boolean = true;
+
+  data: any = {};
+
+  showCloseButton: boolean = true;
+  showHeader: boolean = true;
+
+  content: any;
+
+  _selectedPortal: Portal<any>;
+  _footerPortal: Portal<any>;
+  _headerPortal: Portal<any>;
+
+  /**
+   *  @ignore
+   */
+  constructor(
+    elementRef: ElementRef,
+    cdr: ChangeDetectorRef,
+    private _zone: NgZone,
+    private _viewContainerRef: ViewContainerRef,
+    private loadingService: AXLoadingService,
+    private _platform: AXPlatform
+  ) {
+    super(elementRef, cdr);
+  }
+
+  onInit() {
+    super.onInit();
+    if (this._platform.is('Mobile')) {
+      this.draggable = false;
+    }
+
+    this._loadingId = this.loadingService.show(
+      //TODO: check ts error
+      //@ts-ignore
+      this._getHostElement().querySelector('.ax-popup-body-container')
+    );
+    //
+    if (typeof this.content === 'string') {
+      //   this.rendererService.findLoadedComponentByRoute(this.content, 20).then(route => {
+      //     setTimeout(() => {
+      //       this.loadComponent(route.component);
+      //     }, 300);
+      //   });
+    } else if (this.content instanceof TemplateRef) {
+      this._selectedPortal = new TemplatePortal(
+        this.content,
+        this._viewContainerRef,
+        { $implicit: this.data, ref: this }
+      );
+      this._cdr.markForCheck();
+    } else if (typeof this.content === 'function') {
+      this._selectedPortal = new ComponentPortal(this.content);
+      this._cdr.markForCheck();
+    }
+  }
+
+  _handleAttched(ref: CdkPortalOutletAttachedRef) {
+    ref = ref as ComponentRef<any>;
+    if (ref.instance) {
+      this[TAB_META_KEY].component = ref.instance;
+      Object.assign(this[TAB_META_KEY].component, this.data);
+      Object.assign(this[TAB_META_KEY].component, { _isPopup: true });
+      if (ref.instance.onClosed) {
+        ref.instance.onClosed.subscribe((e: AXPageCloseEvent) => {
+          this.onClosed.emit(e);
+        });
+      }
+    }
+    this._zone.runOutsideAngular(() => {
+      setTimeout(() => {
+        const main = this._getHostElement().querySelector<HTMLDivElement>(
+          '.ax-popup-main-container'
+        );
+        const popHeader = this._getHostElement().querySelector<HTMLDivElement>(
+          '.ax-popup-header-container'
+        );
+        const popFooter = this._getHostElement().querySelector<HTMLDivElement>(
+          '.ax-popup-footer-container'
+        );
+        const footer = main!.querySelector<HTMLDivElement>('ax-footer');
+        const header = main!.querySelector<HTMLDivElement>('ax-header');
+        if (footer) {
+          popFooter!.append(footer);
+        }
+        if (header) {
+          //TODO: check ts error
+          //@ts-ignore
+          popHeader.innerHTML = '';
+          popHeader!.append(header);
+        }
+      });
+    });
+    this.loadingService.hide(this._loadingId);
+    this.focus();
+    this._cdr.markForCheck();
+  }
+
+  @HostListener('keydown.escape', ['$event'])
+  onKeydownHandler(event: KeyboardEvent) {
+    if (this.showCloseButton) {
+      this.close();
+    }
+  }
+
+  _handleCloseClick() {
+    this.close();
+  }
+
+  ngOnDestroy() {
+    this.loadingService.hide(this._loadingId);
+  }
+
+  focus() {
+    setTimeout(() => this._getHostElement().focus());
+  }
+
+  close() {
+    this.onClosed.emit({
+      //TODO: check ts error
+      //@ts-ignore
+      component: this[TAB_META_KEY].component,
+      htmlElement: this._getHostElement(),
+    });
+    this._cdr.detectChanges();
+  }
+
+  onFullScreen() {}
+}

package/popup/src/popup.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { A11yModule } from '@angular/cdk/a11y';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { PortalModule } from '@angular/cdk/portal';
+import { AXPopupComponent } from './popup.component';
+import { AXButtonModule } from '@acorex/components/button';
+
+import { AXDecoratorModule } from '@acorex/components/decorators';
+
+const COMPONENT = [AXPopupComponent];
+const MODULES = [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXPopupModule { }

package/popup/src/popup.service.ts

@@ -0,0 +1,114 @@
+import { Injectable, TemplateRef } from '@angular/core';
+import { AXOverlayService, AXOverlayViewRef } from '@acorex/components/common';
+import { AXPageClosedPromise, AXPageCloseEvent, TAB_META_KEY } from '@acorex/components/page';
+import { AXPopupComponent } from './popup.component';
+
+export type AXPopupContentType = string | TemplateRef<any> | Function;
+
+/**
+ * This is a service which you can create popup with it
+ *
+ * @category Components
+ */
+@Injectable({ providedIn: 'root' })
+export class AXPopupService {
+
+
+  private stack: Array<AXPopupComponent> = [];
+
+
+  /**
+   *  @ignore
+   */
+  constructor(private overlayService: AXOverlayService) { }
+
+
+  /**
+    *  Open popup 1
+    */
+  open(content: AXPopupContentType, title: string): AXPageClosedPromise;
+  /**
+  *  Open popup 2
+  *  @ignore
+  */
+  open(
+    content: AXPopupContentType,
+    options?: {
+      title: string;
+      showCloseButton?: boolean;
+      showHeader?: boolean;
+      maximizable?: boolean;
+      size?: 'sm' | 'md' | 'lg' | 'full' | 'fit';
+      data?: any;
+      draggable?: boolean
+    }
+  ): AXPageClosedPromise;
+
+  /**
+  *  @ignore
+  */
+  open(arg1, arg2): AXPageClosedPromise {
+    const options: any = {
+      showCloseButton: true,
+      showHeader: true,
+      size: 'md',
+      maximizable: false,
+      draggable: true
+    };
+    if (typeof arg2 === 'string') {
+      options.title = arg2;
+    } else {
+      Object.assign(options, arg2);
+    }
+    const com = this.overlayService.show(AXPopupComponent, options, { transparentBackdrop: false, closeOnClickOutside: false, scroll: 'block' });
+    const popup = com.instance as AXPopupComponent;
+    popup.content = arg1;
+    popup[TAB_META_KEY] = {};
+    if (options.size) {
+      popup.size = options.size;
+    }
+    this.stack.push(popup);
+    popup.onClosed.subscribe(c => {
+      this.closePopup(popup, com, c);
+    });
+    const promise = new AXPageClosedPromise((resolve) => {
+      popup[TAB_META_KEY].close = (e) => {
+        if (resolve) {
+          resolve(e);
+        }
+      };
+    });
+    promise['closeMethod'] = () => { popup.close(); };
+    return promise;
+  }
+
+
+  private closePopup(popup: AXPopupComponent, com: AXOverlayViewRef, result: AXPageCloseEvent) {
+    const closeFunc = (e) => {
+      com.dispose();
+      this.stack.pop();
+      delete e.cancel;
+      popup[TAB_META_KEY].close(e);
+      if (this.stack.length) { this.stack.reverse()[0].focus(); }
+    };
+    const e = { cancel: false };
+    const closingFunc = popup[TAB_META_KEY].component.onClosing;
+    if (closingFunc) {
+      const res = closingFunc(e);
+      if (res instanceof Promise) {
+        res.then(() => {
+          if (e == null || e.cancel !== true) {
+            closeFunc(result);
+          }
+        });
+      }
+      else {
+        if (e == null || e.cancel !== true) {
+          closeFunc(result);
+        }
+      }
+    } else {
+      closeFunc(result);
+    }
+  }
+}

package/progress-bar/index.ts

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

package/progress-bar/ng-package.json

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

package/progress-bar/public-api.ts

@@ -0,0 +1,2 @@
+export * from './src/progress-bar.component'
+export * from './src/progress-bar.module'

package/progress-bar/src/progress-bar.component.html

@@ -0,0 +1,6 @@
+<ng-content select="ax-prefix"></ng-content>
+<div class="ax-progress-bar-container">
+    <div class="ax-progress-bar-rise ax-animate-animated ax-animate-fedeIn ax-animate-faster" [style.width.%]="value">
+    </div>
+</div>
+<ng-content select="ax-suffix"></ng-content>