@acorex/components 6.5.28 → 6.5.30

package/src/lib/popup/popup.component.scss

@@ -1,167 +0,0 @@
-.popup-wrapper {
-  .popup-container {
-    opacity: 1;
-    background: var(--ax-white-color);
-    display: flex;
-    flex-direction: column;
-    border-radius: var(--ax-size-border-radius);
-    -webkit-border-radius: var(--ax-size-border-radius);
-    -moz-border-radius: var(--ax-size-border-radius);
-    overflow: hidden;
-    max-height: calc(var(--ax-overlay-full-width) * var(--ax-vh));
-    min-height: fit-content;
-
-    &.has-border {
-      border: 1px solid var(--ax-border-color);
-      box-shadow: 1px 1px 10px var(--ax-border-color);
-    }
-
-
-    &:focus {
-      box-shadow: 0 0 0 0.2rem rgba(var(--outline-color), 0.8);
-      outline-color: transparent;
-    }
-
-    &.full {
-      width: 100vw;
-      max-height: calc(100 * var(--ax-vh));
-      height: calc(100 * var(--ax-vh));
-    }
-
-    .ax-popup-header {
-      background: var(--ax-gray-light-color);
-      color: var(--ax-gray-fore-color);
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 1rem;
-      font-weight: 500;
-      padding: 0.5rem 0.7rem;
-
-      .ax-buttons-containers {
-        display: flex;
-        flex-direction: row;
-
-        .ax-popup-header-button {
-          border-radius: 50%;
-          font-size: 1.1rem;
-          display: flex;
-          -webkit-box-pack: center;
-          justify-content: center;
-          -webkit-box-align: center;
-          align-items: center;
-          cursor: pointer;
-          margin-inline-start: 0.5em;
-        }
-      }
-    }
-
-    .ax-popup-body {
-      // max-height: 90vh;
-      // min-height: 100px;
-      position: relative;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-
-      // @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-      //   min-height: 93vh !important;
-      // }
-
-      .ax-popup-body-container {
-        overflow: auto;
-      }
-
-      .ax-footer {
-        background: var(--ax-white-color);
-        border-top: 1px solid;
-        border-color: var(--ax-border-color);
-        margin-block-start: 0.5em;
-        padding: 0.4em 0.5em;
-        display: flex;
-        align-items: center;
-
-        .button {
-          min-width: 100px;
-          margin-inline-end: 0.5em;
-        }
-      }
-
-      .ax-popup-footer {
-        background-color: var(--ax-white-color);
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: 0.5em;
-        border-top: 1px solid var(--ax-border-color);
-        margin-block-start: 0.5em;
-
-        .ax-buttons-containers {
-          flex: 1;
-          max-width: fit-content;
-          max-width: -moz-fit-content;
-
-          .button {
-            margin-inline-end: 0.5em;
-            min-width: 80px;
-          }
-        }
-      }
-    }
-
-    @media all and (min-width: 1280px) {
-      &.sm {
-        width: 420px !important;
-      }
-
-      &.md {
-        width: 680px !important;
-      }
-
-      &.lg {
-        width: 1024px !important;
-      }
-    }
-
-    @media all and (min-width: 1024px) and (max-width: 1279px) {
-      &.sm {
-        width: 100vw;
-        max-height: 100vh;
-      }
-
-      &.md {
-        width: 500px !important;
-      }
-
-      &.lg {
-        width: 900px !important;
-      }
-    }
-
-    @media all and (min-width: 768px) and (max-width: 1023px) {
-      &.sm {
-        width: 100vw;
-        max-height: 100vh;
-      }
-
-      &.md {
-        width: 500px !important;
-      }
-
-      &.lg {
-        width: 700px !important;
-      }
-    }
-
-    @media (max-width: 599px) {
-
-      &.sm,
-      &.md,
-      &.lg {
-        width: 93vw !important;
-        height: calc(var(--ax-overlay-full-width) * var(--ax-vh)) !important;
-      }
-    }
-  }
-}

package/src/lib/popup/popup.component.ts

