@acorex/components 6.0.0 → 6.0.1

package/form/src/form-field.module.ts

@@ -0,0 +1,55 @@
+import { AXAlertModule } from '@acorex/components/alert';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXConfig } from '@acorex/core/config';
+import { AXTranslator } from '@acorex/core/translation';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { AXFormFieldComponent } from './form-field.component';
+import { AXFormHintComponent } from './form-hint.component';
+import { AXFormComponent } from './form.component';
+import { AXValidationRuleComponent } from './validation-rule.widget';
+import { AXValidationSummaryComponent } from './validation-summary.component';
+
+@NgModule({
+  declarations: [
+    AXFormFieldComponent,
+    AXFormComponent,
+    AXFormHintComponent,
+    AXValidationRuleComponent,
+    AXValidationSummaryComponent,
+  ],
+  imports: [CommonModule, AXDecoratorModule, AXAlertModule, AXButtonModule],
+  exports: [
+    AXFormFieldComponent,
+    AXFormComponent,
+    AXFormHintComponent,
+    AXValidationRuleComponent,
+    AXValidationSummaryComponent,
+  ],
+  providers: [],
+})
+export class AXFormModule {
+  constructor() {
+    AXConfig.set({
+      form: {
+        validation: {
+          rules: {
+            email: {
+              rule: 'regex',
+              value:
+                /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+              message: AXTranslator.get('validation.messages.email'),
+            },
+            phone: {
+              rule: 'regex',
+              value: /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/,
+              message: AXTranslator.get('validation.messages.phone'),
+            },
+          },
+        },
+      },
+    });
+  }
+}

package/form/src/form-hint.component.ts

@@ -0,0 +1,18 @@
+import { AXBaseComponentMixin } from '@acorex/components/mixin';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'ax-form-hint',
+    template: ' <p class="ax-text-light-400 ax-text-xs ax-py-1 dark:ax-text-light-300"><ng-content></ng-content></p>',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AXFormHintComponent extends AXBaseComponentMixin {
+
+    constructor(
+        elementRef: ElementRef,
+        cdr: ChangeDetectorRef
+    ) {
+        super(elementRef, cdr);
+    }
+}

package/form/src/form.component.ts

