@acorex/components 5.1.2 → 5.1.6

package/src/lib/page/page.component.ts

@@ -0,0 +1,43 @@
+import { Component, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { AXLoadingService } from '../loading/loading.service';
+
+@Component({
+  selector: 'ax-page',
+  template: `
+  <div class="page-content-wrap">
+    <div class="ax-page-toolbar">
+      <ng-content select="ax-toolbar"></ng-content>
+    </div>
+    <ng-content select="ax-page-content"></ng-content>
+    <ng-content select="ax-page-footer"></ng-content>
+  </div>
+`
+})
+export class AXPageComponent {
+  constructor(
+    private el: ElementRef<HTMLElement>,
+    private loadingService: AXLoadingService,
+    private cdr: ChangeDetectorRef,
+  ) { }
+
+
+  ngAfterViewInit(): void {
+  }
+
+  private _loadingId: number;
+
+  private _isLoading: boolean = false;
+  public get isLoading(): boolean {
+    return this._isLoading;
+  }
+  public set isLoading(v: boolean) {
+    this._isLoading = v;
+    if (this._loadingId && !v) {
+      this.loadingService.hide(this._loadingId);
+      this._loadingId = null;
+    }
+    if (v) {
+      this._loadingId = this.loadingService.show(this.el.nativeElement);
+    }
+  }
+}

package/src/lib/page/page.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXPageContentComponent } from './content.component';
+import { AXPageFooterComponent } from './footer.component';
+import { AXPageComponent } from './page.component';
+import { AXLoadingModule } from '../loading/loading.module';
+
+@NgModule({
+    declarations: [AXPageContentComponent, AXPageFooterComponent, AXPageComponent],
+    imports: [CommonModule, AXLoadingModule],
+    exports: [AXPageContentComponent, AXPageFooterComponent, AXPageComponent],
+    providers: [],
+})
+export class AXPageModule { }

package/src/lib/panel-box/panel-box.component.html

@@ -0,0 +1,19 @@
+<div class="ax-panel-box ax {{size}}">
+  <ng-container *ngIf="headerTemplate; else elseTemplate">
+    <header [class.toggle]="allowCollapse">
+      <ng-container *ngTemplateOutlet="headerTemplate">
+      </ng-container>
+    </header>
+  </ng-container>
+  <ng-template #elseTemplate>
+    <header class="ax panel {{type}}" [class.toggle]="allowCollapse" (click)="toggle()">
+      <div [innerHTML]="caption"></div>
+      <div *ngIf="allowCollapse">
+        <i [ngClass]="{ 'far fa-minus-square' : !collapsed ,'fas fa-plus-square' : collapsed }"></i>
+      </div>
+    </header>
+  </ng-template>
+  <div class="content" [@visibilityChanged]="collapsed ? 'hidden' : 'shown'">
+    <ng-content></ng-content>
+  </div>
+</div>

package/src/lib/panel-box/panel-box.component.scss

@@ -0,0 +1,25 @@
+.ax-panel-box {
+  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  border-radius: var(--ax-size-border-radius);
+  overflow: hidden;
+  font-family: inherit;
+  font-size: inherit;
+  position: relative;
+  header {
+      display: flex;
+      flex: 1;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid var(--ax-border-color);
+      padding: 0.8em;
+  }
+
+  .content {
+    padding: 0.8em;
+    overflow: hidden;
+  }
+
+  .toggle {
+    cursor: pointer;
+  }
+}

package/src/lib/panel-box/panel-box.component.ts

