@acorex/components 5.0.5 → 5.0.9

package/src/lib/dropdown/dropdown-base.class.ts

@@ -1,107 +0,0 @@
-import { EventEmitter, Injectable, Input, Output } from "@angular/core";
-import { AXBaseComponent, AXConnectedPosition, AXEvent } from "../base";
-import { _InteractiveComponenetMixin } from "../base/mixin/interactive-mixin.class";
-import { _SizableComponenetMixin } from "../base/mixin/sizable-mixin.class";
-import { AXPopoverComponent } from "../popover";
-
-
-export const AXBaseDropdownMixin = _SizableComponenetMixin(
-    _InteractiveComponenetMixin(AXBaseComponent)
-);
-
-@Injectable()
-export abstract class AXBaseDropDownComponent extends AXBaseDropdownMixin {
-
-    @Input()
-    fitParent: boolean = true;
-
-    @Input()
-    dropdownWidth: number;
-
-    @Output()
-    onOpened: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();
-    @Output()
-    onClosed: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();
-
-
-
-    protected abstract popover: AXPopoverComponent;
-
-    @Input()
-    position: AXConnectedPosition[] = [];
-
-    _emitOnOpenedEvent() {
-        //** call from interactive mixin **//
-        //(this as any).focus();
-        //
-        this.onOpened.emit({
-            component: this,
-            htmlElement: this._getHostElement()
-        });
-    }
-
-    _emitOnClosedEvent() {
-        this.onClosed.emit({
-            component: this,
-            htmlElement: this._getHostElement()
-        });
-    }
-
-    onViewInit() {
-
-        if (this.dropdownWidth == null) {
-            if (this.fitParent === true) {
-                this.dropdownWidth = this._getInnerElement().offsetWidth;
-            }
-        }
-        // wait for documentElement
-        setTimeout(() => {
-            if (this.position.length == 0) {
-                const offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));
-                const list: AXConnectedPosition[] = [
-                    {
-                        originX: 'start',
-                        originY: 'bottom',
-                        overlayX: 'start',
-                        overlayY: 'top',
-                        offsetY: offset
-                    },
-                    {
-                        originX: 'start',
-                        originY: 'top',
-                        overlayX: 'start',
-                        overlayY: 'bottom',
-                        offsetY: -offset
-                    }
-                ];
-                this.position.push(...list);
-            }
-        }, 500);
-    }
-
-    toggle() {
-        if (this.disabled !== true) {
-            this.popover.toggle();
-        }
-    }
-
-    close() {
-        if (!this.isOpen || this.disabled) {
-            return;
-        }
-        this.popover.close();
-        this._emitOnClosedEvent();
-    }
-
-    open() {
-        if (this.isOpen || this.disabled) {
-            return;
-        }
-        this.popover.open();
-        this._emitOnOpenedEvent();
-    }
-
-    get isOpen(): boolean {
-        return this.popover.isOpen;
-    }
-}

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

@@ -1,15 +0,0 @@
-<ax-popover [target]="_target" [position]="position" [openTrigger]="'toggle'" [closeTrigger]="'clickout'">
-    <div class="ax-overlay-pane" [class.ax-dropdown-list]="_needBorder" >
-        <ng-container *ngIf="items && items.length;else panelTpl">
-            <ax-button-item [text]="item.text" [color]="item.color" *ngFor="let item of items">
-                <ax-prefix *ngIf="item.iconClass">
-                    <ax-icon [icon]="item.iconClass"></ax-icon>
-                </ax-prefix>
-            </ax-button-item>
-        </ng-container>
-        <ng-template #panelTpl>
-            <ng-content select="[panel],ax-button-item">
-            </ng-content>
-        </ng-template>
-    </div>
-</ax-popover>

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

