@acorex/components 5.8.0 → 6.0.1

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

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

@@ -0,0 +1,24 @@
+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/package.json

@@ -1,35 +1,33 @@
-{
-  "name": "@acorex/components",
-  "version": "5.8.0",
-  "peerDependencies": {
-    "@angular/common": "^13.3.7",
-    "@angular/core": "^13.3.7",
-    "@angular/cdk": "^13.3.7",
-    "@splidejs/splide": "^4.0.1",
-    "ngx-mask": "^12.0.0",
-    "angular-imask": "^6.3.0-alpha.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "module": "fesm2015/acorex-components.mjs",
-  "es2020": "fesm2020/acorex-components.mjs",
-  "esm2020": "esm2020/acorex-components.mjs",
-  "fesm2020": "fesm2020/acorex-components.mjs",
-  "fesm2015": "fesm2015/acorex-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/acorex-components.mjs",
-      "es2020": "./fesm2020/acorex-components.mjs",
-      "es2015": "./fesm2015/acorex-components.mjs",
-      "node": "./fesm2015/acorex-components.mjs",
-      "default": "./fesm2020/acorex-components.mjs"
-    }
-  },
-  "sideEffects": false
-}
+{
+  "name": "@acorex/components",
+  "version": "6.0.1",
+  "peerDependencies": {
+    "@angular/common": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/cdk": "^14.0.1",
+    "@splidejs/splide": "^4.0.7",
+    "angular-imask": "^6.4.2",
+    "imask": "^6.4.2",
+    "ngx-mask": "^14.0.2"
+  },
+  "peerDependenciesMeta": {
+    "@angular/cdk": {
+      "optional": true
+    },
+    "@splidejs/splide": {
+      "optional": true
+    },
+    "angular-imask": {
+      "optional": true
+    },
+    "imask": {
+      "optional": true
+    },
+    "ngx-mask": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/page/index.ts

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

package/page/ng-package.json

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

package/page/public-api.ts

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

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

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

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

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

package/password-box/index.ts

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

package/password-box/ng-package.json

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

package/password-box/public-api.ts

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

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

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

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

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

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

package/popover/ng-package.json

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

package/popover/public-api.ts

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

package/popover/src/popover.component.html

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