@acorex/components 6.5.27 → 6.5.29

package/src/lib/tree-view/tree-view.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { AXTreeViewComponent } from './tree-view.component';
-import { CommonModule } from '@angular/common';
-import { AXDataSourceModule } from '../data-source/datasource.module';
-import { AXCheckBoxModule } from '../checkbox/checkbox.module';
-import { AXContextMenuModule } from '../context-menu/context-menu.module';
-
-
-@NgModule({
-    declarations: [AXTreeViewComponent],
-    imports: [AXDataSourceModule, CommonModule, AXCheckBoxModule, AXContextMenuModule],
-    exports: [AXTreeViewComponent],
-    providers: []
-})
-
-export class AXTreeViewModule { }

package/src/lib/upload-file/upload-file.component.html

@@ -1,16 +0,0 @@
-<input #fileInput type="file" [accept]="accessTypes.join(',')" style="display: none;" (change)="onFileChange($event)" />
-
-<ng-container *ngIf="type == 'inline'; else elseTemplate">
-  <ax-form-group size="{{size}}">
-    <ax-text-box [value]="fileName" readonly="true" [disabled]="disabled"></ax-text-box>
-    <ax-button type="blank light" icon="far fa-times" (click)="remove()" *ngIf="fileName" [tabIndex]="-1">
-    </ax-button>
-    <ax-button type="primary blank" icon="far fa-upload" (click)="open()" [disabled]="disabled" [tabIndex]="-1">
-    </ax-button>
-  </ax-form-group>
-</ng-container>
-
-<ng-template #elseTemplate>
-  <div class="ax upload-file-box" (click)="open()" #dropRef>
-  </div>
-</ng-template>

package/src/lib/upload-file/upload-file.component.ts

