@acorex/components 6.5.27 → 6.5.29

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

@@ -1,193 +0,0 @@
-.column-item {
-    border: 1px solid var(--ax-gray-light-color);
-    margin-bottom: 5px;
-    display: flex;
-    padding: 5px;
-    border-radius: 5px;
-    justify-content: space-between;
-    font-weight: 500;
-    align-items: center;
-    .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: 100px;
-                    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);
-                }
-            }
-        }
-    }
-}
-
-.add-item {
-    border: 1px solid var(--ax-success-color);
-    background-color: transparent;
-    color: var(--ax-success-color);
-}
-
-table {
-    width: 100%;
-    margin-top: 1em;
-    thead {
-        th {
-            text-align: right;
-            padding: 0.4em;
-            border: 1px solid #00000029;
-            background-color: var(--ax-primary-trans-dark-color);
-        }
-    }
-    tbody {
-        tr {
-            td {
-                text-align: center;
-            }
-        }
-    }
-}
-
-.table {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    .thead {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .tr {
-            width: 100%;
-            display: flex;
-            border: 1px solid var(--ax-border-color);
-            background-color: var(--ax-primary-trans-light-color);
-            .th {
-                width: calc(100% / 7);
-                height: 100%;
-                display: flex;
-                justify-content: center;
-                flex-direction: column;
-                border-left: 1px solid var(--ax-border-color);
-                padding: .5em;
-                font-weight: bold;
-            }
-        }
-    }
-    .tbody {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        .tr {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            border: 1px solid var(--ax-border-color);
-            border-top: 0;
-            align-items: center;
-            justify-content: center;
-            .td {
-                width: calc(100% / 7);
-                height: 45px;
-                padding: 0 0.4em;
-                border-left: 1px solid var(--ax-border-color);
-                text-align: center;
-                align-items: center;
-                justify-content: center;
-                display: flex;
-                &:first-child {
-                    padding-right: 0 !important;
-                }
-                div {
-                    width: 12px;
-                    background-color: var(--ax-border-color);
-                    margin-left: .4em;
-                    height: 100%;
-                    cursor: move;
-                }
-                &:last-child {
-                    border-left: 0 !important;
-                }
-            }
-        }
-    }
-    .tr:first-child {
-        overflow: hidden;
-    }
-    .th:last-child {
-        border-left: 0 !important;
-    }
-}
-
-.drag-drop-table-item {
-    width: 100%;
-}
-
-.drag-drop-item-box {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    box-sizing: border-box;
-    background: white;
-    font-size: 0.875rem;
-    z-index: 700000 !important;
-}
-
-.cdk-drag-preview {
-    box-sizing: border-box;
-    border-radius: var(--ax-size-border-radius);
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-    opacity: 0;
-}
-
-.cdk-drag-animating {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder) {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}

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

@@ -1,124 +0,0 @@
-import { Component, OnInit, ViewChild, TemplateRef, ChangeDetectorRef } from '@angular/core';
-import { AXTranslator } from '@acorex/core';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { AXProperyEditorComponent } from '../../property-editor.class';
-import { AXPopupService } from '../../../popup/popup.service';
-import { AXDataSourceReadParams } from '../../../data-source/read-param';
-
-
-export interface AXTableColumnModel {
-  id: number;
-  index: number;
-  fieldName: string;
-  caption?: string;
-  fieldType?: string;
-  displayType?: string;
-  fillByUser?: boolean;
-  rowHeader?: boolean;
-}
-
-@Component({
-  templateUrl: './column.editor.html',
-  styleUrls: ['./column.editor.scss']
-})
-export class ColumnPropertyEditorComponent extends AXProperyEditorComponent<AXTableColumnModel[]> implements OnInit {
-  @ViewChild('tplEdit')
-  tplEdit: TemplateRef<any>;
-
-  columns: AXTableColumnModel[] = [];
-
-  index: number = 2;
-
-  constructor(protected cdr: ChangeDetectorRef, private popupService: AXPopupService) {
-    super(cdr);
-  }
-
-  columnTypeData: any[] = [
-    { id: 1, title: 'String' },
-    { id: 2, title: 'Number' },
-    { id: 3, title: 'Boolean' },
-    { id: 4, title: 'Data' },
-    { id: 5, title: 'Time' }
-  ];
-
-  ngOnInit(): void {
-    this.columns = this.value ? JSON.parse(JSON.stringify(this.value)) : [];
-  }
-
-  ngAfterViewInit() {
-    this.onRenderCompleted.emit();
-  }
-
-  drop(event: CdkDragDrop<string[]>) {
-    moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
-  }
-
-  handleAddColumn() {
-    this.columns.push({
-      id: Math.floor(1000*Math.random()*9000),
-      index: this.index,
-      fieldName: 'ستون' + this.index,
-      caption: 'ستون' + this.index,
-      fieldType: '',
-      displayType: '',
-      fillByUser: false,
-      rowHeader: false
-    });
-    this.index++;
-  }
-
-  handleAddClick() {
-    if (this.columns.length === 0) {
-      this.columns.push({
-        id: Math.floor(1000*Math.random()*9000),
-        index: 1,
-        fieldName: 'ستون 1',
-        caption: 'ستون 1',
-        fieldType: '',
-        displayType: '',
-        fillByUser: false,
-        rowHeader: false
-      });
-    }
-    const popup = this.popupService.open(this.tplEdit, {
-      title: 'ستون',
-      size: 'lg',
-      footerButtons: [
-        {
-          name: 'confirm',
-          text: AXTranslator.get('common.confirm'),
-          style: 'success',
-          submitBehavior: true,
-          cancelBehavior: false,
-          onClick: () => {
-            super.handleValueChange(this.columns);
-            this.cdr.detectChanges();
-            this.index++;
-            popup.close();
-          }
-        },
-        {
-          name: 'cancel',
-          text: AXTranslator.get('common.cancel'),
-          style: 'danger blank',
-          submitBehavior: false,
-          cancelBehavior: true,
-          onClick: () => {
-            this.cdr.detectChanges();
-            popup.close();
-          }
-        }
-      ]
-    });
-  }
-
-  handleRemoveClick(item: AXTableColumnModel) {
-    this.columns = this.columns.filter((c) => c.id !== item.id);
-    super.handleValueChange(this.columns);
-  }
-
-  handleDataReceived = (e: AXDataSourceReadParams) => {
-    return Promise.resolve(this.columnTypeData);
-  }
-
-}

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

