@acorex/components 6.5.28 → 6.5.29

package/src/lib/selection-list/selection-list.component.ts

@@ -1,115 +0,0 @@
-import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, ViewEncapsulation, EventEmitter } from '@angular/core';
-import { Output } from '@angular/core';
-import { AXSelectionList } from '@acorex/core';
-import { AXBaseComponent, AXBaseSizableComponent, AXBaseValueComponent, AXElementSize, AXValidatableComponent } from '../base/element.class';
-
-@Component({
-  selector: 'ax-selection-list',
-  templateUrl: './selection-list.component.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AXSelectionListComponent extends AXValidatableComponent implements AXBaseSizableComponent, AXBaseComponent {
-  private _selectedItems: any[] = [];
-
-  @Input()
-  readonly: boolean;
-
-  @Input()
-  value: boolean;
-
-  @Input()
-  disabled: boolean;
-
-  @Input()
-  size: AXElementSize = 'md';
-
-  @Input()
-  direction: string = 'horizontal';
-
-  @Input()
-  items: Array<AXSelectionList> = [];
-
-  @Input()
-  mode: string = 'single';
-
-  @Input()
-  textField: string = 'text';
-
-  @Input()
-  valueField: string = 'value';
-
-  @Output()
-  selectionChanged: EventEmitter<any> = new EventEmitter<any>();
-
-  @Output()
-  selectedItemsChange: EventEmitter<any[]> = new EventEmitter<any[]>();
-
-
-  @Input()
-  public get selectedItems(): any[] {
-    return this._selectedItems || [];
-  }
-  public set selectedItems(v: any[]) {
-    this._selectedItems = v;
-    this.selectedItemsChange.emit(this.selectedItems);
-    this.cdr.detectChanges();
-  }
-
-  @Output()
-  selectedValuesChange: EventEmitter<any[]> = new EventEmitter<any[]>();
-
-
-  @Input()
-  public get selectedValues(): any[] {
-    return this._selectedItems.map((c) => c[this.valueField]) || [];
-  }
-  public set selectedValues(v: any[]) {
-    const old = this.selectedValues;
-    if (v == null) {
-      v = [];
-    }
-    if (JSON.stringify(old) != JSON.stringify(v)) {
-      this.selectedItems = this.items.filter((c) => v.includes(c[this.valueField]));
-      this.selectedValuesChange.emit(this.selectedValues);
-    }
-  }
-
-  ngAfterViewInit(): void {
-    this.cdr.detectChanges();
-  }
-
-  constructor(private cdr: ChangeDetectorRef) {
-    super();
-  }
-
-  onCheckValueChange(value: any, checked: boolean) {
-    if (!this.disabled) {
-      if (this.mode === 'single') {
-        this.selectedValues = [value];
-      } else {
-        if (checked) {
-          if (!this.selectedValues.includes(value)) {
-            this.selectedValues = [...this.selectedValues, ...[value]];
-          }
-        } else {
-          this.selectedValues = this.selectedValues.filter((c) => c !== value);
-        }
-      }
-    }
-  }
-  focus(): void { }
-
-  onvalueChanged(e) {
-    if (!this.disabled) {
-      this.selectedItemsChange.emit([e]);
-    }
-  }
-
-
-  checkBoxClick(e, data) {
-    debugger
-    this.selectionChanged.emit({ valueField: data[this.valueField], value: e.value });
-  }
-
-}

package/src/lib/selection-list/selection-list.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXSelectionListComponent } from './selection-list.component';
-import { AXCheckBoxModule } from '../checkbox/checkbox.module';
-import { FormsModule } from '@angular/forms';
-
-@NgModule({
-  declarations: [AXSelectionListComponent],
-  imports: [CommonModule, FormsModule, AXCheckBoxModule],
-  exports: [AXSelectionListComponent],
-  providers: []
-})
-export class AXSelectionListModule { }

package/src/lib/switch/switch.component.html

@@ -1,4 +0,0 @@
-<label class="ax ax-switch" >
-    <input type="checkbox" [(ngModel)]="value"  [ngModelOptions]="{standalone: true}" [attr.tabindex]="tabIndex">
-    <span class="slider round"></span>
-</label>

package/src/lib/switch/switch.component.scss

