@indice/ng-components 0.2.139 → 0.2.141

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

@@ -1,237 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import { ComponentRef, Inject, Injectable, OnDestroy, Optional, Renderer2, RendererFactory2, TemplateRef } from '@angular/core';
-import { Subject } from 'rxjs';
-import { ComponentLoader } from '../component-loader/component-loader.class';
-import { animationTime, cssClassNames } from './modal-styles.class';
-import { ModalBackdropComponent } from './modal-backdrop-component';
-import { ModalContainerComponent } from './modal-container-component';
-import { modalConfigDefaults, ModalOptions, MODAL_CONFIG_DEFAULT_OVERRIDE } from './modal-options.class';
-import { Modal } from './modal.class';
-import { ComponentLoaderFactory } from '../component-loader/component-loader.factory';
-
-/**
- * A service for using modals.
- *
- * @public
- */
-@Injectable()
-export class ModalService implements OnDestroy {
-  private onBeforeShow = new Subject();
-  private onShown = new Subject();
-  private onBeforeHide = new Subject();
-  private onHidden = new Subject();
-
-  private backdropRef?: ComponentRef<ModalBackdropComponent>;
-  private defaultConfig: ModalOptions;
-  private backdropLoader: ComponentLoader<ModalBackdropComponent>;
-  private loaders: ComponentLoader<ModalContainerComponent>[] = [];
-  private renderer: Renderer2;
-  private modalsCount = 0;
-  private initialPadding = '0px';
-  constructor(
-    private clf: ComponentLoaderFactory,
-    rendererFactory: RendererFactory2,
-    @Inject(DOCUMENT) private document: any,
-    @Optional() @Inject(MODAL_CONFIG_DEFAULT_OVERRIDE) modalDefaultOption: ModalOptions
-  ) {
-    this.backdropLoader = this.clf.createLoader<ModalBackdropComponent>();
-    this.defaultConfig = { ...modalConfigDefaults, ...modalDefaultOption };
-    this.renderer = rendererFactory.createRenderer(null, null);
-  }
-
-  ngOnDestroy(): void {
-    this.loaders.forEach((loader) => loader.instance?.hide());
-  }
-
-  /**
-   * Opens a new modal.
-   *
-   * @param content - `Component` or `TemplateRef` type.
-   * @param config - Specific {@link ModalOptions | options}  for this modal. Global and specific options are merged.
-   * @returns An instance of {@link Modal}
-   */
-  public show<T>(content: string | TemplateRef<any> | { new (...args: any[]): T }, config?: ModalOptions<T>) {
-    this.modalsCount++;
-    const combinedConfig = { ...this.defaultConfig, ...config };
-    combinedConfig.id = config?.id || new Date().getUTCMilliseconds();
-    this.createLoaders();
-
-    this.addBodyPadding();
-    if (this.modalsCount === 1) {
-      this.renderer.addClass(this.document.body, cssClassNames.modalOpen);
-    }
-    this.showBackdrop(combinedConfig);
-    return this.showModal<T>(content, combinedConfig);
-  }
-
-  /**
-   * Hide an active modal.
-   * @param id - Id of modal to hide. If not provided all active modals are hidden.
-   * @param result - A result to be sent to observers.
-   */
-  public hide(id?: number | string, result?: any) {
-    if (this.modalsCount === 1 || id == null) {
-      this.hideBackdrop();
-      this.revertScrollbar();
-      this.renderer.removeClass(this.document.body, cssClassNames.modalOpen);
-    }
-    this.modalsCount = this.modalsCount >= 1 && id != null ? this.modalsCount - 1 : 0;
-    setTimeout(
-      () => {
-        this.hideModal(id, result);
-        this.removeLoaders(id);
-      },
-      //Bug
-      //Should use combined config but for the moment is not possible to pass it this parameter.
-      //If config is an instance variable then every newly opened modal will override the config
-      //resulting in opened modals to get a new configuration
-      this.defaultConfig.animated ? animationTime.backdrop : 0
-    );
-  }
-
-  public getActiveModal(): ModalContainerComponent {
-    return this.loaders[this.modalsCount - 1].instance as ModalContainerComponent;
-  }
-
-  private showModal<T>(content: any, combinedConfig: ModalOptions): Modal<T> {
-    const modalLoader = this.loaders[this.loaders.length - 1];
-    if (combinedConfig && combinedConfig.providers) {
-      combinedConfig.providers.forEach((provider) => modalLoader.provide(provider));
-    }
-
-    const modal = new Modal<any>();
-    const modalContainerRef = modalLoader
-      .provide({ provide: ModalOptions, useValue: combinedConfig })
-      .provide({ provide: Modal, useValue: modal })
-      .attach(ModalContainerComponent)
-      .to('body');
-
-    modal.setClass = (newClass: string) => {
-      if (modalContainerRef.instance) {
-        modalContainerRef.instance.config.class = newClass;
-      }
-    };
-
-    modal.onBeforeHide = new Subject();
-    modal.onHidden = new Subject();
-    this.copyEvent(modalLoader.onBeforeHide, modal.onBeforeHide);
-    this.copyEvent(modalLoader.onHidden, modal.onHidden);
-    modalContainerRef.show({
-      content,
-      animationsEnabled: combinedConfig.animated,
-      initialState: combinedConfig.initialState,
-      modalService: this,
-      id: combinedConfig.id,
-    });
-
-    if (modalContainerRef.instance) {
-      modalContainerRef.instance.level = this.modalsCount;
-      modal.content = modalLoader.getInnerComponent();
-      modal.id = modalContainerRef.instance.config?.id;
-      modal.hide = (res) => modalContainerRef.instance?.hide(res);
-    }
-
-    return modal;
-  }
-
-  private hideModal(id?: number | string, result?: any): void {
-    if (id != null) {
-      const indexToRemove = this.loaders.findIndex((loader) => loader.instance?.config.id === id);
-      const modalLoader = this.loaders[indexToRemove];
-      if (modalLoader) {
-        modalLoader.hide(id, result);
-      }
-    } else {
-      this.loaders.forEach((loader: ComponentLoader<ModalContainerComponent>) => {
-        if (loader.instance) {
-          loader.hide(loader.instance.config.id);
-        }
-      });
-    }
-  }
-
-  private showBackdrop(combinedConfig: ModalOptions): void {
-    const isBackdropEnabled = combinedConfig.backdrop === true || combinedConfig.backdrop === 'static';
-    const isBackdropInDOM = this.backdropRef != null;
-    if (isBackdropEnabled && !isBackdropInDOM) {
-      this.backdropLoader
-        .attach(ModalBackdropComponent)
-        .to('body')
-        .show({ animationsEnabled: combinedConfig.animated, backdropLoader: this.backdropLoader });
-      this.backdropRef = this.backdropLoader.componentRef;
-    }
-  }
-
-  private hideBackdrop(): void {
-    if (!this.backdropRef) {
-      return;
-    }
-    this.backdropRef.instance.hide();
-    this.backdropRef = void 0;
-  }
-
-  private removeLoaders(id?: number | string): void {
-    if (id != null) {
-      const indexToRemove = this.loaders.findIndex((loader) => loader.instance?.config.id === id);
-      if (indexToRemove >= 0) {
-        this.loaders.splice(indexToRemove, 1);
-        this.loaders.forEach((loader: ComponentLoader<ModalContainerComponent>, i: number) => {
-          if (loader.instance) {
-            loader.instance.level = i + 1;
-          }
-        });
-      }
-    } else {
-      this.loaders.splice(0, this.loaders.length);
-    }
-  }
-
-  private addBodyPadding() {
-    if (this.modalsCount === 1) {
-      const width = this.getScrollbarWidth();
-      if (this.isScrollBarPresent(width)) {
-        this.initialPadding = this.document.body.style.paddingRight;
-        const actualPadding = parseFloat(window.getComputedStyle(this.document.body).paddingRight);
-        this.document.body.style.paddingRight = `${actualPadding + width}px`;
-      }
-    }
-  }
-
-  private revertScrollbar() {
-    this.document.body.style.paddingRight = this.initialPadding;
-  }
-
-  private getScrollbarWidth(): number {
-    const measurer = this.document.createElement('div');
-    measurer.className = 'modal-scrollbar-measure';
-
-    const body = this.document.body;
-    body.appendChild(measurer);
-    const width = measurer.getBoundingClientRect().width - measurer.clientWidth;
-    body.removeChild(measurer);
-
-    return width;
-  }
-
-  private isScrollBarPresent(scrollbarWidth: number) {
-    const rect = this.document.body.getBoundingClientRect();
-    const bodyToViewportGap = window.innerWidth - (rect.left + rect.right);
-    const uncertainty = 0.1 * scrollbarWidth;
-    return bodyToViewportGap >= scrollbarWidth - uncertainty;
-  }
-
-  private createLoaders(): void {
-    const loader = this.clf.createLoader<ModalContainerComponent>();
-    this.copyEvent(loader.onBeforeShow, this.onBeforeShow);
-    this.copyEvent(loader.onShown, this.onShown);
-    this.copyEvent(loader.onBeforeHide, this.onBeforeHide);
-    this.copyEvent(loader.onHidden, this.onHidden);
-    this.loaders.push(loader);
-  }
-
-  private copyEvent(from: Subject<unknown>, to: Subject<unknown>) {
-    from.subscribe((data) => {
-      to.next(data);
-    });
-  }
-}

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

