@acorex/components 6.5.28 → 6.5.29

package/src/lib/property-editor/editors/conditional-color-editor/conditional-color.editor.ts

@@ -1,232 +0,0 @@
-import { Component, ChangeDetectorRef, ViewChild, TemplateRef, ChangeDetectionStrategy, Input } from '@angular/core';
-import { AXObjectUtil, AXTranslator } from '@acorex/core';
-import { AXDataType, AXProperyEditorComponent } from '../../property-editor.class';
-import { AXPopupService } from '../../../popup/popup.service';
-import { AXValidationFormComponent } from '../../../validation/validation-form.component';
-
-
-
-
-export interface AXConditionalColorModel {
-    color: string;
-    operator: string;
-    value: any;
-    display?: string;
-}
-
-
-
-@Component({
-    templateUrl: './conditional-color.editor.html',
-    styleUrls: ['./conditional-color.editor.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AXConditionalColorPropertyEditorComponent extends AXProperyEditorComponent<AXConditionalColorModel[]>  {
-
-
-    form: AXValidationFormComponent;
-
-    @ViewChild('tplEdit')
-    tplEdit: TemplateRef<any>;
-
-    @Input()
-    dataType: AXDataType = 'number';
-
-    // @Input()
-    // mode: string[] = ['color', 'title'];
-
-    operators: { value: string, text: string, dataTypes?: AXDataType[] }[] = [];
-
-    ranges: AXConditionalColorModel[] = [];
-
-    editRow: AXConditionalColorModel;
-
-    showSeparator: boolean = true;
-    decimalNumber: number = 2;
-
-    booleanItems = [{ value: true, text: AXTranslator.get('queryBuilder.true') }, { value: false, text: AXTranslator.get('queryBuilder.false') }];
-
-    constructor(protected cdr: ChangeDetectorRef, private popupService: AXPopupService) {
-        super(cdr);
-    }
-
-
-    onFormInit(e) {
-        this.form = e.component;
-    }
-
-    ngOnInit() {
-        this.ranges = this.value ? AXObjectUtil.deepCopy(this.value) : [];
-        this.updateOperations();
-    }
-
-
-
-    updateOperations() {
-        this.operators = [
-            {
-                value: '<',
-                text: AXTranslator.get('queryBuilder.lt'),
-                dataTypes: ['string', 'number', 'date']
-            },
-            {
-                value: '<=',
-                text: AXTranslator.get('queryBuilder.lte'),
-                dataTypes: ['string', 'number', 'date']
-            },
-            {
-                value: '>',
-                text: AXTranslator.get('queryBuilder.gt'),
-                dataTypes: ['string', 'number', 'date']
-            },
-            {
-                value: '>=',
-                text: AXTranslator.get('queryBuilder.gte'),
-                dataTypes: ['string', 'number', 'date']
-            },
-            {
-                value: '==',
-                text: AXTranslator.get('queryBuilder.equal'),
-                dataTypes: ['string', 'boolean', 'number', 'date']
-            },
-            {
-                value: '<>',
-                text: AXTranslator.get('queryBuilder.not-equal'),
-                dataTypes: ['string', 'boolean', 'number', 'date']
-            }
-        ].filter(c => c.dataTypes == null || c.dataTypes.includes(this.dataType)) as any;
-    }
-
-
-    ngAfterViewInit() {
-        this.cdr.detectChanges();
-        this.onRenderCompleted.emit();
-    }
-
-    handleEditClick(item: AXConditionalColorModel) {
-        this.updateOperations();
-        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() {
-        this.updateOperations();
-        this.editRow = {
-            value: this.getDefaultValue(),
-            color: null,
-            operator: '=='
-        };
-        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();
-                    }
-                }
-            ],
-        });
-    }
-    getDefaultValue(): any {
-        switch (this.dataType) {
-            case 'boolean':
-                return true;
-            case 'number':
-                return 0;
-            default:
-                return null;
-        }
-    }
-
-    handleRemoveClick(item: AXConditionalColorModel) {
-        this.ranges = this.ranges.filter(c => !(c.value === item.value && c.operator === item.operator));
-        super.handleValueChange(this.ranges);
-    }
-
-
-    getTitle(opr: string) {
-        const oprItem = this.operators.find(c => c.value === opr);
-        return oprItem ? AXTranslator.get(oprItem.text) : '';
-    }
-
-    getIcon(opr: string) {
-        switch (opr) {
-            case '==':
-                return 'fa-equals';
-            case '<>':
-                return 'fa-not-equal';
-            case '<':
-                return 'fa-less-than';
-            case '<=':
-                return 'fa-less-than-equal';
-            case '>':
-                return 'fa-greater-than';
-            case '>=':
-                return 'fa-greater-than-equal';
-            default:
-                return null;
-        }
-    }
-
-}

