@indice/ng-components 0.2.138-beta → 0.2.139

package/src/lib/services/component-loader/component-loader.class.ts

@@ -0,0 +1,226 @@
+import {
+  ComponentFactoryResolver,
+  ViewContainerRef,
+  ComponentFactory,
+  Type,
+  ElementRef,
+  StaticProvider,
+  TemplateRef,
+  ComponentRef,
+  ApplicationRef,
+  Injector,
+} from '@angular/core';
+import { Subject } from 'rxjs';
+import { ComponentLoaderOptions } from './component-loader-options.class';
+import { ContentRef } from './content-ref.class';
+
+/**
+ * Provides ways of loading and handling dynamic content.
+ *
+ * @remarks
+ * Do NOT use this directly, create an instance through {@link ComponentLoaderFactory}
+ * You can use this loader in two ways:
+ * - Attaches a component to `ViewContainerRef`.
+ * - Attaches a component to `ViewContainerRef`. The attached component has a `<ng-content>` tag inside its view. The {@link ComponentLoaderOptions.content} will be drawn inside this tag.
+ *
+ * @internal
+ */
+export class ComponentLoader<T> {
+  /**
+   * Before content is shown event.
+   */
+  onBeforeShow = new Subject();
+  /**
+   * After show content event.
+   * @returns The id of newly created component ref.
+   */
+  onShown = new Subject();
+  /**
+   * Before content is hidden event.
+   * @returns The instance of attached component;
+   */
+  onBeforeHide = new Subject();
+  /**
+   * After content is hidden event.
+   * @returns The id of destroyed component ref.
+   */
+  onHidden = new Subject();
+
+  public instance?: T;
+  public componentRef?: ComponentRef<T>;
+  private componentFactory?: ComponentFactory<T>;
+  private container: string | ElementRef | any;
+  private providers: StaticProvider[] = [];
+  private contentRef?: ContentRef;
+  private containerDefaultSelector = 'body';
+  private innerComponent?: ComponentRef<T>;
+  constructor(
+    private vcr: ViewContainerRef | undefined,
+    private cfr: ComponentFactoryResolver,
+    private applicationRef: ApplicationRef,
+    private injector: Injector
+  ) {}
+
+  /**
+   * Attaches component.
+   * @param componentType - The type component to attach.
+   * @returns Current instance of {@link ComponentLoader}
+   */
+  public attach(componentType: Type<T>): ComponentLoader<T> {
+    this.componentFactory = this.cfr.resolveComponentFactory<T>(componentType);
+    return this;
+  }
+
+  /**
+   * Body will be used in nothing is provided.
+   * @param container - The element in which dynamic content will be drawn inside to. For string case a query to the dom will be executed to find the element.
+   * @returns Current instance of {@link ComponentLoader}
+   */
+  public to(container?: string | ElementRef): ComponentLoader<T> {
+    this.container = container || this.container;
+    return this;
+  }
+
+  /**
+   * Adds provider to the providers array. These providers will be injected to the attached component.
+   *
+   * @see {@link https://angular.io/guide/glossary#di-token | Injection Token}
+   *
+   * @param provider - Provider to inject.
+   * @returns Current instance of {@link ComponentLoader}
+   */
+  public provide(provider: StaticProvider): ComponentLoader<T> {
+    this.providers.push(provider);
+    return this;
+  }
+
+  /**
+   * Attaches attached component to dom and any dynamic content if provided.
+   * @remarks
+   * Also triggers the {@link ComponentLoader.onBeforeShow} and {@link ComponentLoader.onShown} events.
+   *
+   * @param options - {@link ComponentLoaderOptions}.
+   * @returns A reference to the created content.
+   */
+  public show(options: ComponentLoaderOptions = {}): ComponentRef<T> | undefined {
+    if (this.componentRef) {
+      throw Error('Component is already shown');
+    }
+    if (!this.componentFactory) {
+      throw Error('You must attach a component');
+    }
+    this.onBeforeShow.next();
+
+    if (options.content) {
+      this.contentRef = this.getContentRef(options.content, options.context, options.initialState);
+    }
+    this.createComponentAndAttachToView(options);
+    this.appendContentToContainer();
+    this.markComponentsForCheck();
+
+    this.onShown.next(options.id);
+
+    return this.componentRef;
+  }
+
+  /**
+   * Removes attached component from dom.
+   * @remarks
+   * Also triggers the {@link ComponentLoader.onBeforeHide} and {@link ComponentLoader.onHidden} events.
+   *
+   * @param id - If provided it is returned through the {@link ComponentLoader.onHidden}.
+   * @returns Current instance of {@link ComponentLoader}
+   */
+  public hide(id?: number | string, result?: any): ComponentLoader<T> {
+    if (!this.componentRef) {
+      throw Error('No attached component found to hide');
+    }
+
+    this.onBeforeHide.next(this.componentRef.instance);
+
+    const componentEl = this.componentRef.location.nativeElement;
+    componentEl.parentNode.removeChild(componentEl);
+    if (this.contentRef?.componentRef) {
+      this.contentRef.componentRef.destroy();
+    }
+    if (this.vcr && this.contentRef?.viewRef) {
+      this.vcr.remove(this.vcr.indexOf(this.contentRef.viewRef));
+    }
+    if (this.contentRef?.viewRef) {
+      this.contentRef.viewRef.destroy();
+    }
+    this.contentRef = void 0;
+    this.componentRef = void 0;
+
+    this.onHidden.next(id ? { id, result } : null);
+
+    return this;
+  }
+
+  getInnerComponent(): ComponentRef<T> | undefined {
+    return this.innerComponent;
+  }
+
+  private markComponentsForCheck() {
+    if (this.contentRef?.componentRef) {
+      this.innerComponent = this.contentRef.componentRef.instance;
+      this.contentRef.componentRef.changeDetectorRef.markForCheck();
+      this.contentRef.componentRef.changeDetectorRef.detectChanges();
+    }
+    this.componentRef!.changeDetectorRef.markForCheck();
+    this.componentRef!.changeDetectorRef.detectChanges();
+  }
+
+  private createComponentAndAttachToView(options: ComponentLoaderOptions) {
+    const injector = Injector.create({
+      providers: this.providers,
+      parent: this.injector,
+    });
+    this.componentRef = this.componentFactory!.create(injector, this.contentRef?.nodes);
+    this.applicationRef.attachView(this.componentRef.hostView);
+    this.instance = this.componentRef.instance;
+    Object.assign(this.componentRef.instance, options);
+  }
+
+  private appendContentToContainer() {
+    if (this.container instanceof ElementRef) {
+      this.container.nativeElement.appendChild(this.componentRef?.location.nativeElement);
+    }
+    if (typeof this.container === 'string' && typeof document !== 'undefined') {
+      const selectedElement = document.querySelector(this.container) || document.querySelector(this.containerDefaultSelector);
+      if (!selectedElement) {
+        return;
+      }
+      selectedElement.appendChild(this.componentRef?.location.nativeElement);
+    }
+  }
+
+  private getContentRef(content?: string | TemplateRef<any>, context?: any, initialState?: any): ContentRef {
+    //TemplateRef case
+    if (content instanceof TemplateRef) {
+      if (this.vcr) {
+        const viewRef = this.vcr.createEmbeddedView<TemplateRef<T>>(content, context);
+        viewRef.markForCheck();
+        return new ContentRef([viewRef.rootNodes], viewRef);
+      }
+      const viewRef = content.createEmbeddedView({});
+      this.applicationRef.attachView(viewRef);
+      return new ContentRef([viewRef.rootNodes], viewRef);
+    }
+
+    //Component case
+    if (typeof content === 'function') {
+      const contentCf = this.cfr.resolveComponentFactory(content);
+      const injector = Injector.create({
+        providers: this.providers,
+        parent: this.injector,
+      });
+      const componentRef = contentCf.create(injector);
+      Object.assign(componentRef.instance, initialState);
+      this.applicationRef.attachView(componentRef.hostView);
+      return new ContentRef([[componentRef.location.nativeElement]], componentRef.hostView, componentRef);
+    }
+
+    throw Error('Unsupported content type');
+  }
+}

