@acorex/components 5.0.5 → 5.0.9

package/src/lib/datepicker/datepicker.component.ts

@@ -1,86 +0,0 @@
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ElementRef,
-  ChangeDetectorRef,
-} from '@angular/core';
-import { AXBaseTextBoxMixin } from '../base/mixin/mixin.class';
-
-import {
-  TEXTBOX_INPUTS,
-  TEXTBOX_OUTPUT,
-} from '../base/mixin/textbox-mixin.class';
-@Component({
-  selector: 'ax-date-picker',
-  templateUrl: './datepicker.component.html',
-  inputs: [
-    'disabled',
-    'readonly',
-    'tabIndex',
-    'cssClass',
-    'size',
-    ...TEXTBOX_INPUTS,
-  ],
-  outputs: [
-    'valueChange',
-    'onValueChanged',
-    'onBlur',
-    'onFocus',
-    ...TEXTBOX_OUTPUT,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AXDatepickerComponent extends AXBaseTextBoxMixin {
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-    this.createYears();
-  }
-  dayItems: number[] = new Array(32);
-  yearItems: number[] = [1990];
-  monthItems: string[] = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-
-  _showDays: boolean = true;
-  _showsMonths: boolean = false;
-  _showYears: boolean = false;
-
-  showMonths() {
-    this._showDays = false;
-    this._showYears = false;
-    this._showsMonths = true;
-  }
-
-  showYears() {
-    this._showsMonths = false;
-    this._showDays = false;
-    this._showYears = true;
-  }
-
-  showDays() {
-    this._showYears = false;
-    this._showsMonths = false;
-    this._showDays = true;
-  }
-
-  createYears() {
-    let number = 1990;
-    for (let i = 0; i < 40; i++) {
-      number = number + 1;
-      this.yearItems.push(number);
-    }
-  }
-}

package/src/lib/datepicker/datepicker.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXDatepickerComponent } from './datepicker.component';
-import { AXCalendarModule } from '../calendar';
-import { AXDropdownModule } from '../dropdown';
-
-const COMPONENT = [AXDatepickerComponent];
-const MODULES = [CommonModule, AXCalendarModule, AXDropdownModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXDatepickerModule { }

package/src/lib/decorators/decorators.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXDecoratorPrefixComponent } from './prefix.component';
-import { AXDecoratorSuffixComponent } from './suffix.component';
-
-const COMPONENT = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent];
-const MODULES = [CommonModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXEditorDecoratorModule { }

package/src/lib/decorators/prefix.component.ts

@@ -1,23 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef } from '@angular/core';
-import { AXBaseComponentMixin } from '../base';
-
-@Component({
-    selector: 'ax-prefix',
-    template: `
-        <ng-content select="ax-button,ax-loading,ax-icon">
-        </ng-content>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-prefix' }
-})
-export class AXDecoratorPrefixComponent extends AXBaseComponentMixin {
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef
-    ) {
-        super(elementRef, cdr);
-    }
-
-}

package/src/lib/decorators/suffix.component.ts

@@ -1,25 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef } from '@angular/core';
-import { AXBaseComponentMixin } from '../base';
-
-@Component({
-    selector: 'ax-suffix',
-    template: `
-        <ng-content select="ax-button">
-        </ng-content>
-        <ng-content select="ax-icon">
-        </ng-content>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-suffix' }
-})
-export class AXDecoratorSuffixComponent extends AXBaseComponentMixin {
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef
-    ) {
-        super(elementRef, cdr);
-    }
-
-}

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

@@ -1,22 +0,0 @@
-<div class="ax-popup-wrapper" aria-modal="true" cdkTrapFocus>
-    <div class="ax-dialog ax-{{options.type}}" tabindex="0" cdkDrag role="alert" cdkDragHandle>
-        <div class="ax-dialog-icon-side">
-            <i class="ax-dialog-icon {{_icon}}"></i>
-        </div>
-        <div class="ax-dialog-content-side">
-            <div class="ax-dialog-title">{{options.title}}</div>
-            <div class="ax-dialog-content">{{options.content}}</div>
-        </div>
-        <div class="ax-dialog-dismiss-icon">
-            <i class="ax-ic ax-ic-close" *ngIf="options.dismissible" (click)="close()"></i>
-        </div>
-
-        <footer class="ax-dialog-footer">
-            <ng-container *ngFor="let button of options.buttons">
-                <ax-button [text]="button.text"  [submitBehavior]="button.submitBehavior" [cancelBehavior]="button.cancelBehavior" (onClick)="_handleButtonClick(button)" [class]="button.cssClass" [look]="button.look" [color]="button.color"></ax-button>
-                <div class="ax-ml-2"></div>
-            </ng-container>
-        </footer>
-    </div>
-
-</div>

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