package/src/lib/property-editor/editors/conditional-color-editor/conditional-color.module.ts

@@ -1,52 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-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 { AXTranslator, AXTranslatorModule } from '@acorex/core';
-import { AXConditionalColorPropertyEditorComponent } from './conditional-color.editor';
-import { AXValidationModule } from '../../../validation/validation.module';
-import { AXSelectBoxModule } from '../../../selectbox/selectbox.module';
-
-
-
-
-@NgModule({
-    declarations: [AXConditionalColorPropertyEditorComponent],
-    imports: [
-        CommonModule,
-        FormsModule,
-        AXTranslatorModule,
-        AXTextBoxModule,
-        AXNumberBoxModule,
-        AXColorPickerModule,
-        AXLabelModule,
-        AXPageModule,
-        AXButtonModule,
-        AXSelectBoxModule,
-        AXValidationModule,
-    ],
-    exports: [AXConditionalColorPropertyEditorComponent],
-    providers: []
-})
-export class AXConditionalColorPropertyEditorModule {
-    constructor() {
-        AXTranslator.load('en', {
-            'conditional-color-property-editor': {
-                'replaced-color': 'Replaced Color',
-                'replaced-title': 'Replaced Title',
-            }
-        });
-        //
-        AXTranslator.load('fa', {
-            'conditional-color-property-editor': {
-                'replaced-color': 'رنگ جایگزین',
-                'replaced-title': 'متن جایگزین',
-            }
-        });
-    }
-}

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

@@ -1,49 +0,0 @@
-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';
-import { AXCalendarType } from '@acorex/core'
-
-@Component({
-    template: `
-    <ax-date-picker [size]="size" [dateType]="dateType" [showToday]="showToday" [disabled]="disabled" [allowClear]="clearButton" [readonly]="readonly" [max]="max" [min]="min" [placeholder]="placeholder" [showTodayButton]="showTodayButton" [selectableHoliday]="selectableHoliday" (onValueChanged)="handleValueChange($event)"
-             [type]="type" [textAlign]="textAlign" [(value)]="value">
-             <ax-validation [rules]="validation?.rules">
-            </ax-validation>
-    </ax-date-picker>
-         `,
-})
-export class AXDatePropertyEditorComponent extends AXProperyEditorComponent<Date>  {
-
-    showTodayButton: boolean = true;
-    selectableHoliday: boolean = true;
-    type: AXCalendarType = 'gregorian';
-    textAlign: 'right' | 'left' | null = null;
-    validation: AXValidation;
-    placeholder: string = ''
-    min: Date;
-    max: Date;
-    readonly: boolean;
-    disabled: boolean;
-    clearButton: boolean = false;
-    showToday: boolean = false;
-    dateType: any;
-    size: string = 'md';
-
-    @ViewChild(AXDatePickerComponent)
-    private date: AXDatePickerComponent;
-
-    constructor(protected cdr: ChangeDetectorRef) {
-        super(cdr);
-    }
-
-    handleValueChange(e: any) {
-        super.handleValueChange(e.value);
-    }
-
-    ngAfterViewInit() {
-        this.registerForValidationForm(this.date);
-        this.onRenderCompleted.emit();
-    }
-
-}

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

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

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

