@acorex/components 5.1.2 → 5.1.6

package/src/lib/property-editor/editors/range-editor/range.editor.ts

@@ -0,0 +1,153 @@
+import { Component,  ChangeDetectorRef, ViewChild, TemplateRef, ChangeDetectionStrategy, ElementRef } from '@angular/core';
+import { AXTranslator } from '@acorex/core';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+import { AXPopupService } from '../../../popup/popup.service';
+import { AXValidationFormComponent } from '../../../validation/validation-form.component';
+
+
+export interface AXRangeModel {
+    title: string;
+    color?: string;
+    minValue: number;
+    maxValue: number;
+}
+
+
+
+@Component({
+    templateUrl: './range.editor.html',
+    styleUrls: ['./range.editor.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AXRangePropertyEditorComponent extends AXProperyEditorComponent<AXRangeModel[]>  {
+
+
+    private form: AXValidationFormComponent;
+
+    @ViewChild('tplEdit')
+    tplEdit: TemplateRef<any>;
+
+    ranges: AXRangeModel[] = [];
+
+    editRow: AXRangeModel;
+
+    showSeparator: boolean = true;
+    decimalNumber: number = 2;
+
+    constructor(protected cdr: ChangeDetectorRef, private popupService: AXPopupService) {
+        super(cdr);
+    }
+
+
+    ngOnInit() {
+        this.ranges = this.value ? JSON.parse(JSON.stringify(this.value)) : [];
+        this.cdr.detectChanges();
+    }
+
+
+    ngAfterViewInit() {
+        this.onRenderCompleted.emit();
+    }
+
+    // getRanges() {
+    //     return this.ranges.sort((a, b) => a.minValue - b.minValue);
+    // }
+
+    onFormInit(e) {
+        this.form = e.component;
+    }
+
+
+    handleEditClick(item: AXRangeModel) {
+        this.editRow = Object.assign({}, item);
+        const popup = this.popupService.open(this.tplEdit, {
+            size: 'sm',
+            footerButtons: [
+                {
+                    name: 'confirm',
+                    text: AXTranslator.get('common.confirm'),
+                    style: 'success',
+                    submitBehavior: true,
+                    cancelBehavior: false,
+                    onClick: () => {
+                        this.form.validate().then(c => {
+                            if (c.result) {
+                                super.handleValueChange(this.ranges);
+                                Object.assign(item, this.editRow);
+                                popup.close();
+                                this.editRow = null;
+                                this.cdr.detectChanges();
+                            }
+                        });
+                    }
+                },
+                {
+                    name: 'cancel',
+                    text: AXTranslator.get('common.cancel'),
+                    style: 'danger blank',
+                    submitBehavior: false,
+                    cancelBehavior: true,
+                    onClick: () => {
+                        popup.close();
+                        this.editRow = null;
+                        this.cdr.detectChanges();
+                    }
+                }
+            ],
+            title: AXTranslator.get('common.edit')
+        });
+    }
+
+    handleAddClick() {
+        const min = this.ranges?.length ? Math.max(...this.ranges.map(c => c.maxValue)) : 0;
+        this.editRow = {
+            title: '',
+            minValue: min,
+            maxValue: min + 1,
+            color: null
+        };
+        const popup = this.popupService.open(this.tplEdit, {
+            title: AXTranslator.get('common.add-item'),
+            size: 'sm',
+            footerButtons: [
+                {
+                    name: 'confirm',
+                    text: AXTranslator.get('common.confirm'),
+                    style: 'success',
+                    submitBehavior: true,
+                    cancelBehavior: false,
+                    onClick: () => {
+                        this.form.validate().then(c => {
+                            if (c.result) {
+                                super.handleValueChange(this.ranges);
+                                this.ranges.push(this.editRow);
+                                popup.close();
+                                this.editRow = null;
+                                this.cdr.detectChanges();
+                            }
+                        });
+                    }
+                },
+                {
+                    name: 'cancel',
+                    text: AXTranslator.get('common.cancel'),
+                    style: 'danger blank',
+                    submitBehavior: false,
+                    cancelBehavior: true,
+                    onClick: () => {
+                        popup.close();
+                        this.editRow = null;
+                        this.cdr.detectChanges();
+                    }
+                }
+            ],
+        });
+        this.cdr.detectChanges();
+    }
+
+    handleRemoveClick(item: AXRangeModel) {
+        this.ranges = this.ranges.filter(c => c.minValue !== item.minValue);
+        super.handleValueChange(this.ranges);
+    }
+
+}

package/src/lib/property-editor/editors/range-editor/range.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXRangePropertyEditorComponent } from './range.editor';
+import { FormsModule } from '@angular/forms';
+import { AXTextBoxModule } from '../../../textbox/textbox.module';
+import { AXNumberBoxModule } from '../../../number-box/number-box.module';
+import { AXColorPickerModule } from '../../../color-picker/color-picker.module';
+import { AXLabelModule } from '../../../label/label.module';
+import { AXPageModule } from '../../../page/page.module';
+import { AXButtonModule } from '../../../button/button.module';
+import { AXTranslatorModule } from '@acorex/core';
+import { AXValidationModule } from '../../../validation/validation.module';
+
+
+
+
+@NgModule({
+    declarations: [AXRangePropertyEditorComponent],
+    imports: [
+        CommonModule,
+        FormsModule,
+        AXTranslatorModule,
+        AXTextBoxModule,
+        AXNumberBoxModule,
+        AXColorPickerModule,
+        AXLabelModule,
+        AXPageModule,
+        AXValidationModule,
+        AXButtonModule
+    ],
+    exports: [AXRangePropertyEditorComponent],
+    providers: []
+})
+export class AXRangePropertyEditorModule {
+    constructor() {
+    }
+}

package/src/lib/property-editor/editors/searchbar-selectbox-editor/searchbar-selectbox-editor.html

@@ -0,0 +1,8 @@
+<ax-select-box [mode]="mode" [textField]="textField" [valueField]="valueField" [remoteOperation]="remoteOperation"
+    [selectedItems]="value" [allowSearch]="allowSearch" [allowNull]="allowNull" [readonly]="readonly"
+    [disabled]="disabled" (selectionChanged)="handleValueChange($event)">
+    <ax-data-source [provideData]="provideData">
+    </ax-data-source>
+    <ax-validation [rules]="validation?.rules">
+    </ax-validation>
+</ax-select-box>

package/src/lib/property-editor/editors/searchbar-selectbox-editor/searchbar-selectbox-editor.ts

@@ -0,0 +1,70 @@
+import { Component, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+import { AXValidation } from '../../../validation/validation.component';
+import { AXSelectBoxComponent } from '../../../selectbox/selectbox.component';
+
+@Component({
+  templateUrl: './searchbar-selectbox-editor.html'
+})
+export class AXSearchBarSelectBoxEditorComponent extends AXProperyEditorComponent<any> {
+  valueField: string = 'id';
+  textField: string = 'text';
+  mode: string = 'single';
+  selectionDataMode: string = 'value';
+  allowSearch: boolean = true;
+  allowNull: boolean = true;
+  disabled: boolean = false;
+  items: any = [];
+  remoteOperation = false;
+  returnAllData: boolean = false;
+  validation: AXValidation;
+
+  @ViewChild(AXSelectBoxComponent, { static: false })
+  selectBox: AXSelectBoxComponent;
+
+  private _filter: any;
+  public get filter(): any {
+    return this._filter;
+  }
+  public set filter(v: any) {
+    this._filter = v;
+    if (this.value && this.initiated) {
+      this.value = null;
+      this.selectBox?.refresh();
+    }
+  }
+
+  constructor(protected cdr: ChangeDetectorRef) {
+    super(cdr);
+  }
+
+  handleValueChange(e: any) {
+    super.handleValueChange(e.selectedItems);
+  }
+
+  ngAfterViewInit() {
+    this.registerForValidationForm(this.selectBox);
+    this.onRenderCompleted.emit();
+  }
+
+  provideData = (e): Promise<any> => {
+    return new Promise((resolve) => {
+      const func = () => {
+        if (Array.isArray(this.items)) {
+          resolve(this.items.slice());
+        } else if (typeof this.items === 'function') {
+          const a = Object.assign(e, { sender: this });
+          resolve(this.items(a));
+        } else {
+          resolve([]);
+        }
+      };
+      const intVal = setInterval(() => {
+        if (this.initiated) {
+          func();
+          clearInterval(intVal);
+        }
+      }, 50);
+    });
+  };
+}

package/src/lib/property-editor/editors/selectbox-editor/selectbox.editor.html

@@ -0,0 +1,8 @@
+<ax-select-box [mode]="selectionMode" [textField]="textField" [valueField]="valueField" [selectedValues]="value"
+    [remoteOperation]="remoteOperation" [allowSearch]="allowSearch" [allowNull]="allowNull" [readonly]="readonly"
+    [disabled]="disabled" (selectionChanged)="handleValueChange($event)">
+    <ax-data-source [provideData]="provideData">
+    </ax-data-source>
+    <ax-validation [rules]="validation?.rules">
+    </ax-validation>
+</ax-select-box>

package/src/lib/property-editor/editors/selectbox-editor/selectbox.editor.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+import { AXValidation } from '../../../validation/validation.component';
+import { AXSelectBoxComponent } from '../../../selectbox/selectbox.component';
+
+@Component({
+    templateUrl: './selectbox.editor.html',
+})
+export class AXSelectBoxPropertyEditorComponent extends AXProperyEditorComponent<any>  {
+
+
+    valueField: string = 'id';
+    textField: string = 'text';
+    selectionMode: string = 'single';
+    selectionDataMode: string = 'value';
+    allowSearch: boolean = true;
+    allowNull: boolean = false;
+    disabled: boolean = false;
+    items: any = [];
+    remoteOperation = false;
+
+    validation: AXValidation;
+
+    @ViewChild(AXSelectBoxComponent, { static: true })
+    selectBox: AXSelectBoxComponent;
+
+
+
+    private _filter: any;
+    public get filter(): any {
+        return this._filter;
+    }
+    public set filter(v: any) {
+        this._filter = v;
+        if (this.value && this.initiated) {
+            this.value = null;
+            this.selectBox?.refresh();
+        }
+    }
+
+
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+
+    handleValueChange(e: any) {
+        super.handleValueChange(e.selectedValues);
+    }
+
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.selectBox);
+        this.onRenderCompleted.emit();
+    }
+
+    provideData = (e): Promise<any> => {
+        return new Promise((resolve) => {
+            const func = () => {
+                if (Array.isArray(this.items)) {
+                    resolve(this.items.slice());
+                }
+                else if (typeof this.items === 'function') {
+                    const a = Object.assign(e, { sender: this })
+                    resolve(this.items(a));
+                }
+                else {
+                    resolve([]);
+                }
+            };
+            const intVal = setInterval(() => {
+                if (this.initiated) {
+                    func();
+                    clearInterval(intVal);
+                }
+            },50);
+        });
+    }
+}