package/src/lib/services/component-loader/component-loader.factory.ts

@@ -0,0 +1,27 @@
+import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector, ViewContainerRef } from '@angular/core';
+import { ComponentLoader } from './component-loader.class';
+
+/**
+ * Use to create instances of {@link ComponentLoader}.
+ *
+ * @public
+ */
+@Injectable({ providedIn: 'root' })
+export class ComponentLoaderFactory {
+  constructor(
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private injector: Injector,
+    private applicationRef: ApplicationRef
+  ) {}
+
+  /**
+   * Returns a new instance of {@link ComponentLoader}
+   * @param viewContainerRef - The view container the dynamic content will be attached to.
+   * @returns A new instance of {@link ComponentLoader}.
+   *
+   * @public
+   */
+  createLoader<T>(viewContainerRef?: ViewContainerRef): ComponentLoader<T> {
+    return new ComponentLoader<T>(viewContainerRef, this.componentFactoryResolver, this.applicationRef, this.injector);
+  }
+}

package/src/lib/services/component-loader/content-ref.class.ts

@@ -0,0 +1,10 @@
+import { ComponentRef, ViewRef } from '@angular/core';
+
+/**
+ * Holds information about the dynamic content.
+ * @remarks
+ * `ComponentRef` is undefined in the case content is of `TemplateRef` type.
+ */
+export class ContentRef {
+  constructor(public nodes: any[], public viewRef?: ViewRef, public componentRef?: ComponentRef<any>) {}
+}