@@ -1,105 +0,0 @@
-import {
-    Component,
-    ViewEncapsulation,
-    ChangeDetectionStrategy,
-    ElementRef,
-    ChangeDetectorRef,
-    ContentChildren,
-    ViewChildren,
-    QueryList,
-    EventEmitter,
-    Output,
-    Input,
-    ViewChild,
-    Optional
-} from '@angular/core';
-import { Subscription } from 'rxjs';
-import { AXBaseComponent, AXButtonClickEvent, AXClickEvent, AXConnectedPosition } from '../base';
-import { _DropdownComponenetMixin } from '../base/mixin/dropdown-mixin.class';
-import { _InteractiveComponenetMixin } from '../base/mixin/interactive-mixin.class';
-import { AXButtonComponent, AXButtonItem, AXButtonItemComponent } from '../button';
-import { AXPopoverComponent } from '../popover';
-import { AXBaseDropDownComponent } from './dropdown-base.class';
-
-
-
-
-
-@Component({
-    selector: 'ax-dropdown-panel',
-    templateUrl: './dropdown-panel.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-})
-export class AXDropdownPanelComponent extends AXBaseDropDownComponent {
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef,
-        @Optional()
-        public _parent: AXButtonComponent,
-    ) {
-        super(elementRef, cdr);
-        this._target = this._parent._getHostElement();
-    }
-
-    @ContentChildren(AXButtonItemComponent) _contentButtons: QueryList<AXButtonItemComponent>;
-    @ViewChildren(AXButtonItemComponent) _viewButtons: QueryList<AXButtonItemComponent>;
-
-    @Output()
-    onItemClick: EventEmitter<AXButtonClickEvent> = new EventEmitter<AXButtonClickEvent>();
-
-    @ViewChild(AXPopoverComponent)
-    protected popover: AXPopoverComponent;
-
-    private _items: AXButtonItem[];
-    @Input()
-    public get items(): AXButtonItem[] {
-        return this._items || [];
-    }
-    public set items(v: AXButtonItem[]) {
-        this._items = v;
-        this._cdr.markForCheck();
-    }
-
-    _needBorder: boolean = false;
-    _subs: Subscription[] = [];
-    _target: HTMLElement;
-
-    private _getAllButtons(): AXButtonItemComponent[] {
-        return [...Array.from(this._viewButtons), ...Array.from(this._contentButtons)];
-    }
-
-
-    onViewInit() {
-        super.onViewInit();
-      
-        this._getAllButtons().forEach(c => {
-            this._needBorder = true;
-            this._subs.push(c.onClick.subscribe(this._handleOnItemClick.bind(this)));
-            this._cdr.markForCheck();
-        });
-    }
-
-    onDestroy(): void {
-        this._subs.forEach(s => {
-            s?.unsubscribe();
-        });
-    }
-
-    _emitOnItemClickEvent(e: AXClickEvent, item: AXButtonItemComponent): void {
-        this.onItemClick.emit({
-            component: this,
-            htmlElement: this._getHostElement(),
-            nativeEvent: e.nativeEvent,
-            name: item.name,
-            data: item.data,
-        });
-    }
-
-    private _handleOnItemClick(e: AXClickEvent) {
-        this.close();
-        this._emitOnItemClickEvent(e, e.component);
-
-    }
-}

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

@@ -1,19 +0,0 @@
-<div class="ax-editor-container" [class.ax-state-disabled]="disabled">
-    <ng-content select="ax-prefix">
-    </ng-content>
-    <div class="ax-dropdown-content" style="display: inline-flex;" (click)="_handleArrowClickEvent()">
-        <ng-content select="[input]">
-        </ng-content>
-    </div>
-    <ax-button [disabled]="disabled" [tabIndex]="-1" [size]="size" color="light" look="blank" (onClick)="_handleArrowClickEvent()">
-        <ax-icon icon="ax-ic ax-ic-chevron ax-transform ax--rotate-90"></ax-icon>
-    </ax-button>
-    <ng-content select="ax-suffix">
-    </ng-content>
-</div>
-<ax-popover [target]="_target" [position]="position" [openTrigger]="'manual'" [closeTrigger]="'clickout'">
-    <div class="ax-overlay-pane"  [style.min-width.px]="dropdownWidth">
-        <ng-content select="[panel]">
-        </ng-content>
-    </div>
-</ax-popover>

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

@@ -1,31 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
-import { AXBaseComponent } from '../base';
-import { AXPopoverComponent } from '../popover';
-import { AXBaseDropDownComponent } from './dropdown-base.class';
-
-@Component({
-    selector: 'ax-drop-down',
-    templateUrl: 'dropdown.component.html',
-    inputs: ['disabled', 'tabIndex', 'size', 'fitParent'],
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AXDropdownComponent extends AXBaseDropDownComponent {
-
-    @ViewChild(AXPopoverComponent)
-    protected popover: AXPopoverComponent;
-
-    _target: AXBaseComponent;
-
-    constructor(
-        _elementRef: ElementRef,
-        _cdr: ChangeDetectorRef
-    ) {
-        super(_elementRef, _cdr);
-        this._target = this;
-    }
-
-    _handleArrowClickEvent() {
-        this.toggle();
-    }
-}

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

@@ -1,17 +0,0 @@
-import { OverlayModule } from '@angular/cdk/overlay';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { AXButtonModule } from '../button';
-import { AXEditorDecoratorModule } from '../decorators';
-import { AXIconModule } from '../icon';
-import { AXPopoverModule } from '../popover';
-import { AXDropdownPanelComponent } from './dropdown-panel.component';
-import { AXDropdownComponent } from './dropdown.component';
-
-@NgModule({
-    imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule],
-    exports: [AXDropdownComponent, AXDropdownPanelComponent],
-    declarations: [AXDropdownComponent, AXDropdownPanelComponent],
-    providers: [],
-})
-export class AXDropdownModule { }

package/src/lib/form/form-field.component.ts

@@ -1,18 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core';
-import { AXBaseComponentMixin } from '../base/mixin/mixin.class';
-
-@Component({
-    selector: 'ax-form-field',
-    template: '<div class="ax-form-field"><ng-content></ng-content></div>',
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AXFormFieldComponent extends AXBaseComponentMixin {
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef
-    ) {
-        super(elementRef, cdr);
-    }
-}

package/src/lib/form/form-field.module.ts

@@ -1,14 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { AXFormFieldComponent } from './form-field.component';
-import { AXFormHintComponent } from './form-hint.component';
-import { AXFormComponent } from './form.component';
-
-@NgModule({
-    imports: [CommonModule],
-    exports: [AXFormFieldComponent, AXFormComponent,AXFormHintComponent],
-    declarations: [AXFormFieldComponent, AXFormComponent,AXFormHintComponent],
-    providers: [],
-})
-export class AXFormModule { }

package/src/lib/form/form-hint.component.ts

@@ -1,18 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core';
-import { AXBaseComponentMixin } from '../base/mixin/mixin.class';
-
-@Component({
-    selector: 'ax-form-hint',
-    template: ' <p class="ax-text-gray-400 ax-text-xs ax-py-1"><ng-content></ng-content></p>',
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AXFormHintComponent extends AXBaseComponentMixin {
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef
-    ) {
-        super(elementRef, cdr);
-    }
-}

package/src/lib/form/form.component.ts

@@ -1,54 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core';
-import { AXBaseComponentMixin } from '../base/mixin/mixin.class';
-import { AXValidationResult } from '../validation/validation.class';
-
-@Component({
-    selector: 'ax-form',
-    template: '<div class="ax-form"><ng-content></ng-content></div>',
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AXFormComponent extends AXBaseComponentMixin {
-
-    constructor(
-        elementRef: ElementRef,
-        private cdr: ChangeDetectorRef
-    ) {
-        super(elementRef, cdr);
-    }
-
-
-    _getComponenets() {
-        return Array.from(this._getHostElement().querySelectorAll('[ax-form-input="true"]'));
-    }
-
-    validate(): Promise<AXValidationResult> {
-        const widgets = this._getComponenets();
-        //
-        return new Promise<AXValidationResult>((resolve, reject) => {
-            if (widgets.length === 0) {
-                return Promise.resolve({ result: true });
-            }
-            Promise.all(widgets.map((c) => (c as any).__axContext__.validate())).then((rules: any) => {
-                const failed = rules.filter((c: any) => !c.result);
-                if (failed.length) {
-                    reject({
-                        result: false,
-                        items: failed
-                    });
-                }
-                else {
-                    resolve({ result: true });
-                }
-            });
-        });
-    }
-
-    clear() {
-        const widgets = this._getComponenets();
-        widgets.forEach(w => {
-            (w as any).__axContext__.clear();
-        });
-
-    }
-}

package/src/lib/icon/icon.component.ts

@@ -1,27 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, Input, HostBinding } from '@angular/core';
-import { AXSizableComponentMixin } from '../base';
-
-@Component({
-    selector: 'ax-icon',
-    template: '',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-})
-export class AXIconComponent extends AXSizableComponentMixin {
-
-    @Input()
-    icon: string;
-
-    @HostBinding('class')
-    private get __iconClass(): string {
-        return `ax-ic ${this.icon}`;
-    }
-
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef
-    ) {
-        super(elementRef, cdr);
-    }
-
-}

package/src/lib/icon/icon.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXIconComponent } from './icon.component';
-
-const COMPONENT = [AXIconComponent];
-const MODULES = [CommonModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXIconModule { }

package/src/lib/input-mask/input-mask.component.ts

@@ -1,43 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
-
-@Component({
-    selector: 'ax-input-mask',
-    template: '',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-})
-export class AXInputMaskComponent {
-
-   
-   private _prefix : string;
-   @Input()
-   public get prefix() : string {
-       return this._prefix || '';
-   }
-   public set prefix(v : string) {
-       this._prefix = v;
-   }
-
-
-   
-   private _suffix : string;
-   @Input()
-   public get suffix() : string {
-       return this._suffix || '';
-   }
-   public set suffix(v : string) {
-       this._suffix = v;
-   }
-   
-   
-
-    @Input()
-    showMaskTyped: boolean = false;
-
-    @Input()
-    clearIfNotMatch: boolean = false;
-
-    @Input()
-    mask: string;
-
-}

package/src/lib/input-mask/input-mask.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXInputMaskComponent } from './input-mask.component';
-import { NgxMaskModule } from 'ngx-mask';
-
-const COMPONENT = [AXInputMaskComponent];
-const MODULES = [CommonModule, NgxMaskModule.forRoot()];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXInputMaskModule { }

package/src/lib/label/label.component.html

@@ -1,3 +0,0 @@
-<label class="ax-label {{size}}">
-    <ng-content></ng-content>
-</label>

package/src/lib/label/label.component.ts

@@ -1,16 +0,0 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef } from '@angular/core';
-import { AXSizableComponentMixin } from '../base';
-
-@Component({
-  selector: 'ax-label',
-  templateUrl: './label.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
-})
-export class AXLabelComponent extends AXSizableComponentMixin {
-
-  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
-    super(elementRef, cdr);
-  }
-
-}

package/src/lib/label/label.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXLabelComponent } from './label.component';
-
-const COMPONENT = [AXLabelComponent];
-const MODULES = [CommonModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXLabelModule { }

package/src/lib/loading/loading-spinner.component.ts

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'ax-loading-spinner',
-    template: `
-    <svg version="1.1" width="100" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve">
-        <path fill="current"
-        d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
-        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25"
-            dur="0.6s" repeatCount="indefinite" />
-        </path>
-    </svg>
-    `
-})
-export class AXLoadingSpinnerComponent {
-}