package/src/lib/property-editor/editors/selectbox-editor/selectbox.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AXSelectBoxPropertyEditorComponent } from './selectbox.editor';
+import { AXSelectBoxModule } from '../../../selectbox/selectbox.module';
+import { AXDataSourceModule } from '../../../data-source/datasource.module';
+import { AXValidationModule } from '../../../validation/validation.module';
+import { AXSearchBarSelectBoxEditorComponent } from '../searchbar-selectbox-editor/searchbar-selectbox-editor';
+
+@NgModule({
+  declarations: [AXSelectBoxPropertyEditorComponent, AXSearchBarSelectBoxEditorComponent],
+  imports: [CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule],
+  exports: [AXSelectBoxPropertyEditorComponent],
+  providers: []
+})
+export class AXSelectBoxPropertyEditorModule {
+  constructor() {}
+}

package/src/lib/property-editor/editors/selection-editor/selection-editor.ts

@@ -0,0 +1,52 @@
+import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { AXSelectionListComponent } from '../../../selection-list/selection-list.component';
+import { AXCheckBoxComponent } from '../../../checkbox/checkbox.component';
+import { AXValidation } from '../../../validation/validation.component';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+
+@Component({
+  template: `
+    <ax-selection-list
+      [disabled]="disabled"
+      [size]="size"
+      [readonly]="readonly"
+      [value]="value"
+      [items]="items"
+      [mode]="mode"
+      (selectedItemsChange)="handleValueChange($event)"
+      [direction]="direction"
+      [(selectedItems)]="selectedItems"
+    >
+      <ax-validation [rules]="validation?.rules"> </ax-validation>
+    </ax-selection-list>
+  `
+})
+export class AXSelectionListPropertyEditorComponent extends AXProperyEditorComponent<any> {
+  constructor(protected cdr: ChangeDetectorRef) {
+    super(cdr);
+  }
+  @ViewChild(AXSelectionListComponent, { static: true })
+  private selectionList: AXSelectionListComponent;
+
+  disabled: boolean = false;
+  indeterminate: boolean = false;
+  label: string;
+  readonly: boolean = false;
+  size: 'sm' | 'md' | 'lg' = 'md';
+  validation: AXValidation;
+  items: any = [];
+  mode: 'multiple' | 'single' = 'single';
+  direction: 'horizontal' | 'vertical' = 'horizontal';
+  textField: string = null;
+  valueField: string = null;
+  selectedItems: any = [];
+
+  handleValueChange(e: any) {
+    super.handleValueChange(e);
+  }
+
+  ngAfterViewInit() {
+    this.registerForValidationForm(this.selectionList);
+    this.onRenderCompleted.emit();
+  }
+}

