@acorex/components 6.0.0 → 6.0.1

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

@@ -0,0 +1,315 @@
+import { AXStringUtil } from '@acorex/core/utils';
+import { AXDateTime } from '@acorex/core/dateTime';
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+  EventEmitter,
+  Output,
+  Input,
+  ViewChild,
+} from '@angular/core';
+import IMask from 'imask';
+import { IMaskDirective } from 'angular-imask';
+import { AXBaseTextBoxMixin, AXComponentOptionChanged } from '@acorex/components/mixin';
+
+
+export type AX_TIME_FORMAT = 'HH:mm' | 'HH:mm:ss';
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+@Component({
+  selector: 'ax-time-box',
+  templateUrl: './time-box.component.html',
+  inputs: [
+    'disabled',
+    'readonly',
+    'tabIndex',
+    'size',
+    'value',
+    'placeholder', 'maxLength', 'allowNull', 'debounceTime', 'type', 'autoComplete', 'readonly','allowNull','value','name', 'checked',
+  ],
+  outputs: [
+    'valueChange',
+    'onValueChanged',
+    'onBlur',
+    'onFocus',
+    'valueChange', 'onValueChanged',
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'ax-editor-container ax-drop-down' },
+})
+export class AXTimeBoxComponent extends AXBaseTextBoxMixin {
+  private _minValue: Date;
+  @Input()
+  public get minValue(): Date {
+    return this._minValue;
+  }
+  public set minValue(v: Date) {
+    this._minValue = v;
+  }
+
+  private _maxValue: Date;
+  @Input()
+  public get maxValue(): Date {
+    return this._maxValue;
+  }
+  public set maxValue(v: Date) {
+    this._maxValue = v;
+  }
+
+  @Output()
+  formatChange = new EventEmitter<string>();
+
+  private _format: AX_TIME_FORMAT = 'HH:mm';
+  @Input()
+  public get format(): AX_TIME_FORMAT {
+    return this._format;
+  }
+  public set format(v: AX_TIME_FORMAT) {
+    this._setOption({
+      name: 'format',
+      value: v,
+    });
+  }
+
+  @Output()
+  public displayTextChange: EventEmitter<string> = new EventEmitter<string>();
+  private _displayText: string = '';
+
+  @Input()
+  public get displayText(): string {
+    return this._displayText;
+  }
+
+  public set displayText(v: string) {
+    this._displayText = v;
+    this.displayTextChange.emit(v);
+  }
+
+  /**
+   *  @ignore
+   */
+  _maskObj: IMask.MaskedPattern;
+
+  @ViewChild(IMaskDirective)
+  private _maskDirective: IMaskDirective<IMask.MaskedNumber>;
+
+  /**
+   *  @ignore
+   */
+  constructor(elementRef: ElementRef, private cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+  }
+
+  onViewInit(): void {
+    super.onViewInit();
+    this._updateMask();
+  }
+
+  _onValueChanged(oldValue?: any, newValue?: any) {
+    this._updateText();
+    this._maskDirective?.maskRef?.updateValue();
+    this._maskDirective?.maskRef?.updateControl();
+  }
+
+  _updateText() {
+    this.displayText = this.value
+      ? AXDateTime.convert(this.value).format(this.format)
+      : '';
+  }
+
+  _onOptionChanged(option: AXComponentOptionChanged): void {
+    super._onOptionChanged(option);
+    this._updateMask();
+  }
+
+  private _updateMask() {
+    if (!this._maskObj) {
+      this._maskObj = IMask.createMask({
+        mask: this.format,
+        lazy: false,
+        blocks: {
+          HH: {
+            mask: IMask.MaskedRange,
+            from: 0,
+            to: 23,
+            maxLength: 2,
+            placeholderChar: '0',
+            autofix: 'pad',
+          },
+          mm: {
+            mask: IMask.MaskedRange,
+            from: 0,
+            to: 59,
+            maxLength: 2,
+            placeholderChar: '0',
+            autofix: 'pad',
+          },
+          ss: {
+            mask: IMask.MaskedRange,
+            from: 0,
+            to: 59,
+            maxLength: 2,
+            placeholderChar: '0',
+            autofix: 'pad',
+          },
+        },
+      });
+    } else {
+      this._maskObj.updateOptions({
+        mask: this.format,
+      });
+    }
+    this._maskDirective?.maskRef?.updateValue();
+    this._maskDirective?.maskRef?.updateControl();
+  }
+
+  _handleOnKeydownEvent(e: KeyboardEvent) {
+    const ignore = () => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    const nums: string[] = Array(10)
+      .fill(0)
+      .map((v, i) => i.toString());
+    const chars: string[] = [
+      'Backspace',
+      'ArrowDown',
+      'ArrowUp',
+      'ArrowRight',
+      'ArrowLeft',
+      'Tab',
+      'Enter',
+    ];
+    const input = e.target as HTMLInputElement;
+    const key = e.key;
+    const valStr = input.value;
+    const sStart = input.selectionStart || 0;
+    const sEnd = input.selectionEnd || 0;
+    const dateVal = new AXDateTime(this.value);
+    //
+    const re = /[a-zA-Z0-9]+/gi;
+    const parts = Array.from(this.format.matchAll(re));
+    const word = valStr.substring(sStart, sEnd);
+    const part = parts.find((c:any) => c.index >= sStart);
+    const next = Array.from(valStr.substr(sEnd).matchAll(re));
+    const prev = Array.from(valStr.substring(0, sStart).matchAll(re));
+    //const part = parts[Array.from(valStr.matchAll(re)).findIndex(c => c[0] == word)];
+    //
+
+    const goNext = () => {
+      this._highlightPart(input, sEnd + (next[0]?.index || 0));
+    };
+    const goPrev = () => {
+      this._highlightPart(input, prev[prev.length - 1]?.index);
+    };
+
+    //
+    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+      ignore();
+      e.key === 'ArrowRight' ? goNext() : goPrev();
+    } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      if (e.ctrlKey && e.key === 'ArrowDown') {
+        //this.open();
+      } else {
+        const sign = e.key === 'ArrowUp' ? +1 : -1;
+        if (part) {
+          switch (part[0]) {
+            case 'hh':
+            case 'h':
+            case 'HH':
+            case 'H':
+              this.value = dateVal.add('hour', sign).date;
+              break;
+            case 'mm':
+              this.value = dateVal.add('minute', sign).date;
+              break;
+            case 'ss':
+            case 'SS':
+              this.value = dateVal.add('second', sign).date;
+              break;
+          }
+          setTimeout(() => {
+            this._highlightPart(input, sStart);
+          }, 10);
+        }
+      }
+      ignore();
+    } else if (e.key == 'Backspace') {
+      // if (this.allowNull) {
+      //     this.value = null;
+      // }
+      // ignore();
+    } else if (e.key == 'Tab') {
+      if (sEnd < valStr.length && !e.shiftKey) {
+        goNext();
+        ignore();
+      } else if (sStart != 0 && e.shiftKey) {
+        goPrev();
+        ignore();
+      }
+    } else {
+      // const keys = {
+      //     h: {
+      //         v: /^[0-9]$|^[1][0-2]$/,
+      //         p: '0'
+      //     },
+      //     H: {
+      //         v: /^[0-9]$|^1[0-9]$|2[0-3]$/,
+      //         p: '0'
+      //     },
+      //     m: {
+      //         v: /^[0-9]$|^[1-5][0-9]$/,
+      //         p: '0'
+      //     }
+      // }
+      // // const re = new RegExp(_.orderBy(Object.keys(keys), c => c.length, ['desc']).join("|"), "gi");
+      // // return format.replace(re, function (matched) {
+      // //   return keys[matched]();
+      // // });
+      // const t = keys[part[0]];
+      // if (!t.v.test(key)) {
+      //     ignore();
+      // }
+      // else {
+      //     this._updateText()
+      // }
+    }
+    // super._emitOnKeydownEvent(e);
+  }
+
+  _handleKeyUpEvent(e: KeyboardEvent) {
+    // const input = (e.target as HTMLInputElement);
+    // setTimeout(() => {
+    //     this._highlightPart(input);
+    // }, 700);
+  }
+
+  _emitOnFocusEvent(e: FocusEvent): void {
+    const input = e.target as HTMLInputElement;
+    this._highlightPart(input);
+    super._emitOnFocusEvent(e);
+  }
+
+  _handleOnInputClickEvent(e: MouseEvent): void {
+    const input = e.target as HTMLInputElement;
+    this._highlightPart(input);
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  private _highlightPart(input: HTMLInputElement, pos?: number) {
+    const { start, end } = AXStringUtil.getWordBoundsAtPosition(
+      input.value,
+      pos != null ? pos : input.selectionStart || 0
+    );
+    input.setSelectionRange(start, end);
+  }
+}

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

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

