@acorex/components 6.0.1 → 6.0.2

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

@@ -1,272 +0,0 @@
-import IMask from 'imask';
-import { IMaskDirective } from 'angular-imask';
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  Input,
-  ViewChild,
-} from '@angular/core';
-
-import { AXClickEvent } from '@acorex/components/common';
-
-import { toNumber } from 'lodash-es';
-import {
-  AXBaseTextBoxMixin,
-  AXComponentOptionChanged,
-} from '@acorex/components/mixin';
-
-/**
- * The NumberBox is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-@Component({
-  selector: 'ax-number-box',
-  templateUrl: './number-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-number-box' },
-})
-export class AXNumberBoxComponent extends AXBaseTextBoxMixin {
-  private _thousandsSeparator: string;
-  /**
-   *  A character value that specifies the separator character.
-   */
-  @Input()
-  public get thousandsSeparator(): string {
-    return this._thousandsSeparator;
-  }
-  public set thousandsSeparator(v: string) {
-    this._setOption({
-      name: 'thousandsSeparator',
-      value: v ?? '',
-    });
-  }
-
-  private _padDecimalZeros: boolean = false;
-  /**
-   *  A character value that specifies the separator character.
-   */
-  @Input()
-  public get padDecimalZeros(): boolean {
-    return this._padDecimalZeros;
-  }
-  public set padDecimalZeros(v: boolean) {
-    this._setOption({
-      name: 'padDecimalZeros',
-      value: v,
-    });
-  }
-
-  /**
-   *  Specifies the value that is used to increment or decrement the **Integer** part of number
-   */
-  @Input()
-  step: number = 1;
-
-  private _decimals: number = 0;
-  /**
-   *  Specifies the number of decimals that the user can enter
-   */
-  @Input()
-  public get decimals(): number {
-    return this._decimals;
-  }
-  public set decimals(v: number) {
-    this._setOption({
-      name: 'decimals',
-      value: v ?? 0,
-    });
-  }
-
-  /**
-   *  Specifies the value that is used to increment or decrement the **Deciaml** part of number
-   */
-  @Input()
-  decimalStep: number | 'auto' = 'auto';
-
-  /**
-   *  Specifies whether the Up and Down spin buttons will be rendered or not
-   */
-  @Input()
-  showSpinButtons: boolean = true;
-
-  private _minValue: number = Number.MIN_SAFE_INTEGER;
-  /**
-   *  Specifies the smallest value that is valid
-   */
-  @Input()
-  public get minValue(): number {
-    return this._minValue;
-  }
-  public set minValue(v: number) {
-    this._setOption({
-      name: 'minValue',
-      value: v != null ? Number(v) : Number.MIN_SAFE_INTEGER,
-    });
-  }
-
-  private _maxValue: number = Number.MAX_SAFE_INTEGER;
-  /**
-   *  Specifies the greatest value that is valid
-   */
-  @Input()
-  public get maxValue(): number {
-    return this._maxValue;
-  }
-  public set maxValue(v: number) {
-    this._setOption({
-      name: 'maxValue',
-      value: v != null ? Number(v) : Number.MAX_SAFE_INTEGER,
-    });
-  }
-
-  /**
-   *  @ignore
-   */
-  _maskObj: IMask.MaskedNumber;
-
-  @ViewChild(IMaskDirective)
-  private _maskDirective: IMaskDirective<IMask.MaskedNumber>;
-
-  /**
-   *  @ignore
-   */
-  constructor(elementRef: ElementRef, private cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-
-  onViewInit(): void {
-    super.onViewInit();
-    this._updateMask();
-  }
-
-  _onOptionChanged(option: AXComponentOptionChanged): void {
-    super._onOptionChanged(option);
-    this._updateMask();
-  }
-
-  private _updateMask() {
-    if (!this._maskObj) {
-      this._maskObj = IMask.createMask({
-        mask: Number,
-        min: this.minValue,
-        max: this.maxValue,
-        thousandsSeparator: this.thousandsSeparator || '',
-        scale: this.decimals,
-        radix: '.',
-        padFractionalZeros: this.decimals > 0 && this.padDecimalZeros,
-      });
-    } else {
-      this._maskObj.updateOptions({
-        min: this.minValue,
-        max: this.maxValue,
-        thousandsSeparator: this.thousandsSeparator || '',
-        scale: this.decimals,
-        radix: '.',
-        padFractionalZeros: this.decimals > 0 && this.padDecimalZeros,
-      });
-    }
-    this._maskDirective?.maskRef?.updateValue();
-    this._maskDirective?.maskRef?.updateControl();
-  }
-
-  _handleOnKeydownEvent(e: KeyboardEvent) {
-    if (this.disabled || this.readonly) return;
-    const ignore = () => {
-      e.preventDefault();
-      e.stopPropagation();
-    };
-    this._setUserInteraction();
-    const input = e.target as HTMLInputElement;
-    const valStr = input.value;
-    const decimalPointIndex = valStr.indexOf('.');
-    const _cursorPos = input.selectionStart!;
-
-    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-      if (
-        decimalPointIndex > 0 &&
-        _cursorPos > decimalPointIndex &&
-        this.decimals > 0
-      ) {
-        e.key === 'ArrowDown' ? this.decimalStepDown() : this.decimalStepUp();
-      } else {
-        e.key === 'ArrowDown' ? this.stepDown() : this.stepUp();
-      }
-      ignore();
-      setTimeout(() => {
-        input.setSelectionRange(_cursorPos, _cursorPos);
-      }, 5);
-    }
-    super._emitOnKeydownEvent(e);
-  }
-
-  _handleUpDownClick(e: AXClickEvent, v: -1 | 1) {
-    if (this.disabled || this.readonly) return;
-    this._setUserInteraction();
-    v == 1 ? this.stepUp() : this.stepDown();
-  }
-
-  _setValue(value: any) {
-    if (value == null && this.allowNull) {
-      return null;
-    }
-    const v = toNumber(value);
-    if (v < this.minValue) return this.minValue;
-    if (v > this.maxValue) return this.maxValue;
-    return v;
-  }
-
-  stepUp() {
-    this.value += toNumber(this.step);
-  }
-
-  stepDown() {
-    this.value -= toNumber(this.step);
-  }
-
-  decimalStepUp() {
-    this.value += toNumber(
-      this.decimalStep == 'auto'
-        ? 1 / Math.pow(10, this.decimals)
-        : this.decimalStep
-    );
-  }
-
-  decimalStepDown() {
-    this.value -= toNumber(
-      this.decimalStep == 'auto'
-        ? 1 / Math.pow(10, this.decimals)
-        : this.decimalStep
-    );
-  }
-}

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

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