package/src/lib/property-editor/editors/selection-editor/selection.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { AXSelectionListModule } from '../../../selection-list/selection-list.module';
+import { AXValidationModule } from '../../../validation/validation.module';
+import { AXSelectionListPropertyEditorComponent } from './selection-editor';
+
+@NgModule({
+    declarations: [AXSelectionListPropertyEditorComponent],
+    imports: [CommonModule, AXSelectionListModule, FormsModule, AXValidationModule],
+    exports: [AXSelectionListPropertyEditorComponent],
+    providers: [],
+})
+export class AXSelectionPropertyEditorModule { }

package/src/lib/property-editor/editors/switch-editor/number.editor.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+
+@Component({
+    template: `
+        <ax-switch (onValueChanged)="handleValueChange($event)" [value]="value"></ax-switch>
+    `,
+})
+export class AXSwitchPropertyEditorComponent extends AXProperyEditorComponent<boolean>  {
+
+
+
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+
+
+    handleValueChange(e: any) {
+        super.handleValueChange(e.value);
+    }
+
+    ngAfterViewInit() {
+        this.onRenderCompleted.emit();
+    }
+
+}

package/src/lib/property-editor/editors/switch-editor/number.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AXNumberBoxModule } from '../../../number-box/number-box.module';
+import { AXValidationModule } from '../../../validation/validation.module';
+import { AXSwitchPropertyEditorComponent } from './number.editor';
+import { AXSwitchModule } from '../../../switch/switch.module';
+
+
+
+
+@NgModule({
+    declarations: [AXSwitchPropertyEditorComponent],
+    imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule, AXSwitchModule],
+    exports: [AXSwitchPropertyEditorComponent],
+    providers: []
+})
+export class AXSwitchPropertyEditorModule {
+    constructor() {
+    }
+}