package/toast/index.ts

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

package/toast/ng-package.json

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

package/toast/src/toast.class.ts

@@ -0,0 +1,18 @@
+import { AXLocation, AXStyleColorType, AXStyleLookType } from "@acorex/components/common";
+import { AXButtonItem } from "@acorex/components/button";
+
+export interface AXToastOptions {
+    timeOut?: number | any;
+    title?: string;
+    content?: string;
+    closeable?: boolean;
+    location?: AXLocation;
+    color: AXStyleColorType;
+    look?: AXStyleLookType;
+    buttons?: AXButtonItem[]
+}
+
+export interface AXToastRef {
+    close(): void;
+}
+

package/toast/src/toast.component.html

@@ -0,0 +1,21 @@
+<ax-alert [color]="options.color" [look]="options.look" [timeOut]="options.timeOut">
+    <ax-header *ngIf="options.title">
+        <ax-prefix>
+            <ax-icon *ngIf="_icon" [icon]="_icon"></ax-icon>
+            <ax-title [text]="options.title"></ax-title>
+        </ax-prefix>
+        <ax-suffix>
+            <ax-close-button *ngIf="options.closeable"></ax-close-button>
+        </ax-suffix>
+    </ax-header>
+    <ax-content *ngIf="options.content">
+        <ax-icon *ngIf="_icon && !options.title" [icon]="_icon"></ax-icon>
+        <div [innerHTML]="options.content"></div>
+    </ax-content>
+    <ax-footer *ngIf="options?.buttons?.length">
+        <ng-container>
+            <ax-button *ngFor="let button of options.buttons" [text]="button.text"
+                (onClick)="_handleButtonClick(button)"></ax-button>
+        </ng-container>
+    </ax-footer>
+</ax-alert>