@@ -1,230 +0,0 @@
-import {
-  Component,
-  ViewChild,
-  Input,
-  ElementRef,
-  ViewEncapsulation,
-  TemplateRef,
-  Renderer2,
-  EventEmitter,
-  Output,
-  ChangeDetectorRef
-} from '@angular/core';
-import { AXUploadFileLoadEvent, AXUploadFileProgressEvent } from './upload-file.events';
-import { AXProgressBarComponent } from '../progress-bar/progress-bar.component';
-import { AXBaseTextComponent, AXElementSize, AXBaseSizableComponent, AXBaseComponent } from '../base/element.class';
-import { AXRenderService } from '@acorex/core';
-
-@Component({
-  selector: 'ax-upload-file',
-  templateUrl: './upload-file.component.html',
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: block; width:100%; position: relative' }
-})
-export class AXUploadFileComponent extends AXBaseComponent implements AXBaseSizableComponent {
-  private overlayDiv: HTMLElement;
-
-  @Input()
-  contentType: 'image' | 'excel' | 'audio' | 'video' | 'video/image' = 'image';
-
-  @Input()
-  dropRef: HTMLElement;
-
-  @Input()
-  progressRef: HTMLElement;
-
-  @Input()
-  label: string;
-
-  @Input()
-  size: AXElementSize = "md";
-
-  @ViewChild('fileInput') fileInput: ElementRef;
-
-  @Input()
-  type: 'box' | 'inline' | 'hidden' = 'inline';
-
-  @Input()
-  public template: TemplateRef<any>;
-
-  @Input() disabled: boolean = false;
-  @Output()
-  onLoad: EventEmitter<AXUploadFileLoadEvent> = new EventEmitter<AXUploadFileLoadEvent>();
-
-  @Output()
-  onProgress: EventEmitter<AXUploadFileProgressEvent> = new EventEmitter<AXUploadFileProgressEvent>();
-
-  @Output()
-  onRemove: EventEmitter<any> = new EventEmitter();
-
-  fileTypes:any[] = [
-    {
-      type: 'image',
-      accept: ['image/gif', 'image/jpeg', 'image/png'],
-    },
-    {
-      type: 'audio',
-      accept: ['audio/mp3'],
-    },
-    {
-      type: 'ebook',
-      accept: ['application/pdf'],
-    },
-    {
-      type: 'excel',
-      accept: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
-    },
-    {
-      type: 'video',
-      accept: ['video/*'],
-    },
-    {
-      type: 'video/image',
-      accept: ['image/gif', 'image/jpeg', 'image/png', 'video/*'],
-    },
-  ];
-
-
-  files: File[] = [];
-  focus() { }
-
-  fileName: string = '';
-  constructor(
-    private el: ElementRef<HTMLElement>,
-    private injectionService: AXRenderService,
-    private rendrer: Renderer2,
-    protected cdr: ChangeDetectorRef
-  ) {
-    super();
-  }
-
-
-  onDeleteClick(e) {
-    e.stopPropagation();
-  }
-
-  onFileChange(e) {
-    const files = e.target.files;
-    this.addFile(files[0]);
-    (this.fileInput.nativeElement as HTMLInputElement).value = null;
-  }
-
-  open() {
-    this.fileInput.nativeElement.click({accept:this.accessTypes});
-  }
-  remove() {
-    this.fileInput.nativeElement.value = ''
-    this.files = [];
-    this.fileName = null
-    this.onRemove.emit()
-  }
-  ngAfterViewInit(): void {
-    if (this.dropRef != null) {
-    } else {
-      this.dropRef = this.el.nativeElement;
-    }
-    //
-    if (this.progressRef != null) {
-    } else {
-      this.progressRef = this.el.nativeElement;
-    }
-    //
-    if (this.type === 'hidden' || this.type === 'box') {
-      this.overlayDiv = this.rendrer.createElement('div') as HTMLElement;
-      this.overlayDiv.classList.add('overlay');
-      this.overlayDiv.innerHTML = `
-      <div class="icon-wrapper">
-        <i class="far fa-cloud-upload-alt fa-3x"></i>
-        <span>Drop File(s) Here</span>
-      </div>
-    `;
-      this.overlayDiv.addEventListener('drag', this.handleOverlayDragOver);
-      this.overlayDiv.addEventListener('dragover', this.handleOverlayDragOver);
-      this.overlayDiv.addEventListener('dragleave', this.handleOverlayDragOver);
-      this.rendrer.appendChild(this.dropRef, this.overlayDiv);
-    }
-    //
-    this.dropRef.classList.add('ax-upload-drop-over');
-    this.dropRef.addEventListener('dragover', this.handleDragOver.bind(this));
-    this.dropRef.addEventListener('dragleave', this.handleDragLeave.bind(this));
-    this.dropRef.addEventListener('drop', this.handleDrop.bind(this));
-  }
-
-  private handleOverlayDragOver(e: DragEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-    return false;
-  }
-
-  private handleDragOver(e: DragEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.overlayDiv.classList.add('show');
-    return false;
-  }
-
-  private handleDragLeave(e: DragEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.overlayDiv.classList.remove('show');
-    return false;
-  }
-
-  handleDrop(e: DragEvent) {
-    this.handleDragLeave(e);
-    for (let i = 0; i < e.dataTransfer.files.length; i++) {
-      const file = e.dataTransfer.files[i];
-      this.addFile(file);
-    }
-  }
-
-  private addFile(file: File) {
-    const progressDiv = this.rendrer.createElement('div') as HTMLElement;
-    progressDiv.classList.add('ax-upload-progress-panel');
-    const progressLabel = this.rendrer.createElement('small') as HTMLElement;
-    progressLabel.innerText = file.name;
-    this.fileName = file.name;
-    this.rendrer.appendChild(this.progressRef, progressDiv);
-    const com = this.injectionService.appendComponent(AXProgressBarComponent, { progress: 0 }, progressDiv).instance as AXProgressBarComponent;
-    this.rendrer.appendChild(progressDiv, progressLabel);
-
-    const reader = new FileReader();
-    reader.addEventListener('load', (e) => {
-      this.onLoad.emit({
-        file,
-        data: (e as any).target.result
-      });
-      //
-      // Fake Upload
-      let pv = 0;
-      let uploaded = 0;
-      const intv = setInterval(() => {
-        uploaded += 1024 * 1000;
-        if (uploaded > e.total) {
-          uploaded = e.total;
-        }
-        pv = Math.ceil((uploaded / e.total) * 100);
-        com.progress = pv;
-        this.onProgress.emit({
-          file,
-          total: e.total,
-          uploaded,
-          value: pv
-        });
-        //
-        if (com.progress >= 100) {
-          clearInterval(intv);
-          setTimeout(() => {
-            this.rendrer.removeChild(this.progressRef, progressDiv);
-          }, 1000);
-        }
-      }, 100);
-    });
-    reader.readAsDataURL(file);
-    this.files.push(file);
-  }
-
-  get accessTypes(): string[] {
-    return this.fileTypes.find((item) => item.type == this.contentType).accept;
-  }
-}

package/src/lib/upload-file/upload-file.events.ts

@@ -1,11 +0,0 @@
-export interface AXUploadFileProgressEvent {
-  readonly file: File;
-  readonly uploaded: number;
-  readonly total: number;
-  readonly value: number;
-}
-
-export interface AXUploadFileLoadEvent {
-  readonly file: File;
-  readonly data: ArrayBuffer;
-}