@@ -1,48 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef } from '@angular/core';
-import { AXBaseComponentMixin } from '../base';
-import { AXButtonItem } from '../button';
-import { AXDialogOptions } from './dialog.class';
-
-@Component({
-    selector: 'ax-dialog',
-    templateUrl: './dialog.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None
-})
-export class AXDialogComponent extends AXBaseComponentMixin {
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef
-    ) {
-        super(elementRef, cdr);
-    }
-
-    options: AXDialogOptions;
-    _icon: string;
-    close: () => void;
-
-    onInit() {
-        switch (this.options.type) {
-            case 'success':
-                this._icon = 'ax-ic ax-ic-check';
-                break;
-            case 'danger':
-                this._icon = 'ax-ic ax-ic-error-filled';
-                break;
-            case 'warning':
-                this._icon = 'ax-ic ax-ic-warning-filled';
-                break;
-            default:
-                this._icon = 'ax-ic ax-ic-info-filled';
-                break;
-        }
-    }
-
-    _handleButtonClick(button: AXButtonItem) {
-        if (button.onClick) {
-            button.onClick();
-        }
-    }
-
-}

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

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXDialogComponent } from './dialog.component';
-import { AXButtonModule } from '../button';
-import { A11yModule } from '@angular/cdk/a11y';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { AXPageModule } from '../page';
-import { AXEditorDecoratorModule } from '../decorators';
-
-const COMPONENT = [AXDialogComponent];
-const MODULES = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXDialogModule { }

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

@@ -1,154 +0,0 @@
-import { AXTranslator } from '@acorex/core';
-import { Overlay, ScrollStrategyOptions } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
-import { Injectable, Injector } from '@angular/core';
-import { AXStyleColorType } from '../base/styles.class';
-import {
-  AXDialogOptions,
-  AXDialogRef,
-} from './dialog.class';
-import { AXDialogComponent } from './dialog.component';
-
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-@Injectable({ providedIn: 'root' })
-export class AXDialogService {
-
-  /**
-  * @ignore
-  */
-  constructor(
-    private overlayService: Overlay,
-    private parentInjector: Injector,
-    private sso: ScrollStrategyOptions
-  ) { }
-
-  /**
-  *  Show an alert box with 'Okay' button.
-  */
-  alert(title: string, content: string, type: AXStyleColorType = 'primary'): Promise<void> {
-    return new Promise((resolve) => {
-      const popup = this.open({
-        title,
-        type: type,
-        content,
-        buttons: [
-          {
-            name: 'confirm',
-            text: AXTranslator.get('common.okay'),
-            color: type,
-            look: `twotone`,
-            onClick: () => {
-              popup.close();
-              if (resolve) {
-                resolve();
-              }
-            },
-          },
-        ],
-      });
-    });
-  }
-
-  /**
-  *  Show a confirm box with 'Okay' & 'Cancel' buttons.
-  */
-  confirm(title: string, content: string, type: AXStyleColorType = 'primary'): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const popup = this.open({
-        title,
-        content,
-        type,
-        buttons: [
-          {
-            name: 'confirm',
-            text: AXTranslator.get('common.okay'),
-            color: type,
-            onClick: () => {
-              popup.close();
-              if (resolve) {
-                resolve();
-              }
-            },
-            submitBehavior: true,
-            cancelBehavior: false,
-          },
-          {
-            name: 'cancel',
-            text: AXTranslator.get('common.cancel'),
-            color: `light`,
-            onClick: () => {
-              popup.close();
-              if (reject) {
-                reject();
-              }
-            },
-            submitBehavior: false,
-            cancelBehavior: true,
-          },
-        ],
-      });
-    });
-  }
-
-  /**
-  *  Show a custom dialog box.
-  */
-  show(options: AXDialogOptions): Promise<{ name: string }> {
-    return new Promise((resolve) => {
-      const popup = this.open(options);
-      options.buttons?.forEach((b) => {
-        const orginalClick = b.onClick;
-        b.onClick = () => {
-          popup.close();
-          if (orginalClick) {
-            orginalClick();
-          }
-          if (resolve) {
-            resolve({ name: b.name });
-          }
-        };
-      });
-    });
-  }
-
-  private open(options: AXDialogOptions): AXDialogRef {
-    let positionStrategy = this.overlayService
-      .position()
-      .global()
-      .centerHorizontally()
-      .centerVertically();
-    const overlayRef = this.overlayService.create({
-      positionStrategy,
-      hasBackdrop: true,
-      scrollStrategy: this.sso.block(),
-      panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
-    });
-    const dialogPortal = new ComponentPortal(
-      AXDialogComponent,
-      null,
-      this.parentInjector
-    );
-    const host = overlayRef.attach(dialogPortal);
-    if (host.instance) {
-      Object.assign(host.instance, {
-        options: options,
-        close: () => {
-          overlayRef.dispose();
-        },
-      });
-      setTimeout(() => {
-        host.changeDetectorRef.detectChanges();
-      }, 0);
-    }
-
-    return {
-      close: () => {
-        host.instance.close();
-      },
-    };
-  }
-}

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

