@acorex/components 6.5.28 → 6.5.29

package/src/lib/date-picker/date-picker.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { AXDatePickerComponent } from './date-picker.component';
-import { AXDropdownModule } from '../dropdown/dropdown.module';
-import { AXCalendarBoxModule } from '../calendar/calendar-box/calendar-box.module';
-import { AXTextBoxModule } from '../textbox/textbox.module';
-import { AXButtonModule } from '../button/button.module';
-import { TextMaskModule } from 'angular2-text-mask';
-
-@NgModule({
-  declarations: [AXDatePickerComponent],
-  imports: [CommonModule, FormsModule, AXDropdownModule, AXCalendarBoxModule, AXButtonModule, AXTextBoxModule, TextMaskModule, FormsModule],
-  exports: [AXDatePickerComponent],
-  providers: []
-})
-export class AXDatePickerModule {}

package/src/lib/dialog/dialog.component.html

@@ -1,5 +0,0 @@
-<div class="ax-dialog">
-    <div class="dialog-content" [innerHTML]="message">
-            
-    </div>
-</div>

package/src/lib/dialog/dialog.component.scss

@@ -1,32 +0,0 @@
-.ax-dialog {
-  background: var(--ax-white-color);
-  display: flex;
-  flex-direction: column;
-  padding: 0.8em;
-
-  .dialog-content {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .buttons {
-    display: flex;
-    flex-direction: row-reverse;
-
-    .button {
-      margin-inline-end: 0.5em;
-      min-width: 100px;
-    }
-
-    [dir="rtl"] &{
-      flex-direction: row !important;
-    }
-
-    margin-top: 1em;
-
-    .btn {
-      margin: 0 5px;
-    }
-  }
-}

package/src/lib/dialog/dialog.component.ts

@@ -1,32 +0,0 @@
-import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
-import { AXButtonItem } from '@acorex/core';
-import { AXMenuItemClickEvent } from '../menu/menu.component';
-import { AXBasePopupPageComponent } from '../base/base-page.class';
-
-@Component({
-  selector: 'ax-dialog',
-  templateUrl: './dialog.component.html',
-  styleUrls: ['./dialog.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class AXDialogComponent extends AXBasePopupPageComponent {
-  message: any;
-
-  buttons: AXButtonItem[] = [];
-
-  constructor() {
-    super();
-  }
-
-  onClick: Function;
-
-  onFooterButtonClick(e: AXMenuItemClickEvent) {
-    if (this.onClick) {
-      this.onClick(e.data);
-    }
-  }
-
-  getFooterButtons(): AXButtonItem[] {
-    return this.buttons;
-  }
-}

package/src/lib/dialog/dialog.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXDialogComponent } from './dialog.component';
-import { AXButtonModule } from '../button/button.module';
-import { AXTranslatorModule } from '@acorex/core';
-
-@NgModule({
-    declarations: [AXDialogComponent],
-    imports: [CommonModule, AXButtonModule,AXTranslatorModule],
-    exports: [AXDialogComponent],
-    providers: [],
-})
-export class AXDialogModule { }

package/src/lib/dialog/dialog.service.ts

@@ -1,178 +0,0 @@
-import { Injectable } from '@angular/core';
-import { AXDialogComponent } from './dialog.component';
-import { AXPopupService } from '../popup/popup.service';
-import { AXButtonItem, AXTranslator } from '@acorex/core';
-
-export class AXDialogAlertResult {
-    private _executor: (close: (e?: any) => void) => void;
-    constructor(
-        executor: (close: (e?: any) => void) => void
-    ) {
-        this._executor = executor;
-        setTimeout(() => {
-            this._executor(this.closeAction);
-        }, 50);
-    }
-
-    private closeAction: (e?: any) => void;
-
-    close(action: (e?: any) => void): AXDialogAlertResult {
-        this.closeAction = action;
-        return this;
-    }
-
-}
-
-export class AXDialogConfirmResult {
-    private _executor: (okay: () => void, cancel: () => void, final: () => void) => void;
-    constructor(
-        executor: (okay: () => void, cancel: () => void, final: () => void) => void
-    ) {
-        this._executor = executor;
-        setTimeout(() => {
-            this._executor(this.okayAction, this.cancelAction, this.finalAction);
-        }, 50);
-    }
-
-    private okayAction: () => void;
-    private cancelAction: () => void;
-    private finalAction: () => void;
-
-    okay(action: () => void): AXDialogConfirmResult {
-        this.okayAction = action;
-        return this;
-    }
-    cancel(action: () => void): AXDialogConfirmResult {
-        this.cancelAction = action;
-
-        return this;
-    }
-    final(action: () => void) {
-        this.finalAction = action;
-    }
-}
-
-
-export class AXDialogResult {
-    private _executor: (then: (name: string) => void, final: () => void) => void;
-    constructor(
-        executor: (then: (name: string) => void, final: () => void) => void
-    ) {
-        this._executor = executor;
-        setTimeout(() => {
-            this._executor(this.thenAction, this.finalAction);
-        }, 50);
-    }
-
-    private thenAction: (name: string) => void;
-    private finalAction: () => void;
-
-    then(action: (name: string) => void): AXDialogResult {
-        this.thenAction = action;
-        return this;
-    }
-
-    final(action: () => void) {
-        this.finalAction = action;
-    }
-}
-
-@Injectable({ providedIn: 'root' })
-export class AXDialogService {
-
-    constructor(private popupService: AXPopupService) {
-
-    }
-
-    alert(title: string, message: string): AXDialogAlertResult {
-        return new AXDialogAlertResult((close) => {
-            const popup = this.popupService.open(AXDialogComponent, {
-                title,
-                size: 'sm',
-                closable: false,
-
-                data: {
-                    message,
-                    buttons: [
-                        {
-                            name: 'confirm',
-                            text: AXTranslator.get('common.confirm'),
-                            style: 'success',
-                            submitBehavior: true,
-                        }
-                    ],
-                    onClick: (e) => {
-                        popup.close()
-                        close();
-                    }
-                }
-            });
-        });
-    }
-
-    confirm(title: string, message: string): AXDialogConfirmResult {
-        return new AXDialogConfirmResult((okay, cancel, final) => {
-            const popup = this.popupService.open(AXDialogComponent, {
-                title,
-                size: 'sm',
-                closable: false,
-
-                data: {
-                    buttons: [
-                        {
-                            name: 'confirm',
-                            text: AXTranslator.get('common.confirm'),
-                            style: 'success',
-                            submitBehavior: true,
-                            cancelBehavior: false,
-                        },
-                        {
-                            name: 'cancel',
-                            text: AXTranslator.get('common.cancel'),
-                            style: 'danger blank',
-                            submitBehavior: false,
-                            cancelBehavior: true,
-                        }
-                    ],
-                    message,
-                    onClick: (e) => {
-                        popup.close()
-                        if (e.name === 'confirm' && okay) {
-                            okay();
-                        }
-                        if (e.name === 'cancel' && cancel) {
-                            cancel();
-                        }
-                        if (final) {
-                            final();
-                        }
-                    }
-                }
-            })
-        });
-    }
-
-
-    show(title: string, message: string, closable: boolean = false, ...buttons: AXButtonItem[]): AXDialogResult {
-        return new AXDialogResult((then, final) => {
-            const popup = this.popupService.open(AXDialogComponent, {
-                title,
-                size: 'sm',
-                closable,
-                data: {
-                    message,
-                    buttons,
-                    onClick: (e) => {
-                        popup.close();
-                        if (then) {
-                            then(e.name);
-                        }
-                        if (final) {
-                            final();
-                        }
-                    }
-                }
-            });
-        });
-    }
-}

package/src/lib/drawer/content.component.ts

@@ -1,18 +0,0 @@
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-} from '@angular/core';
-
-@Component({
-  selector: 'ax-content',
-  template: ` <ng-content> </ng-content> `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
-})
-export class AXDecoratorContentComponent  {
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-  }
-}

