@acorex/components 6.0.1 → 6.0.2

package/dialog/src/dialog.component.ts

@@ -1,61 +0,0 @@
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-} from '@angular/core';
-import { AXButtonItem } from '@acorex/components/button';
-import { AXDialogOptions } from './dialog.class';
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-
-@Component({
-  selector: 'ax-dialog',
-  templateUrl: './dialog.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AXDialogComponent extends AXBaseComponentMixin {
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-
-  options: AXDialogOptions | any;
-  _icon: string;
-  close: () => void;
-
-  onInit() {
-    switch (this.options.type) {
-      case 'success':
-        this._icon = 'ax-ic ax-ic-check';
-        break;
-      case 'danger':
-        this._icon = 'ax-ic ax-ic-error-filled';
-        break;
-      case 'warning':
-        this._icon = 'ax-ic ax-ic-warning-filled';
-        break;
-      default:
-        this._icon = 'ax-ic ax-ic-info-filled';
-        break;
-    }
-  }
-
-  _handleButtonClick(button: AXButtonItem) {
-    if (button.onClick) {
-      button.onClick();
-    }
-  }
-
-  _hasAutoFocus(button: AXButtonItem) {
-    const result =
-      button.autofocus ||
-      this.options.buttons.length == 1 ||
-      ((button.type == 'submit' || button.type == 'cancel') &&
-        !this.options.buttons.some((c) => c.autofocus));
-    if (result) {
-      button.autofocus = true;
-    }
-    return result;
-  }
-}

package/dialog/src/dialog.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 { AXButtonModule } from '@acorex/components/button';
-import { AXPageModule } from '@acorex/components/page';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import { AXCommonModule } from '@acorex/components/common';
-import { AXDialogComponent } from './dialog.component';
-
-const COMPONENT = [AXDialogComponent];
-const MODULES = [CommonModule,AXCommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXDecoratorModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXDialogModule { }

package/dialog/src/dialog.service.ts

@@ -1,159 +0,0 @@
-import { AXTranslator } from '@acorex/core/translation';
-import { Overlay, ScrollStrategyOptions } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
-import { Injectable, Injector } from '@angular/core';
-import { AXStyleColorType } from '@acorex/components/common';
-import {
-  AXDialogOptions,
-  AXDialogRef,
-} from './dialog.class';
-import { AXDialogComponent } from './dialog.component';
-
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-@Injectable({ providedIn: 'root' })
-export class AXDialogService {
-
-  /**
-  * @ignore
-  */
-  constructor(
-    private overlayService: Overlay,
-    private parentInjector: Injector,
-    private sso: ScrollStrategyOptions
-  ) { }
-
-  /**
-  *  Show an alert box with 'Okay' button.
-  */
-  alert(title: string, content: string, type: AXStyleColorType = 'primary'): Promise<void> {
-    return new Promise((resolve) => {
-      const popup = this.open({
-        title,
-        type: type,
-        content,
-        buttons: [
-          {
-            name: 'confirm',
-            text: AXTranslator.get('common.okay'),
-            color: type,
-            onClick: () => {
-              popup.close();
-              if (resolve) {
-                resolve();
-              }
-            },
-          },
-        ],
-      });
-    });
-  }
-
-  /**
-  *  Show a confirm box with 'Okay' & 'Cancel' buttons.
-  */
-  confirm(title: string, content: string, type: AXStyleColorType = 'primary'): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const popup = this.open({
-        title,
-        content,
-        type,
-        buttons: [
-          {
-            name: 'confirm',
-            text: AXTranslator.get('common.okay'),
-            color: type,
-            onClick: () => {
-              popup.close();
-              if (resolve) {
-                resolve();
-              }
-            },
-            type: 'submit',
-          },
-          {
-            name: 'cancel',
-            text: AXTranslator.get('common.cancel'),
-            color: `light`,
-            onClick: () => {
-              popup.close();
-              if (reject) {
-                reject();
-              }
-            },
-            hotkey: {
-              "Escape": () => {
-                popup.close();
-                if (reject) {
-                  reject();
-                }
-              }
-            },
-            type: 'cancel',
-          },
-        ],
-      });
-    });
-  }
-
-  /**
-  *  Show a custom dialog box.
-  */
-  show(options: AXDialogOptions): Promise<{ name: string }> {
-    return new Promise((resolve) => {
-      const popup = this.open(options);
-      options.buttons?.forEach((b) => {
-        const orginalClick = b.onClick;
-        b.onClick = () => {
-          popup.close();
-          if (orginalClick) {
-            orginalClick();
-          }
-          if (resolve) {
-            resolve({ name: b.name! });
-          }
-        };
-      });
-    });
-  }
-
-  private open(options: AXDialogOptions): AXDialogRef {
-    let positionStrategy = this.overlayService
-      .position()
-      .global()
-      .centerHorizontally()
-      .centerVertically();
-    const overlayRef = this.overlayService.create({
-      positionStrategy,
-      hasBackdrop: true,
-      scrollStrategy: this.sso.block(),
-      panelClass: ['ax-animate-bounceIn', 'ax-animate-faster'],
-    });
-    const dialogPortal = new ComponentPortal(
-      AXDialogComponent,
-      null,
-      this.parentInjector
-    );
-    const host = overlayRef.attach(dialogPortal);
-    if (host.instance) {
-      Object.assign(host.instance, {
-        options: options,
-        close: () => {
-          overlayRef.dispose();
-        },
-      });
-      setTimeout(() => {
-        host.changeDetectorRef.detectChanges();
-      }, 0);
-    }
-
-    return {
-      close: () => {
-        host.instance.close();
-      },
-    };
-  }
-}