package/page/index.ts

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

package/page/ng-package.json

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

package/page/public-api.ts

@@ -1,4 +0,0 @@
-export * from './src/page.component';
-export * from './src/base-page.class';
-export * from './src/page.module';
-

package/page/src/base-page.class.ts

@@ -1,109 +0,0 @@
-import {
-  ChangeDetectorRef,
-  ElementRef,
-  EventEmitter,
-  Injectable,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import { AXEvent } from '@acorex/components/common';
-import { AXPageComponent } from './page.component';
-import { AXDecoratorFooterComponent } from '@acorex/components/decorators';
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-
-export const TAB_META_KEY = '__meta__';
-
-export class AXPageCloseEvent extends AXEvent {
-  data?: any;
-}
-export class AXPageClosing {
-  cancel: boolean = false;
-  data?: any;
-}
-
-export class AXPageResult {
-  sender: AXBasePageComponent;
-  data?: any;
-}
-
-/**
- *  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons after the primary text.
- */
-export class AXPageClosedPromise extends Promise<AXPageResult> {
-  private closeMethod: () => void;
-  constructor(
-    executor: (
-      resolve: (value?: AXPageResult | PromiseLike<AXPageResult>) => void,
-      reject: (reason?: any) => void
-    ) => void
-  ) {
-    //TODO: check ts error
-    //@ts-ignore
-    super(executor);
-  }
-
-  public close() {
-    if (this.closeMethod) {
-      this.closeMethod();
-    }
-  }
-}
-
-@Injectable()
-export class AXBasePageComponent extends AXBaseComponentMixin {
-  /**
-   *  @ignore
-   */
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-
-  @ViewChild(AXPageComponent, { static: true })
-  private pageContainer: AXPageComponent;
-
-  @ViewChild(AXDecoratorFooterComponent, { static: true })
-  footer: AXDecoratorFooterComponent;
-
-  @Output()
-  isLoadingChange = new EventEmitter<boolean>();
-
-  private _isLoading: boolean = false;
-  @Input()
-  public get isLoading(): boolean {
-    return this._isLoading;
-  }
-  public set isLoading(v: boolean) {
-    this._setOption({
-      name: 'isLoading',
-      value: v,
-      afterCallback: () => {
-        if (this.pageContainer) {
-          this.pageContainer.isLoading = this.isLoading;
-        }
-        this._cdr.markForCheck();
-      },
-    });
-  }
-
-  private _isPopup: boolean = false;
-  public get isPopup(): boolean {
-    return this._isPopup;
-  }
-
-  onClosed: EventEmitter<AXPageCloseEvent> =
-    new EventEmitter<AXPageCloseEvent>();
-
-  close(data?: any) {
-    this.onClosed.emit({
-      component: this,
-      data: data,
-    });
-  }
-
-  onClosing(e: AXPageClosing): void | Promise<void> {}
-
-  ngOnDestroy() {
-    this.onClosed.unsubscribe();
-  }
-}

package/page/src/page.component.ts

@@ -1,42 +0,0 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, Inject, Injectable, Input, Output } from "@angular/core";
-import { AXLoadingService } from "@acorex/components/loading";
-import { AXBaseComponentMixin } from "@acorex/components/mixin";
-
-@Injectable()
-export abstract class AXPageComponent extends AXBaseComponentMixin {
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef,
-        @Inject(AXLoadingService) private _loadingService
-    ) {
-        super(elementRef, cdr);
-    }
-
-    private _loadingId: number;
-
-    @Output()
-    isLoadingChange = new EventEmitter<boolean>();
-
-    private _isLoading: boolean = false;
-    @Input()
-    public get isLoading(): boolean {
-        return this._isLoading;
-    }
-    public set isLoading(v: boolean) {
-        this._setOption({
-            name: 'isLoading',
-            value: v,
-            afterCallback: () => {
-                if (this._loadingId && !v) {
-                    this._loadingService.hide(this._loadingId);
-                    this._loadingId = 0;
-                }
-                if (v) {
-                    this._loadingId = this._loadingService.show(this._getHostElement());
-                }
-                this._cdr.markForCheck();
-            }
-        });
-    }
-}