@@ -0,0 +1,89 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
+import { AXEvent } from '@acorex/components/common';
+import { AXFormValidationResult } from './validation.class';
+import { AXBaseComponentMixin } from '@acorex/components/mixin';
+
+/**
+*  Contains native event
+* @category Events
+*/
+export class AXFormValidationEvent extends AXEvent {
+    result: AXFormValidationResult;
+}
+
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+@Component({
+    selector: 'ax-form',
+    template: '<ng-content></ng-content>',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AXFormComponent extends AXBaseComponentMixin {
+    /**
+    *  @ignore
+    */
+    constructor(
+        elementRef: ElementRef,
+        private cdr: ChangeDetectorRef
+    ) {
+        super(elementRef, cdr);
+    }
+
+
+    @Output()
+    onValidate: EventEmitter<AXFormValidationEvent> = new EventEmitter<AXFormValidationEvent>();
+
+
+    private _getComponenets() {
+        return Array.from(this._getHostElement().querySelectorAll('[ax-form-input="true"]'));
+    }
+
+    validate(...args: string[]): Promise<AXFormValidationResult> {
+        const widgets = this._getComponenets();
+        if (widgets.length === 0) {
+            this._emitOnValidateEvent({ result: true });
+            return Promise.resolve({ result: true });
+        }
+        //
+        return new Promise<AXFormValidationResult>((resolve, reject) => {
+            Promise.all(widgets.map((c) => (c as any).__axContext__)
+                .filter(c => (args == null || args.length == 0) || args.includes(c.name))
+                .map((c) => c.validate()))
+                .then((rules: any) => {
+                    const failed = rules.filter((c: any) => !c.result);
+                    if (failed.length) {
+                        this._emitOnValidateEvent({
+                            result: false,
+                            items: failed
+                        });
+                        reject({
+                            result: false,
+                            items: failed
+                        });
+                    }
+                    else {
+                        this._emitOnValidateEvent({ result: true });
+                        resolve({ result: true });
+                    }
+                });
+        });
+    }
+    private _emitOnValidateEvent(e: AXFormValidationResult) {
+        this.onValidate.emit({
+            component: this,
+            result: e,
+            htmlElement: this._getHostElement(),
+        })
+    }
+
+    clear() {
+        const widgets = this._getComponenets();
+        widgets.forEach(w => {
+            (w as any).__axContext__.clear();
+        });
+    }
+}

package/form/src/validation-rule.widget.ts

@@ -0,0 +1,133 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  AXValidationRuleResult,
+  AXValidationRule,
+  AXValidationRuleTypes,
+} from './validation.class';
+import { AXConfig } from '@acorex/core/config';
+import { AXTranslator } from '@acorex/core/translation';
+import { AXBaseComponentMixin } from '@acorex/components/mixin';
+
+@Component({
+  selector: 'ax-validation-rule',
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class AXValidationRuleComponent
+  extends AXBaseComponentMixin
+  implements AXValidationRule
+{
+  @Input()
+  rule: AXValidationRuleTypes = 'required';
+
+  @Input()
+  message: string;
+
+  @Input()
+  showMessage: boolean = true;
+
+  @Input()
+  value: any;
+
+  @Input()
+  enabled: boolean = true;
+
+  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+  }
+
+  onInit() {
+    (this._getHostElement() as any).validate = this.validate.bind(this);
+  }
+
+  validate(value: any): Promise<AXValidationRuleResult> {
+    if (this.enabled === false) {
+      return Promise.resolve({ result: true });
+    }
+    if (this.rule == 'custom') {
+      const regRule = AXConfig.get(`form.validation.rules.${this.value}`);
+      if (regRule) {
+        return this._internalValidate(
+          regRule.rule,
+          value,
+          this.message || regRule.message,
+          regRule.value
+        );
+      }
+    }
+    return this._internalValidate(this.rule, value, this.message, this.value);
+  }
+
+  private _internalValidate(
+    type: string,
+    value?: any,
+    message?: string,
+    ruleValue?: any
+  ): Promise<AXValidationRuleResult> {
+    return new Promise<AXValidationRuleResult>((resolve) => {
+      switch (type) {
+        case 'required':
+          resolve({
+            message: this.showMessage
+              ? message || AXTranslator.get('validation.messages.required')
+              : '',
+            result:
+              value != null &&
+              value != '' &&
+              (!Array.isArray(value) ||
+                (Array.isArray(value) && value.length > 0)),
+          });
+          break;
+        case 'regex':
+          const ex = new RegExp(ruleValue);
+          resolve({
+            message: this.showMessage
+              ? message || AXTranslator.get('validation.messages.regex')
+              : '',
+            result: ex.test(value),
+          });
+          break;
+        case 'callback':
+          if (typeof ruleValue === 'function') {
+            const res: any = {};
+            res.message = this.showMessage ? message : null;
+            const val = ruleValue({ value, message });
+            if (val instanceof Promise) {
+              val
+                .then((c) => {
+                  res.result = c;
+                })
+                .catch((c) => {
+                  res.result = false;
+                })
+                .finally(() => {
+                  resolve(res);
+                });
+            } else {
+              res.result = val;
+              resolve(res);
+            }
+          } else {
+            resolve({
+              message: AXTranslator.get('validation.messages.invalid-rull-fn'),
+              result: false,
+            });
+          }
+          break;
+        default:
+          resolve({
+            message: AXTranslator.get('validation.messages.invalid-rull-name'),
+            result: false,
+          });
+      }
+    });
+  }
+}

package/form/src/validation-summary.component.ts

@@ -0,0 +1,82 @@
+import { AXTranslator } from "@acorex/core/translation";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, Input, Optional, ViewEncapsulation } from "@angular/core";
+import { AXEvent } from "@acorex/components/common";
+import { AXToastService } from "@acorex/components/toast";
+import { AXFormComponent } from "./form.component";
+import { AXBaseComponentMixin } from "@acorex/components/mixin";
+
+
+export type AXValidationSummaryDisplayMode = 'toast' | 'alert'
+
+@Component({
+  selector: 'ax-validation-summary',
+  template: `
+      <ax-alert color="danger" look="twotone" *ngIf="displayMode=='alert' && _content" [timeOut]="_timeOut" #a (onDismissed)="_handleOnDismissed($event)">
+        <ax-header>
+          <ax-icon></ax-icon>
+          <ax-title>{{_title}}</ax-title>
+        </ax-header>
+        <ax-content>
+          <div [innerHTML]="_content">
+          </div>
+        </ax-content>
+        <ax-suffix>
+          <ax-button text="Dismiss" (onClick)="a.dismiss()"></ax-button>
+        </ax-suffix>
+      </ax-alert>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class AXValidationSummaryComponent extends AXBaseComponentMixin {
+
+  _content?: string = '';
+  _title: string = AXTranslator.get('validation.messages.title');
+
+  @Input()
+  displayMode: AXValidationSummaryDisplayMode = 'toast';
+
+  @Input()
+  timeOut?: number;
+
+  @Input()
+  autoHide: boolean = false;
+
+  _timeOut: number;
+
+  constructor(
+    _elementRef: ElementRef,
+    _cdr: ChangeDetectorRef,
+    private _tosatService: AXToastService,
+    @Optional()
+    @Inject(AXFormComponent)
+    private _parent: AXFormComponent
+  ) {
+    super(_elementRef, _cdr);
+    //
+    _parent.onValidate.subscribe((c:any) => {
+      if (!c.result.result) {
+        this._content = `<ul>${c.result.items.map(c => `<li>${c.message}</li>`).join('')}</ul>`;
+        this._timeOut = this.autoHide ? (this.timeOut ?? Math.max(c.result.items.length * 1500, 2000)) : 0;
+        //
+        if (this.displayMode == 'toast') {
+          this._tosatService.show({
+            color: 'danger',
+            closeable: true,
+            timeOut: this._timeOut,
+            content: this._content,
+            title: AXTranslator.get('validation.messages.title')
+          });
+        }
+      }
+      else {
+        this._content = '';
+      }
+      _cdr.markForCheck();
+    });
+  }
+
+  _handleOnDismissed(e: AXEvent) {
+    this._content = '';
+  }
+}

package/form/src/validation.class.ts

@@ -0,0 +1,25 @@
+export type AXValidationRuleTypes =
+  | 'required'
+  | 'regex'
+  | 'callback'
+  | 'custom';
+
+export interface AXValidationRule {
+  message?: string;
+  rule: AXValidationRuleTypes;
+  value?: any;
+  enabled?: boolean;
+}
+
+export interface AXValidationRuleResult {
+  message?: string;
+  name?: string;
+  result: boolean;
+  value?: any;
+  id?: string;
+}
+
+export interface AXFormValidationResult {
+  result: boolean;
+  items?: AXValidationRuleResult[];
+}

package/index.ts

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

package/input-mask/index.ts

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

package/input-mask/ng-package.json

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

package/input-mask/src/input-mask.component.ts

@@ -0,0 +1,70 @@
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ChangeDetectorRef, ElementRef } from '@angular/core';
+import IMask from 'imask';
+import { AnyMaskedOptions } from 'imask';
+import { AXTextBoxComponent } from '@acorex/components/textbox';
+import { AXBaseComponent } from '@acorex/components/mixin';
+
+@Component({
+    selector: 'ax-input-mask',
+    template: '',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+})
+export class AXInputMaskComponent extends AXBaseComponent {
+
+
+    private _maskObj: IMask.InputMask<AnyMaskedOptions>
+
+    /**
+    *  @ignore
+    */
+    constructor(
+        private _elementRef: ElementRef,
+        _cdr: ChangeDetectorRef,
+        private _textbox: AXTextBoxComponent
+    ) {
+        super(_elementRef, _cdr);
+    }
+
+    onViewInit(): void {
+        //@ts-ignore 
+        //TODO: check ts error
+        this._maskObj = IMask((this._textbox._getHostElement().querySelector('input') as any), {
+            mask: this.mask 
+        })
+    }
+
+
+
+    private _prefix: string;
+    @Input()
+    public get prefix(): string {
+        return this._prefix || '';
+    }
+    public set prefix(v: string) {
+        this._prefix = v;
+    }
+
+
+
+    private _suffix: string;
+    @Input()
+    public get suffix(): string {
+        return this._suffix || '';
+    }
+    public set suffix(v: string) {
+        this._suffix = v;
+    }
+
+
+
+    @Input()
+    showMaskTyped: boolean = false;
+
+    @Input()
+    clearIfNotMatch: boolean = false;
+
+    @Input()
+    mask: any;
+
+}

package/input-mask/src/input-mask.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXInputMaskComponent } from './input-mask.component';
+import { NgxMaskModule } from 'ngx-mask';
+import {IMaskModule} from 'angular-imask';
+
+const COMPONENT = [AXInputMaskComponent];
+const MODULES = [CommonModule, NgxMaskModule.forRoot(),IMaskModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXInputMaskModule { }

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../../coverage/acorex/components'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/label/index.ts

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

package/label/ng-package.json

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

package/label/public-api.ts

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

package/label/src/label.component.html

@@ -0,0 +1,3 @@
+<label [attr.for]="target" [ngClass]="class" [ngStyle]="style">
+    <ng-content></ng-content>
+</label>

package/label/src/label.component.ts

@@ -0,0 +1,34 @@
+import { AXBaseComponentMixin } from '@acorex/components/mixin';
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+  Input,
+} from '@angular/core';
+
+@Component({
+  selector: 'ax-label',
+  templateUrl: './label.component.html',
+  host: { class: 'ax-label' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class AXLabelComponent extends AXBaseComponentMixin {
+  @Input() class;
+  @Input() style;
+
+  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+  }
+
+  private _target: string;
+  public get target(): string {
+    return this._target;
+  }
+  public set target(v: string) {
+    this._target = v;
+    this._cdr.markForCheck();
+  }
+}

package/label/src/label.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXLabelComponent } from './label.component';
+
+const COMPONENT = [AXLabelComponent];
+const MODULES = [CommonModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXLabelModule { }

package/loading/index.ts

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

package/loading/ng-package.json

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

package/loading/src/loading-spinner.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ax-loading-spinner',
+  template: `
+    <svg
+      version="1.1"
+      width="24"
+      height="24"
+      class="ax-fill-current"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      x="0px"
+      y="0px"
+      viewBox="0 0 50 50"
+      xml:space="preserve"
+    >
+      <path
+        fill="current"
+        d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"
+      >
+        <animateTransform
+          attributeType="xml"
+          attributeName="transform"
+          type="rotate"
+          from="0 25 25"
+          to="360 25 25"
+          dur="0.6s"
+          repeatCount="indefinite"
+        />
+      </path>
+    </svg>
+    <span class="ax-ms-3" *ngIf="text"> {{ text }} </span>
+  `,
+  host: { class: 'ax-loading-spinner' },
+})
+export class AXLoadingSpinnerComponent {
+  text: string;
+}