@@ -1,69 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, NgZone, ContentChildren, QueryList } from '@angular/core';
-import { AXBaseComponentMixin } from '../base';
-import { AXDrawerComponent } from './drawer.component';
-
-@Component({
-    selector: 'ax-drawer-container',
-    template: `
-        <ng-content select="ax-drawer[location='start']">
-        </ng-content>
-        <ng-content select="ax-drawer-content">
-        </ng-content>
-        <ng-content select="ax-drawer[location='end']">
-        </ng-content>
-    `,
-    inputs: ['rtl'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-drawer-container' }
-})
-export class AXDrawerContainerComponent extends AXBaseComponentMixin {
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef,
-        private zone: NgZone
-    ) {
-        super(elementRef, cdr);
-    }
-
-
-    @ContentChildren(AXDrawerComponent)
-    drawers: QueryList<AXDrawerComponent>;
-
-
-    onViewInit() {
-        this._updateWidth();
-        // add animation
-        setTimeout(() => {
-            this._getHostElement().querySelectorAll('ax-drawer').forEach(c => {
-                c.classList.add('ax-animated');
-            });
-        }, 100);
-
-        this.drawers.forEach(c => {
-            c.onChanged.subscribe(c => {
-                this._updateWidth();
-            });
-        });
-    }
-
-    private _updateWidth() {
-        this.zone.runOutsideAngular(() => {
-            const container = this._getHostElement().closest('ax-drawer-container') as HTMLDivElement;
-            const parentWidth = this._getHostElement().getBoundingClientRect().width;
-            let w = 0;
-            this._getHostElement().querySelectorAll('ax-drawer').forEach(c => {
-                const elm = c as HTMLDivElement;
-                const width = elm.getBoundingClientRect().width;
-                const overflow = parentWidth < width;
-                const diff = width - parentWidth;
-                w += ['ax-expanded', 'ax-drawer-push'].every(c => elm.classList.contains(c)) ? width : 0;
-                elm.style.setProperty('--attr-width', `${width}px`);
-                //TODO check overflow
-                elm.style.setProperty('--attr-diff', `${overflow ? diff : 0}px`);
-            });
-            container.style.setProperty('--attr-content-width', `${parentWidth - w}px`);
-        });
-    }
-}

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

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

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