@@ -1,65 +0,0 @@
-.ax {
-  &.ax-switch {
-    position: relative;
-    display: inline-block;
-    width: 46px;
-    height: 25px;
-    margin: 5px;
-
-    >input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-
-      &:checked {
-        &+.slider {
-          background-color: var(--ax-primary-color);
-
-          &::before {
-            -webkit-transform: translateX(21px);
-            -ms-transform: translateX(21px);
-            transform: translateX(21px);
-          }
-        }
-      }
-    }
-
-    &:focus-within {
-      .slider {
-        outline: 1px solid var(--ax-primary-color);
-      }
-    }
-
-    .slider {
-      position: absolute;
-      cursor: pointer;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: #ccc;
-      -webkit-transition: 0.2s;
-      transition: 0.2s;
-
-      &::before {
-        content: "";
-        position: absolute;
-        height: 21px;
-        width: 21px;
-        left: 2px;
-        bottom: 2px;
-        background-color: white;
-        -webkit-transition: 0.2s;
-        transition: 0.2s;
-      }
-
-      &.round {
-        border-radius: 25px;
-
-        &:before {
-          border-radius: 50%;
-        }
-      }
-    }
-  }
-}

package/src/lib/switch/switch.component.ts

@@ -1,57 +0,0 @@
-import { Component, ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, Output, Input, EventEmitter } from '@angular/core';
-import { AXBaseComponent, AXBaseSizableComponent, AXBaseValueComponent, AXElementSize } from '../base/element.class';
-import { AXValueEvent } from '../base/events.class';
-
-@Component({
-  selector: 'ax-switch',
-  templateUrl: './switch.component.html',
-  styleUrls: ['./switch.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AXSwitchComponent extends AXBaseComponent implements AXBaseSizableComponent, AXBaseValueComponent<boolean> {
-
-
-  @Output()
-  onValueChanged: EventEmitter<AXValueEvent<boolean>> = new EventEmitter<AXValueEvent<boolean>>();
-
-  @Output()
-  valueChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-  @Input()
-  tabIndex: number = 0;
-
-  private _value: boolean;
-  @Input()
-  public get value(): boolean {
-    return this._value;
-  }
-  public set value(v: boolean) {
-    if (this._value !== v) {
-      const oldValue = this._value;
-      this._value = v;
-      this.valueChange.emit(v);
-      this.onValueChanged.emit({
-        component: this,
-        oldValue,
-        value: v
-      });
-    }
-  }
-
-
-  @Input()
-  readonly: boolean;
-
-  @Input()
-  disabled: boolean;
-
-  @Input()
-  size: AXElementSize = 'md';
-
-  constructor(protected cdr: ChangeDetectorRef) {
-    super();
-  }
-
-  focus(): void { }
-}

package/src/lib/switch/switch.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { AXSwitchComponent } from './switch.component';
-
-@NgModule({
-    declarations: [AXSwitchComponent],
-    imports: [CommonModule, FormsModule],
-    exports: [AXSwitchComponent],
-    providers: []
-})
-export class AXSwitchModule {
-
-}

package/src/lib/tab-page/tab-page-Renderer.component.ts

@@ -1,70 +0,0 @@
-import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentRef, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
-import { AXTabPageService } from './tab-page.service';
-import { TAB_META_KEY } from '../base/base-page.class';
-import { AXTabPageHostComponent } from './tab-page-host.component';
-import { Subscription } from 'rxjs';
-
-
-@Component({
-    selector: 'ax-tab-page-renderer',
-    template: `<template #container></template>`,
-    host: { 'class': 'ax tab-page-renderer' }
-})
-export class AXTabPageRendererComponent {
-
-    childs: ComponentRef<AXTabPageHostComponent>[] = [];
-
-    @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
-
-    private subscriptions: Subscription[] = [];
-
-    constructor(
-        private resolver: ComponentFactoryResolver,
-        private tabService: AXTabPageService,
-        private cdr: ChangeDetectorRef
-    ) {
-        this.subscriptions.push(tabService.activated.subscribe(tab => {
-            this.childs.forEach((v: ComponentRef<AXTabPageHostComponent>) => {
-                v.changeDetectorRef.detach();
-                v.location.nativeElement.hidden = true;
-            });
-            const v = this.childs.find(t => (t as any).uid === tab[TAB_META_KEY].uid) as ComponentRef<AXTabPageHostComponent>;
-            if (v) {
-                v.location.nativeElement.hidden = false;
-                v.changeDetectorRef.reattach();
-                v.instance.active();
-            }
-            else {
-                try {
-                    const factory = this.resolver.resolveComponentFactory(AXTabPageHostComponent);
-                    const componentRef = this.container.createComponent(factory);
-                    (componentRef as any).uid = tab[TAB_META_KEY].uid;
-                    const host = componentRef.instance as AXTabPageHostComponent;
-                    host.tab = tab;
-                    this.childs.push(componentRef);
-                    setTimeout(() => {
-                        componentRef.changeDetectorRef.detectChanges();
-                        //host.active();
-                    }, 10);
-                } catch (error) {
-                    console.error(error);
-                }
-            }
-        }));
-
-        this.subscriptions.push(tabService.closed.subscribe(tab => {
-            const hostref = this.childs.find(c => (c as any).uid === tab[TAB_META_KEY].uid);
-            if (hostref) {
-                hostref.destroy();
-            }
-            this.childs = this.childs.filter(c => (c as any).uid !== tab[TAB_META_KEY].uid);
-        }));
-    }
-
-    ngOnDestroy() {
-        this.tabService.clear();
-        this.subscriptions.forEach(s => {
-            s.unsubscribe();
-        });
-    }
-}

package/src/lib/tab-page/tab-page-host.component.ts

@@ -1,110 +0,0 @@
-import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver, ElementRef, ComponentRef, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
-import { AXTabPage, AXTabPageService } from './tab-page.service';
-import { AXRenderService } from '@acorex/core';
-import { AXBasePageComponent, AXPageCloseEvent, TAB_META_KEY } from '../base/base-page.class';
-import { AXLoadingService } from '../loading/loading.service';
-
-@Component({
-    selector: 'ax-tab-page-host',
-    template: `
-        <div class='ax-loading-host'>
-            <div class='ax-tab-page-host' >
-                <div [hidden]="isLoading" style="height:100%" class='ax-tab-page-host-container'>
-                    <ng-template #container></ng-template>
-                </div>
-            </div>
-        </div>
-    `
-})
-
-export class AXTabPageHostComponent implements OnInit {
-
-    tab: AXTabPage;
-    private componentRef: ComponentRef<any>;
-    isLoading: boolean;
-    _loadingId: number;
-
-    @ViewChild('container', { read: ViewContainerRef, static: true })
-    private container: ViewContainerRef;
-
-    constructor(
-        private resolver: ComponentFactoryResolver,
-        private ref: ElementRef<HTMLDivElement>,
-        private rendererService: AXRenderService,
-        private tabService: AXTabPageService,
-        private loadingService: AXLoadingService,
-        private cdr: ChangeDetectorRef,
-    ) {
-    }
-
-
-    ngOnInit() {
-        this.isLoading = true;
-    }
-
-    active() {
-        const func = this.componentRef?.instance?.onActivated;
-        if (func) {
-            const f = (func as Function).bind(this.componentRef.instance);
-            f()
-        }
-    }
-
-    async ngAfterViewInit() {
-        this._loadingId = this.loadingService.show(this.ref.nativeElement.querySelector('.ax-tab-page-host-container'));
-        //
-        let data: any = {};
-        //
-        let component: any;
-        if (typeof this.tab.content === 'string') {
-            const route = await this.rendererService.findLoadedComponentByRoute(this.tab.content, 20);
-            component = route?.component;
-            data = Object.assign(data, route.data);
-        }
-        else if (typeof this.tab.content === 'function') {
-            component = this.tab.content;
-        }
-        if (component == null) {
-            // TODO: 404 page component
-            this.isLoading = false;
-            console.error(`Invalid page Component! ${this.tab.content}`);
-            return;
-        }
-        //
-        data = Object.assign(data, this.tab.data);
-        //
-        try {
-            const factory = this.resolver.resolveComponentFactory(component);
-            this.componentRef = this.container.createComponent(factory);
-            if (!this.componentRef.instance.onClosed) {
-                throw Error('The Component must be inherited from AXBasePageComponent!');
-            }
-            this.componentRef.instance.onClosed.subscribe((e: AXPageCloseEvent) => {
-                this.tabService.close(this.tab);
-            });
-            //
-            const com = this.componentRef.instance as any;
-            //
-            Object.assign(com, data);
-            //
-            this.tab[TAB_META_KEY].component = com;
-            this.isLoading = false;
-            this.loadingService.hide(this._loadingId);
-            this.componentRef.changeDetectorRef.detectChanges();
-        } catch (error) {
-            // TODO: 404 page component
-            console.error(error);
-        } finally {
-            //this.isLoading = false;
-        }
-    }
-
-    ngOnDestroy() {
-        if (this.componentRef) {
-            this.componentRef.hostView.destroy();
-            this.componentRef.destroy();
-            this.container.clear();
-        }
-        this.loadingService.hide(this._loadingId);
-    }
-}

package/src/lib/tab-page/tab-page.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXTabPageRendererComponent } from './tab-page-Renderer.component';
-import { AXLoadingModule } from '../loading/loading.module';
-import { AXTabPageHostComponent } from './tab-page-host.component';
-
-@NgModule({
-    declarations: [AXTabPageRendererComponent, AXTabPageHostComponent],
-    imports: [CommonModule, AXLoadingModule],
-    exports: [AXTabPageRendererComponent],
-    providers: []
-})
-export class AXTabPageModule { }

package/src/lib/tab-page/tab-page.service.ts

@@ -1,176 +0,0 @@
-import { Injectable, EventEmitter } from '@angular/core';
-import { Subject } from 'rxjs';
-import { AXHtmlUtil } from '@acorex/core';
-import { AXPageClosing, AXPageResult, TAB_META_KEY, AXPageClosedPromise } from '../base/base-page.class';
-
-export interface AXTabPage {
-  title: string;
-  content: any;
-  closable?: boolean;
-  data?: any;
-  pinned?: boolean;
-}
-
-
-
-@Injectable({ providedIn: 'root' })
-export class AXTabPageService {
-
-
-
-  tabs: AXTabPage[] = new Array<AXTabPage>();
-  opened = new Subject<AXTabPage>();
-  activated = new Subject<AXTabPage>();
-  closed = new Subject<AXTabPage>();
-  changed = new Subject();
-
-
-
-  constructor() { }
-
-  open(content: any, title: string): AXPageClosedPromise;
-  open(content: any, title: string, data?: any): AXPageClosedPromise;
-  open(options: AXTabPage): AXPageClosedPromise;
-
-  open(arg1, arg2?, arg3?) {
-    let newTab: AXTabPage;
-    if (typeof arg1 === 'object') {
-      const options = Object.assign({ closable: true }, arg1);
-      newTab = {
-        title: options.title,
-        closable: options.closable,
-        content: options.content,
-        data: options.data,
-        pinned: options.pinned
-      };
-    } else {
-      newTab = {
-        title: arg2,
-        closable: true,
-        content: arg1,
-        data: arg3,
-      };
-    }
-    newTab[TAB_META_KEY] = {};
-    newTab[TAB_META_KEY].uid = AXHtmlUtil.getUID();
-    //
-    const existTab = this.tabs.find((c) => newTab[TAB_META_KEY].uid && c[TAB_META_KEY].uid === newTab[TAB_META_KEY].uid) ||
-      this.findExistTab(newTab.content, newTab.data);
-    //
-    if (existTab) {
-      return Promise.resolve(this.active(existTab));
-    }
-    this.tabs.push(newTab);
-    this.tabs
-      .filter((c) => c[TAB_META_KEY].uid !== newTab[TAB_META_KEY].uid)
-      .forEach((t) => {
-        t[TAB_META_KEY].active = false;
-      });
-    this.opened.next(newTab);
-    this.active(newTab);
-    const promise = new AXPageClosedPromise((resolve) => {
-      newTab[TAB_META_KEY].close = (e) => {
-        if (resolve) {
-          delete e.cancel;
-          resolve(e);
-        }
-      };
-    });
-    promise['closeMethod'] = () => { this.close(newTab); };
-    return promise;
-  }
-
-  close(tab: AXTabPage) {
-    const e = { cancel: false };
-    const closingFunc = tab[TAB_META_KEY].component?.onClosing;
-    if (closingFunc) {
-      const res = closingFunc(e);
-      if (res instanceof Promise) {
-        res.then(() => {
-          if (e == null || e.cancel !== true) {
-            this.doCloseAction(tab, e);
-          }
-        });
-      }
-      else {
-        if (e == null || e.cancel !== true) {
-          this.doCloseAction(tab, e);
-        }
-      }
-    } else {
-      this.doCloseAction(tab, e);
-    }
-  }
-
-  private doCloseAction(tab: AXTabPage, e: AXPageClosing): void {
-    const currentTab = this.tabs.find((c) => c[TAB_META_KEY].uid == tab[TAB_META_KEY].uid);
-    if (!currentTab) {
-      return;
-    }
-    const index = this.tabs.indexOf(currentTab);
-    this.tabs = this.tabs.filter(c => c != currentTab);
-    const prev = index > 0 ? this.tabs[index - 1] : this.tabs[0];
-    if (prev) {
-      this.active(prev);
-    }
-    this.closed.next(currentTab);
-    this.changed.next(null);
-    if (currentTab[TAB_META_KEY].close) {
-      currentTab[TAB_META_KEY].close(e);
-    }
-  }
-
-  active(tab: AXTabPage): AXPageResult;
-  active(uid: string): AXPageResult;
-  active(): AXPageResult;
-  active(arg1?): AXPageResult {
-    if (!arg1) {
-      return {
-        sender: this.tabs.find((c) => c[TAB_META_KEY].active === true)
-      }
-    }
-    if (typeof arg1 === 'object') {
-      const tab = <AXTabPage>arg1;
-      tab[TAB_META_KEY].active = true;
-      this.tabs
-        .filter((c) => c[TAB_META_KEY].uid !== tab[TAB_META_KEY].uid)
-        .forEach((t) => {
-          t[TAB_META_KEY].active = false;
-        });
-      this.activated.next(tab);
-      this.changed.next(null);
-      return {
-        sender: tab
-      }
-    } else if (typeof arg1 === 'string') {
-      const tab = this.tabs.find((c) => c[TAB_META_KEY].uid === arg1);
-      if (tab) {
-        return this.active(tab);
-      }
-      return null;
-    }
-  }
-
-  clear(): void {
-    this.tabs.forEach((c) => {
-      this.close(c);
-    });
-    this.tabs = [];
-  }
-
-  private findExistTab(component: any, data: any): AXTabPage {
-    try {
-      if (!data) {
-        data = {};
-      }
-      const result = this.tabs.find((c: any) =>
-        c.content === component &&
-        ((!c.data) ||
-          JSON.stringify(data) === JSON.stringify(c.data))
-      );
-      return result;
-    } catch (error) {
-      return null;
-    }
-  }
-}

package/src/lib/tab-strip/tab-strip.component.html

@@ -1,6 +0,0 @@
-<ul class="tab-strip-container">
-    <ng-container *ngFor="let item of items">
-        <li *ngIf="!!item.visible || item.visible == undefined" [class.active]="item.active"
-            [class.disabled]="item.disable" (click)="handleClick(item)">{{item.text}}</li>
-    </ng-container>
-</ul>

package/src/lib/tab-strip/tab-strip.component.ts

@@ -1,47 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter, ElementRef } from '@angular/core';
-import { AXBaseEvent } from '../base/events.class';
-
-export declare class AXTabStripItem {
-  id: string;
-  name?: string;
-  text?: string;
-  tooltip?: string;
-  icon?: string;
-  visible?: boolean;
-  disable?: boolean;
-  data?: any;
-  style?: string;
-  active?: boolean;
-}
-
-export class AXTabStripChangedEvent extends AXBaseEvent {
-  seledtedTab: AXTabStripItem;
-}
-
-@Component({
-  selector: 'ax-tab-strip',
-  templateUrl: './tab-strip.component.html'
-})
-export class AXTabStripComponent implements OnInit {
-  constructor(private ref: ElementRef) {}
-
-  ngOnInit(): void {}
-
-  @Input()
-  items: AXTabStripItem[] = [];
-
-  @Output()
-  onTabChanged: EventEmitter<AXTabStripChangedEvent> = new EventEmitter<AXTabStripChangedEvent>();
-
-  handleClick(i: AXTabStripItem) {
-    if (!i.disable) {
-      this.items.forEach((c) => (c.active = false));
-      i.active = true;
-      this.onTabChanged.emit({
-        component: this,
-        seledtedTab: i,
-        htmlElement: this.ref.nativeElement
-      });
-    }
-  }
-}