package/page/src/page.module.ts

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-
-
-// TODO: Module is empty!?
-@NgModule({
-    imports: [],
-    exports: [],
-    declarations: [],
-    providers: [],
-})
-export class AXPageModule { }

package/password-box/index.ts

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

package/password-box/ng-package.json

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

package/password-box/src/password-box.component.html

@@ -1,15 +0,0 @@
-<ng-content select="ax-prefix">
-</ng-content>
-<input class="ax-input" [attr.name]="name" [type]="_type" [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">
-
-<ng-content select="ax-suffix">
-
-</ng-content>
-<ng-content select="ax-validation-rule">
-</ng-content>
-<ng-content select="ax-input-mask">
-</ng-content>
-<ax-button color="light" look="blank" [size]="size" (onClick)="toggleType()" [tabIndex]="-1" *ngIf="showToggleButton">
-    <ax-icon [icon]="_icon"></ax-icon>
-</ax-button>

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

@@ -1,65 +0,0 @@
-
-import { TEXTBOX_INPUTS, TEXTBOX_OUTPUT, AXBaseTextBoxMixin } from '@acorex/components/mixin';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input,
-  ViewEncapsulation,
-} from '@angular/core';
-
-
-/**
- * The Textbox is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-@Component({
-  selector: 'ax-password-box',
-  templateUrl: 'password-box.component.html',
-  inputs: [
-    'disabled',
-    'readonly',
-    'tabIndex',
-    'cssClass',
-    'size',
-    'placeholder', 'maxLength', 'allowNull', 'debounceTime', 'type', 'autoComplete', 'readonly','allowNull','value','name', 'checked',
-  ],
-  outputs: [
-    'valueChange',
-    'onValueChanged',
-    'onBlur',
-    'onFocus',
-    'valueChange', 'onValueChanged',
-  ],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'ax-password-box ax-editor-container' },
-})
-export class AXPasswordBoxComponent extends AXBaseTextBoxMixin {
-  _type: 'password' | 'text' = 'password';
-  _icon: 'ax-ic-eye' | 'ax-ic-eye-off' = 'ax-ic-eye';
-
-  /**
-   *  A flag for showing or hiding password button.
-   */
-  @Input() showToggleButton: boolean = true;
-
-  /**
-   *  @ignore
-   */
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-
-  toggleType() {
-    if (this._type === 'password') {
-      this._type = 'text';
-      this._icon = 'ax-ic-eye-off';
-    } else {
-      this._type = 'password';
-      this._icon = 'ax-ic-eye';
-    }
-  }
-}

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

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

package/popover/index.ts

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

package/popover/ng-package.json

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

package/popover/public-api.ts

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

package/popover/src/popover.component.html

@@ -1,3 +0,0 @@
-<ng-template #baseTemplate>
-  <ng-content></ng-content>
-</ng-template>