package/src/lib/upload-file/upload-file.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXUploadFileComponent } from './upload-file.component';
-import { AXButtonModule } from '../button/button.module';
-import { AXTextBoxModule } from '../textbox/textbox.module';
-import { AXProgressBarModule } from '../progress-bar/progress-bar.module';
-import { AXLabelModule } from '../label/label.module';
-import { AXFormGroupModule } from '../form-group/form-group.module';
-
-@NgModule({
-  declarations: [AXUploadFileComponent],
-  imports: [CommonModule, AXButtonModule, AXTextBoxModule, AXProgressBarModule, AXLabelModule, AXFormGroupModule],
-  exports: [AXUploadFileComponent],
-  providers: []
-})
-export class AXUploadFileModule {}

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

@@ -1,78 +0,0 @@
-import {
-  Component,
-  OnInit,
-  QueryList,
-  ContentChildren,
-  Input,
-  Output,
-  EventEmitter,
-  ElementRef,
-  ChangeDetectorRef
-} from '@angular/core';
-import { AXValidationResult } from './validation.class';
-import { AXValidatableComponent } from '../base/element.class';
-import { AXBaseEvent } from '../base/events.class';
-@Component({
-  selector: 'ax-validation-form',
-  template: '<ng-content></ng-content>'
-})
-export class AXValidationFormComponent {
-
-  constructor(private ref: ElementRef, private cdr: ChangeDetectorRef) { }
-
-
-  private widgets: AXValidatableComponent[] = [];
-
-
-  @ContentChildren(AXValidatableComponent, { descendants: true })
-  private widgetsQuery: QueryList<AXValidatableComponent>;
-
-  @Input()
-  validateOn: 'blur' | 'change' | 'submit' = 'submit';
-
-  @Output()
-  onInit: EventEmitter<AXBaseEvent> = new EventEmitter<AXBaseEvent>();
-
-
-  ngAfterViewInit() {
-    this.onInit.emit({
-      component: this,
-      htmlElement: this.ref.nativeElement
-    });
-  }
-
-  validate(): Promise<AXValidationResult> {
-    this.widgets.push(...this.widgetsQuery.toArray().filter(c => !this.widgets.includes(c)));
-    //
-    this.widgets.forEach(w => {
-      if (w.validation && w.validation.validateOn == null) {
-        w.validation.validateOn = this.validateOn;
-      }
-    });
-
-    return new Promise<AXValidationResult>(resolve => {
-      if (!this.widgets || this.widgets.length === 0) {
-        return Promise.resolve({ result: true });
-      }
-      Promise.all(this.widgets.map((c) => c.validate())).then((rules: any) => {
-        const failed = rules.filter((c: any) => !c.result);
-        if (failed.length) {
-          resolve({
-            result: false,
-            items: failed
-          });
-        }
-        else {
-          resolve({ result: true });
-        }
-      });
-    });
-  }
-
-
-  addWidget(widget: AXValidatableComponent) {
-    if(widget)
-      this.widgets.push(widget);
-  }
-
-}

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

@@ -1,112 +0,0 @@
-import { Component, ElementRef, Inject, inject, Input, Optional } from '@angular/core';
-import { AXValidationRuleResult, AXValidationRule, AXValidationRuleTypes } from './validation.class';
-import { AXTranslator } from '@acorex/core';
-
-
-// @dynamic
-export class AXValidationRules {
-  private static registredRules: { name: string, rule: AXValidationRule }[] = [];
-
-  public static addRule(name: string, rule: AXValidationRule) {
-    const exists = AXValidationRules.get(name);
-    if (exists) {
-      exists.rule = rule;
-    }
-    else {
-      AXValidationRules.registredRules.push({
-        name,
-        rule
-      });
-    }
-  }
-
-  public static get(name: string) {
-    return this.registredRules.find(c => c.name === name);
-  }
-}
-
-
-@Component({
-  selector: 'ax-validation-rule',
-  template: ''
-})
-export class AXValidationRuleComponent implements AXValidationRule {
-  @Input()
-  type: AXValidationRuleTypes = 'required';
-  @Input()
-  message: string;
-  @Input()
-  value: any;
-
-  @Input()
-  enabled: boolean = true;
-
-
-  constructor(
-    @Inject(ElementRef)
-    @Optional()
-    private ref?: ElementRef) {
-    if (ref)
-      ref.nativeElement["__axContext__"] = this;
-  }
-
-  validate(value: any): Promise<AXValidationRuleResult> {
-    if (this.enabled === false) {
-      return Promise.resolve({ result: true });
-    }
-    const regRule = AXValidationRules.get(this.type);
-    if (regRule) {
-      return this.internalValidate(regRule.rule.type, value, this.message || regRule.rule.message, regRule.rule.value);
-    }
-    else {
-      return this.internalValidate(this.type, 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: 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: message || AXTranslator.get('validation.messages.regex'),
-            result: ex.test(value)
-          });
-          break;
-        case 'custom':
-        case 'callback':
-          if (typeof ruleValue === 'function') {
-            const res: any = {};
-            res.message = message;
-            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({ result: true });
-          }
-          break;
-        default:
-          resolve({ result: true });
-      }
-    });
-  }
-}

