@acorex/components 4.2.0 → 4.2.4

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

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

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

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

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

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

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

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

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

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

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

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

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