@@ -0,0 +1,87 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ContentChild,
+  TemplateRef,
+} from "@angular/core";
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition,
+} from "@angular/animations";
+import { AXBaseSizableComponent, AXElementSize } from "../base/element.class";
+
+@Component({
+  selector: "ax-panel-box",
+  templateUrl: "./panel-box.component.html",
+  styleUrls: ["./panel-box.component.scss"],
+  animations: [
+    trigger("visibilityChanged", [
+      state(
+        "shown",
+        style({
+          height: "*",
+          opacity: 1,
+        })
+      ),
+      state(
+        "hidden",
+        style({
+          height: "0px",
+          opacity: 0,
+          padding: 0,
+        })
+      ),
+      transition("Void => *", animate("0ms")),
+      transition("shown => hidden", animate("200ms")),
+      transition("hidden => shown", animate("200ms")),
+    ]),
+  ],
+})
+export class AXPanelBoxComponent implements AXBaseSizableComponent {
+  @ContentChild("header", { static: true })
+  headerTemplate: TemplateRef<any>;
+
+  @Input() size: AXElementSize = "md";
+
+  @Input() type: string = "";
+
+  // @Input()
+  // caption: string = 'Caption';
+
+  private _caption: string = "caption";
+  @Input()
+  get caption(): string {
+    return this._caption;
+  }
+  set caption(val: string) {
+    this._caption = val === "" ? "caption" : val;
+  }
+
+  @Output()
+  collapsedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+  private _collapsed: boolean = false;
+
+  @Input()
+  get collapsed(): boolean {
+    return this._collapsed;
+  }
+  set collapsed(val: boolean) {
+    if (val !== this._collapsed) {
+      this._collapsed = val;
+      this.collapsedChange.emit(this._collapsed);
+    }
+  }
+
+  @Input() allowCollapse: boolean = true;
+
+  toggle() {
+    if (this.allowCollapse) {
+      this.collapsed = !this.collapsed;
+    }
+  }
+}

package/src/lib/panel-box/panel-box.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXPanelBoxComponent } from './panel-box.component';
+@NgModule({
+  declarations: [AXPanelBoxComponent],
+  imports: [CommonModule],
+  exports: [AXPanelBoxComponent],
+  providers: []
+})
+export class AXPanelBoxModule {}

package/src/lib/password-box/password-box.component.html

@@ -0,0 +1,22 @@
+<div class="ax form-item" [class.disabled]="disabled" [attr.id]="uid">
+    <div class="ax items-wrapper">
+        <ng-content select="[start]">
+        </ng-content>
+    </div>
+    <div class="content" #content>
+        <div class="ax input form-control {{size}}" [class.disabled]="disabled" [class.readonly]="readonly" [class.icon]="icon">
+            <input [autocomplete]="autocomplete" [name]="name" #input [type]="type" class="ax {{size}}" value="{{value}}" placeholder="{{placeholder}}"
+                [readonly]="readonly" [disabled]="disabled"
+                [ngClass]="setTextAlign()" [class.clear]="value && allowClear">
+            <i class="{{icon}}" *ngIf="icon"></i>
+        </div>
+    </div>
+    <div class="ax items-wrapper">
+        <ax-button *ngIf="value && allowClear" icon="fas fa-times" type="danger blank" (click)="clear()"  [tabIndex]="-1"></ax-button>
+        <ax-button [disabled]="disabled" [icon]="eyeIcon" type="light blank" size="{{size}}" (click)="handleShowPassword()"  [tabIndex]="-1">
+            <!-- <i class="" [ngClass]="{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}"></i> -->
+        </ax-button>
+        <ng-content select="[end]">
+        </ng-content>
+    </div>
+</div>

package/src/lib/password-box/password-box.component.ts

@@ -0,0 +1,30 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core';
+import { AXBaseTextComponent, AXValidatableComponent } from '../base/element.class';
+
+@Component({
+  selector: 'ax-password-box',
+  templateUrl: './password-box.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style:'width: 100%' },
+  providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent }]
+})
+export class AXPasswordBoxComponent extends AXBaseTextComponent {
+  constructor(protected cdr: ChangeDetectorRef, ref: ElementRef) {
+    super(cdr, ref);
+  }
+
+  type: 'text' | 'password' = 'password';
+  eyeIcon: string = 'far fa-eye';
+
+  handleShowPassword() {
+    this.eyeIcon = 'far fa-eye-slash';
+    if (this.type === 'password') {
+      this.type = 'text';
+      this.eyeIcon = 'far fa-eye-slash';
+    } else {
+      this.type = 'password';
+      this.eyeIcon = 'far fa-eye';
+    }
+  }
+}

package/src/lib/password-box/password-box.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXPasswordBoxComponent } from './password-box.component';
+import { AXButtonModule } from '../button/button.module';
+import { AXFormGroupModule } from '../form-group/form-group.module';
+
+const COMPONENT = [AXPasswordBoxComponent];
+const MODULES = [CommonModule, AXButtonModule,AXFormGroupModule];
+
+@NgModule({
+  declarations: [...COMPONENT],
+  imports: [...MODULES],
+  exports: [...COMPONENT],
+  providers: []
+})
+export class AXPasswordBoxModule {}