package/toast/src/toast.component.ts

@@ -0,0 +1,65 @@
+import { AXClosbaleComponent } from '@acorex/components/common';
+import { AXButtonItem } from '@acorex/components/button';
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { AXToastOptions } from './toast.class';
+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-toast',
+  templateUrl: './toast.component.html',
+  host: { class: 'ax-toast' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  providers: [{ provide: AXClosbaleComponent, useExisting: AXToastComponent }],
+})
+export class AXToastComponent extends AXBaseComponentMixin {
+  options: AXToastOptions;
+  _toastWidth: number = 100;
+  _icon: string;
+  close: () => void;
+  /**
+   *  @ignore
+   */
+  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+  }
+
+  onInit() {
+    if (this.options.timeOut) {
+      setTimeout(() => {
+        this.close();
+      }, this.options.timeOut);
+    }
+    switch (this.options.color) {
+      case 'success':
+        this._icon = 'ax-ic ax-ic-check-filled';
+        break;
+      case 'warning':
+        this._icon = 'ax-ic ax-ic-warning-filled';
+        break;
+      case 'danger':
+        this._icon = 'ax-ic ax-ic-error-filled';
+        break;
+      default:
+        this._icon = 'ax-ic ax-ic-info-filled';
+        break;
+    }
+  }
+
+  _handleButtonClick(button: AXButtonItem) {
+    if (button.onClick) {
+      button.onClick(this);
+    }
+  }
+}

