@acorex/components 6.0.0 → 6.0.1

package/password-box/src/password-box.component.html

@@ -0,0 +1,15 @@
+<ng-content select="ax-prefix">
+</ng-content>
+<input class="ax-input" [attr.name]="name" [type]="_type" [attr.placeholder]="placeholder" [attr.maxlength]="maxLength" [class.ax-state-disabled]="disabled" [class.ax-state-readonly]="readonly" [disabled]="disabled" [readonly]="readonly" [tabindex]="tabIndex"
+    [(ngModel)]="value" (focus)="_emitOnFocusEvent($event)" (blur)="_emitOnBlurEvent($event)" [attr.autocomplete]="autoComplete">
+
+<ng-content select="ax-suffix">
+
+</ng-content>
+<ng-content select="ax-validation-rule">
+</ng-content>
+<ng-content select="ax-input-mask">
+</ng-content>
+<ax-button color="light" look="blank" [size]="size" (onClick)="toggleType()" [tabIndex]="-1" *ngIf="showToggleButton">
+    <ax-icon [icon]="_icon"></ax-icon>
+</ax-button>

package/password-box/src/password-box.component.ts

@@ -0,0 +1,65 @@
+
+import { TEXTBOX_INPUTS, TEXTBOX_OUTPUT, AXBaseTextBoxMixin } from '@acorex/components/mixin';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+
+
+/**
+ * The Textbox is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+@Component({
+  selector: 'ax-password-box',
+  templateUrl: 'password-box.component.html',
+  inputs: [
+    'disabled',
+    'readonly',
+    'tabIndex',
+    'cssClass',
+    'size',
+    'placeholder', 'maxLength', 'allowNull', 'debounceTime', 'type', 'autoComplete', 'readonly','allowNull','value','name', 'checked',
+  ],
+  outputs: [
+    'valueChange',
+    'onValueChanged',
+    'onBlur',
+    'onFocus',
+    'valueChange', 'onValueChanged',
+  ],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'ax-password-box ax-editor-container' },
+})
+export class AXPasswordBoxComponent extends AXBaseTextBoxMixin {
+  _type: 'password' | 'text' = 'password';
+  _icon: 'ax-ic-eye' | 'ax-ic-eye-off' = 'ax-ic-eye';
+
+  /**
+   *  A flag for showing or hiding password button.
+   */
+  @Input() showToggleButton: boolean = true;
+
+  /**
+   *  @ignore
+   */
+  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+  }
+
+  toggleType() {
+    if (this._type === 'password') {
+      this._type = 'text';
+      this._icon = 'ax-ic-eye-off';
+    } else {
+      this._type = 'password';
+      this._icon = 'ax-ic-eye';
+    }
+  }
+}

package/password-box/src/password-box.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXPasswordBoxComponent } from './password-box.component';
+import { FormsModule } from '@angular/forms';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+
+const COMPONENT = [AXPasswordBoxComponent];
+const MODULES = [
+    CommonModule,
+    FormsModule,
+    AXButtonModule,
+    AXDecoratorModule,
+];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXPasswordBoxModule { }

package/popover/index.ts

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

package/popover/ng-package.json

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

package/popover/public-api.ts

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

package/popover/src/popover.component.html

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

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/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 { }