package/src/lib/loading/loading.component.ts

@@ -1,55 +0,0 @@
-import { AXConfig } from '@acorex/core';
-import { ComponentPortal, Portal } from '@angular/cdk/portal';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, EventEmitter, ElementRef, ChangeDetectorRef, HostBinding } from '@angular/core';
-import { AXBaseComponentMixin } from '../base';
-
-@Component({
-    selector: 'ax-loading',
-    template: `
-        <ng-template [cdkPortalOutlet]="_selectedPortal" ></ng-template>
-    `,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: { class: 'ax-loading' }
-})
-export class AXLoadingComponent extends AXBaseComponentMixin {
-
-    _selectedPortal: Portal<any>;
-
-    /**
-     * @ignore
-     */
-    constructor(
-        elementRef: ElementRef,
-        cdr: ChangeDetectorRef
-    ) {
-        super(elementRef, cdr);
-    }
-
-
-    @Output()
-    visibleChange: EventEmitter<boolean> = new EventEmitter();
-
-    private _visible: boolean;
-
-    @Input()
-    public get visible(): boolean {
-        return this._visible;
-    }
-    public set visible(v: boolean) {
-        if (v != this._visible) {
-            this._visible = v;
-            v ? this._getHostElement().classList.remove('ax-hide') : this._getHostElement().classList.add('ax-hide');
-            this.visibleChange.emit(v);
-        }
-    }
-
-    @Input()
-    type: string = 'spinner';
-
-    onInit() {
-        const loading = AXConfig.get(`layout.loading.${this.type}`);
-        this._selectedPortal = new ComponentPortal(loading);
-        this._cdr.markForCheck();
-    }
-}