@acorex/components 4.1.6 → 4.2.0

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/drawer.component.html

@@ -0,0 +1,5 @@
+<div class="ax-drawer-overlay" [@slideInOut]="drawerState" (click)="toggle()" >
+  <div class="ax-drawer-container" [style.width.px]="width">
+    <ng-content></ng-content>
+  </div>
+</div>

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

@@ -0,0 +1,53 @@
+import { Component, OnInit, Input } from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  transition,
+  animate,
+} from '@angular/animations';
+@Component({
+  selector: 'ax-drawer',
+  templateUrl: './drawer.component.html',
+  animations: [
+    trigger('slideInOut', [
+      state(
+        'in',
+        style({
+          transform: 'translate3d(0,0,0)',
+        })
+      ),
+      state(
+        'out',
+        style({
+          transform: 'translate3d(100%, 0, 0)',
+        })
+      ),
+      transition('in => out', animate('200ms ease-in-out')),
+      transition('out => in', animate('200ms ease-in-out')),
+    ]),
+  ],
+})
+export class AXDrawerComponent {
+  constructor() {}
+
+  @Input()
+  width: number = 300;
+
+  drawerState: string = 'out';
+
+  ngOnDestroy(): void {
+    document.querySelector('body').classList.remove('ax-drawer-underlay');
+  }
+  toggle() {
+    const body = document.querySelector('body');
+
+    if (this.drawerState === 'out') {
+      this.drawerState = 'in';
+      body.classList.add('ax-drawer-underlay');
+    } else {
+      this.drawerState = 'out';
+      body.classList.remove('ax-drawer-underlay');
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXDrawerComponent } from './drawer.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+@NgModule({
+  declarations: [AXDrawerComponent],
+  imports: [CommonModule, BrowserAnimationsModule],
+  exports: [AXDrawerComponent],
+  providers: []
+})
+export class AXDrawerModule {}

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

@@ -0,0 +1,25 @@
+<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 ? dropdownWidth + 'px' : 'unset'}" >
+        <ng-content select="ng-container[panel]">
+        </ng-content>
+    </div>
+</ng-template>

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

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

package/src/lib/dropdown/dropdown.component.ts