package/src/lib/popover/custom-cdk-overlay.service.ts

@@ -0,0 +1,82 @@
+import {
+    Overlay,
+    OverlayKeyboardDispatcher,
+    OverlayPositionBuilder,
+    ScrollStrategyOptions,
+    OverlayContainer,
+    OverlayRef,
+    OverlayConfig,
+    OverlayOutsideClickDispatcher
+} from '@angular/cdk/overlay';
+import {
+    ComponentFactoryResolver,
+    Inject,
+    Injector,
+    NgZone,
+    Renderer2,
+    RendererFactory2,
+    Injectable
+} from '@angular/core';
+import { Directionality } from '@angular/cdk/bidi';
+import { DOCUMENT, Location } from '@angular/common';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class DynamicOverlayContainer extends OverlayContainer {
+    public setContainerElement(containerElement: HTMLElement): void {
+        this._containerElement = containerElement;
+    }
+}
+
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class DynamicOverlay extends Overlay {
+    private readonly _dynamicOverlayContainer: DynamicOverlayContainer;
+    private renderer: Renderer2;
+
+    constructor(
+        scrollStrategies: ScrollStrategyOptions,
+        _overlayContainer: DynamicOverlayContainer,
+        _componentFactoryResolver: ComponentFactoryResolver,
+        _positionBuilder: OverlayPositionBuilder,
+        _keyboardDispatcher: OverlayKeyboardDispatcher,
+        _injector: Injector,
+        _ngZone: NgZone,
+        @Inject(DOCUMENT) _document: any,
+        _directionality: Directionality,
+        rendererFactory: RendererFactory2,
+        _location: Location,
+        _outsideClickDispatcher: OverlayOutsideClickDispatcher
+    ) {
+        super(
+            scrollStrategies,
+            _overlayContainer,
+            _componentFactoryResolver,
+            _positionBuilder,
+            _keyboardDispatcher,
+            _injector,
+            _ngZone,
+            _document,
+            _directionality,
+            _location,
+            _outsideClickDispatcher
+        );
+        this.renderer = rendererFactory.createRenderer(null, null);
+
+        this._dynamicOverlayContainer = _overlayContainer;
+    }
+
+    private setContainerElement(containerElement: HTMLElement): void {
+        this.renderer.setStyle(containerElement, 'transform', 'translateZ(0)');
+        this._dynamicOverlayContainer.setContainerElement(containerElement);
+    }
+
+    public createOn(containerElement: HTMLElement, config?: OverlayConfig): OverlayRef {
+        this.setContainerElement(containerElement);
+        return super.create(config);
+    }
+}

package/src/lib/popover/overlay.service.ts

