angular-slickgrid 8.14.0 → 9.0.0

package/src/library/models/angularGridInstance.interface.ts

@@ -0,0 +1,76 @@
+import type {
+  BackendService,
+  BasePaginationComponent,
+  ExtensionList,
+  ExtensionService,
+  FilterService,
+  GridEventService,
+  GridService,
+  GridStateService,
+  HeaderGroupingService,
+  PaginationService,
+  ResizerService,
+  SlickDataView,
+  SlickGrid,
+  SortService,
+  TreeDataService,
+} from '@slickgrid-universal/common';
+import type { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
+
+export interface AngularGridInstance {
+  /** Slick DataView object */
+  dataView: SlickDataView;
+
+  /** Slick Grid object */
+  slickGrid: SlickGrid;
+
+  /** SlickGrid extensions (external controls/plugins) */
+  extensions: ExtensionList<any>;
+
+  // --
+  // Methods
+  /** Dispose of the grid and optionally empty the DOM element grid container as well */
+  destroy: (emptyDomElementContainer?: boolean) => void;
+
+  // --
+  // Services
+
+  /** Backend Service, when available */
+  backendService?: BackendService;
+
+  /** EventPubSub Service instance that is used internal by the lib and could be used externally to subscribe to Angular-Slickgrid events */
+  eventPubSubService?: EventPubSubService;
+
+  /** Extension (Plugins & Controls) Service */
+  extensionService: ExtensionService;
+
+  /** Filter Service */
+  filterService: FilterService;
+
+  /** Grid Service (grid extra functionalities) */
+  gridService: GridService;
+
+  /** Grid Events Service */
+  gridEventService: GridEventService;
+
+  /** Grid State Service */
+  gridStateService: GridStateService;
+
+  /** Grouping (and colspan) Service */
+  headerGroupingService: HeaderGroupingService;
+
+  /** Pagination Component */
+  paginationComponent?: BasePaginationComponent;
+
+  /** Pagination Service (allows you to programmatically go to first/last page, etc...) */
+  paginationService?: PaginationService;
+
+  /** Resizer Service (including auto-resize) */
+  resizerService: ResizerService;
+
+  /** Sort Service */
+  sortService: SortService;
+
+  /** Tree Data View Service */
+  treeDataService: TreeDataService;
+}

package/src/library/models/externalTestingDependencies.interface.ts

@@ -0,0 +1,37 @@
+import type {
+  BackendUtilityService,
+  CollectionService,
+  ExtensionService,
+  ExtensionUtility,
+  FilterService,
+  GridEventService,
+  GridService,
+  GridStateService,
+  HeaderGroupingService,
+  PaginationService,
+  ResizerService,
+  RxJsFacade,
+  SharedService,
+  SortService,
+  TreeDataService,
+} from '@slickgrid-universal/common';
+import type { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
+
+export interface ExternalTestingDependencies {
+  backendUtilityService?: BackendUtilityService;
+  collectionService?: CollectionService;
+  eventPubSubService?: EventPubSubService;
+  extensionService?: ExtensionService;
+  extensionUtility?: ExtensionUtility;
+  filterService?: FilterService;
+  gridEventService?: GridEventService;
+  gridService?: GridService;
+  gridStateService?: GridStateService;
+  headerGroupingService?: HeaderGroupingService;
+  paginationService?: PaginationService;
+  resizerService?: ResizerService;
+  rxjs?: RxJsFacade;
+  sharedService?: SharedService;
+  sortService?: SortService;
+  treeDataService?: TreeDataService;
+}

package/src/library/models/gridOption.interface.ts

@@ -0,0 +1,15 @@
+import type { TranslateService } from '@ngx-translate/core';
+import type { BasePaginationComponent, Column, GridOption as UniversalGridOption } from '@slickgrid-universal/common';
+
+import type { RowDetailView } from './rowDetailView.interface';
+
+export interface GridOption<C extends Column = Column> extends UniversalGridOption<C> {
+  /** External Custom Pagination Component that can be provided by the user */
+  customPaginationComponent?: typeof BasePaginationComponent;
+
+  /** ngx-translate i18n translation service instance */
+  i18n?: TranslateService;
+
+  /** Row Detail View Plugin options & events (columnId, cssClass, toolTip, width) */
+  rowDetailView?: RowDetailView;
+}

package/src/library/models/index.ts

@@ -0,0 +1,5 @@
+export type * from './angularComponentOutput.interface';
+export type * from './angularGridInstance.interface';
+export type * from './externalTestingDependencies.interface';
+export type * from './gridOption.interface';
+export type * from './rowDetailView.interface';

package/src/library/models/rowDetailView.interface.ts

@@ -0,0 +1,16 @@
+import type { Type } from '@angular/core';
+import type { RowDetailView as UniversalRowDetailView } from '@slickgrid-universal/common';
+
+export interface RowDetailView extends UniversalRowDetailView {
+  /**
+   * Optionally pass your Parent Component reference to your Child Component (row detail component).
+   * note:: If anyone finds a better way of passing the parent to the row detail extension, please reach out and/or create a PR
+   */
+  parentRef?: any;
+
+  /** View Component of the preload template (typically a spinner) which shows after opening on the row detail but before the row detail is ready */
+  preloadComponent?: Type<object>;
+
+  /** View Component that will be loaded in the row detail after the async function completed */
+  viewComponent: Type<object>;
+}

package/src/library/modules/angular-slickgrid.module.spec.ts

@@ -0,0 +1,25 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { AngularSlickgridModule } from './angular-slickgrid.module.js';
+
+describe('AppComponent', () => {
+  let angularSlickgridModule: AngularSlickgridModule;
+
+  beforeEach(() => {
+    angularSlickgridModule = new AngularSlickgridModule();
+  });
+
+  it('should create an instance', () => {
+    expect(angularSlickgridModule).toBeTruthy();
+  });
+
+  it('should create an instance with providers via forRoot()', () => {
+    const angularSlickgridModuleWithProviders = AngularSlickgridModule.forRoot();
+    expect(angularSlickgridModuleWithProviders.providers![0]).toEqual({ provide: 'config', useValue: {} });
+  });
+
+  it('should create an instance with providers via forRoot() with extra config options', () => {
+    const angularSlickgridModuleWithProviders = AngularSlickgridModule.forRoot({ enableAutoResize: true });
+    expect(angularSlickgridModuleWithProviders.providers![0]).toEqual({ provide: 'config', useValue: { enableAutoResize: true } });
+  });
+});

package/src/library/modules/angular-slickgrid.module.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { type ModuleWithProviders, NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { AngularSlickgridComponent } from '../components/angular-slickgrid.component';
+import { GridOption } from '../models/gridOption.interface';
+import { AngularUtilService } from '../services/angularUtil.service';
+import { ContainerService } from '../services/container.service';
+
+@NgModule({
+  imports: [CommonModule, TranslateModule],
+  declarations: [AngularSlickgridComponent],
+  exports: [AngularSlickgridComponent],
+})
+export class AngularSlickgridModule {
+  static forRoot(config: GridOption = {}): ModuleWithProviders<AngularSlickgridModule> {
+    return {
+      ngModule: AngularSlickgridModule,
+      providers: [
+        { provide: 'config', useValue: config },
+        { provide: 'externalService', useValue: null },
+        AngularUtilService,
+        ContainerService,
+      ],
+    };
+  }
+}

package/src/library/services/__tests__/angularUtilService.spec.ts

@@ -0,0 +1,156 @@
+import { Component, ViewContainerRef } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { AngularUtilService } from '../angularUtil.service.js';
+
+const DOM_ELEMENT_ID = 'row-detail123';
+const DOM_PARENT_ID = 'parent-detail';
+
+const viewContainerRefStub = {
+  createComponent: vi.fn(),
+  detectChanges: vi.fn(),
+} as unknown as ViewContainerRef;
+
+@Component({ template: `<h4>Loading...</h4>`, standalone: false })
+class TestPreloadComponent {}
+
+@Component({ template: `<h1>{{ title }}</h1>` })
+class TestComponent {
+  title = '';
+}
+
+describe('AngularUtilService', () => {
+  let service: AngularUtilService;
+
+  beforeEach(async () => {
+    // define a <div> container to simulate a row detail DOM element
+    const div = document.createElement('div');
+    div.innerHTML = `<div id="${DOM_PARENT_ID}">parent text</div><div id="${DOM_ELEMENT_ID}">some text</div>`;
+    document.body.appendChild(div);
+
+    await TestBed.configureTestingModule({
+      declarations: [TestPreloadComponent],
+      providers: [AngularUtilService, { provide: ViewContainerRef, useValue: viewContainerRefStub }],
+      teardown: { destroyAfterEach: false },
+    });
+    service = TestBed.inject(AngularUtilService);
+  });
+
+  afterEach(() => {
+    const domElm = document.getElementById(DOM_ELEMENT_ID) as HTMLDivElement;
+    domElm.innerHTML = 'some text';
+  });
+
+  it('should create the service', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('createAngularComponent method', () => {
+    let domElm: HTMLElement;
+    let domParentElm: HTMLElement;
+    let mockComponentFactory: any;
+
+    beforeEach(() => {
+      domElm = document.getElementById(DOM_ELEMENT_ID) as HTMLDivElement;
+      domParentElm = document.getElementById(DOM_PARENT_ID) as HTMLDivElement;
+      mockComponentFactory = { hostView: { rootNodes: [domElm] }, instance: {}, changeDetectorRef: { detectChanges: vi.fn() } };
+    });
+
+    it('should create an Angular Component and add it to the current component DOM tree', () => {
+      // @ts-ignore
+      const createCompSpy = vi.spyOn(viewContainerRefStub, 'createComponent').mockReturnValue(mockComponentFactory);
+
+      const output = service.createAngularComponent(TestPreloadComponent);
+
+      expect(createCompSpy).toHaveBeenCalled();
+      expect(output).toEqual({ componentRef: mockComponentFactory, domElement: domElm });
+    });
+
+    it('should create an Angular Component with optional target element and extra data to provide to the component instance', () => {
+      const titleMock = 'Some Title';
+      const h1Mock = document.createElement('h1');
+      h1Mock.textContent = titleMock;
+      mockComponentFactory.hostView.rootNodes[0] = h1Mock;
+      // @ts-ignore
+      const createCompSpy = vi.spyOn(viewContainerRefStub, 'createComponent').mockReturnValue(mockComponentFactory);
+      const output = service.createAngularComponent(TestComponent, domParentElm, { title: titleMock });
+
+      expect(createCompSpy).toHaveBeenCalled();
+      expect(domParentElm.innerHTML).toBe('Some Title');
+      expect(output).toEqual({ componentRef: mockComponentFactory, domElement: h1Mock });
+    });
+
+    it('should create an Angular Component with optional target element and extra data and sanitizer', () => {
+      const titleMock = 'Some Title';
+      const h1Mock = document.createElement('h1');
+      h1Mock.textContent = titleMock;
+      mockComponentFactory.hostView.rootNodes[0] = h1Mock;
+      const sanitizerMock = vi.fn().mockReturnValue(titleMock);
+
+      // @ts-ignore
+      const createCompSpy = vi.spyOn(viewContainerRefStub, 'createComponent').mockReturnValue(mockComponentFactory);
+      const output = service.createAngularComponent(TestComponent, domParentElm, { title: titleMock }, { sanitizer: sanitizerMock });
+
+      expect(sanitizerMock).toHaveBeenCalled();
+      expect(createCompSpy).toHaveBeenCalled();
+      expect(domParentElm.innerHTML).toBe('Some Title');
+      expect(output).toEqual({ componentRef: mockComponentFactory, domElement: h1Mock });
+    });
+
+    it('should create an Interactive Angular Component with target element and extra data to provide to the component instance', () => {
+      const titleMock = 'Some Title';
+      const h1Mock = document.createElement('h1');
+      h1Mock.textContent = titleMock;
+      mockComponentFactory.hostView.rootNodes[0] = h1Mock;
+      mockComponentFactory.location = {
+        nativeElement: h1Mock,
+      };
+
+      // @ts-ignore
+      const createCompSpy = vi.spyOn(viewContainerRefStub, 'createComponent').mockReturnValue(mockComponentFactory);
+      const output = service.createInteractiveAngularComponent(TestComponent, domParentElm, { title: titleMock });
+
+      expect(createCompSpy).toHaveBeenCalled();
+      expect(domParentElm.innerHTML).toBe('<h1>Some Title</h1>');
+      expect(output).toEqual({ componentRef: mockComponentFactory, domElement: h1Mock });
+    });
+  });
+
+  describe('createAngularComponentAppendToDom method', () => {
+    let domElm: HTMLElement;
+    let domParentElm: HTMLElement;
+    let mockComponentFactory: any;
+
+    beforeEach(() => {
+      domElm = document.getElementById(DOM_ELEMENT_ID) as HTMLDivElement;
+      domParentElm = document.getElementById(DOM_PARENT_ID) as HTMLDivElement;
+      mockComponentFactory = { hostView: { rootNodes: [domElm] } };
+    });
+
+    it('should an angular component and append it to the DOM tree in the document body', () => {
+      // @ts-ignore
+      const createCompSpy = vi.spyOn(viewContainerRefStub, 'createComponent').mockReturnValue(mockComponentFactory);
+      const spyBody = vi.spyOn(document.body, 'appendChild');
+
+      const output = service.createAngularComponentAppendToDom(TestPreloadComponent);
+
+      expect(createCompSpy).toHaveBeenCalled();
+      expect(spyBody).toHaveBeenCalled();
+      expect(output).toEqual({ componentRef: mockComponentFactory, domElement: domElm });
+    });
+
+    it('should an angular component and append it to the current component DOM tree, which will have its parent node replaced by the new html', () => {
+      // @ts-ignore
+      const createCompSpy = vi.spyOn(viewContainerRefStub, 'createComponent').mockReturnValue(mockComponentFactory);
+      const spyElement = vi.spyOn(domParentElm, 'replaceChildren');
+
+      const output = service.createAngularComponentAppendToDom(TestPreloadComponent, domParentElm);
+
+      expect(createCompSpy).toHaveBeenCalled();
+      expect(spyElement).toHaveBeenCalled();
+      expect(domParentElm.innerHTML).toBe('<div id="row-detail123">some text</div>');
+      expect(output).toEqual({ componentRef: mockComponentFactory, domElement: domElm });
+    });
+  });
+});

package/src/library/services/__tests__/container.service.spec.ts

@@ -0,0 +1,25 @@
+import { SharedService } from '@slickgrid-universal/common';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { ContainerService } from '../container.service.js';
+
+describe('Container Service', () => {
+  let service: ContainerService;
+  let sharedService: SharedService;
+
+  beforeEach(() => {
+    service = new ContainerService();
+    sharedService = new SharedService();
+  });
+
+  it('should register an instance and expect to retrieve it with the get method', () => {
+    service.registerInstance('SharedService', sharedService);
+    expect(service.get('SharedService')).toEqual(sharedService);
+  });
+
+  it('should register an instance and expect to null when calling the get method with an invalid name', () => {
+    service.registerInstance('SharedService', sharedService);
+    const output = service.get('DifferentName');
+    expect(output).toBeNull();
+  });
+});

package/src/library/services/__tests__/translater.service.spec.ts

@@ -0,0 +1,43 @@
+import { TestBed } from '@angular/core/testing';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { TranslaterService } from '../translater.service.js';
+
+describe('Translater Service', () => {
+  let translate: TranslateService;
+  let service: TranslaterService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      teardown: { destroyAfterEach: false },
+    });
+    translate = TestBed.inject(TranslateService);
+    service = new TranslaterService(translate);
+
+    translate.setTranslation('fr', {
+      ITEMS: 'éléments',
+      OF: 'de',
+    });
+    translate.setTranslation('en', {
+      ITEMS: 'items',
+      OF: 'of',
+    });
+  });
+
+  it('should create the service', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should call "use" method and expect "getCurrentLanguage" to be equal', async () => {
+    await service.use('jp');
+    expect(service.getCurrentLanguage()).toBe('jp');
+  });
+
+  it('should call "translate" and expect translated value returned', async () => {
+    await service.use('fr');
+    const output = service.translate('ITEMS');
+    expect(output).toBe('éléments');
+  });
+});

