@acorex/components 6.5.27 → 6.5.29

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

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

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

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

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

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

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

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

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

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

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

@@ -1,102 +0,0 @@
-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';
-  direction?: 'rtl' | 'ltr';
-}
-
-@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.direction) overlayRef.setDirection(configs.direction);
-    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

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

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

@@ -1,130 +0,0 @@
-import { Component, Input, NgZone, ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, TemplateRef } from '@angular/core';
-import { ElementRef } from '@angular/core';
-import { AXOverlayService, AXOverlayViewRef } from './overlay.service';
-import { AXConfig, 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 ref: ElementRef<HTMLDivElement>,
-    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';
-  //
-  @Input()
-  rtl: boolean = AXConfig.get('layout.rtl');
-
-  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,
-        direction: this.rtl ? 'rtl' : 'ltr',
-        onBackdropClick: () => {
-          this._visible = false;
-        }
-      }
-    );
-  }
-
-  private internalHide() {
-    if (this.overlay) {
-      this.overlay.dispose();
-    }
-  }
-
-  ngOnInit(): void {
-    if (this.rtl == null) {
-      this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
-    }
-  }
-
-  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

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

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