@acorex/components 5.0.5 → 5.0.9

package/src/lib/tabs/tab.component.ts

@@ -1,56 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, Input, NgZone } from '@angular/core';
-import { AXBaseComponentMixin } from '../base';
-
-@Component({
-    selector: 'ax-tab',
-    template: `
-      <div *ngIf="_render" >
-        <ng-content>
-        </ng-content>
-      </div>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-tab', style: 'display:none' }
-})
-export class AXTabComponent extends AXBaseComponentMixin {
-
-
-    @Input()
-    name: string;
-    @Input()
-    caption: string;
-    @Input()
-    tooltip: string;
-    @Input()
-    icon: string;
-    @Input()
-    visible: boolean = true;
-    @Input()
-    disabled: boolean = false;
-    @Input()
-    data: any;
-
-    _render: boolean = false
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef
-    ) {
-        super(elementRef, cdr);
-    }
-
-    show() {
-        this._getHostElement().style.display = 'unset';
-        if (!this._render) {
-            this._render = true;
-            this._cdr.detectChanges();
-        }
-    }
-
-    hide() {
-        this._getHostElement().style.display = 'none';
-    }
-
-
-}

package/src/lib/tabs/tabs.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXTabViewComponent } from './tab-view.component';
-import { AXTabStripComponent } from './tab-strip.component';
-import { AXTabComponent } from './tab.component';
-
-const COMPONENT = [AXTabViewComponent, AXTabStripComponent, AXTabComponent];
-const MODULES = [CommonModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXTabsModule { }

package/src/lib/textbox/textbox.component.html

@@ -1,20 +0,0 @@
-<ng-content select="ax-prefix">
-</ng-content>
-<input class="ax-input" [attr.name]="name" type="text" [mask]="_contentMask?.mask" [prefix]="_contentMask?.prefix"
-    [suffix]="_contentMask?.suffix" [showMaskTyped]="_contentMask?.showMaskTyped" [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 ? 'on': 'off'">
-<ax-button color="light" look="blank" [size]="size" (onClick)="clear()" [tabIndex]="-1"
-    *ngIf="value && allowNull &&  !(disabled || readonly)">
-    <ax-prefix>
-        <ax-icon icon="ax-ic ax-ic-close"></ax-icon>
-    </ax-prefix>
-</ax-button>
-<ng-content select="ax-suffix">
-</ng-content>
-<ng-content select="ax-validation-rule">
-</ng-content>
-<ng-content select="ax-input-mask">
-</ng-content>

package/src/lib/textbox/textbox.component.ts

@@ -1,64 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChild,
-  ElementRef,
-  HostBinding,
-  OnInit,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import { AXBaseTextBoxMixin } from '../base/mixin/mixin.class';
-import {
-  TEXTBOX_INPUTS,
-  TEXTBOX_OUTPUT,
-} from '../base/mixin/textbox-mixin.class';
-import { AXInputMaskComponent } from '../input-mask';
-
-/**
- * The Textbox is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-@Component({
-  selector: 'ax-text-box',
-  templateUrl: 'textbox.component.html',
-  inputs: [
-    'disabled',
-    'readonly',
-    'tabIndex',
-    'cssClass',
-    'size',
-    ...TEXTBOX_INPUTS,
-  ],
-  outputs: [
-    'valueChange',
-    'onValueChanged',
-    'onBlur',
-    'onFocus',
-    ...TEXTBOX_OUTPUT,
-  ],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'ax-text-box ax-editor-container' },
-})
-export class AXTextBoxComponent extends AXBaseTextBoxMixin {
-  @ContentChild(AXInputMaskComponent)
-  _contentMask: AXInputMaskComponent;
-
-  //TODO: prefix suffix text
-
-
-  @HostBinding('class')
-  get hostClass(): string {
-    return `${this.cssClass} ax-${this.size}`;
-  }
-
-  /**
-  *  @ignore
-  */
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-}

package/src/lib/textbox/textbox.module.ts

@@ -1,24 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { NgxMaskModule } from 'ngx-mask';
-import { AXButtonModule } from '../button';
-import { AXEditorDecoratorModule } from '../decorators';
-import { AXIconModule } from '../icon';
-import { AXTextBoxComponent } from './textbox.component';
-
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        AXButtonModule,
-        AXEditorDecoratorModule,
-        AXIconModule,
-        NgxMaskModule.forChild()
-    ],
-    exports: [AXTextBoxComponent],
-    declarations: [AXTextBoxComponent],
-    providers: [],
-})
-export class AXTextBoxModule { }

package/src/lib/time-box/time-box.component.html

@@ -1,14 +0,0 @@
-<ng-content select="ax-prefix">
-</ng-content>
-<input class="ax-input" type="text" [attr.pattern]="'[\d\.]*'" [attr.placeholder]="placeholder"
-    [class.ax-state-disabled]="disabled" [class.ax-state-readonly]="readonly" [disabled]="disabled"
-    [readonly]="readonly" [tabindex]="tabIndex" [ngModel]="displayText" (focus)="_emitOnFocusEvent($event)"
-    (blur)="_emitOnBlurEvent($event)" (keydown)="_handleOnKeydownEvent($event)">
-<ax-button color="light" look="blank" (onClick)="clear()" [tabIndex]="-1"
-    *ngIf="value && allowNull && !(disabled || readonly)">
-    <i class="ax-icon-x icon"></i>
-</ax-button>
-<ng-content select="ax-suffix">
-</ng-content>
-<ng-content select="ax-validation-rule">
-</ng-content>

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

@@ -1,145 +0,0 @@
-import { AXDateTime } from '@acorex/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, EventEmitter, Output, Input, HostBinding } from '@angular/core';
-import { MaskApplierService } from 'ngx-mask';
-import { AXBaseTextBoxMixin } from '../base';
-import { TEXTBOX_INPUTS, TEXTBOX_OUTPUT } from '../base/mixin/textbox-mixin.class';
-
-@Component({
-    selector: 'ax-time-box',
-    templateUrl: './time-box.component.html',
-    inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'value', ...TEXTBOX_INPUTS],
-    outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus', ...TEXTBOX_OUTPUT],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-time-box ax-editor-container' },
-})
-export class AXTimeBoxComponent extends AXBaseTextBoxMixin {
-
-    @HostBinding('class')
-    get hostClass(): string {
-      return `${this.cssClass} ax-${this.size}`;
-    }
-
-
-    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;
-    }
-
-
-    @Input()
-    format: string = 'HH:mm';
-
-
-
-    @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);
-    }
-
-
-    constructor(
-        elementRef: ElementRef,
-        private cdr: ChangeDetectorRef,
-        private _maskService: MaskApplierService
-    ) {
-        super(elementRef, cdr);
-    }
-
-    _handleOnKeydownEvent(e: KeyboardEvent) {
-        const ignore = () => {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        const toDate = (val: string) => {
-            return new Date(val);
-        }
-        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 val = toDate(valStr);
-        const selectionStart = input.selectionStart;
-        const selectionEnd = input.selectionEnd;
-        //
-
-        //
-        if (![...nums, ...chars].includes(key)) {
-            ignore();
-        }
-        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-            // const stepVal = decimalPointIndex > -1 ? (selectionStart >= decimalPointIndex ? this.decimalStep : this.step) : this.step;
-            // if (e.key === 'ArrowDown') {
-            //     this.value = val - stepVal;
-            // }
-            // else {
-            //     this.value = val + stepVal;
-            // }
-            ignore();
-            input.setSelectionRange(selectionStart, selectionStart);
-        }
-        else if (e.key == 'Backspace') {
-
-        }
-        else if (nums.includes(key)) {
-
-        }
-        super._emitOnKeydownEvent(e);
-    }
-
-    _onValueChanging(value: Date) {
-        return this._fixValue(value);
-    }
-
-    _fixValue(value: Date): Date {
-        if ((value == null || value == undefined)) {
-            return this.allowNull ? null : this.minValue;
-        }
-        else if (value > this.maxValue) {
-            return this.maxValue;
-        }
-        else if (value < this.minValue) {
-            return this.minValue;
-        }
-        return value;
-    }
-
-    _format(value: Date): string {
-        return new AXDateTime(value).format(this.format);
-    }
-
-    _onValueChanged(oldValue: any, newValue: any): void {
-        this.displayText = this._format(newValue);
-    }
-
-    _handleOnBlurEvent(e: FocusEvent) {
-        const input = (e.target as HTMLInputElement);
-        this.value = this._fixValue(this.value);
-        input.value = this._format(this.value);
-        this._emitOnFocusEvent(e);
-    }
-
-}

package/src/lib/time-box/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 { AXButtonModule } from '../button';
-import { NgxMaskModule } from 'ngx-mask';
-
-const COMPONENT = [AXTimeBoxComponent];
-const MODULES = [
-    CommonModule,
-    FormsModule,
-    AXButtonModule,
-    NgxMaskModule.forChild()
-];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXTimeBoxModule { }

package/src/lib/toast/toast.component.html

@@ -1,12 +0,0 @@
-<div class="ax-toast-icon-side">
-    <i class="ax-toast-icon {{_icon}}"></i>
-</div>
-<div class="ax-toast-content-side">
-    <div class="ax-toast-title">{{options.title}}</div>
-    <div class="ax-toast-content" *ngIf="options.content">{{options.content}}</div>
-</div>
-<div class="ax-toast-dismiss-icon">
-    <i class="ax-ic ax-ic-close" *ngIf="options.closeable" (click)="close()"></i>
-</div>
-<div class="ax-toast-progress ax-{{options.type}}" [style.animation-duration.ms]="options.timeOut" *ngIf="options.timeOut">
-</div>

package/src/lib/toast/toast.component.ts

@@ -1,57 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef } from '@angular/core';
-import { AXBaseComponentMixin } from '../base';
-import { AXButtonComponent, AXButtonItem } from '../button';
-import { AXToastOptions } from './toast.class';
-
-@Component({
-    selector: 'ax-toast',
-    templateUrl: './toast.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-toast' }
-})
-export class AXToastComponent extends AXBaseComponentMixin {
-
-    options: AXToastOptions;
-    _toastWidth: number = 100;
-    _icon: string;
-    close: () => void;
-
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-        super(elementRef, cdr);
-    }
-
-    onInit() {
-        this._getHostElement().classList.add(`ax-${this.options.type}`);
-        if (this.options.timeOut) {
-            setTimeout(() => {
-                this.close();
-            }, this.options.timeOut);
-        }
-        switch (this.options.type) {
-            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/src/lib/toast/toast.module.ts

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

package/src/lib/toast/toast.service.ts

@@ -1,122 +0,0 @@
-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 {
-
-    constructor(private overlayService: Overlay, private parentInjector: Injector) { }
-
-    private _activeList: AXToastComponent[] = [];
-
-    info(content: string) {
-        this.show({
-            timeOut: 2500,
-            type: 'info',
-            title: content
-        });
-    }
-
-    success(content: string) {
-        this.show({
-            timeOut: 2500,
-            type: 'success',
-            title: content
-        });
-    }
-
-    warning(content: string) {
-        this.show({
-            timeOut: 2500,
-            type: 'warning',
-            title: content
-        });
-    }
-
-    danger(content: string) {
-        this.show({
-            timeOut: 2500,
-            type: 'danger',
-            title: content
-        });
-    }
-
-    show(options: AXToastOptions): AXToastRef {
-        const opt = Object.assign(
-            {
-                closeable: true,
-                location: 'bottom-center'
-            },
-            options
-        );
-        const marging = 5;
-
-        let positionStrategy = this.overlayService.position().global();
-        const pos = this.getPosition(opt.location) + marging + 'px';
-        switch (opt.location) {
-            case 'bottom-center':
-                positionStrategy = positionStrategy.bottom(pos).centerHorizontally()
-                break;
-            case 'bottom-end':
-                positionStrategy = positionStrategy.bottom(pos).right(marging + 'px');
-                break;
-            case 'bottom-start':
-                positionStrategy = positionStrategy.bottom(pos).left(marging + 'px');
-                break;
-            case 'top-center':
-                positionStrategy = positionStrategy.top(pos).centerHorizontally()
-                break;
-            case 'top-end':
-                positionStrategy = positionStrategy.top(pos).right(marging + 'px');
-                break;
-            case 'top-start':
-                positionStrategy = positionStrategy.top(pos).left(marging + 'px');
-                break;
-            default:
-                break;
-        }
-        const overlayRef = this.overlayService.create(
-            {
-                positionStrategy,
-                panelClass: ['animate__animated', 'animate__fadeIn', '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/src/lib/tooltip/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/src/lib/tooltip/tooltip.component.ts

@@ -1,36 +0,0 @@
-import { animate, style, transition, trigger } from '@angular/animations';
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  Input,
-} from '@angular/core';
-import { AXBaseComponentMixin } from '../base';
-
-@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';
-}