package/drawer/index.ts

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

package/drawer/ng-package.json

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

package/drawer/src/drawer-container.component.ts

@@ -1,40 +0,0 @@
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  NgZone,
-} from '@angular/core';
-import { AXDrawerComponent } from './drawer.component';
-
-@Component({
-  selector: 'ax-drawer-container',
-  template: `
-    <ng-content select="ax-drawer[location='start']"> </ng-content>
-    <ng-content select="ax-content"> </ng-content>
-    <ng-content select="ax-drawer[location='end']"> </ng-content>
-  `,
-  host: { class: 'ax-drawer-container' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AXDrawerContainerComponent extends AXBaseComponentMixin {
-  constructor(
-    elementRef: ElementRef,
-    cdr: ChangeDetectorRef,
-    private _zone: NgZone
-  ) {
-    super(elementRef, cdr);
-  }
-
-  ngDoCheck() {
-    const host = this._getHostElement();
-    Array.from(host.querySelectorAll('ax-drawer'))
-      .map((c) => c['__axContext__'] as AXDrawerComponent)
-      .some((c) => !c?.collapsed)
-      ? host.classList.add('ax-visible')
-      : host.classList.remove('ax-visible');
-  }
-}

package/drawer/src/drawer.component.ts

@@ -1,168 +0,0 @@
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  NgZone,
-  Input,
-  HostBinding,
-  Output,
-  EventEmitter,
-} from '@angular/core';
-import { AXClosbaleComponent, AXComponent } from '@acorex/components/common';
-import { AXBaseComponentMixin, AXComponentOptionChanged } from '@acorex/components/mixin';
-
-
-
-export type AXDrawerMode = 'push' | 'overlay';
-export type AXDrawerLocation = 'start' | 'end';
-
-@Component({
-  selector: 'ax-drawer',
-  template: `
-    <ng-content select="ax-header"> </ng-content>
-    <ng-content select="ax-content"> </ng-content>
-  `,
-  host: { class: 'ax-drawer' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  providers: [
-    { provide: AXComponent, useExisting: AXDrawerComponent },
-    { provide: AXClosbaleComponent, useExisting: AXDrawerComponent },
-  ],
-})
-export class AXDrawerComponent extends AXBaseComponentMixin {
-  constructor(
-    private _elementRef: ElementRef,
-    _cdr: ChangeDetectorRef,
-    private _zone: NgZone
-  ) {
-    super(_elementRef, _cdr);
-  }
-
-  @Output()
-  public locationChange: EventEmitter<AXDrawerLocation> = new EventEmitter<AXDrawerLocation>();
-
-  private _location: AXDrawerLocation;
-  @Input()
-  public get location(): AXDrawerLocation {
-    return this._location;
-  }
-  public set location(v: AXDrawerLocation) {
-    this._setOption({
-      name: 'location',
-      value: v,
-    });
-  }
-
-  @Output()
-  public modeChange: EventEmitter<AXDrawerMode> = new EventEmitter<AXDrawerMode>();
-
-  private _mode: AXDrawerMode = 'overlay';
-  @Input()
-  public get mode(): AXDrawerMode {
-    return this._mode;
-  }
-  public set mode(v: AXDrawerMode) {
-    this._setOption({
-      name: 'mode',
-      value: v,
-    });
-  }
-
-  @Output()
-  public collapsedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-  private _collapsed: boolean = true;
-  @Input()
-  public get collapsed(): boolean {
-    return this._collapsed;
-  }
-  public set collapsed(v: boolean) {
-    this._setOption({
-      name: 'collapsed',
-      value: v,
-    });
-  }
-
-  onViewInit(): void {
-    // setTimeout(() => {
-    //     this._loaded = true;
-    //     this._checkProps();
-    // }, 1000);
-    this._detectBoundingSize();
-  }
-
-  _onOptionChanged(option: AXComponentOptionChanged): void {
-    this._checkProps();
-  }
-
-  ngDoCheck() {
-    this._detectBoundingSize();
-  }
-
-  private _detectBoundingSize() {
-    this._zone.runOutsideAngular(() => {
-      const host = this._getHostElement();
-      if (host.clientWidth)
-        host.style.setProperty('--ax-el-width', `${host.clientWidth}px`);
-    });
-  }
-
-  private _checkProps() {
-    this._detectBoundingSize();
-    this._removeBackdrop();
-    if (this.mode == 'overlay') {
-      if (!this.collapsed) {
-        this._addBackdrop();
-      }
-    }
-  }
-
-  toggle() {
-    this.collapsed = !this.collapsed;
-  }
-
-  close() {
-    this.collapsed = true;
-  }
-
-  open() {
-    this.collapsed = false;
-  }
-
-  @HostBinding('class')
-  private get __hostClass(): string {
-    //return `ax-drawer-${this.mode} ax-drawer-${this.location} ${this.collapsed ? 'ax-collapsed' : 'ax-expanded'} ${!this._loaded ? 'ax-preload' : ''}`;
-    return `ax-drawer-${this.mode} ax-drawer-${this.location} ${
-      this.collapsed ? 'ax-collapsed' : 'ax-expanded'
-    }`;
-  }
-
-  private _backdropElement: HTMLElement | any;
-  // private _loaded: boolean = false;
-
-  private _addBackdrop() {
-    this._zone.runOutsideAngular(() => {
-      this._backdropElement = document.createElement('div');
-      this._backdropElement.classList.add('ax-backdrop');
-      this._backdropElement.onclick = () => {
-        this._zone.run(() => {
-          this.close();
-        });
-      };
-      this._getHostElement().parentElement?.appendChild(this._backdropElement);
-    });
-  }
-  private _removeBackdrop() {
-    this._zone.runOutsideAngular(() => {
-      if (this._backdropElement) {
-        this._getHostElement().parentElement?.removeChild(
-          this._backdropElement
-        );
-        this._backdropElement = null;
-      }
-    });
-  }
-}

package/drawer/src/drawer.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXDrawerComponent } from './drawer.component';
-import { AXDrawerContainerComponent } from './drawer-container.component';
-
-const COMPONENT = [AXDrawerComponent, AXDrawerContainerComponent];
-const MODULES = [CommonModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXDrawerModule { }

package/dropdown/index.ts

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

package/dropdown/ng-package.json

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

package/dropdown/public-api.ts

@@ -1,2 +0,0 @@
-export * from './src/dropdown-panel.component';
-export * from './src/dropdown.module';

package/dropdown/src/dropdown-panel.component.html

@@ -1,6 +0,0 @@
-<ax-popover [target]="_target" [position]="position" [openTrigger]="'toggle'" [closeTrigger]="'clickout'" [adaptivityEnabled]="false">
-    <div class="ax-overlay-pane" [class.ax-dropdown-list]="_needBorder" >
-        <ng-content select="[panel],ax-button-item">
-        </ng-content>
-    </div>
-</ax-popover>

package/dropdown/src/dropdown-panel.component.ts

@@ -1,113 +0,0 @@
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  ContentChildren,
-  QueryList,
-  EventEmitter,
-  Output,
-  ViewChild,
-  Optional,
-} from '@angular/core';
-import { Subscription } from 'rxjs';
-
-import { AXButtonClickEvent, AXClickEvent } from '@acorex/components/common';
-import {
-  AXButtonComponent,
-  AXButtonItemComponent,
-} from '@acorex/components/button';
-import { AXPopoverComponent } from '@acorex/components/popover';
-import { AXBaseDropdownMixin } from '@acorex/components/mixin';
-
-
-@Component({
-  selector: 'ax-dropdown-panel',
-  templateUrl: './dropdown-panel.component.html',
-  inputs: ['isOpen','fitParent', 'dropdownWidth','position'],
-  outputs: ['onOpened', 'onClosed'],
-  host: { class: 'ax-dropdown-panel' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AXDropdownPanelComponent extends AXBaseDropdownMixin {
-  constructor(
-    elementRef: ElementRef,
-    cdr: ChangeDetectorRef,
-    @Optional()
-    public _parent: AXButtonComponent
-  ) {
-    super(elementRef, cdr);
-    this._target = this._parent._getHostElement();
-  }
-
-  @ContentChildren(AXButtonItemComponent)
-  _contentButtons: QueryList<AXButtonItemComponent>;
-
-  @Output()
-  onItemClick: EventEmitter<AXButtonClickEvent> = new EventEmitter<AXButtonClickEvent>();
-
-  @ViewChild(AXPopoverComponent, { static: true })
-  popover: AXPopoverComponent;
-
-  _needBorder: boolean = false;
-  _subs: Subscription[] = [];
-  _target: HTMLElement;
-
-  ngAfterContentInit() {
-    this._initContents();
-    this._contentButtons.changes.subscribe(() => {
-      this._initContents();
-    });
-  }
-
-  private _initContents() {
-    this._needBorder = this._contentButtons.length > 0;
-    this._bindEvents();
-    this._bindProps();
-    this._cdr.markForCheck();
-  }
-
-  private _bindEvents() {
-    this._contentButtons?.forEach((b) => {
-      if (!b.onClick.length)
-        b.onClick.subscribe((c) => {
-          this._handleOnItemClick(c);
-        });
-    });
-  }
-
-  private _bindProps() {
-    this._contentButtons?.forEach((b) => {
-      //b.look = this.look ?? this.look;
-      b.disabled = b.disabled ?? this.disabled;
-      //b.toggleable = false;
-    });
-  }
-
-  onOptionChanged(options) {
-    this._bindProps();
-  }
-
-  onDestroy(): void {
-    this._subs.forEach((s) => {
-      s?.unsubscribe();
-    });
-  }
-
-  _emitOnItemClickEvent(e: AXClickEvent, item: AXButtonItemComponent): void {
-    this.onItemClick.emit({
-      component: this,
-      htmlElement: this._getHostElement(),
-      nativeEvent: e.nativeEvent,
-      name: item.name,
-      data: item.data,
-    });
-  }
-
-  private _handleOnItemClick(e: AXClickEvent) {
-    this.close();
-    this._emitOnItemClickEvent(e, e.component);
-  }
-}

package/dropdown/src/dropdown.module.ts

@@ -1,15 +0,0 @@
-import { OverlayModule } from '@angular/cdk/overlay';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { AXButtonModule } from '@acorex/components/button';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import { AXPopoverModule } from '@acorex/components/popover';
-import { AXDropdownPanelComponent } from './dropdown-panel.component';
-
-@NgModule({
-    imports: [CommonModule, AXButtonModule, OverlayModule,  AXDecoratorModule, AXPopoverModule],
-    exports: [ AXDropdownPanelComponent],
-    declarations: [ AXDropdownPanelComponent],
-    providers: [],
-})
-export class AXDropdownModule { }

package/form/index.ts

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

package/form/ng-package.json

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

package/form/src/form-field.component.ts

@@ -1,21 +0,0 @@
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  ViewEncapsulation,
-} from '@angular/core';
-
-@Component({
-  selector: 'ax-form-field',
-  template: '<ng-content></ng-content>',
-  host: { class: 'ax-form-field' },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AXFormFieldComponent extends AXBaseComponentMixin {
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-}