@acorex/components 5.8.0 → 6.0.1

package/dialog/src/dialog.component.ts

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

@@ -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 { 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

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

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

package/drawer/ng-package.json

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

package/drawer/public-api.ts

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

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

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

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

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

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

package/dropdown/ng-package.json

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

package/dropdown/public-api.ts

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

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

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

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

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

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

package/form/ng-package.json

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

package/form/public-api.ts

@@ -0,0 +1,7 @@
+export * from './src/form-field.component';
+export * from './src/form-field.module';
+export * from './src/form-hint.component';
+export * from './src/form.component';
+export * from './src/validation-rule.widget';
+export * from './src/validation-summary.component';
+export * from './src/validation.class';

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

@@ -0,0 +1,21 @@
+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);
+  }
+}