@@ -1,11 +0,0 @@
-export const cssClassNames = {
-  backdrop: 'modal-backdrop',
-  show: 'show',
-  fade: 'fade',
-	modalOpen: 'modal-open'
-};
-
-export const animationTime = {
-  backdrop: 150,
-  modal: 300,
-};

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

@@ -1,45 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
-
-/**
- * Modal class.
- * @remarks
- * This is returned from {@link ModalService.show}.
- * @public
- */
-@Injectable()
-export class Modal<T = any> {
-  /**
-   * Event that is fired when the modal behind the ref starts hiding.
-   * @returns
-   * Modal component instance.
-   */
-  onBeforeHide?: Subject<unknown>;
-  /**
-   * Event that is fired when the modal behind the ref finishes hiding.
-   * @returns
-   * An object containing the id of the closed modal and result.
-   */
-  onHidden?: Subject<unknown>;
-  /**
-   *  Id of this modal.
-   */
-  id?: number | string;
-
-  /**
-   * Reference to a component inside the modal. Null if modal's been created with TemplateRef.
-   * @remarks
-   * You can use this to do nasty stuff with opened modal instance.
-   */
-  content?: T;
-
-  /**
-   * Hides the modal
-   * @param result - A result to the observers.
-   */
-  hide: (result?: any) => void = () => void 0;
-  /**
-   * Sets new class to modal window.
-   */
-  setClass: (newClass: string) => void = () => void 0;
-}