package/src/library/services/__tests__/utilities.spec.ts

@@ -0,0 +1,22 @@
+import { of, type Subscription } from 'rxjs';
+import { describe, expect, it } from 'vitest';
+
+import { unsubscribeAllObservables } from '../utilities.js';
+
+describe('Service/Utilies', () => {
+  describe('unsubscribeAllObservables method', () => {
+    it('should return original array when array of subscriptions is empty', () => {
+      const output = unsubscribeAllObservables([]);
+      expect(output).toEqual([]);
+    });
+
+    it('should return unique values when input array has duplicate objects', () => {
+      const subscriptions: Subscription[] = [];
+      const observable1 = of([1, 2]);
+      const observable2 = of([1, 2]);
+      subscriptions.push(observable1.subscribe(), observable2.subscribe());
+      const output = unsubscribeAllObservables(subscriptions);
+      expect(output).toHaveLength(0);
+    });
+  });
+});

package/src/library/services/angularUtil.service.ts

@@ -0,0 +1,120 @@
+import { Injectable, ViewContainerRef } from '@angular/core';
+import type { EmbeddedViewRef, EnvironmentInjector, Injector, NgModuleRef, Type } from '@angular/core';
+
+import type { AngularComponentOutput } from '../models/angularComponentOutput.interface';
+
+interface CreateComponentOption {
+  index?: number;
+  injector?: Injector;
+  ngModuleRef?: NgModuleRef<unknown>;
+  environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>;
+  projectableNodes?: Node[][];
+  sanitizer?: (dirtyHtml: string) => string;
+}
+
+@Injectable()
+export class AngularUtilService {
+  constructor(private vcr: ViewContainerRef) {}
+
+  createInteractiveAngularComponent<C>(
+    component: Type<C>,
+    targetElement: Element,
+    data?: any,
+    createCompOptions?: CreateComponentOption
+  ): AngularComponentOutput {
+    // Create a component reference from the component
+    const componentRef = this.vcr.createComponent(component, createCompOptions);
+
+    // user could provide data to assign to the component instance
+    if (componentRef?.instance && data) {
+      Object.assign(componentRef.instance as any, data);
+    }
+
+    // Get DOM element from component
+    let domElem: HTMLElement | null = null;
+    const viewRef = componentRef.hostView as EmbeddedViewRef<any>;
+
+    if (viewRef && Array.isArray(viewRef.rootNodes) && viewRef.rootNodes[0]) {
+      domElem = viewRef.rootNodes[0] as HTMLElement;
+
+      // when user provides the DOM element target, we will move the dynamic component into that target (aka portal-ing it)
+      if (targetElement && domElem) {
+        targetElement.replaceChildren(componentRef.location.nativeElement);
+      }
+    }
+
+    return { componentRef, domElement: domElem as HTMLElement };
+  }
+
+  /**
+   * Dynamically create an Angular component, user could also provide optional arguments for target, data & createComponent options
+   * @param {Component} component
+   * @param {HTMLElement} [targetElement]
+   * @param {*} [data]
+   * @param {CreateComponentOption} [createCompOptions]
+   * @returns
+   */
+  createAngularComponent<C>(
+    component: Type<C>,
+    targetElement?: Element,
+    data?: any,
+    createCompOptions?: CreateComponentOption
+  ): AngularComponentOutput {
+    // Create a component reference from the component
+    const componentRef = this.vcr.createComponent(component, createCompOptions);
+
+    // user could provide data to assign to the component instance
+    if (componentRef?.instance && data) {
+      Object.assign(componentRef.instance as any, data);
+
+      // NOTE: detectChanges() MUST be done BEFORE returning the DOM element in the next step,
+      // because if we do it only after returning the rootNodes (domElement) then it won't have the instance data yet
+      // and we would have to wait an extra cycle to see the result, this basically helps with Example22
+      componentRef.changeDetectorRef.detectChanges();
+    }
+
+    // Get DOM element from component
+    let domElem: HTMLElement | null = null;
+    const viewRef = componentRef.hostView as EmbeddedViewRef<any>;
+
+    // get DOM element from the new dynamic Component, make sure this is read after any data and detectChanges()
+    if (viewRef && Array.isArray(viewRef.rootNodes) && viewRef.rootNodes[0]) {
+      domElem = viewRef.rootNodes[0] as HTMLElement;
+
+      // when user provides the DOM element target, we will read the new Component html and use it to replace the target html
+      if (targetElement && domElem) {
+        targetElement.innerHTML =
+          typeof createCompOptions?.sanitizer === 'function' ? createCompOptions.sanitizer(domElem.innerHTML || '') : domElem.innerHTML;
+      }
+    }
+
+    return { componentRef, domElement: domElem as HTMLElement };
+  }
+
+  /**
+   * Dynamically create an Angular component and append it to the DOM unless a target element is provided,
+   * user could also provide other optional arguments for data & createComponent options.
+   * @param {Component} component
+   * @param {HTMLElement} [targetElement]
+   * @param {*} [data]
+   * @param {CreateComponentOption} [createCompOptions]
+   * @returns
+   */
+  createAngularComponentAppendToDom<C>(
+    component: Type<C>,
+    targetElement?: Element,
+    data?: any,
+    createCompOptions?: CreateComponentOption
+  ): AngularComponentOutput {
+    const componentOutput = this.createAngularComponent(component, targetElement, data, createCompOptions);
+
+    // Append DOM element to the HTML element specified
+    if (targetElement?.replaceChildren) {
+      targetElement.replaceChildren(componentOutput.domElement);
+    } else {
+      document.body.appendChild(componentOutput.domElement); // when no target provided, we'll simply add it to the HTML Body
+    }
+
+    return componentOutput;
+  }
+}