@@ -1,184 +0,0 @@
-import {
-  Component,
-  Input,
-  EventEmitter,
-  ViewChild,
-  ViewContainerRef,
-  OnInit,
-  ComponentFactoryResolver,
-  ViewEncapsulation,
-  HostListener,
-  ElementRef,
-  ComponentRef,
-  OnDestroy,
-  Output,
-  ChangeDetectorRef,
-  ChangeDetectionStrategy,
-  SimpleChanges,
-  TemplateRef
-} from '@angular/core';
-import { AXBaseComponent } from '../base/element.class';
-import { AXPageCloseEvent, TAB_META_KEY } from '../base/base-page.class';
-import { AXButtonItem, AXPlatform, AXRenderService } from '@acorex/core';
-import { AXLoadingService } from '../loading/loading.service';
-import { Subscription } from 'rxjs';
-
-@Component({
-  templateUrl: './popup.component.html',
-  styleUrls: ['./popup.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class AXPopupComponent extends AXBaseComponent implements OnDestroy {
-
-  isLoading: boolean = true;
-  _loadingId: number;
-  private onFooterButtonsSubscription: Subscription;
-
-  constructor(
-    private resolver: ComponentFactoryResolver,
-    private ref: ElementRef<HTMLDivElement>,
-    private rendererService: AXRenderService,
-    private loadingService: AXLoadingService,
-    private cdr: ChangeDetectorRef,
-    private _platform: AXPlatform
-
-  ) {
-    super();
-  }
-
-  ngAfterViewInit() {
-    this._loadingId = this.loadingService.show(this.ref.nativeElement.querySelector('.ax-popup-body-container'));
-    if (typeof this.content === 'string') {
-      this.rendererService.findLoadedComponentByRoute(this.content, 20).then(route => {
-        setTimeout(() => {
-          this.loadComponent(route?.component);
-        }, 300);
-      });
-    }
-    else if (this.content instanceof TemplateRef) {
-      const view = this.content.createEmbeddedView({ $implicit: this.data });
-      this.popupBody.insert(view);
-      this.isLoading = false;
-      this.loadingService.hide(this._loadingId);
-    }
-    else if (typeof this.content === 'function') {
-      setTimeout(() => {
-        this.loadComponent(this.content);
-      });
-    }
-  }
-
-
-  private loadComponent(component: any) {
-
-    if (component == null) {
-      //TODO: 404 page component
-      console.error(`Invalid page Component! ${this.content}`);
-      return;
-    }
-    ///
-    try {
-      const factory = this.resolver.resolveComponentFactory(component);
-      this.comRef = this.popupBody.createComponent(factory);
-      const com = this.comRef.instance as any;
-      if (com.onClosed) {
-        com.onClosed.subscribe((e: AXPageCloseEvent) => {
-          this.onClosed.emit(e);
-        });
-      }
-      this[TAB_META_KEY].component = com;
-      Object.assign(this[TAB_META_KEY].component, this.data);
-      //
-      if (com.getFooterButtons) {
-        this.footerButtons = com.getFooterButtons();
-      }
-      if (com.onFooterButtonsChanged) {
-        this.onFooterButtonsSubscription = (com.onFooterButtonsChanged as EventEmitter<AXButtonItem[]>).subscribe(c => {
-          this.footerButtons = c;
-          this.cdr.detectChanges();
-        }) as any;
-      }
-      //
-      this.focus();
-      this.isLoading = false;
-      this.loadingService.hide(this._loadingId);
-      setTimeout(() => {
-        this.comRef.changeDetectorRef.detectChanges();
-      }, 100);
-      this.cdr.detectChanges();
-    } catch (error) {
-      //TODO: 404 page component
-      console.error(error);
-    }
-  }
-
-  @ViewChild('popupBody', { read: ViewContainerRef, static: true })
-  private popupBody: ViewContainerRef;
-
-  @HostListener('keydown.escape', ['$event'])
-  onKeydownHandler(event: KeyboardEvent) {
-    if (this.closable) {
-      this.onCloseClick();
-    }
-  }
-
-  private comRef: ComponentRef<any>;
-
-  title: string;
-
-  onClosed: EventEmitter<AXPageCloseEvent> = new EventEmitter<AXPageCloseEvent>();
-
-  size: 'sm' | 'md' | 'lg' | 'full' = 'sm';
-  modal: boolean = true;
-
-  data: any = {};
-
-  maximizable: boolean = false;
-
-  closable: boolean = true;
-
-  content: any;
-
-  headerButtons: AXButtonItem[] = [];
-
-  footerButtons: AXButtonItem[] = [];
-
-  onCloseClick() {
-    this.onClosed.emit({
-      component: this[TAB_META_KEY].component,
-      htmlElement: this.ref.nativeElement,
-    });
-    this.cdr.detectChanges();
-  }
-
-  ngOnDestroy() {
-    if (this.comRef) {
-      this.comRef.destroy();
-    }
-    if (this.onFooterButtonsSubscription) {
-      this.onFooterButtonsSubscription.unsubscribe();
-    }
-    this.cdr.detectChanges();
-    this.loadingService.hide(this._loadingId);
-  }
-
-  focus() {
-    setTimeout(() => this.ref.nativeElement.focus());
-  }
-
-  onFullScreen() { }
-
-  handleFooterButtonClick(e: AXButtonItem) {
-    if (e.onClick) {
-      e.onClick();
-    }
-    else if (this[TAB_META_KEY].component.onFooterButtonClick) {
-      this[TAB_META_KEY].component.onFooterButtonClick({
-        component: this[TAB_META_KEY].component,
-        name: e.name,
-        data: e,
-        htmlElement: this.ref.nativeElement,
-      });
-    }
-  }
-}

package/src/lib/popup/popup.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXPopupComponent } from './popup.component';
-import { AXPopupService } from './popup.service';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { A11yModule } from '@angular/cdk/a11y';
-import { AXButtonModule } from '../button/button.module';
-import { AXTranslatorModule } from '@acorex/core';
-import { AXLoadingModule } from '../loading/loading.module';
-@NgModule({
-    declarations: [AXPopupComponent],
-    imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXTranslatorModule, AXLoadingModule],
-    exports: [AXPopupComponent],
-    providers: [AXPopupService]
-})
-export class AXPopupModule { }