package/src/lib/validation/validation.class.ts

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

package/src/lib/validation/validation.component.ts

@@ -1,92 +0,0 @@
-import { Component, ContentChildren, QueryList, Input, Output, EventEmitter, Injectable, ElementRef, Optional, Inject } from '@angular/core';
-import { AXValidatableComponent } from '../base/element.class';
-import { AXValidationRuleComponent } from './validation-rule.widget';
-import { AXValidationRule, AXValidationRuleResult } from './validation.class';
-
-
-@Injectable()
-export abstract class AXValidation {
-
-  abstract rules: AXValidationRule[];
-  validateOn: 'blur' | 'change' | 'submit' = 'submit';
-  showMessage: boolean;
-
-  validate(value: any): Promise<AXValidationRuleResult> {
-    if (!this.rules || this.rules.length === 0) {
-      return Promise.resolve({ result: true });
-    }
-    return new Promise<AXValidationRuleResult>(resolve => {
-      Promise.all(
-        this.rules.map(c => {
-          if (c instanceof AXValidationRuleComponent) {
-            return c.validate(value);
-          }
-          else {
-            const v = new AXValidationRuleComponent();
-            Object.assign(v, c);
-            return v.validate(value);
-          }
-        })
-      ).then(d => {
-        const error = d.find(c => c.result === false);
-        if (error) {
-          resolve(error);
-        } else {
-          resolve({ result: true });
-        }
-      });
-    });
-  }
-
-}
-
-
-@Component({
-  selector: 'ax-validation',
-  template: '<ng-content></ng-content>',
-  providers: [{ provide: AXValidation, useExisting: AXValidationComponent }]
-})
-export class AXValidationComponent extends AXValidation {
-
-  _getComponenets(): AXValidationRule[] {
-    return Array.from(this.ref?.nativeElement.querySelectorAll('ax-validation-rule')).map(c => c["__axContext__"] as AXValidationRule);
-  }
-
-  constructor(
-    @Inject(ElementRef)
-    @Optional()
-    private ref?: ElementRef
-  ) {
-    super();
-  }
-
-
-  @Output()
-  rulesChange: EventEmitter<AXValidationRule[]> = new EventEmitter<AXValidationRule[]>();
-
-  @Output()
-  showMessage: boolean = true;
-
-  private _rules: AXValidationRule[] = [];
-
-  @Input()
-  public get rules(): AXValidationRule[] {
-    return this._rules;
-  }
-  public set rules(v: AXValidationRule[]) {
-    this._rules = v;
-    if (this.rulesChange) {
-      this.rulesChange.emit(v);
-    }
-  }
-
-  @Input()
-  validateOn: 'blur' | 'change' | 'submit' = null;
-
-
-  ngAfterContentInit() {
-    if (this.rules && this.rules.length === 0) {
-      this.rules.push(...this._getComponenets());
-    }
-  }
-}

package/src/lib/validation/validation.module.ts

@@ -1,28 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXValidationFormComponent } from './validation-form.component';
-import { AXValidationComponent } from './validation.component';
-import { AXValidationRuleComponent, AXValidationRules } from './validation-rule.widget';
-import { AXTranslator } from '@acorex/core';
-
-
-@NgModule({
-  declarations: [AXValidationFormComponent, AXValidationComponent, AXValidationRuleComponent],
-  imports: [CommonModule],
-  exports: [AXValidationFormComponent, AXValidationComponent, AXValidationRuleComponent],
-  providers: []
-})
-export class AXValidationModule {
-  constructor() {
-    AXValidationRules.addRule('email', {
-      message: AXTranslator.get('validation.messages.email'),
-      type: 'regex',
-      value: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
-    })
-    AXValidationRules.addRule('phone', {
-      message: AXTranslator.get('validation.messages.phone'),
-      type: 'regex',
-      value: /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/
-    })
-  }
-}

package/src/test.ts

@@ -1,28 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js';
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(), {
-    teardown: { destroyAfterEach: false }
-}
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

package/tsconfig.lib.json

@@ -1,25 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../out-tsc/lib",
-    "target": "es2015",
-    "declaration": true,
-    "inlineSources": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "types": [],
-    "lib": [
-      "dom",
-      "es2018"
-    ]
-  },
-  "angularCompilerOptions": {
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "enableResourceInlining": true
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,6 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "angularCompilerOptions": {
-    "enableIvy": false
-  }
-}