@acorex/components 6.5.26 → 6.5.28

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+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
+      });
+    }
+  }
+}