package/src/lib/popup/popup.service.ts

@@ -1,103 +0,0 @@
-import { Injectable } from '@angular/core';
-import { AXPopupComponent } from './popup.component';
-import { AXButtonItem } from '@acorex/core';
-import { TAB_META_KEY, AXPageClosedPromise, AXPageCloseEvent } from '../base/base-page.class';
-import { AXOverlayService, AXOverlayViewRef } from '../popover/overlay.service';
-import { options } from '@amcharts/amcharts4/core';
-
-
-@Injectable({ providedIn: 'root' })
-export class AXPopupService {
-  private stack: Array<AXPopupComponent> = [];
-
-  constructor(private overlayService: AXOverlayService) { }
-
-
-  open(content: any, title: string): AXPageClosedPromise;
-  open(
-    content: any,
-    options?: {
-      title: string;
-      closable?: boolean;
-      maximizable?: boolean;
-      size?: 'sm' | 'md' | 'lg' | 'full';
-      data?: any;
-      footerButtons?: AXButtonItem[],
-      modal?: boolean
-    }
-  ): AXPageClosedPromise;
-
-  open(arg1, arg2): AXPageClosedPromise {
-    const options: any = {
-      closable: true,
-      size: 'md',
-      maximizable: false,
-      footerButtons: [],
-      modal: true,
-    };
-
-    if (typeof arg2 === 'string') {
-      options.title = arg2;
-    } else {
-      Object.assign(options, arg2);
-    }
-    const com = this.overlayService.show(AXPopupComponent, options, {
-      transparentBackdrop: false,
-      hasBackdrop: options.modal,
-      closeOnClickOutside: false,
-      scroll: 'block'
-    });
-    const popup = com.instance as AXPopupComponent;
-    popup.content = arg1;
-    popup[TAB_META_KEY] = {};
-    if (options.size) {
-      popup.size = options.size;
-    }
-    if (options.footerButtons) {
-      popup.footerButtons = options.footerButtons;
-    }
-    this.stack.push(popup);
-    popup.onClosed.subscribe(c => {
-      this.closePopup(popup, com, c);
-    });
-    const promise = new AXPageClosedPromise((resolve) => {
-      popup[TAB_META_KEY].close = (e) => {
-        if (resolve) {
-          resolve(e);
-        }
-      };
-    });
-    promise['closeMethod'] = () => { popup.onCloseClick(); };
-    return promise;
-  }
-
-
-  private closePopup(popup: AXPopupComponent, com: AXOverlayViewRef, result: AXPageCloseEvent) {
-    const closeFunc = (e) => {
-      com.dispose();
-      this.stack.pop();
-      delete e.cancel;
-      popup[TAB_META_KEY].close(e);
-      if (this.stack.length) { this.stack.reverse()[0].focus(); }
-    };
-    const e = { cancel: false };
-    const closingFunc = popup[TAB_META_KEY]?.component?.onClosing;
-    if (closingFunc) {
-      const res = closingFunc(e);
-      if (res instanceof Promise) {
-        res.then(() => {
-          if (e == null || e.cancel !== true) {
-            closeFunc(result);
-          }
-        });
-      }
-      else {
-        if (e == null || e.cancel !== true) {
-          closeFunc(result);
-        }
-      }
-    } else {
-      closeFunc(result);
-    }
-  }
-}