package/src/library/services/container.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { type ContainerInstance, ContainerService as UniversalContainerService } from '@slickgrid-universal/common';
+
+@Injectable()
+export class ContainerService implements UniversalContainerService {
+  dependencies: ContainerInstance[] = [];
+
+  get<T = any>(key: string): T | null {
+    const dependency = this.dependencies.find((dep) => dep.key === key);
+    if (dependency?.instance) {
+      return dependency.instance;
+    }
+    return null;
+  }
+
+  dispose() {
+    this.dependencies = [];
+  }
+
+  registerInstance(key: string, instance: any) {
+    const dependency = this.dependencies.some((dep) => dep.key === key);
+    if (!dependency) {
+      this.dependencies.push({ key, instance });
+    }
+  }
+}

package/src/library/services/index.ts

@@ -0,0 +1,4 @@
+export * from './angularUtil.service';
+export * from './container.service';
+export * from './translater.service';
+export * from './utilities';

package/src/library/services/translater.service.ts

@@ -0,0 +1,38 @@
+import { Injectable, Optional } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { TranslaterService as UniversalTranslateService } from '@slickgrid-universal/common';
+
+/**
+ * This is a Translate Service Wrapper for Slickgrid-Universal monorepo lib to work properly,
+ * it must implement Slickgrid-Universal TranslaterService interface to work properly
+ */
+@Injectable()
+export class TranslaterService implements UniversalTranslateService {
+  constructor(@Optional() private readonly translateService: TranslateService) {}
+
+  /**
+   * Method to return the current language used by the App
+   * @return {string} current language
+   */
+  getCurrentLanguage(): string {
+    return this.translateService?.currentLang ?? '';
+  }
+
+  /**
+   * Method to set the language to use in the App and Translate Service
+   * @param {string} language
+   * @return {Promise} output
+   */
+  async use(newLang: string): Promise<any> {
+    return this.translateService?.use?.(newLang);
+  }
+
+  /**
+   * Method which receives a translation key and returns the translated value assigned to that key
+   * @param {string} translation key
+   * @return {string} translated value
+   */
+  translate(translationKey: string): string {
+    return this.translateService?.instant?.(translationKey || ' ') as string;
+  }
+}

package/src/library/services/utilities.ts

@@ -0,0 +1,19 @@
+/**
+ * Unsubscribe all Observables Subscriptions
+ * It will return an empty array if it all went well
+ * @param subscriptions
+ */
+export function unsubscribeAllObservables(subscriptions: Array<{ unsubscribe: () => void }>): any[] {
+  if (Array.isArray(subscriptions)) {
+    let subscription = subscriptions.pop();
+    while (subscription) {
+      if (typeof subscription.unsubscribe === 'function') {
+        subscription.unsubscribe();
+      }
+      subscription = subscriptions.pop();
+    }
+  }
+
+  // TODO: deprecated, remove the return type in next major version
+  return subscriptions;
+}