@acorex/components 5.1.2 → 5.1.6

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

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

@@ -0,0 +1,16 @@
+<input #fileInput type="file" accept="image/*" 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

@@ -0,0 +1,189 @@
+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()
+  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>();
+
+  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();
+  }
+  remove() {
+    this.files = [];
+  }
+  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);
+  }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+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]*$/
+    })
+  }
+}