package/src/lib/progress-bar/progress-bar.component.html

@@ -1,5 +0,0 @@
-<div class="ax progress">
-  <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0"
-    aria-valuemax="100" [ngStyle]="{'width.%': progress}">
-  </div>
-</div>

package/src/lib/progress-bar/progress-bar.component.ts

@@ -1,10 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { AXBaseComponent } from '../base/element.class';
-
-@Component({
-  selector: 'ax-progress-bar',
-  templateUrl: './progress-bar.component.html'
-})
-export class AXProgressBarComponent extends AXBaseComponent {
-  @Input() progress: number = 0;
-}

package/src/lib/progress-bar/progress-bar.module.ts

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXProgressBarComponent } from './progress-bar.component';
-
-@NgModule({
-    declarations: [AXProgressBarComponent],
-    imports: [CommonModule],
-    exports: [AXProgressBarComponent],
-    providers: []
-})
-export class AXProgressBarModule {}

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

@@ -1,44 +0,0 @@
-import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
-import { AXCheckBoxComponent } from '../../../checkbox/checkbox.component';
-import { AXValidation } from '../../../validation/validation.component';
-import { AXProperyEditorComponent } from '../../property-editor.class';
-
-@Component({
-    template: `
-    <ax-check-box 
-        [disabled]="disabled"
-        [label]="label" 
-        [size]="size"
-        [indeterminate]="indeterminate"
-        [readonly]="readonly"
-        [value]="value"
-        (onValueChanged)="handleValueChange($event)"
-    >
-        <ax-validation [rules]="validation?.rules">
-        </ax-validation>
-    </ax-check-box>
-    `,
-})
-export class AXCheckBoxPropertyEditorComponent extends AXProperyEditorComponent<any>  {
-    constructor(protected cdr: ChangeDetectorRef) {
-        super(cdr)
-    }
-    @ViewChild(AXCheckBoxComponent, { static: true })
-    private checkBox: AXCheckBoxComponent;
-
-    disabled: boolean = false;
-    indeterminate: boolean = false;
-    label: string;
-    readonly: boolean = false;
-    size: 'sm' | 'md' | 'lg' = 'md';
-    validation: AXValidation;
-
-    handleValueChange(e: any) {
-        super.handleValueChange(e.value);
-    }
-
-    ngAfterViewInit() {
-        this.registerForValidationForm(this.checkBox);
-        this.onRenderCompleted.emit();
-    }
-}

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

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXCheckBoxModule } from '../../../checkbox/checkbox.module';
-import { AXValidationModule } from '../../../validation/validation.module';
-import { FormsModule } from '@angular/forms';
-import { AXCheckBoxPropertyEditorComponent } from './check-editor';
-
-@NgModule({
-    declarations: [AXCheckBoxPropertyEditorComponent],
-    imports: [CommonModule, AXCheckBoxModule, FormsModule, AXValidationModule],
-    exports: [AXCheckBoxPropertyEditorComponent],
-    providers: [],
-})
-export class AXCheckPropertyEditorModule { }

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