@@ -1,28 +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 { AXCheckBoxModule } from './../../../checkbox/checkbox.module';
-import { ColumnPropertyEditorComponent } from './column.editor';
-import { AXSelectBoxModule } from '../../../selectbox/selectbox.module';
-import { AXDataSourceModule } from '../../../data-source/datasource.module';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-
-
-
-
-@NgModule({
-    declarations: [ColumnPropertyEditorComponent],
-    imports: [CommonModule, FormsModule, AXTextBoxModule, AXNumberBoxModule, AXColorPickerModule, AXLabelModule, AXPageModule, AXButtonModule, AXCheckBoxModule, AXSelectBoxModule, AXDataSourceModule, DragDropModule],
-    exports: [ColumnPropertyEditorComponent],
-    providers: []
-})
-export class AXColumnPropertyEditorModule {
-    constructor() {
-    }
-}

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

@@ -1,80 +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.display }}</div>
-    </div>
-    <div [attr.title]="getTitle(r.operator)">
-        <div class="value">{{r.value}}</div>
-        <div>
-            <i class="far {{getIcon(r.operator)}}"></i>
-        </div>
-        <div class="value-text">{{'common.value' | trans}}</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.condition' | trans  }}</ax-label>
-                            <ax-select-box [(selectedValues)]="editRow.operator" [allowSearch]="false"
-                                [allowNull]="false" [items]="operators">
-                                <ax-validation>
-                                    <ax-validation-rule type="required"></ax-validation-rule>
-                                </ax-validation>
-                            </ax-select-box>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-12">
-                            <ax-label>{{ 'common.value' | trans  }}</ax-label>
-                            <div [ngSwitch]="dataType">
-                                <ax-text-box *ngSwitchCase="'string'" [(value)]="editRow.value">
-                                    <ax-validation>
-                                        <ax-validation-rule type="required"></ax-validation-rule>
-                                    </ax-validation>
-                                </ax-text-box>
-                                <ax-select-box *ngSwitchCase="'boolean'" [(selectedValues)]="editRow.value"
-                                    [allowSearch]="false" [allowNull]="false" [items]="booleanItems">
-                                    <ax-validation>
-                                        <ax-validation-rule type="required"></ax-validation-rule>
-                                    </ax-validation>
-                                </ax-select-box>
-                                <ax-number-box *ngSwitchDefault [(value)]="editRow.value"
-                                    [showSeparator]="showSeparator" [decimalNumber]="decimalNumber">
-                                    <ax-validation>
-                                        <ax-validation-rule type="required"></ax-validation-rule>
-                                    </ax-validation>
-                                </ax-number-box>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-12">
-                            <ax-label>{{ 'conditional-color-property-editor.replaced-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>
-                    <div class="row">
-                        <div class="col-12">
-                            <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans  }}</ax-label>
-                            <ax-text-box [(value)]="editRow.display">
-                            </ax-text-box>
-                        </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/conditional-color-editor/conditional-color.editor.scss

@@ -1,71 +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;
-
-                &.value-text {
-                    color: var(--ax-success-color);
-                }
-
-                &.value {
-                    color: var(--ax-danger-color);
-
-                }
-            }
-
-        }
-    }
-}