@acorex/components 6.0.1 → 6.0.2

package/popover/src/popover.component.ts

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

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

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

package/popup/ng-package.json

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

package/popup/src/popup.component.html

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

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

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

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

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

package/progress-bar/ng-package.json

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

package/progress-bar/public-api.ts

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

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

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