package/src/lib/services/interceptors/bad-request.interceptor.ts

@@ -0,0 +1,34 @@
+import { Inject, Injectable } from '@angular/core';
+import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { ToasterService } from '../toaster.service';
+import { UtilitiesService } from '../utilities.service';
+import { ToastType } from '../../types';
+
+
+@Injectable()
+export class BadRequestInterceptor implements HttpInterceptor {
+    constructor(
+        @Inject(ToasterService) private toaster: ToasterService,
+        private utilities: UtilitiesService
+    ) { }
+
+    public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        return next.handle(request).pipe(
+            catchError((error: HttpResponse<any>) => {
+                if (error instanceof HttpErrorResponse && error.status === 400) {
+                    const fileReader = new FileReader();
+                    fileReader.addEventListener('loadend', () => {
+                        // tslint:disable-next-line:no-non-null-assertion
+                        const problemDetails = fileReader.result!;
+                        this.toaster.show(ToastType.Error, 'Αποτυχία αιτήματος', `${this.utilities.getValidationProblemDetails(JSON.parse(problemDetails.toString()))}`, 6000);
+                    });
+                    fileReader.readAsText(error.error);
+                }
+                throw error;
+            })
+        );
+    }
+}

package/src/lib/services/modal-service/modal-backdrop-component.ts