@@ -0,0 +1,110 @@
+import { Injectable, ApplicationRef, ViewContainerRef, TemplateRef, EventEmitter } from '@angular/core';
+import { Overlay, PositionStrategy, ScrollStrategy } from '@angular/cdk/overlay';
+import { TemplatePortal, Portal, ComponentPortal } from '@angular/cdk/portal';
+import { AXConnectedPosition } from '@acorex/core';
+import { merge } from 'rxjs';
+import { DynamicOverlay } from './custom-cdk-overlay.service';
+
+export interface AXOverlayViewRef {
+    instance: any;
+    dispose: () => void;
+}
+
+export interface AXOverlayConfigs {
+    position?: AXConnectedPosition | AXConnectedPosition[];
+    hasBackdrop?: boolean;
+    transparentBackdrop?: boolean;
+    closeOnClickOutside?: boolean;
+    targetElement?: HTMLElement;
+    containerElement?: HTMLElement;
+    onBackdropClick?: () => void;
+    panelClass?: string[] | string;
+    backdropClass?: string[] | string;
+    scroll?: 'auto' | 'block';
+}
+
+@Injectable({ providedIn: 'root' })
+export class AXOverlayService {
+    constructor(
+        private overlayService: DynamicOverlay,
+        private overlayService2: Overlay,
+        private appRef: ApplicationRef) {
+
+    }
+
+    show(content: any, context?: any, configs?: AXOverlayConfigs): AXOverlayViewRef {
+        configs = Object.assign({
+            hasBackdrop: true,
+            transparentBackdrop: true,
+            closeOnClickOutside: true
+        }, configs || {});
+        // get root viewref
+        const viewRef: ViewContainerRef = this.appRef.components[0].instance.viewRef;
+
+        let portal: Portal<any>;
+        // get component by route
+        if (typeof content === 'string') {
+            // TODO
+        }
+        // create portal from component
+        else if (content instanceof TemplateRef) {
+            portal = new TemplatePortal(content, viewRef, context);
+        }
+        else if (typeof content === 'function') {
+            portal = new ComponentPortal(content, viewRef);
+        }
+        let positionStrategy: PositionStrategy;
+        if (configs.position && configs.targetElement) {
+            positionStrategy = this.overlayService.position()
+                .flexibleConnectedTo(configs.targetElement)
+                .withPositions(
+                    Array.isArray(configs.position) ? configs.position : [configs.position]
+                )
+                .withPush(true);
+        }
+        else {
+            positionStrategy = this.overlayService.position().global().centerHorizontally().centerVertically();
+        }
+        let scrollStrategy: ScrollStrategy = this.overlayService.scrollStrategies.reposition({ autoClose: true });
+        if (configs.scroll === 'block') {
+            scrollStrategy = this.overlayService.scrollStrategies.block();
+        }
+
+        const config = {
+            positionStrategy,
+            scrollStrategy,
+            hasBackdrop: configs.hasBackdrop,
+            disposeOnNavigation: true,
+            backdropClass: configs.backdropClass ? configs.backdropClass : (configs.transparentBackdrop ? 'cdk-overlay-transparent-backdrop' : undefined),
+            panelClass: configs.panelClass ? configs.panelClass : ['animate__animated', 'animate__fadeIn']
+        };
+        // joon nanat dorost sho
+        let overlayRef = configs.containerElement ? this.overlayService.createOn(configs.containerElement, config) : this.overlayService2.create(config);
+
+        const host = overlayRef.attach(portal);
+        if (host.instance) {
+            Object.assign(host.instance, context);
+            setTimeout(() => {
+                host.changeDetectorRef.detectChanges();
+            }, 0);
+        }
+        if (configs.closeOnClickOutside) {
+            merge(
+                overlayRef.backdropClick() as any,
+                overlayRef.detachments() as any,
+            ).subscribe(() => {
+                overlayRef.dispose();
+                overlayRef = undefined;
+                if (configs.onBackdropClick) {
+                    configs.onBackdropClick();
+                }
+            });
+
+        }
+        return {
+            instance: host.instance,
+            dispose: overlayRef.dispose.bind(overlayRef)
+        };
+    }
+
+}

package/src/lib/popover/popover.component.html

@@ -0,0 +1,5 @@
+<ng-template #tpl>
+  <div class="ax-popover-container animate__animated animate__fadeIn">
+    <ng-content></ng-content>
+  </div>
+</ng-template>

package/src/lib/popover/popover.component.scss

@@ -0,0 +1,9 @@
+.ax-popover-container {
+  .ax-popover-container-bordered {
+    background: var(--ax-white-color);
+    border: 1px solid;
+    border-color: var(--ax-border-color);
+    border-radius: var(--ax-border-radius-size);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
+  }
+}

package/src/lib/popover/popover.component.ts