package/src/lib/property-editor/editors/text-editor/text.editor.html

@@ -0,0 +1,5 @@
+<ax-text-box (onValueChanged)="handleValueChange($event)" [value]="value" [readonly]="readonly"
+    [allowClear]="clearButton" [mask]="mask" [maskGuid]="maskGuid" [showMask]="showMask">
+    <ax-validation [rules]="validation?.rules">
+    </ax-validation>
+</ax-text-box>

package/src/lib/property-editor/editors/text-editor/text.editor.ts

@@ -0,0 +1,31 @@
+import { Component, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { AXTextBoxComponent } from '../../../textbox/textbox.component';
+import { AXValidation } from '../../../validation/validation.component';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+
+@Component({
+  templateUrl: './text.editor.html'
+})
+export class AXTextPropertyEditorComponent extends AXProperyEditorComponent<string> {
+  @ViewChild(AXTextBoxComponent)
+  private textBox: AXTextBoxComponent;
+
+  validation: AXValidation;
+  clearButton: boolean = false;
+  mask: any;
+  maskGuid: boolean = false;
+  showMask: boolean = true;
+
+  constructor(protected cdr: ChangeDetectorRef) {
+    super(cdr);
+  }
+
+  handleValueChange(e: any) {
+    super.handleValueChange(e.value);
+  }
+
+  ngAfterViewInit() {
+    this.registerForValidationForm(this.textBox);
+    this.onRenderCompleted.emit();
+  }
+}

package/src/lib/property-editor/editors/text-editor/text.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXTextPropertyEditorComponent } from './text.editor';
+import { FormsModule } from '@angular/forms';
+import { AXTextBoxModule } from '../../../textbox/textbox.module';
+import { AXValidationModule } from '../../../validation/validation.module';
+
+
+
+
+@NgModule({
+    declarations: [AXTextPropertyEditorComponent],
+    imports: [CommonModule, FormsModule, AXTextBoxModule, AXValidationModule],
+    exports: [AXTextPropertyEditorComponent],
+    providers: []
+})
+export class AXTextPropertyEditorModule {
+    constructor() {
+    }
+}