@@ -0,0 +1,200 @@
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ViewChild,
+  Input,
+  ElementRef,
+  AfterViewInit,
+  HostListener,
+  Output,
+  EventEmitter,
+  ChangeDetectorRef,
+  ViewContainerRef,
+  TemplateRef,
+  OnDestroy,
+  DebugElement
+} from '@angular/core';
+import { AXBaseDropdownComponent } from '../base/element.class';
+import { AXHtmlEvent } from '../base/events.class';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { AXConfig } from '@acorex/core';
+
+@Component({
+  selector: 'ax-drop-down',
+  templateUrl: './dropdown.component.html',
+  styleUrls: ['./dropdown.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display:contents;' }
+})
+export class AXDropdownComponent extends AXBaseDropdownComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('baseTemplate') baseTemplate: TemplateRef<any>;
+  @ViewChild('content', { static: false }) content: ElementRef<HTMLDivElement>;
+  @ViewChild('endButtons', { static: false }) endButtons: ElementRef<HTMLDivElement>;
+  @ViewChild('el', { static: true }) dropdownEL: ElementRef<HTMLDivElement>;
+
+  @Input()
+  rtl: boolean = AXConfig.get('layout.rtl');
+
+  @Input()
+  readonly: boolean = false;
+
+  @Input()
+  loading: boolean = false;
+
+  @Output()
+  dropdownToggle: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output()
+  onButtonClick: EventEmitter<AXHtmlEvent<MouseEvent>> = new EventEmitter<AXHtmlEvent<MouseEvent>>();
+
+  @HostListener('keydown', ['$event'])
+  onKeydownHandler(e: KeyboardEvent) {
+    if (!this.disabled && e.key === 'Enter' && e.type === 'keydown') {
+      if (!this.readonly) {
+        this.toggle();
+        // this.dropdownToggle.emit({ mode: 'enter' });
+      }
+    }
+    if (e.key === 'Escape') {
+      if (this.isOpen) {
+        this.close();
+        e.stopPropagation();
+      }
+    }
+  }
+
+  dropdownWidth: number;
+
+  private overlayRef: OverlayRef;
+  private templatePortal: TemplatePortal;
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private ref: ElementRef<HTMLDivElement>,
+    private overlay: Overlay,
+    private viewContainerRef: ViewContainerRef
+  ) {
+    super();
+  }
+
+  ngOnInit(): void {
+    if (this.rtl == null) {
+      this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
+    }
+    setTimeout(() => {
+      this.ref.nativeElement.classList.add(this.rtl ? 'rtl' : 'ltr');
+      this.dropdownEL.nativeElement.classList.add(this.rtl ? 'rtl' : 'ltr');
+    }, 5);
+  }
+  ngAfterViewInit(): void {
+    // Todo: chech fitparent
+    if (this.fitParent === true) {
+      this.dropdownWidth = this.dropdownEL.nativeElement.offsetWidth;
+    } else {
+      this.dropdownWidth = 260;
+    }
+
+    setTimeout(() => {
+      if (this.endButtons && this.endButtons.nativeElement.childNodes.length !== 0) {
+        this.content.nativeElement.style.paddingInlineEnd = this.endButtons.nativeElement.clientWidth + 'px';
+      }
+    }, 5);
+  }
+
+  ngOnDestroy(): void {
+    this.overlayRef?.detach();
+    this.overlayRef?.dispose();
+  }
+
+  handleArrowClick(e: AXHtmlEvent<MouseEvent>) {
+    setTimeout(() => {
+      this.toggle();
+    }, 0);
+  }
+
+  toggle() {
+    if (this.disabled !== true) {
+      this.isOpen ? this.close() : this.open();
+    }
+  }
+
+  close() {
+    if (!this.isOpen) {
+      return;
+    }
+    this.overlayRef?.detach();
+    this.dropdownToggle.emit({ mode: 'close' });
+  }
+
+  open() {
+    if (this.isOpen) {
+      return;
+    }
+    this.ensureOverlayCreated();
+    this.overlayRef.attach(this.templatePortal);
+    this.dropdownToggle.emit({ mode: 'open' });
+  }
+
+  private ensureOverlayCreated() {
+    if (!this.overlayRef) {
+      const targetEl = document.querySelector<HTMLElement>('#' + this.uid);
+      const positionStrategy = this.overlay
+        .position()
+        .flexibleConnectedTo(targetEl)
+        .withPositions([
+          {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top'
+          },
+          {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'bottom'
+          },
+          {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top'
+          },
+          {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'bottom'
+          }
+        ])
+        .withPush(false);
+      this.overlayRef = this.overlay.create({
+        positionStrategy,
+
+        //width: this.dropdownEL.nativeElement.clientWidth,
+        scrollStrategy: this.overlay.scrollStrategies.reposition({
+          autoClose: true
+        }),
+        hasBackdrop: true,
+        backdropClass: 'cdk-overlay-transparent-backdrop'
+      });
+      this.overlayRef.setDirection(this.rtl ? 'rtl' : 'ltr');
+      this.overlayRef.backdropClick().subscribe(() => this.close());
+    }
+    if (!this.templatePortal) {
+      this.templatePortal = new TemplatePortal(this.baseTemplate, this.viewContainerRef);
+    }
+  }
+
+  get isOpen(): boolean {
+    return this.overlayRef ? this.overlayRef.hasAttached() : false;
+  }
+
+  updatePosition(): void {
+    this.overlayRef?.updatePosition();
+  }
+  focus() {}
+}

package/src/lib/dropdown/dropdown.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXDropdownComponent } from './dropdown.component';
+import { AXFormGroupModule } from '../form-group/form-group.module';
+import { AXTextBoxModule } from '../textbox/textbox.module';
+import { AXButtonModule } from '../button/button.module';
+import { AXPopoverModule } from '../popover/popover.module';
+import { OverlayModule } from '@angular/cdk/overlay';
+
+const COMPONENT = [AXDropdownComponent];
+const MODULES = [CommonModule, AXFormGroupModule, AXTextBoxModule, AXButtonModule, AXPopoverModule, OverlayModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXDropdownModule { }

package/src/lib/fieldset/fieldset.component.html

@@ -0,0 +1,6 @@
+<fieldset class="ax fieldset {{size}}">
+    <legend (click)="toggle()"> {{ caption }} </legend>
+    <div class="fieldset-content" [@visibilityChanged]="collapsed ? 'hidden' : 'shown'">
+        <ng-content></ng-content>
+    </div>
+</fieldset>

package/src/lib/fieldset/fieldset.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { AXBaseSizableComponent, AXElementSize } from '../base/element.class';
+
+@Component({
+    selector: 'ax-fieldset',
+    templateUrl: './fieldset.component.html',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    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 AXFieldsetComponent implements AXBaseSizableComponent {
+    @Input()
+    size: AXElementSize = "md";
+
+    @Input()
+    caption: string = '';
+
+    @Input()
+    allowCollapse: boolean = false;
+
+    collapsed: boolean = false;
+    toggle() {
+        if (this.allowCollapse) {
+            this.collapsed = !this.collapsed;
+        }
+    }
+}

package/src/lib/fieldset/fieldset.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXFieldsetComponent } from './fieldset.component';
+
+@NgModule({
+    declarations: [AXFieldsetComponent],
+    imports: [ CommonModule ],
+    exports: [AXFieldsetComponent],
+    providers: [],
+})
+export class AXFieldsetModule {}