@indice/ng-components 0.2.139 → 0.2.141

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

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

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

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

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

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

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

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