@acorex/components 5.8.0 → 6.0.1

package/loading/src/loading.component.ts

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

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

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

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

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

package/menu/ng-package.json

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

package/menu/public-api.ts

@@ -0,0 +1,2 @@
+export * from './src/menu.component';
+export * from './src/menu.module';

package/menu/src/menu.component.html

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