@@ -1,46 +0,0 @@
-import { Component, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
-import { AXNumberBoxComponent } from '../../../number-box/number-box.component';
-import { AXValidation } from '../../../validation/validation.component';
-import { AXProperyEditorComponent } from '../../property-editor.class';
-
-@Component({
-  template: `
-    <ax-number-box
-      (onValueChanged)="handleValueChange($event)"
-      [value]="value"
-      [showSeparator]="showSeparator"
-      [decimalNumber]="decimalNumber"
-      [min]="minValue"
-      [max]="maxValue"
-      [allowClear]="clearButton"
-      [showCounter]="showCounter"
-    >
-      <ax-validation [rules]="validation?.rules"> </ax-validation>
-    </ax-number-box>
-  `
-})
-export class AXNumberBoxPropertyEditorComponent extends AXProperyEditorComponent<number> {
-  showSeparator: boolean = true;
-  decimalNumber: number = 2;
-  minValue?: number = null;
-  maxValue?: number = null;
-  validation: AXValidation;
-  clearButton: boolean = false;
-  showCounter: boolean = true;
-
-  @ViewChild(AXNumberBoxComponent)
-  private textBox: AXNumberBoxComponent;
-
-  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/number-editor/number.module.ts

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

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

@@ -1,67 +0,0 @@
-<div *ngFor="let r of ranges" [style.border-color]="r.color" class="range-item" (click)="handleEditClick(r)">
-    <div>
-        <div [style.background-color]="r.color"></div>
-        <div>{{r.title}}</div>
-    </div>
-    <div>
-        <div class="min" title="minimum {{r.minValue}}">{{r.minValue}}</div>
-        <div>
-            <i class="far fa-long-arrow-left"></i>
-        </div>
-        <div class="max" title="maxmimum {{r.maxValue}}">{{r.maxValue}}</div>
-        <div class="remove-button" (click)="handleRemoveClick(r)"><i class="far fa-trash-alt"></i></div>
-    </div>
-</div>
-<ax-button icon="far fa-plus" type="success outline" (click)="handleAddClick()">{{ 'common.add-item' | trans  }}
-</ax-button>
-<ng-template #tplEdit>
-    <ax-page>
-        <ax-page-content>
-            <div class="container">
-                <ax-validation-form (onInit)="onFormInit($event)">
-                    <div class="row">
-                        <div class="col-12">
-                            <ax-label>{{ 'common.title' | trans  }}</ax-label>
-                            <ax-text-box [(value)]="editRow.title">
-                                <ax-validation>
-                                    <ax-validation-rule type="required"></ax-validation-rule>
-                                </ax-validation>
-                            </ax-text-box>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-6">
-                            <ax-label>{{ 'common.min-value' | trans  }}</ax-label>
-                            <ax-number-box [(value)]="editRow.minValue" [showSeparator]="showSeparator"
-                                [decimalNumber]="decimalNumber">
-                                <ax-validation>
-                                    <ax-validation-rule type="required"></ax-validation-rule>
-                                </ax-validation>
-                            </ax-number-box>
-                        </div>
-                        <div class="col-6">
-                            <ax-label>{{ 'common.max-value' | trans  }}</ax-label>
-                            <ax-number-box [(value)]="editRow.maxValue" [showSeparator]="showSeparator"
-                                [decimalNumber]="decimalNumber">
-                                <ax-validation>
-                                    <ax-validation-rule type="required"></ax-validation-rule>
-                                </ax-validation>
-                            </ax-number-box>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-12">
-                            <ax-label>{{ 'common.color' | trans  }}</ax-label>
-                            <ax-color-picker [(value)]="editRow.color">
-                                <ax-validation>
-                                    <ax-validation-rule type="required"></ax-validation-rule>
-                                </ax-validation>
-                            </ax-color-picker>
-                        </div>
-                    </div>
-                </ax-validation-form>
-            </div>
-            <div class="ax-mrg-md"></div>
-        </ax-page-content>
-    </ax-page>
-</ng-template>

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

@@ -1,68 +0,0 @@
-.range-item {
-    border: 1px solid var(--ax-gray-color);
-    margin-bottom: 5px;
-    display: flex;
-    padding: 5px;
-    border-radius: 5px;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-
-    .remove-button {
-        color: var(--ax-danger-color);
-        padding: var(--ax-size-sm);
-        display: flex;
-        justify-content: center;
-        cursor: pointer;
-
-        &:hover {
-            background-color: var(--ax-danger-trans-light-color);
-        }
-    }
-
-    div {
-        &:first-child {
-            display: flex;
-            align-items: center;
-
-            div {
-                &:first-child {
-                    width: 25px;
-                    height: 25px;
-                    border-radius: 3px;
-                }
-
-                &:last-child {
-                    margin-inline-start: 10px;
-                }
-            }
-        }
-
-        &:last-child {
-            display: flex;
-            align-items: center;
-
-            button {
-                background-color: transparent;
-                border: none;
-                cursor: pointer;
-
-                i {
-                    color: var(--ax-danger-color);
-                }
-            }
-
-            div {
-                min-width: 40px;
-
-                &.min {
-                    color: var(--ax-danger-color);
-                }
-
-                &.max {
-                    color: var(--ax-success-color);
-                }
-            }
-        }
-    }
-}