package/src/lib/property-editor/editors/textarea-editor/textarea.editor.html

@@ -0,0 +1,9 @@
+<ax-text-area (onValueChanged)="handleValueChange($event)" [value]="value" 
+        [readonly]="readonly" 
+        [allowClear]="clearButton"
+        [placeholder]="placeholder"
+        [rows]="rows"
+        >
+    <ax-validation [rules]="validation?.rules">
+    </ax-validation>
+</ax-text-area>

package/src/lib/property-editor/editors/textarea-editor/textarea.editor.ts

@@ -0,0 +1,37 @@
+import { Component,  ChangeDetectorRef, ViewChild } from '@angular/core';
+import { AXTextBoxComponent } from '../../../textbox/textbox.component';
+import { AXValidation } from '../../../validation/validation.component';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+
+@Component({
+    templateUrl: './textarea.editor.html',
+})
+export class AXTextareaPropertyEditorComponent extends AXProperyEditorComponent<string>  {
+
+
+    @ViewChild(AXTextBoxComponent)
+    private textBox: AXTextBoxComponent;
+
+
+    validation: AXValidation;
+    clearButton: boolean = false;
+    placeholder: string = null;
+    rows: number = 3;
+
+
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+
+
+    handleValueChange(e: any) {
+        super.handleValueChange(e.value);
+    }
+
+
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.textBox);
+        this.onRenderCompleted.emit();
+    }
+
+}

package/src/lib/property-editor/editors/textarea-editor/textarea.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXTextareaPropertyEditorComponent } from './textarea.editor';
+import { FormsModule } from '@angular/forms';
+import { AXTextAreaModule } from '../../../textarea/textarea.module';
+import { AXValidationModule } from '../../../validation/validation.module';
+
+
+
+
+@NgModule({
+    declarations: [AXTextareaPropertyEditorComponent],
+    imports: [CommonModule, FormsModule, AXTextAreaModule, AXValidationModule],
+    exports: [AXTextareaPropertyEditorComponent],
+    providers: []
+})
+export class AXTextareaPropertyEditorModule {
+    constructor() {
+    }
+}

package/src/lib/property-editor/editors/time-editor/time.editor.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { AXDatePickerComponent } from '../../../date-picker/date-picker.component';
+import { AXValidation } from '../../../validation/validation.component';
+import { AXProperyEditorComponent } from '../../property-editor.class';
+
+@Component({
+    template: `
+    <ax-time-picker [showCurentTime]="showCurentTime" [timeType]="timeType" [allowClear]="clearButton" (onValueChanged)="handleValueChange($event)">
+        <ax-validation [rules]="validation?.rules">
+        </ax-validation>
+    </ax-time-picker>
+         `,
+})
+export class AXTimePropertyEditorComponent extends AXProperyEditorComponent<String>  {
+
+
+    timeType: any;
+    validation: AXValidation;
+    showCurentTime: boolean = false;
+    clearButton: boolean = false;
+
+    @ViewChild(AXDatePickerComponent)
+    private time: AXDatePickerComponent;
+
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+
+    handleValueChange(e: any) {
+        super.handleValueChange(e.value?.time);
+    }
+
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.time);
+        this.onRenderCompleted.emit();
+    }
+
+}