@acorex/components 6.5.25 → 6.5.27

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+.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;
+}