@@ -1,156 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, NgZone, Input, HostBinding, Output, EventEmitter, HostListener } from '@angular/core';
-import { AXBaseComponentMixin, AXEvent } from '../base';
-
-@Component({
-    selector: 'ax-drawer',
-    template: `
-        <ng-content>
-        </ng-content>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-drawer' }
-})
-export class AXDrawerComponent extends AXBaseComponentMixin {
-
-    constructor(
-        private elementRef: ElementRef,
-        cdr: ChangeDetectorRef,
-        private zone: NgZone
-    ) {
-        super(elementRef, cdr);
-    }
-
-    @Output()
-    onChanged: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();
-
-    @Input()
-    mode: 'push' | 'overlay' = 'push';
-
-    _currentMode: 'push' | 'overlay'
-
-    @Input()
-    location: 'start' | 'end' = 'start';
-
-    private _backdrop: HTMLDivElement;
-
-    private _collapsed: boolean = false;
-    @Input()
-    public get collapsed(): boolean {
-        return this._collapsed;
-    }
-    public set collapsed(v: boolean) {
-        if (v != this._collapsed) {
-            this._collapsed = v;
-            this._updateClass();
-            this._emitChange();
-        }
-    }
-
-    onInit() {
-        this._getHostElement().classList.add(this.location == 'start' ? 'ax-drawer-start' : 'ax-drawer-end');
-        this._currentMode = this.mode;
-    }
-
-    private _updateClass() {
-        this.zone.runOutsideAngular(() => {
-            const elm = this._getHostElement();
-            //           
-            this._currentMode == 'overlay' ? this._setOverlayMode() : this._setPushMode();
-            //
-            if (this.collapsed) {
-                elm.classList.remove('ax-expanded');
-                elm.classList.add('ax-collapsed');
-                if (this._currentMode == 'overlay') {
-                    this._removeBackdrop();
-                }
-            }
-            else {
-                elm.classList.add('ax-expanded');
-                elm.classList.remove('ax-collapsed');
-                if (this._currentMode == 'overlay') {
-                    this._addBackdrop();
-                }
-            }
-        });
-    }
-
-    onViewInit() {
-        this._detectSize();
-    }
-
-    toggle() {
-        this.collapsed = !this.collapsed;
-    }
-
-    @HostListener('window:resize', ['$event'])
-    _handleWindowsResize(e:UIEvent) {
-        this._detectSize();
-    }
-    
-
-    _detectSize() {
-        //TODO detect break size
-        const bound = this._getHostElement().parentElement.getBoundingClientRect();
-        if (bound.width == 0) {
-            console.log('Drawe invalid size', bound);
-            setTimeout(() => {
-                this._detectSize();
-            }, 1);
-            return;
-        }
-        if (bound.width < 400) {
-            this._currentMode = 'overlay';
-            this.collapsed = true;
-        }
-        else {
-            this._currentMode = this.mode;
-        }
-        this._updateClass();
-        this._emitChange();
-    }
-
-    private _emitChange() {
-        this.onChanged.emit({
-            component: this,
-            htmlElement: this.elementRef.nativeElement
-        })
-    }
-
-    private _setOverlayMode() {
-        this._currentMode = 'overlay';
-        this._getHostElement().classList.remove('ax-drawer-push');
-        this._getHostElement().classList.add('ax-drawer-overlay');
-
-    }
-
-    private _setPushMode() {
-        this._currentMode = 'push';
-        this._getHostElement().classList.remove('ax-drawer-overlay');
-        this._getHostElement().classList.add('ax-drawer-push');
-        this._removeBackdrop();
-    }
-
-    private _addBackdrop() {
-        if (!this._backdrop) {
-            this._backdrop = document.createElement('div');
-            this._backdrop.classList.add('ax-drawer-backdrop')
-            this._getHostElement().parentElement.prepend(this._backdrop);
-            this._backdrop.addEventListener('click', this._handleBackfropClick.bind(this));
-        }
-    }
-
-    private _removeBackdrop() {
-        if (this._backdrop) {
-            this._backdrop.removeEventListener('click', this._handleBackfropClick.bind(this));
-            this._getHostElement().parentElement.removeChild(this._backdrop);
-            this._backdrop = null;
-        }
-    }
-
-    private _handleBackfropClick(e: MouseEvent) {
-        this._removeBackdrop();
-        this.collapsed = true;
-    }
-
-}

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 { AXDrawerContentComponent } from './drawer-content.component';
-
-const COMPONENT = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
-const MODULES = [CommonModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXDrawerModule { }