@acorex/components 5.1.2 → 5.1.6

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

@@ -0,0 +1,173 @@
+.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: 95vh;
+    height: fit-content;
+    height: -moz-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: 95vw;
+    }
+
+    .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 all and (min-width: 425px) and (max-width: 767px) {
+      &.sm {
+        width: 100vw;
+        max-height: 100vh;
+      }
+
+      &.md,
+      &.lg {
+        width: 460px !important;
+      }
+    }
+
+    @media all and (min-width: 0px) and (max-width: 424px) {
+      &.sm,
+      &.md,
+      &.lg {
+        width: 100vw;
+        max-height: 100vh;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,182 @@
+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, 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,
+  ) {
+    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

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

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

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

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

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

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

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

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

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

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