package/toast/src/toast.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXToastComponent } from './toast.component';
+import { AXAlertModule } from '@acorex/components/alert';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+
+const COMPONENT = [AXToastComponent];
+const MODULES = [CommonModule, AXButtonModule, AXDecoratorModule, AXAlertModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXToastModule {
+  
+}

package/toast/src/toast.service.ts

@@ -0,0 +1,160 @@
+import { AXConfig } from '@acorex/core/config';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Injectable, Injector } from '@angular/core';
+import { AXToastOptions, AXToastRef } from './toast.class';
+import { AXToastComponent } from './toast.component';
+
+
+
+@Injectable({ providedIn: 'root' })
+export class AXToastService {
+
+
+    private readonly _defaults = {
+        gap: 5,
+        timeOut: 2500,
+        location: 'bottom-center',
+    }
+
+    constructor(private overlayService: Overlay, private parentInjector: Injector) {
+
+    }
+
+    private _activeList: AXToastComponent[] = [];
+
+    primary(content: string) {
+        this.show({
+            timeOut: AXConfig.get('toast.timeOut') || this._defaults.timeOut,
+            color: 'primary',
+            content: content
+        });
+    }
+    secondary(content: string) {
+        this.show({
+            timeOut: AXConfig.get('toast.timeOut') || this._defaults.timeOut,
+            color: 'secondary',
+            content: content
+        });
+    }
+    info(content: string) {
+        this.show({
+            timeOut: AXConfig.get('toast.timeOut') || this._defaults.timeOut,
+            color: 'info',
+            content: content
+        });
+    }
+
+    success(content: string) {
+        this.show({
+            timeOut: AXConfig.get('toast.timeOut') || this._defaults.timeOut,
+            color: 'success',
+            content: content
+        });
+    }
+
+    warning(content: string) {
+        this.show({
+            timeOut: AXConfig.get('toast.timeOut') || this._defaults.timeOut,
+            color: 'warning',
+            content: content
+        });
+    }
+
+    danger(content: string) {
+        this.show({
+            timeOut: AXConfig.get('toast.timeOut') || this._defaults.timeOut,
+            color: 'danger',
+            content: content
+        });
+    }
+    light(content: string) {
+        this.show({
+            timeOut: AXConfig.get('toast.timeOut') || this._defaults.timeOut,
+            color: 'light',
+            content: content
+        });
+    }
+    dark(content: string) {
+        this.show({
+            timeOut: AXConfig.get('toast.timeOut') || this._defaults.timeOut,
+            color: 'dark',
+            content: content
+        });
+    }
+
+    show(options: AXToastOptions): AXToastRef {
+        const opt = Object.assign(
+            {
+                closeable: true,
+                location: AXConfig.get('toast.location') || this._defaults.location
+            },
+            options
+        );
+        const gap = AXConfig.get('toast.gap') || this._defaults.gap;
+
+        let positionStrategy = this.overlayService.position().global();
+        const pos = this.getPosition(opt.location) + gap + 'px';
+        switch (opt.location) {
+            case 'bottom-center':
+                positionStrategy = positionStrategy.bottom(pos).centerHorizontally()
+                break;
+            case 'bottom-end':
+                positionStrategy = positionStrategy.bottom(pos).right(gap + 'px');
+                break;
+            case 'bottom-start':
+                positionStrategy = positionStrategy.bottom(pos).left(gap + 'px');
+                break;
+            case 'top-center':
+                positionStrategy = positionStrategy.top(pos).centerHorizontally()
+                break;
+            case 'top-end':
+                positionStrategy = positionStrategy.top(pos).right(gap + 'px');
+                break;
+            case 'top-start':
+                positionStrategy = positionStrategy.top(pos).left(gap + 'px');
+                break;
+            default:
+                break;
+        }
+        const overlayRef = this.overlayService.create(
+            {
+                positionStrategy,
+                panelClass: ['ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],
+            });
+        const toastPortal = new ComponentPortal(AXToastComponent, null, this.parentInjector);
+
+        const host = overlayRef.attach(toastPortal);
+        (host.instance as any).visibleIndex = this._activeList.length;
+        this._activeList.push(host.instance);
+        if (host.instance) {
+            Object.assign(host.instance, {
+                options: opt,
+                close: () => {
+                    this._activeList = this._activeList.filter(c => c != host.instance);
+                    overlayRef.dispose()
+                }
+            });
+            setTimeout(() => {
+                host.changeDetectorRef.detectChanges();
+            }, 0);
+        }
+
+        return {
+            close: () => {
+                host.instance.close();
+            }
+        }
+    }
+
+    private getPosition(location: string) {
+        const list = this._activeList.filter(c => c.options.location == location);
+        if (list.length == 0) return 0;
+        if (location.split('-')[0] == 'bottom') {
+            return window.innerHeight - list[list.length - 1]._getHostElement().offsetTop;
+        }
+        else {
+            return list[list.length - 1]._getHostElement().offsetTop + list[list.length - 1]._getHostElement().offsetHeight;
+        }
+    }
+}

package/tooltip/index.ts

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

package/tooltip/ng-package.json

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

package/tooltip/src/tooltip.component.html

@@ -0,0 +1,6 @@
+<div class="ax-tooltip-container">
+    <div class="ax-tooltip" @tooltip>
+        {{ text }}
+    </div>
+    <div class="ax-tooltip-tringle ax-tooltip-tringle-{{position}}"></div>
+</div>

package/tooltip/src/tooltip.component.ts

@@ -0,0 +1,36 @@
+import { AXBaseComponentMixin } from '@acorex/components/mixin';
+import { animate, style, transition, trigger } from '@angular/animations';
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+  Input,
+} from '@angular/core';
+
+@Component({
+  selector: 'ax-tooltip',
+  templateUrl: './tooltip.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'ax-tooltip' },
+  animations: [
+    trigger('tooltip', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate(50, style({ opacity: 1 })),
+      ]),
+      transition(':leave', [animate(50, style({ opacity: 0 }))]),
+    ]),
+  ],
+})
+export class AXTooltipComponent extends AXBaseComponentMixin {
+  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+  }
+  @Input()
+  text: string = 'Text';
+
+  @Input() position = 'top';
+}