@acorex/components 6.0.1 → 6.0.2

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

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

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

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

package/toast/ng-package.json

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

package/toast/src/toast.class.ts

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

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

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

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

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

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

package/tooltip/ng-package.json

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

package/tooltip/src/tooltip.component.html

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

@@ -1,36 +0,0 @@
-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';
-}