@acorex/components 6.0.1 → 6.0.2

package/loading/src/loading.component.ts

@@ -1,79 +0,0 @@
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-import { AXConfig } from '@acorex/core/config';
-import {
-  CdkPortalOutletAttachedRef,
-  ComponentPortal,
-  Portal,
-} from '@angular/cdk/portal';
-import {
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  Input,
-  Output,
-  EventEmitter,
-  ElementRef,
-  ChangeDetectorRef,
-  ComponentRef,
-} from '@angular/core';
-
-@Component({
-  selector: 'ax-loading',
-  template: `
-    <ng-template
-      [cdkPortalOutlet]="_selectedPortal"
-      (attached)="_handleAttched($event)"
-    ></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';
-
-  @Input()
-  text: string;
-
-  onInit() {
-    const loading = AXConfig.get(`layout.loading.${this.type}`);
-    this._selectedPortal = new ComponentPortal(loading);
-    this._cdr.markForCheck();
-  }
-
-  _handleAttched(ref: CdkPortalOutletAttachedRef) {
-    ref = ref as ComponentRef<any>;
-    if (ref.instance) {
-      ref.instance.text = this.text;
-    }
-  }
-}

package/loading/src/loading.directive.ts

@@ -1,88 +0,0 @@
-import {
-    ChangeDetectorRef,
-    ComponentFactoryResolver,
-    Directive,
-    ElementRef,
-    Input,
-    OnChanges,
-    Renderer2,
-    SimpleChanges, ViewContainerRef
-  } from '@angular/core';
-import { AXLoadingComponent } from './loading.component';
-  
-  
-  const OVERLAY_CLASS = 'ax-loading-overlay';
-  
-  // This directive places an overlay with a loading spinner over its host element
-  // if isLoading equals to true and hides the overlay when isLoading becomes false.
-  @Directive({
-    selector: '[axIsLoading]'
-  })
-  export class AXLoadingDirective implements OnChanges {
-    @Input('axIsLoading')
-    isLoading = false;
-  
-    protected overlayElement!: HTMLDivElement;
-    protected spinnerElement!: HTMLDivElement;
-    protected hostElement!: HTMLDivElement;
-  
-
-    //TODO: ComponentFactoryResolver is deprecated
-    constructor(
-      protected readonly elementRef: ElementRef,
-      protected readonly renderer: Renderer2,
-      protected readonly changeDetectorRef: ChangeDetectorRef,
-      protected readonly viewContainerRef: ViewContainerRef,
-      protected readonly componentFactoryResolver: ComponentFactoryResolver,
-    ) {
-      this.hostElement = this.elementRef.nativeElement;
-      this.hostElement.style.position = 'relative';
-    }
-  
-    ngOnChanges(changes: SimpleChanges): void {
-      if (!this.overlayElement || !this.spinnerElement) {
-        this.init();
-      }
-  
-      if (changes.isLoading) {
-        const isLoadingValue = changes.isLoading.currentValue;
-  
-        if (isLoadingValue) {
-          this.addLoadingIndicator();
-        }
-        else {
-          this.removeLoadingIndicator();
-        }
-  
-        this.changeDetectorRef.markForCheck();
-      }
-    }
-  
-    protected addLoadingIndicator(): void {
-      this.renderer.appendChild(this.hostElement, this.overlayElement);
-      this.renderer.appendChild(this.overlayElement, this.spinnerElement);
-    }
-  
-    protected removeLoadingIndicator(): void {
-      this.renderer.removeChild(this.overlayElement, this.spinnerElement);
-      this.renderer.removeChild(this.hostElement, this.overlayElement);
-      this.viewContainerRef.clear();
-    }
-  
-    protected init(): void {
-      this.initOverlayElement();
-      this.initSpinnerComponent();
-    }
-  
-    protected initSpinnerComponent(): void {
-      const spinnerComponentFactory = this.componentFactoryResolver.resolveComponentFactory(AXLoadingComponent);
-      const spinnerComponent = this.viewContainerRef.createComponent(spinnerComponentFactory);
-      this.spinnerElement = spinnerComponent.location.nativeElement;
-    }
-  
-    protected initOverlayElement(): void {
-      this.overlayElement = this.renderer.createElement('div');
-      this.renderer.addClass(this.overlayElement, OVERLAY_CLASS);
-    }
-  }
-  

package/loading/src/loading.module.ts

@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { PortalModule } from '@angular/cdk/portal';
-import { AXConfig } from '@acorex/core/config';
-import { AXLoadingComponent } from './loading.component';
-import { AXLoadingDirective } from './loading.directive';
-import { AXLoadingSpinnerComponent } from './loading-spinner.component';
-
-const COMPONENT = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
-const MODULES = [CommonModule, OverlayModule, PortalModule];
-
-@NgModule({
-    declarations: [...COMPONENT],
-    imports: [...MODULES],
-    exports: [...COMPONENT],
-    providers: [],
-})
-export class AXLoadingModule {
-
-
-    constructor() {
-        AXConfig.set({
-            layout: {
-                loading: {
-                    spinner: AXLoadingSpinnerComponent,
-                }
-            }
-        })
-
-    }
-}

package/loading/src/loading.service.ts

@@ -1,205 +0,0 @@
-import { Injectable, NgZone } from '@angular/core';
-import { asyncScheduler, BehaviorSubject, Observable } from 'rxjs';
-import { finalize, observeOn } from 'rxjs/operators';
-import { AXOverlayService, AXOverlayViewRef } from '@acorex/components/common';
-import { AXLoadingComponent } from './loading.component';
-
-type LoadingContext = object;
-type LoaderId = string | number; // expected enum values
-const DEFAULT_LOADER_ID: LoaderId = '_DEFAULT';
-
-/**
- * Used for centrally setting/unsetting loading flags for components or services.
- * Should be connected to global HTTP interceptor which will unset
- * the loading flags in case an error happens using the clearLoadings() method.
- *
- * FAQ:
- * Q: How to change loading flag for a parent component?
- * A: Inject the parent component as a dependency to your constructor and
- *    call loadingService.setLoading(parentComponent, STATE).
- *
- * Q: How to change loading flag for a child component?
- * A: Use a @ViewChild with component selector and pass the
- *    reference of the child to setLoading method.
- *
- * Q: I need more loading indicators in my components. How to?
- * A: Assign a LoaderId to each indicator and then use them
- *    with calls to methods of this service.
- */
-@Injectable({
-  providedIn: 'root',
-})
-export class AXLoadingService {
-  // WeakMap will remove components from itself upon
-  // their garbage collection by JS runtime.
-  protected loadingStates: any = new WeakMap<
-    LoadingContext,
-    Map<LoaderId, boolean>
-  >();
-  // Both loading state maps are kept in-sync such that
-  // they can be used by both sync and async methods.
-  protected loadingStates$: any = new WeakMap<
-    LoadingContext,
-    Map<LoaderId, BehaviorSubject<boolean>>
-  >();
-
-  constructor(
-    protected zoneRef: NgZone,
-    private overlayService: AXOverlayService
-  ) {}
-
-  private _stack: { id: number; component: AXOverlayViewRef }[] = [];
-
-  show(location?: Element): number {
-    let host: Element | any;
-    if (location) {
-      host = location.closest('.ax-loading-host');
-    }
-    const containerElement = (host || location) as HTMLDivElement;
-    const com = this.overlayService.show(
-      AXLoadingComponent,
-      {},
-      {
-        closeOnClickOutside: false,
-        containerElement,
-        hasBackdrop: true,
-        backdropClass: ['ax-loading-overlay'],
-        scroll: 'block',
-      }
-    );
-    com.instance.visible = true;
-    const id = new Date().getTime();
-    this._stack.push({ id, component: com });
-    return id;
-  }
-
-  hide(id): void {
-    const f = this._stack.find((c) => c.id === id);
-    if (f) {
-      f.component.dispose();
-      this._stack = this._stack.filter((c) => c.id !== id);
-    }
-  }
-
-  // Observable creation operator.
-  // LoaderId can be used when there are multiple loading indicators associated to a single context.
-  // Context can be any object, though in practice, components and services will be the most common contexts.
-  // loaderId is a non-mandatory parameter - when not specified, a default loaderId is used.
-  // Such a scenario is used when your context has contains only one loading indicator.
-  doLoading<V>(
-    source$: Observable<V>,
-    context: LoadingContext,
-    loaderId?: LoaderId
-  ): Observable<V> {
-    this.startLoading(context, loaderId);
-
-    return source$.pipe(
-      observeOn(asyncScheduler),
-      finalize(() => this.endLoading(context, loaderId))
-    );
-  }
-
-  // To be used in your html templates.
-  // Returns a boolean indicating whether a given loader is active in a given context.
-  // If loaderId is unspecified, the method will return a logical disjunction of all
-  // loader states in the context.
-  isLoading(context: LoadingContext, loaderId?: LoaderId): boolean {
-    const loaderStates = this.loadingStates.get(context);
-
-    if (!loaderStates) {
-      return false;
-    } else {
-      if (loaderId !== undefined) {
-        return loaderStates.get(this.getLoaderId(loaderId)) ?? false;
-      } else {
-        return [...loaderStates.values()].filter((state) => state).length > 0;
-      }
-    }
-  }
-
-  // To be used in your html templates with async pipes.
-  // Returns an Observable of booleans indicating whether a given loader is active in a given context.
-  isLoading$(
-    context: LoadingContext,
-    loaderId?: LoaderId | any
-  ): Observable<boolean> {
-    const coalescedLoaderId = this.getLoaderId(loaderId);
-
-    if (!this.hasLoadingStates(context, coalescedLoaderId)) {
-      this.setLoadingState(context, false, loaderId);
-    }
-
-    return this.loadingStates$.get(context).get(coalescedLoaderId);
-  }
-
-  // The startLoading and endLoading methods are intended to be used when handling
-  // complex scenarios where a need for extended usage flexibility is desired.
-  startLoading(context: LoadingContext, loaderId?: LoaderId): void {
-    this.setLoadingState(context, true, this.getLoaderId(loaderId));
-  }
-
-  endLoading(context: LoadingContext, loaderId?: LoaderId): void {
-    this.setLoadingState(context, false, this.getLoaderId(loaderId));
-  }
-
-  // To be called by middleware code (HTTP interceptors/routing listeners, etc.).
-  clearLoadings(): void {
-    this.loadingStates = new WeakMap<LoadingContext, Map<LoaderId, boolean>>();
-    this.loadingStates$ = new WeakMap<
-      LoadingContext,
-      Map<LoaderId, BehaviorSubject<boolean>>
-    >();
-  }
-
-  protected setLoadingState(
-    context: LoadingContext,
-    state: boolean,
-    loaderId: LoaderId
-  ): void {
-    if (!this.hasLoadingStates(context, loaderId)) {
-      if (this.hasContextLoadingState(context)) {
-        this.loadingStates.get(context).set(loaderId, state);
-        this.loadingStates$
-          .get(context)
-          .set(loaderId, new BehaviorSubject<boolean>(state));
-      } else {
-        this.loadingStates.set(
-          context,
-          new Map<LoaderId, boolean>([[loaderId, state]])
-        );
-        this.loadingStates$.set(
-          context,
-          new Map<LoaderId, BehaviorSubject<boolean>>([
-            [loaderId, new BehaviorSubject<boolean>(state)],
-          ])
-        );
-      }
-    } else {
-      // @ts-ignore - loadingStates[context] is surely defined in this branch
-      this.loadingStates.get(context).set(loaderId, state);
-      this.loadingStates$.get(context).get(loaderId).next(state);
-    }
-  }
-
-  protected hasLoadingStates(context: LoadingContext, loaderId: LoaderId) {
-    return (
-      this.hasContextLoadingState(context) &&
-      this.hasLoaderLoadingState(context, loaderId)
-    );
-  }
-
-  protected hasContextLoadingState(context: LoadingContext) {
-    return this.loadingStates.has(context) && this.loadingStates$.has(context);
-  }
-
-  protected hasLoaderLoadingState(context: LoadingContext, loaderId: LoaderId) {
-    return (
-      this.loadingStates.get(context).has(loaderId) &&
-      this.loadingStates$.get(context).has(loaderId)
-    );
-  }
-
-  protected getLoaderId(loaderId?: LoaderId): LoaderId {
-    return loaderId ?? DEFAULT_LOADER_ID;
-  }
-}

package/menu/index.ts

@@ -1 +0,0 @@
-export * from './public-api'

package/menu/ng-package.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "public-api.ts"
-  }
-}

package/menu/src/menu.component.html

@@ -1,64 +0,0 @@
-<ng-container *ngIf="displayItems.length; else tmpEmpty">
-  <ul [ngClass]="_getDirection()">
-    <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ list: displayItems }"></ng-container>
-  </ul>
-
-  <ng-template #recursiveListTmpl let-list="list">
-    <ng-container *ngFor="let item of list;  trackBy: _trackLoaded">
-      <li #parentRef *ngIf="item[visibleField] !=false" [class.ax-state-disabled]="item[disableField]"
-        (click)="_onMenuClick($event,item)" (mouseenter)="_onMouseEnter($event,item)"
-        (mouseleave)="_onMouseLeave(item)">
-        <a [ngClass]="{'active': item.isActive}">
-          <div class="ax-menu-start-side">
-            <ax-icon *ngIf="item[iconField] else tmpItem" [class]="item[iconField]"></ax-icon>
-            <span>{{_getItemDisplayTextTemplte(item)}}</span>
-          </div>
-          <div class="ax-menu-end-side">
-            <ax-icon *ngIf="!item.isLoading"
-              [ngClass]="{'ax-ic-chevron':item?.children?.length > 0 || item[hasChildField],'active-icon': item.isOpen}">
-            </ax-icon>
-            <ax-loading *ngIf="item.isLoading">
-            </ax-loading>
-          </div>
-        </a>
-        <!-- <ax-popover [target]="parentRef" [position]="position" [openTrigger]="'mouseover'" [closeTrigger]="'clickout'"> -->
-        <ul [class.ax-state-disabled]="item[disableField]" *ngIf="item?.children?.length > 0 && item.isOpen">
-          <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ list: item.children }"></ng-container>
-        </ul>
-        <!-- </ax-popover> -->
-      </li>
-    </ng-container>
-  </ng-template>
-</ng-container>
-
-
-<ng-container *ngIf="isLoading">
-  <ng-template>
-    <div class="ax-flex ax-items-center ax-justify-center ax-p-4">
-      <ax-loading text="{{ 'layout.loading.text' | trans }}"></ax-loading>
-    </div>
-  </ng-template>
-</ng-container>
-<ng-template #tmpEmpty>
-  <ng-container *ngIf="!isLoading">
-    <!--------------- check for custom template  --------------->
-    <ng-container *ngIf="emptyTemplate; else elseEmptyTemplate">
-      <ng-container *ngTemplateOutlet="emptyTemplate">
-      </ng-container>
-    </ng-container>
-    <ng-template #elseEmptyTemplate>
-      <div class="ax-list-item">
-        {{ 'common.no-result-found' | trans }}
-      </div>
-    </ng-template>
-  </ng-container>
-</ng-template>
-<ng-template #tmpItem>
-  <ng-container *ngIf="!isLoading">
-    <!--------------- check for custom template  --------------->
-    <ng-container *ngIf="itemTemplate">
-      <ng-container *ngTemplateOutlet="itemTemplate">
-      </ng-container>
-    </ng-container>
-  </ng-container>
-</ng-template>