@acorex/components 5.0.5 → 5.0.9

package/src/lib/page/page-footer.component.ts

@@ -1,19 +0,0 @@
-import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
-
-@Component({
-    selector: 'ax-page-footer',
-    template: `
-       <ng-template>
-            <ng-content select="ax-prefix">
-            </ng-content>
-            <ng-content select="ax-suffix">
-            </ng-content>
-       </ng-template>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AXPageFooterComponent {
-
-    @ViewChild(TemplateRef, { static: true })
-    template: TemplateRef<any>;
-}

package/src/lib/page/page.component.ts

@@ -1,32 +0,0 @@
-import { ChangeDetectorRef, ElementRef, Inject, Injectable } from "@angular/core";
-import { AXBaseComponentMixin } from "../base";
-import { AXLoadingService } from "../loading";
-
-@Injectable()
-export abstract class AXPageComponent extends AXBaseComponentMixin {
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef,
-        @Inject(AXLoadingService) private _loadingService
-    ) {
-        super(elementRef, cdr);
-    }
-
-    private _loadingId: number;
-
-    private _isLoading: boolean = false;
-    public get isLoading(): boolean {
-        return this._isLoading;
-    }
-    public set isLoading(v: boolean) {
-        this._isLoading = v;
-        if (this._loadingId && !v) {
-            this._loadingService.hide(this._loadingId);
-            this._loadingId = null;
-        }
-        if (v) {
-            this._loadingId = this._loadingService.show(this._getHostElement());
-        }
-    }
-}

package/src/lib/page/page.module.ts

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { AXPageFooterComponent } from './page-footer.component';
-
-
-@NgModule({
-    imports: [],
-    exports: [AXPageFooterComponent],
-    declarations: [AXPageFooterComponent],
-    providers: [],
-})
-export class AXPageModule { }

package/src/lib/popover/popover.component.html

@@ -1,3 +0,0 @@
-<ng-template #baseTemplate>
-  <ng-content></ng-content>
-</ng-template>

package/src/lib/popover/popover.component.ts

@@ -1,229 +0,0 @@
-import { Component, Input, NgZone, ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, TemplateRef, ElementRef, ViewContainerRef, HostListener, EventEmitter } from '@angular/core';
-import { AXBaseComponent, AXConnectedPosition, AXEvent } from '../base';
-import { Overlay, OverlayRef } from '@angular/cdk/overlay';
-import { AXDrawingUtil, AXPlatform, AXPoint } from '@acorex/core';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { fromEvent, Subscription } from 'rxjs';
-import _ from 'lodash';
-import {  throttleTime } from 'rxjs/operators';
-
-
-
-
-
-@Component({
-  selector: 'ax-popover',
-  templateUrl: './popover.component.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AXPopoverComponent extends AXBaseComponent {
-
-  constructor(
-    _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) {
-    debugger;
-    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;
-  _templatePortal: TemplatePortal;
-
-  _subs: Subscription[] = [];
-  //
-  @Input()
-  openTrigger: 'manual' | 'click' | 'mouseover' | 'toggle' = 'toggle';
-  //
-  @Input()
-  closeTrigger: 'manual' | 'clickout' | 'mouseout' = 'clickout';
-  //
-  @Input()
-  hasBackdrop:boolean = false;
-
-  @Input()
-  backdropClass:string;
-  //
-  private _mousePos: AXPoint = { x: 0, y: 0 };
-  private _isScrollAttached: boolean = false;
-  //
-  onOpened: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();
-  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('document: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();
-  }
-  //
-  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) {
-      const positionStrategy = this._overlay.position()
-        .flexibleConnectedTo(targetRef)
-        .withPositions(Array.isArray(this.position) ? this.position : [this.position])
-        .withPush(false);
-      this._overlayRef = this._overlay.create({
-        positionStrategy,
-        scrollStrategy: this._overlay.scrollStrategies.close(),
-        panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
-        hasBackdrop: this.hasBackdrop,
-        backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop']
-      });
-      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.close();
-          }));
-          this._isScrollAttached = true;
-        }
-      }));
-    }
-    if (!this._templatePortal) {
-      this._templatePortal = new TemplatePortal(this._baseTemplate, this._viewContainerRef);
-    }
-  }
-
-  get isOpen(): boolean {
-    return this._overlayRef ? this._overlayRef.hasAttached() : false;
-  }
-
-  private _addSub(sub: Subscription) {
-    this._subs.push(sub);
-  }
-}

package/src/lib/popover/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/src/lib/popup/popup.component.html

@@ -1,25 +0,0 @@
-<div class="ax-popup-wrapper" aria-modal="true" cdkTrapFocus>
-    <div class="ax-popup ax-{{size}}" tabindex="0" cdkDrag>
-        <ng-container *ngIf="showHeader">
-            <header cdkDragHandle class="ax-cursor-move">
-                <div>
-                    <div class="ax-text-lg ax-font-medium">
-                        <span>
-                            {{title}}
-                        </span>
-                    </div>
-                </div>
-                <div *ngIf="showCloseButton">
-                    <i class="ax-ic ax-ic-close ax-text-gray ax-cursor-pointer" (click)="_handleCloseClick()"
-                        tabindex="1"></i>
-                </div>
-            </header>
-        </ng-container>
-        <main>
-            <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template>
-        </main>
-        <footer *ngIf="_footerPortal">
-            <ng-template [cdkPortalOutlet]="_footerPortal"></ng-template>
-        </footer>
-    </div>
-</div>

package/src/lib/popup/popup.component.ts

@@ -1,118 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, ViewChild, ViewContainerRef, ComponentFactoryResolver, HostListener, ComponentRef, EventEmitter, TemplateRef, ContentChild } from '@angular/core';
-import { AXBaseComponentMixin } from '../base';
-import { AXPageCloseEvent, TAB_META_KEY } from '../page/base-page.class';
-import { AXButtonItem } from '../button';
-import { AXLoadingService } from '../loading';
-import { Subscription } from 'rxjs';
-import { CdkPortalOutletAttachedRef, ComponentPortal, Portal, TemplatePortal } from '@angular/cdk/portal';
-
-@Component({
-    selector: 'ax-popup',
-    templateUrl: './popup.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-})
-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';
-
-
-    data: any = {};
-
-
-    showCloseButton: boolean = true;
-    showHeader: boolean = true;
-
-    content: any;
-
-
-    _selectedPortal: Portal<any>;
-    _footerPortal: Portal<any>;
-    _headerPortal: Portal<any>;
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef,
-        private _viewContainerRef: ViewContainerRef,
-        private loadingService: AXLoadingService,
-    ) {
-        super(elementRef, cdr);
-    }
-
-    onViewInit() {
-        this._loadingId = this.loadingService.show(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);
-            if (ref.instance.onClosed) {
-                ref.instance.onClosed.subscribe((e: AXPageCloseEvent) => {
-                    this.onClosed.emit(e);
-                });
-            }
-        }
-        if (ref.instance.footer) {
-            this._footerPortal = new TemplatePortal(ref.instance.footer.template, this._viewContainerRef, { $implicit: this.data, ref: this });
-        }
-        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({
-            component: this[TAB_META_KEY].component,
-            htmlElement: this._getHostElement(),
-        });
-        this._cdr.detectChanges();
-    }
-
-    onFullScreen() { }
-}

package/src/lib/popup/popup.module.ts

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

package/src/lib/popup/popup.service.ts

@@ -1,112 +0,0 @@
-import { Injectable, TemplateRef } from '@angular/core';
-import { AXOverlayService, AXOverlayViewRef } from '../base/overlay.service';
-import { AXPageClosedPromise, AXPageCloseEvent, TAB_META_KEY } from '../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()
-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;
-    }
-  ): AXPageClosedPromise;
-
-  /**
-  *  @ignore
-  */
-  open(arg1, arg2): AXPageClosedPromise {
-    const options: any = {
-      showCloseButton: true,
-      showHeader: true,
-      size: 'md',
-      maximizable: false
-    };
-    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/src/lib/range-slider/range-slider.component.html

@@ -1 +0,0 @@
-<input type="range" min="1" max="100" value="50" class="ax-range-slider-input">

package/src/lib/range-slider/range-slider.component.ts

@@ -1,21 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef } from '@angular/core';
-import { AXBaseComponentMixin } from '../base';
-
-@Component({
-    selector: 'ax-range-slider',
-    templateUrl: './range-slider.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-range-slider' }
-})
-export class AXRangeSliderComponent extends AXBaseComponentMixin {
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef
-    ) {
-        super(elementRef, cdr);
-        //TODO: ax-range-slider
-    }
-
-}

package/src/lib/range-slider/range-slider.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXRangeSliderComponent } from './range-slider.component';
-
-const COMPONENT = [AXRangeSliderComponent];
-const MODULES = [CommonModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXRangeSliderModule { }