@acorex/components 6.0.1 → 6.0.2

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

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

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

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

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

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

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

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

package/input-mask/index.ts

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

package/input-mask/ng-package.json

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

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

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

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

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

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

package/label/ng-package.json

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

package/label/public-api.ts

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

package/label/src/label.component.html

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

package/label/src/label.component.ts

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

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

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

package/loading/ng-package.json

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

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

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