package/src/lib/services/shell-state-service.service.ts

@@ -1,10 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ShellStateService {
-
-constructor() { }
-
-}

package/src/lib/services/toaster.service.ts

@@ -1,23 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { Toast, ToastType, NULL_TOAST } from '../types';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ToasterService {
-
-  private subject: BehaviorSubject<Toast>;
-  public toast$: Observable<Toast>;
-
-  constructor() {
-    this.subject = new BehaviorSubject<Toast>(NULL_TOAST);
-    this.toast$ = this.subject.asObservable()
-      .pipe(filter( toast => toast !== null && toast.title !== NULL_TOAST.title ));
-  }
-
-  public show(type: ToastType, title?: string, body?: string, delay?: number): void {
-    this.subject.next({ type, title, body, delay } as Toast);
-  }
-}

package/src/lib/services/utilities.service.ts

@@ -1,40 +0,0 @@
-import { Injectable } from '@angular/core';
-import { IValidationProblemDetails } from '../types';
-
-
-@Injectable({
-  providedIn: 'root'
-})
-export class UtilitiesService {
-  constructor() { }
-
-  public problemDetails?: IValidationProblemDetails;
-
-  public get validationErrors(): string[] {
-    const messages: string[] = [];
-    const errors = this.problemDetails && this.problemDetails.errors;
-    for (const property in errors) {
-      if (property) {
-        const propertyMessages = errors[property];
-        propertyMessages.forEach((message: string) => {
-          messages.push(message);
-        });
-      } else {
-        Object.values(errors || {}).forEach(message => {
-          message.forEach(x => {
-            messages.push(x);
-          });
-        });
-      }
-    }
-    return messages;
-  }
-
-  public getValidationProblemDetails(problemDetails: IValidationProblemDetails): string[] {
-    this.problemDetails = problemDetails;
-    if (this.validationErrors.length === 0 && this.problemDetails.title) {
-      return new Array<string>(1).fill(this.problemDetails.title);
-    }
-    return this.validationErrors;
-  }
-}