package/src/lib/drawer/drawer-container.component.ts

@@ -1,37 +0,0 @@
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  NgZone,
-} from '@angular/core';
-import { AXDrawerComponent } from './drawer.component';
-
-@Component({
-  selector: 'ax-drawer-container',
-  template: `
-    <ng-content select="ax-drawer[location='start']"> </ng-content>
-    <ng-content> </ng-content>
-    <ng-content select="ax-drawer[location='end']"> </ng-content>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AXDrawerContainerComponent  {
-  constructor(
-    private elementRef: ElementRef,
-    cdr: ChangeDetectorRef,
-    private _zone: NgZone
-  ) {
-  }
-
-  ngDoCheck() {
-    const host = this.elementRef.nativeElement;
-    Array.from(host.querySelectorAll('ax-drawer'))
-      .map((c) => c['__axContext__'] as AXDrawerComponent)
-      .some((c) => !c?.collapsed)
-      ? host.classList.add('ax-visible')
-      : host.classList.remove('ax-visible');
-  }
-}

package/src/lib/drawer/drawer.component.ts

@@ -1,151 +0,0 @@
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-  NgZone,
-  Input,
-  HostBinding,
-  Output,
-  EventEmitter
-} from '@angular/core';
-import { AXClosbaleComponent, AXComponent } from '../base/components.class';
-
-export type AXDrawerMode = 'push' | 'overlay';
-export type AXDrawerLocation = 'start' | 'end';
-
-@Component({
-  selector: 'ax-drawer',
-  template: `
-    <ng-content select=".header"> </ng-content>
-    <ng-content> </ng-content>
-  `,
-  host: { class: 'ax-drawer' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  providers: [
-    { provide: AXComponent, useExisting: AXDrawerComponent },
-    { provide: AXClosbaleComponent, useExisting: AXDrawerComponent }
-  ]
-})
-export class AXDrawerComponent {
-  constructor(private _elementRef: ElementRef, _cdr: ChangeDetectorRef, private _zone: NgZone) {
-    this._elementRef.nativeElement['__axContext__'] = this;
-  }
-
-  @Output()
-  public locationChange: EventEmitter<AXDrawerLocation> = new EventEmitter<AXDrawerLocation>();
-
-  private _location: AXDrawerLocation;
-  @Input()
-  public get location(): AXDrawerLocation {
-    return this._location;
-  }
-  public set location(v: AXDrawerLocation) {
-    if (v != this._location) {
-      this._location = v;
-      this.locationChange.emit(v);
-      this._checkProps();
-    }
-  }
-
-  @Output()
-  public modeChange: EventEmitter<AXDrawerMode> = new EventEmitter<AXDrawerMode>();
-
-  private _mode: AXDrawerMode = 'overlay';
-  @Input()
-  public get mode(): AXDrawerMode {
-    return this._mode;
-  }
-  public set mode(v: AXDrawerMode) {
-    if (v != this._mode) {
-      this._mode = v;
-      this.modeChange.emit(v);
-      this._checkProps();
-    }
-  }
-
-  @Output()
-  public collapsedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-  private _collapsed: boolean = true;
-  @Input()
-  public get collapsed(): boolean {
-    return this._collapsed;
-  }
-  public set collapsed(v: boolean) {
-    if (v != this._collapsed) {
-      this._collapsed = v;
-      this.collapsedChange.emit(v);
-      this._checkProps();
-    }
-  }
-
-  ngAfterViewInit(): void {
-    this._detectBoundingSize();
-  }
-
-  ngDoCheck() {
-    this._detectBoundingSize();
-  }
-
-  private _detectBoundingSize() {
-    this._zone.runOutsideAngular(() => {
-      const host = this._elementRef.nativeElement;
-      if (host.clientWidth) host.style.setProperty('--ax-el-width', `${host.clientWidth}px`);
-    });
-  }
-
-  private _checkProps() {
-    this._detectBoundingSize();
-    this._removeBackdrop();
-    if (this.mode == 'overlay') {
-      if (!this.collapsed) {
-        this._addBackdrop();
-      }
-    }
-  }
-
-  toggle() {
-    this.collapsed = !this.collapsed;
-  }
-
-  close() {
-    this.collapsed = true;
-  }
-
-  open() {
-    this.collapsed = false;
-  }
-
-  @HostBinding('class')
-  private get __hostClass(): string {
-    //return `ax-drawer-${this.mode} ax-drawer-${this.location} ${this.collapsed ? 'ax-collapsed' : 'ax-expanded'} ${!this._loaded ? 'ax-preload' : ''}`;
-    return `ax-drawer-${this.mode} ax-drawer-${this.location} ${this.collapsed ? 'ax-collapsed' : 'ax-expanded'}`;
-  }
-
-  private _backdropElement: HTMLElement | any;
-  // private _loaded: boolean = false;
-
-  private _addBackdrop() {
-    this._zone.runOutsideAngular(() => {
-      this._backdropElement = document.createElement('div');
-      this._backdropElement.classList.add('ax-backdrop');
-      this._backdropElement.onclick = () => {
-        this._zone.run(() => {
-          this.close();
-        });
-      };
-      this._elementRef.nativeElement.parentElement?.appendChild(this._backdropElement);
-    });
-  }
-  private _removeBackdrop() {
-    this._zone.runOutsideAngular(() => {
-      if (this._backdropElement) {
-        this._elementRef.nativeElement.parentElement?.removeChild(this._backdropElement);
-        this._backdropElement = null;
-      }
-    });
-  }
-}

package/src/lib/drawer/drawer.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXDrawerComponent } from './drawer.component';
-import { AXDrawerContainerComponent } from './drawer-container.component';
-import { AXDecoratorContentComponent } from './content.component';
-
-const COMPONENT = [AXDrawerComponent, AXDrawerContainerComponent,AXDecoratorContentComponent];
-const MODULES = [CommonModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXDrawerModule { }

package/src/lib/dropdown/dropdown.component.html

@@ -1,26 +0,0 @@
-<div class="ax form-item {{size}}" [class.readonly]="readonly" [attr.id]="uid" [class.disabled]="disabled" #el>
-    <div class="ax items-wrapper">
-        <ng-content select="[start]">
-        </ng-content>
-    </div>
-    <div class="content">
-        <ng-content select="ng-container[header]">
-        </ng-content>
-    </div>
-    <div class="ax items-wrapper">
-        <ax-button *ngIf="showDropDownButton" [disabled]="disabled || readonly" [loading]="loading"
-            icon="far fa-angle-down icon" type="light blank" [size]="size" (click)="handleArrowClick($event)"
-            [tabIndex]="-1">
-        </ax-button>
-        <ng-content select="[end]">
-        </ng-content>
-    </div>
-</div>
-
-<ng-template #baseTemplate>
-    <!-- [ngStyle]="{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}" -->
-    <div class="ax-dropdown-container-bordered" [ngStyle]="{'width': dropdownWidth !== '0px' ? dropdownWidth : 'unset'}">
-        <ng-content select="ng-container[panel]">
-        </ng-content>
-    </div>
-</ng-template>

package/src/lib/dropdown/dropdown.component.scss

@@ -1,8 +0,0 @@
-.ax-dropdown-container-bordered {
-  background: var(--ax-white-color);
-  border: 1px solid;
-  border-color: var(--ax-border-color);
-  border-radius: var(--ax-size-border-radius);
-  box-shadow: 0px 0px 3px rgb(0, 0, 0, 20%);
-  margin: 0.2rem 0;
-}