@@ -1,30 +0,0 @@
-import { Component, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
-import { AXColorPickerComponent } from '../../../color-picker/color-picker.component';
-import { AXValidation } from '../../../validation/validation.component';
-import { AXProperyEditorComponent } from '../../property-editor.class';
-
-@Component({
-    template: `
-        <ax-color-picker  [(value)]="value">
-            <ax-validation [rules]="validation?.rules">
-            </ax-validation>
-        </ax-color-picker>
-    `,
-})
-export class AXColorPropertyEditorComponent extends AXProperyEditorComponent<string>  {
-
-    validation: AXValidation;
-
-    @ViewChild(AXColorPickerComponent)
-    private textBox: AXColorPickerComponent;
-
-    constructor(protected cdr: ChangeDetectorRef) {
-        super(cdr);
-    }
-
-    ngAfterViewInit() {
-        this.registerForValidationForm(this.textBox);
-        this.onRenderCompleted.emit();
-    }
-
-}

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

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

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

@@ -1,75 +0,0 @@
-<div *ngFor="let c of columns" class="column-item">
-    <div>
-        <div>{{c.fieldName}} - {{c.caption}}</div>
-    </div>
-    <div>
-        <div>
-        </div>
-        <div class="remove-button" (click)="handleRemoveClick(c)"><i class="far fa-trash-alt"></i></div>
-    </div>
-</div>
-<ax-button icon="far fa-plus" size="sm" type="success outline" (click)="handleAddClick()">ستون ها</ax-button>
-<ng-template #tplEdit>
-    <ax-page>
-        <ax-page-content>
-            <div class="container">
-                <div class="ax-mrg-md"></div>
-                <div class="table">
-                    <div class="thead">
-                        <div class="tr">
-                            <div class="th">
-                                <div style="width: 5px;"></div>
-                                نام
-                            </div>
-                            <div class="th">عنوان</div>
-                            <div class="th">نوع</div>
-                            <div class="th">نوع نمایش</div>
-                            <div class="th">به عنوان هدر</div>
-                            <div class="th">تکمیل توسط کاربر</div>
-                            <div class="th">عملیات</div>
-                        </div>
-                    </div>
-                    <div class="tbody">
-                        <div cdkDropList class="drag-drop-table-item" (cdkDropListDropped)="drop($event)">
-                            <div class="tr  drag-drop-item-box" *ngFor="let c of columns" cdkDrag>
-                                <div class="td">
-                                    <div>
-                                    </div>
-                                    <ax-text-box size="sm" [(value)]="c.fieldName" [allowClear]="true"></ax-text-box>
-                                </div>
-                                <div class="td">
-                                    <ax-text-box size="sm" [(value)]="c.caption" [allowClear]="true"></ax-text-box>
-                                </div>
-                                <div class="td">
-                                    <ax-select-box size="sm" textField="title" valueField="id">
-                                        <ax-data-source [provideData]="handleDataReceived"></ax-data-source>
-                                    </ax-select-box>
-                                </div>
-                                <div class="td">
-                                    <ax-text-box size="sm" [(value)]="c.displayType"></ax-text-box>
-                                </div>
-                                <div class="td">
-                                    <ax-check-box size="md" [(value)]="c.rowHeader"></ax-check-box>
-                                </div>
-                                <div class="td">
-                                    <ax-check-box size="md" [(value)]="c.fillByUser"></ax-check-box>
-                                </div>
-                                <div class="td">
-                                    <ax-button type="danger blank" icon="far fa-trash-alt" (click)="handleRemoveClick(c)">
-                                    </ax-button>
-                                    <ax-button type="primary blank" icon="far fa-ellipsis-v">
-                                    </ax-button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="ax-mrg-md"></div>
-            <div style="display: flex; justify-content: flex-end;margin-left: 15px;">
-                <ax-button icon="far fa-plus" size="sm" type="primary" (click)="handleAddColumn()">افزودن ستون جدید
-                </ax-button>
-            </div>
-        </ax-page-content>
-    </ax-page>
-</ng-template>