package/src/lib/tokens.ts

@@ -1,6 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { IAppLinks, IShellConfig } from './types';
-
-export const APP_LINKS = new InjectionToken<IAppLinks>('APP_LINKS');
-export const APP_NOTIFICATIONS = new InjectionToken<IAppLinks>('APP_NOTIFICATIONS');
-export const SHELL_CONFIG = new InjectionToken<IShellConfig>('SHELL_CONFIG');

package/src/lib/types.ts

@@ -1,210 +0,0 @@
-import { Observable } from 'rxjs';
-
-
-export interface IAppNotifications {
-  messages: Observable<IResultSet<NavLink>>;
-  inboxAction?: () => void | undefined;
-}
-
-export interface IAppLinks {
-  public: Observable<NavLink[]>;
-  main: Observable<NavLink[]>;
-  profile: Observable<NavLink[]>;
-  profileActions: Observable<NavLink[]>;
-  legal: Observable<NavLink[]>;
-  brand: Observable<NavLink[]>;
-  notifications?: Observable<NavLink>;
-}
-
-
-export class NavLink {
-  constructor(text: string, path: string, exact: boolean = false, external: boolean = false, icon?: string, data?: any) {
-    this.text = text;
-    this.path = path;
-    this.exact = exact;
-    this.external = external;
-    this.icon = icon;
-    this.data = data;
-  }
-  public text: string;
-  public path: string;
-  public exact: boolean;
-  public external: boolean;
-  public icon: string | undefined;
-  public type = 'router';
-  public data: any | undefined;
-}
-
-export class ExternalNavLink extends NavLink {
-  constructor(text: string, path: string, openInNewTab?: boolean, icon?: string) {
-    super(text, path, true, openInNewTab, icon);
-  }
-  public type = 'external';
-}
-
-export class FragmentNavLink extends NavLink {
-  constructor(text: string, path: string, icon?: string) {
-    super(text, path, true, true, icon);
-  }
-  public type = 'fragment';
-}
-
-export class NotificationNavLink extends NavLink {
-  constructor(text: string, path: string, public isRead: boolean, public creationDate?: Date) {
-    super(text, path, true, false, undefined);
-  }
-}
-
-export class ViewAction {
-  public type: string;
-  public key: string | null;
-  public param: any;
-  public icon: string;
-  public tooltip: string | null;
-
-  constructor(type: string, key: string | null, param: any, icon: string, tooltip: string | null) {
-    this.type = type;
-    this.key = key;
-    this.param = param;
-    this.icon = icon;
-    this.tooltip = tooltip;
-  }
-}
-
-export class ListViewType {
-  public static Tiles = 'tiles';
-  public static Table = 'table';
-  public static Map = 'map';
-  public static Gallery = 'gallery';
-}
-
-export class RouterViewAction extends ViewAction {
-  public outlet: string | null = null;
-  public link: string | null = null;
-  constructor(icon: string, link: string, outlet: string | null, tooltip: string | null) {
-    super('router-link', null, null, icon, tooltip);
-    this.outlet = outlet;
-    this.link = link;
-  }
-}
-
-
-export class SwitchViewAction extends ViewAction {
-  constructor(view: string, icon: string, tooltip: string | null) {
-    super('switch-view', null, view, icon, tooltip);
-  }
-}
-
-export interface IResultSet<T> {
-  count: number;
-  items: T[];
-}
-
-export class HeaderMetaItem {
-  public key: string | null = null;
-  public icon: string | null = null;
-  public text: string | null = null;
-}
-
-export class MenuOption {
-  constructor(text: string, value: any, description?: string, data?: any, icon?: string) {
-    this.text = text;
-    this.value = value;
-    this.description = description;
-    this.data = data;
-    this.icon = icon;
-  }
-  public text: string;
-  public value: any;
-  public description: string | undefined;
-  public data: any | undefined;
-  public icon: string | undefined;
-}
-
-export interface IAddress {
-  id?: string;
-  street?: string | null;
-  streetNumber?: string | null;
-  city?: string | null;
-  region?: string | null;
-  postalCode?: string | null;
-  country?: string | null;
-}
-
-export interface IShellConfig {
-  appLogo: string;
-  appLogoAlt: string;
-  showHeader: boolean;
-  showUserNameOnHeader?: boolean;
-  showAlertsOnHeader?: boolean;
-  customHeaderComponent?: any;
-  showFooter: boolean;
-  customFooterComponent?: any;
-  fluid: boolean;
-  langs?: string[];
-
-}
-
-export class DefaultShellConfig implements IShellConfig {
-  appLogo = 'https://tailwindui.com/img/logos/workflow-mark.svg?color=white';
-  appLogoAlt = 'your app name here';
-  showHeader = true;
-  showUserNameOnHeader = false;
-  showAlertsOnHeader = false;
-  showFooter = true;
-  fluid = false;
-}
-
-export enum SCREEN_SIZE {
-  XS,
-  SM,
-  MD,
-  LG,
-  XL
-}
-
-export interface IScreenSize {
-  id: SCREEN_SIZE;
-  name: string;
-  css: string;
-}
-
-export enum ToastType {
-  Info = 'info',
-  Success = 'success',
-  Error = 'error',
-  Warning = 'warning'
-}
-
-export const NULL_TOAST = { title : '_____NULL_____' } as Toast;
-
-export interface Toast {
-  type: ToastType;
-  title: string;
-  body: string;
-  delay: number;
-}
-
-export enum SidePaneSize {
-   Default = '',
-   Small25 = '25%',
-   Medium50 = '50%',
-   Large75 = '75%'
-}
-
-export enum SidePaneOverlayType {
-  Default = '',
-  None = '-opacity-0',
-  Light = '',
-  Dark = '-opacity-50'
-}
-
-
-export interface IValidationProblemDetails {
-  type?: string | undefined;
-  title?: string | undefined;
-  status?: number | undefined;
-  detail?: string | undefined;
-  instance?: string | undefined;
-  errors?: { [key: string]: string[]; } | undefined;
-}

package/src/test.ts

@@ -1,28 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js';
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(), {
-    teardown: { destroyAfterEach: false }
-}
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

package/tsconfig.lib.json

@@ -1,26 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "target": "es2015",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": [],
-    "lib": [
-      "dom",
-      "es2018"
-    ]
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial",
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "enableResourceInlining": true
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,17 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}

package/tslint.json

@@ -1,17 +0,0 @@
-{
-  "extends": "../../tslint.json",
-  "rules": {
-    "directive-selector": [
-      true,
-      "attribute",
-      "lib",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "lib",
-      "kebab-case"
-    ]
-  }
-}