@@ -0,0 +1,117 @@
+import { Component, Input, NgZone, ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, TemplateRef } from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { AXOverlayService, AXOverlayViewRef } from './overlay.service';
+import { AXConnectedPosition } from '@acorex/core';
+
+
+@Component({
+  selector: 'ax-popover',
+  templateUrl: './popover.component.html',
+  styleUrls: ['./popover.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AXPopoverComponent {
+  constructor(
+    private overlayService: AXOverlayService,
+    private zone: NgZone,
+    private cdr: ChangeDetectorRef) {
+
+  }
+  //
+  private targetEl: HTMLElement;
+  private overlay: AXOverlayViewRef;
+  @ViewChild('tpl')
+  private template: TemplateRef<any>;
+  //
+  @Input('target') target: string | HTMLElement;
+  //
+  @Input('position') position: AXConnectedPosition;
+  //
+  @Input('openMode') openMode: 'manual' | 'click' | 'hover' = 'manual';
+  //
+  @Input('closeMode') closeMode: 'manual' | 'clickout' | 'mouseout' = 'clickout';
+  //
+  private _visible: boolean = false;
+  @Input()
+  public get visible(): boolean {
+    return this._visible;
+  }
+  public set visible(v: boolean) {
+    if (v !== this._visible) {
+      if (v) {
+        this.internalShow();
+      } else {
+        this.internalHide();
+      }
+      this._visible = v;
+      this.cdr.detectChanges();
+    }
+  }
+  //
+  toggle() {
+    this.visible = !this.visible;
+  }
+
+  close() {
+    this.zone.run(() => {
+      this.visible = false;
+    });
+  }
+
+  open() {
+    this.zone.run(() => {
+      this.visible = true;
+    });
+  }
+
+  private internalShow() {
+    if (this.isOpen) {
+      return;
+    }
+    this.overlay = this.overlayService.show(this.template, {}, {
+      closeOnClickOutside: this.closeMode === 'clickout',
+      targetElement: this.targetEl,
+      hasBackdrop: this.closeMode === 'clickout',
+      position: this.position,
+      onBackdropClick: () => {
+        this._visible = false;
+      }
+    });
+  }
+
+  private internalHide() {
+    if (this.overlay) {
+      this.overlay.dispose();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.targetEl = typeof this.target === 'string' ? document.querySelector<HTMLElement>(this.target) : this.target;
+      //
+      if (this.closeMode === 'mouseout') {
+        this.targetEl.addEventListener('mouseout', this.close.bind(this));
+      }
+      if (this.openMode === 'hover' && this.targetEl) {
+        this.targetEl.addEventListener('mouseover', this.open.bind(this));
+      }
+      //
+      if (this.openMode === 'click' && this.targetEl) {
+        this.targetEl.addEventListener('click', this.open.bind(this));
+      }
+    }, 100);
+  }
+
+  ngOnDestroy(): void {
+    if (this.openMode === 'click' && this.targetEl) {
+      this.targetEl.removeEventListener('mouseover', this.open.bind(this));
+      this.targetEl.removeEventListener('click', this.open.bind(this));
+      this.targetEl.removeEventListener('mouseout', this.open.bind(this));
+    }
+  }
+
+  get isOpen(): boolean {
+    return this.visible;
+  }
+}

package/src/lib/popover/popover.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { AXPopoverComponent } from "./popover.component";
+
+@NgModule({
+  declarations: [AXPopoverComponent],
+  imports: [CommonModule],
+  exports: [AXPopoverComponent],
+  providers: []
+})
+export class AXPopoverModule {}

package/src/lib/popup/popup.component.html

@@ -0,0 +1,33 @@
+<div class="popup-wrapper" role="dialog" [attr.aria-labelledby]="'dialog'+uid+'_label'" aria-modal="true" cdkTrapFocus>
+  <div class="popup-container {{size}}" tabindex="0" cdkDrag [class.has-border]="!modal">
+    <div class="ax-popup-header" cdkDragHandle [attr.id]="'dialog'+uid+'_label'">
+      <span>
+        {{title}}
+      </span>
+      <span class="ax-buttons-containers">
+        <i class="far fa-expand ax-popup-header-button" (click)="onFullScreen()" *ngIf="maximizable" tabindex="2"
+          title="تمام صفحه"></i>
+        <i class="far fa-times ax-popup-header-button" (click)="onCloseClick()" *ngIf="closable" tabindex="1"
+          title="بستن"></i>
+      </span>
+    </div>
+    <div class="ax-popup-body ax-loading-host">
+      <div class="ax-popup-body-container">
+        <div [hidden]="isLoading">
+          <ng-template #popupBody></ng-template>
+        </div>
+      </div>
+      <div class="ax-popup-footer" *ngIf="!isLoading && footerButtons.length > 0">
+        <div class="ax-buttons-containers">
+          <ng-container *ngFor="let button of footerButtons">
+            <ax-button [type]="button.style" [icon]="button.icon" [submitBehavior]="button.submitBehavior"
+              [disabled]="button.disable" [cancelBehavior]="button.cancelBehavior"
+              (click)="handleFooterButtonClick(button)">
+              {{button.text}}
+            </ax-button>
+          </ng-container>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>