@@ -0,0 +1,40 @@
+import { Component, ElementRef, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
+import { ComponentLoader } from '../component-loader/component-loader.class';
+import { animationTime, cssClassNames } from './modal-styles.class';
+
+/**
+ * Background layer for modals.
+ * Override class name to theme it.
+ * @see {@link cssClassNames}
+ * @internal
+ */
+@Component({
+  selector: 'lib-modal-backdrop',
+  encapsulation: ViewEncapsulation.None,
+  template: '',
+  host: {
+    class: cssClassNames.backdrop,
+  },
+})
+export class ModalBackdropComponent implements OnInit {
+  private animationsEnabled = false;
+  private backdropLoader: ComponentLoader<ModalBackdropComponent> | undefined;
+  constructor(private element: ElementRef, private renderer: Renderer2) {}
+
+  ngOnInit(): void {
+    if (this.animationsEnabled) {
+      this.renderer.addClass(this.element.nativeElement, cssClassNames.fade);
+      this.reflow(this.element.nativeElement);
+    }
+    this.renderer.addClass(this.element.nativeElement, cssClassNames.show);
+  }
+
+  public hide() {
+    this.renderer.removeClass(this.element.nativeElement, cssClassNames.show);
+    setTimeout(() => this.backdropLoader?.hide(), this.animationsEnabled ? animationTime.backdrop : 0);
+  }
+
+  reflow(element: any): void {
+    ((bs: any): void => bs)(element.offsetHeight);
+  }
+}

package/src/lib/services/modal-service/modal-container-component.ts

@@ -0,0 +1,125 @@
+import { Component, ElementRef, HostListener, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { animationTime, cssClassNames } from './modal-styles.class';
+import { ModalOptions } from './modal-options.class';
+import { ModalService } from './modal-service';
+
+/**
+ * Modal container component.
+ * @remarks
+ * All dynamic content `TemplateRef` or `Component` case will be drawn inside this.
+ * You can override css classes to theme it {@link cssClassNames}
+ * @internal
+ */
+@Component({
+  selector: 'lib-modal-container',
+  template: `
+    <div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')" role="document" focusTrap>
+      <div class="modal-content">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+  host: {
+    class: 'modal',
+    role: 'dialog',
+    tabindex: '-1',
+    '[attr.aria-modal]': 'true',
+    '[attr.aria-labelledby]': 'config.ariaLabelledBy',
+    '[attr.aria-describedby]': 'config.ariaDescribedby',
+  },
+})
+export class ModalContainerComponent implements OnInit, OnDestroy {
+  public level?: number;
+  public config: ModalOptions;
+  public modalService?: ModalService;
+  private isShown = false;
+  private animationsEnabled = false;
+  private isModalHiding = false;
+  private clickStartedInContent = false;
+  constructor(options: ModalOptions, protected _element: ElementRef, private renderer: Renderer2) {
+    this.config = Object.assign({}, options);
+  }
+
+  ngOnInit(): void {
+    if (this.animationsEnabled) {
+      this.renderer.addClass(this._element.nativeElement, cssClassNames.fade);
+    }
+    this.renderer.setStyle(this._element.nativeElement, 'display', 'block');
+    setTimeout(
+      () => {
+        this.isShown = true;
+        this.renderer.addClass(this._element.nativeElement, cssClassNames.show);
+      },
+      this.animationsEnabled ? animationTime.backdrop : 0
+    );
+    if (this._element.nativeElement) {
+      this._element.nativeElement.focus();
+    }
+  }
+
+  @HostListener('mousedown', ['$event'])
+  onClickStarted(event: MouseEvent): void {
+    this.clickStartedInContent = event.target !== this._element.nativeElement;
+  }
+
+  @HostListener('click', ['$event'])
+  onClickStop(event: MouseEvent): void {
+    const clickedInBackdrop = event.target === this._element.nativeElement && !this.clickStartedInContent;
+    if (this.config.ignoreBackdropClick || this.config.backdrop === 'static' || !clickedInBackdrop) {
+      this.clickStartedInContent = false;
+      return;
+    }
+    this.hide();
+  }
+
+  @HostListener('window:popstate')
+  onPopState(): void {
+    this.hide();
+  }
+
+  @HostListener('window:keydown.esc', ['$event'])
+  onEsc(event: KeyboardEvent): void {
+    if (!this.isShown) {
+      return;
+    }
+    if (event.keyCode === 27 || event.key === 'Escape' || event.key === 'Esc') {
+      event.preventDefault();
+    }
+    if (this.config.keyboard && this.config.id === this.modalService?.getActiveModal().config.id) {
+      this.hide();
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.isShown) {
+      this._hide();
+    }
+  }
+
+  hide(result?: any): void {
+    if (this.isModalHiding || !this.isShown) {
+      return;
+    }
+    if (this.config.closeInterceptor) {
+      this.config.closeInterceptor().then(
+        () => this._hide(),
+        () => undefined
+      );
+      return;
+    }
+    this._hide(result);
+  }
+
+  private _hide(result?: any): void {
+    this.isModalHiding = true;
+    this.renderer.removeClass(this._element.nativeElement, cssClassNames.show);
+    setTimeout(
+      () => {
+        this.isShown = false;
+        this.modalService?.hide(this.config.id, result);
+        this.isModalHiding = false;
+      },
+      this.animationsEnabled ? animationTime.modal : 0
+    );
+  }
+}

package/src/lib/services/modal-service/modal-options.class.ts

@@ -0,0 +1,92 @@
+import { Injectable, InjectionToken, StaticProvider } from '@angular/core';
+
+/**
+ * Modals option can be passed to a specific modal from {@link ModalService.show} or
+ * set globbaly using the injection token {@link MODAL_CONFIG_DEFAULT_OVERRIDE}.
+ * @remarks
+ * Modal specific options are merged with global options.
+ * @see {@link modalConfigDefaults} for defaults.
+ * @public
+ */
+@Injectable()
+export class ModalOptions<T = Record<string, unknown>> {
+  /**
+   *  Id for opened modal. If not set a random one is generated.
+   */
+  id?: number | string;
+  /**
+   * If static is set the modal will not close when clicking outside of modal.
+   * @remarks
+   * Keyboard event (escape key) stills applies. If you must get a result then also set keyboard to false.
+   */
+  backdrop?: boolean | 'static';
+  /**
+   * Closes the modal when escape key is pressed.
+   */
+  keyboard?: boolean;
+  /**
+   * Shows the modal when initialized.
+   */
+  show?: boolean;
+  /**
+   * Ignore the backdrop click. Pretty much the same as backdrop static.
+   */
+  ignoreBackdropClick?: boolean;
+  /**
+   * Css class for opened modal.
+   */
+  class?: string;
+  /**
+   * Toggle animation.
+   */
+  animated?: boolean;
+  /**
+   * Modal initial data.
+   * @remarks
+   * This data must be known properties of content component.
+   */
+  initialState?: Partial<T>;
+  /**
+   * Function to intercept the closure.
+   * @remarks
+   * You can use to catch the close event and even prevent it from closing.
+   */
+  closeInterceptor?: CloseInterceptorFn;
+  /**
+   * Modal static providers.
+   * @see {@link https://angular.io/guide/glossary#di-token | Injection Token}
+   */
+  providers?: StaticProvider[];
+  /**
+   * aria-labelledby attribute value to set on the modal window.
+   */
+  ariaLabelledBy?: string;
+  /**
+   * aria-describedby attribute value to set on the modal window.
+   */
+  ariaDescribedby?: string;
+}
+
+/**
+ * Default option values.
+ */
+export const modalConfigDefaults: ModalOptions = {
+  backdrop: true,
+  keyboard: true,
+  show: false,
+  ignoreBackdropClick: false,
+  class: '',
+  animated: true,
+  initialState: {},
+  closeInterceptor: void 0,
+};
+
+/**
+ * Use this injection token to set global options.
+ */
+export const MODAL_CONFIG_DEFAULT_OVERRIDE: InjectionToken<ModalOptions> = new InjectionToken<ModalOptions>('override-default-config');
+
+/**
+ * Close interceptor promise.
+ */
+export type CloseInterceptorFn = () => Promise<void>;