@bitblit/ngx-acute-common 6.0.146-alpha → 6.0.147-alpha

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@bitblit/ngx-acute-common",
-  "version": "6.0.146-alpha",
+  "version": "6.0.147-alpha",
   "description": "Library for using angular",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
+    "src/**",
     "lib/**",
     "bin/**"
   ],
@@ -48,8 +49,8 @@
     "@angular/platform-browser": "20.3.9",
     "@angular/platform-browser-dynamic": "20.3.9",
     "@angular/router": "20.3.9",
-    "@bitblit/ratchet-common": "6.0.146-alpha",
-    "@bitblit/ratchet-graphql": "6.0.146-alpha",
+    "@bitblit/ratchet-common": "6.0.147-alpha",
+    "@bitblit/ratchet-graphql": "6.0.147-alpha",
     "primeflex": "4.0.0",
     "primeicons": "7.0.0",
     "primeng": "20.3.0",
@@ -66,8 +67,8 @@
     "@angular/platform-browser": "^20.3.9",
     "@angular/platform-browser-dynamic": "^20.3.9",
     "@angular/router": "^20.3.9",
-    "@bitblit/ratchet-common": "6.0.146-alpha",
-    "@bitblit/ratchet-graphql": "6.0.146-alpha",
+    "@bitblit/ratchet-common": "6.0.147-alpha",
+    "@bitblit/ratchet-graphql": "6.0.147-alpha",
     "primeflex": "4.0.0",
     "primeicons": "7.0.0",
     "primeng": "20.3.0",
@@ -76,6 +77,6 @@
   },
   "devDependencies": {
     "@angular/compiler-cli": "20.3.9",
-    "@bitblit/ratchet-node-only": "6.0.146-alpha"
+    "@bitblit/ratchet-node-only": "6.0.147-alpha"
   }
 }

package/src/acute-common-type-guards.ts

@@ -0,0 +1,12 @@
+// Simple switch to see what kind of event I am looking at
+
+import { ProcessMonitorState } from "./services/process-monitor/process-monitor-state";
+
+export class AcuteCommonTypeGuards {
+  public static isProcessMonitorState(item: any): item is ProcessMonitorState {
+    return item && item.label && typeof item.label === 'string'
+      && !item.detail || typeof item.detail === 'string'
+      && !item.group || typeof item.group === 'string'
+      && !item.percentComplete || typeof item.percentComplete === 'number';
+  }
+}

package/src/build/ngx-acute-common-info.ts

@@ -0,0 +1,19 @@
+import { BuildInformation } from '@bitblit/ratchet-common/build/build-information';
+
+export class NgxAcuteCommonInfo {
+  // Empty constructor prevents instantiation
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private constructor() {}
+
+  public static buildInformation(): BuildInformation {
+    const val: BuildInformation = {
+      version: 'LOCAL-SNAPSHOT',
+      hash: 'LOCAL-HASH',
+      branch: 'LOCAL-BRANCH',
+      tag: 'LOCAL-TAG',
+      timeBuiltISO: 'LOCAL-TIME-ISO',
+      notes: 'LOCAL-NOTES',
+    };
+    return val;
+  }
+}

package/src/components/dialogs/alert/alert.component.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { Logger } from '@bitblit/ratchet-common/logger/logger';
+import { BehaviorSubject } from 'rxjs';
+import { ButtonModule } from 'primeng/button';
+import { AsyncPipe } from '@angular/common';
+
+@Component({
+  selector: 'ngx-acute-common-alert',
+  template:
+    '<div style="display: flex; flex-direction:column; width: 33vw; max-height: 25vh; gap: 5px">' +
+    '<pre style="width: 30vw; max-height: 80%;white-space: pre-wrap">{{cfg.data.message | async}}</pre>' +
+    '<div style="display:flex; flex-direction: row; justify-content: flex-end">' +
+    '<p-button label="Ok" severity="primary" (click)="ref.close()" />' +
+    '</div></div>',
+  standalone: true,
+  imports: [ButtonModule, AsyncPipe],
+})
+export class AlertComponent {
+  constructor(
+    public cfg: DynamicDialogConfig,
+    protected ref: DynamicDialogRef,
+  ) {
+    Logger.info('Creating AlertComponent with %j', this.cfg);
+  }
+
+  public static showAlert(dialogSvc: DialogService, message: BehaviorSubject<string> | string, title: string = 'Alert'): DynamicDialogRef {
+    const dlg: DynamicDialogRef = dialogSvc.open(AlertComponent, {
+      //disableClose: true,
+      //autoFocus: true,
+      data: {
+        message: message instanceof BehaviorSubject ? message : new BehaviorSubject<string>(message),
+      },
+      header: title,
+      modal: true,
+      maximizable: false,
+      position: 'top',
+    });
+    return dlg;
+  }
+}

package/src/components/dynamic-404-helper/dynamic-404-helper.component.html

@@ -0,0 +1,24 @@
+<div class="container">
+  @if (redirectState !== 'REDIR') {
+  <div class="row">
+    <div class="col-sm-2">
+      <h3>Page Not Found</h3>
+    </div>
+    <div class="col-sm-10">
+      <h4>Oops!</h4>
+      <p>We can't find the page you are trying to reach - please <a routerLink="/secure/dashboard"> go back</a> and try again.</p>
+    </div>
+  </div>
+  }
+
+  @if (redirectState === 'REDIR') {
+  <div class="row">
+    <div class="col-sm-2">
+      <h3>Redirecting</h3>
+    </div>
+    <div class="col-sm-10">
+      <p>Sending you to the new version of that page...</p>
+    </div>
+  </div>
+  }
+</div>

package/src/components/dynamic-404-helper/dynamic-404-helper.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { Logger } from '@bitblit/ratchet-common/logger/logger';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'ngx-acute-common-dynamic-404-helper',
+  templateUrl: './dynamic-404-helper.component.html',
+  standalone: true,
+  imports: [RouterModule, FormsModule, CommonModule],
+})
+export class Dynamic404HelperComponent implements OnInit {
+  redirectState: string = null;
+
+  // These handle redirecting historical urls
+  historicalUrl: any = {
+    '/faq': '/help-faq-general',
+  };
+
+  constructor(public router: Router) {}
+
+  ngOnInit(): void {
+    // Check backward compatibility list
+    const oldTarget = location.pathname;
+    let currentTarget = oldTarget;
+
+    // First, strip any html extensions
+    if (currentTarget && currentTarget.toLowerCase().endsWith('.html')) {
+      currentTarget = oldTarget.substring(0, oldTarget.length - 5);
+    }
+
+    // Next, check any mappings
+    if (currentTarget && this.historicalUrl[currentTarget]) {
+      currentTarget = this.historicalUrl[currentTarget];
+    }
+
+    // Finally, if set, redirect
+    if (currentTarget != oldTarget) {
+      this.redirectState = 'REDIR';
+      Logger.warn('Redirecting ' + oldTarget + ' to ' + currentTarget);
+      window.location.pathname = currentTarget;
+    } else {
+      this.redirectState = 'NO';
+    }
+  }
+}

package/src/components/log-display/log-display.component.html

@@ -0,0 +1,27 @@
+<p-drawer
+  [(visible)]="visible"
+  header="Logs (Updated {{ formatTime(updatedEpoch) }}, Recording down to {{ levelLogged() }})"
+  position="full"
+>
+  <div style="display: flex; flex-direction: row; justify-content: start; gap: 5vw">
+    <p-button (click)="refresh()" pTooltip="Refresh" icon="pi pi-refresh"></p-button>
+    <p-select-button [options]="levelFilterOptions" [(ngModel)]="levelFilterIdx" (onChange)="refresh()"></p-select-button>
+  </div>
+  <p-table [value]="snap | async">
+    <ng-template pTemplate="header">
+      <tr>
+        <th pSortableColumn="timestamp">Timestamp <p-sortIcon field="timestamp" /></th>
+        <th>Level</th>
+        <th>Message</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-element>
+      <tr>
+        <td>{{ formatTime(element.timestamp) }}</td>
+        <td>{{ element.lvl }}</td>
+        <td>{{ format(element) }}</td>
+      </tr>
+    </ng-template>
+  </p-table>
+</p-drawer>
+<p-button (click)="open()" [icon]="buttonIcon" [hidden]="!displayShowIcon" />

package/src/components/log-display/log-display.component.ts

@@ -0,0 +1,122 @@
+import { Component, HostListener, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { CardModule } from 'primeng/card';
+import { ButtonModule } from 'primeng/button';
+import { TooltipModule } from 'primeng/tooltip';
+import { DividerModule } from 'primeng/divider';
+import { InputTextModule } from 'primeng/inputtext';
+import { Drawer } from 'primeng/drawer';
+import { TableModule } from 'primeng/table';
+import { BehaviorSubject } from 'rxjs';
+import { AsyncPipe } from '@angular/common';
+import { LogMessage } from '@bitblit/ratchet-common/logger/log-message';
+import { Logger } from '@bitblit/ratchet-common/logger/logger';
+import { DurationRatchet } from '@bitblit/ratchet-common/lang/duration-ratchet';
+import { LoggerUtil } from '@bitblit/ratchet-common/logger/logger-util';
+import { SelectButton } from 'primeng/selectbutton';
+import { FormsModule } from '@angular/forms';
+import { LoggerLevelName } from '@bitblit/ratchet-common/logger/logger-level-name';
+
+@Component({
+  selector: 'ngx-acute-common-log-display',
+  templateUrl: './log-display.component.html',
+  styleUrls: [],
+  standalone: true,
+  imports: [
+    CardModule,
+    ButtonModule,
+    TooltipModule,
+    DividerModule,
+    InputTextModule,
+    Drawer,
+    TableModule,
+    AsyncPipe,
+    SelectButton,
+    FormsModule,
+  ],
+})
+export class LogDisplayComponent {
+  @Input() public buttonIcon: string = 'pi pi-arrow-up';
+  @Input() public displayShowIcon: boolean = true;
+  @Input() public hotkeyEnabled: boolean = true;
+  public visible: boolean = false;
+  public snap: BehaviorSubject<LogMessage[]> = new BehaviorSubject<LogMessage[]>(this.fetchMessagesCopy());
+  public updatedEpoch: number;
+
+  public levelFilterIdx: number = LoggerUtil.loggerLevelIndex(LoggerLevelName.info);
+  public levelFilterOptions: any[];
+
+  constructor(public router: Router) {
+    const loggerLevel: number = LoggerUtil.loggerLevelIndex(Logger.getLevel());
+    this.levelFilterOptions = [];
+    for (let i = 0; i <= loggerLevel; i++) {
+      this.levelFilterOptions.push({ label: LoggerUtil.indexToLevel(i), value: i });
+    }
+  }
+
+  public filterLevelChange(delta: number): void {
+    const loggerLevel: number = LoggerUtil.loggerLevelIndex(Logger.getLevel());
+    const newLevelIdx: number = this.levelFilterIdx + delta;
+    if (newLevelIdx <= loggerLevel) {
+      if (LoggerUtil.indexToLevel(newLevelIdx)) {
+        this.levelFilterIdx = newLevelIdx;
+        this.refresh();
+      }
+    } else {
+      // Cant take it below what's being logged
+    }
+  }
+
+  public levelLoggedIdx(): number {
+    return LoggerUtil.loggerLevelIndex(Logger.getLevel());
+  }
+
+  public levelLogged(): LoggerLevelName {
+    return Logger.getLevel();
+  }
+
+  public levelFilter(): LoggerLevelName {
+    const rval: LoggerLevelName = LoggerUtil.indexToLevel(this.levelFilterIdx);
+    return rval;
+  }
+
+  public fetchMessagesCopy(): LogMessage[] {
+    let rval: LogMessage[] = Object.assign([], Logger.getRingBuffer().getMessages().reverse());
+    rval = rval.filter((r) => {
+      return LoggerUtil.levelIsEnabled(r.lvl, this.levelFilter());
+    });
+
+    return rval;
+  }
+
+  public refresh(): void {
+    this.snap.next(this.fetchMessagesCopy());
+    this.updatedEpoch = Date.now();
+  }
+
+  public formatTime(tm: number): string {
+    const rval: string = new Date(tm).toLocaleTimeString() + '   (' + DurationRatchet.thinFormatMsDuration(Date.now() - tm) + ' ago)';
+    return rval;
+  }
+
+  public format(lm: LogMessage): string {
+    const rval: string = Logger.getLogger().formatMessage(lm);
+    return rval;
+  }
+
+  public open(): void {
+    this.refresh();
+    this.visible = true;
+  }
+
+  @HostListener('document:keypress', ['$event'])
+  systemKeypress(evt: KeyboardEvent) {
+    if (this.hotkeyEnabled && evt.code === 'KeyL' && evt.ctrlKey && evt.shiftKey) {
+      if (this.visible) {
+        this.visible = false;
+      } else {
+        this.open();
+      }
+    }
+  }
+}

package/src/components/process-monitor-simple-display/process-monitor-simple-display.component.html

@@ -0,0 +1,19 @@
+
+<p-dialog [header]="normalHeader" [closable]="false"
+          [modal]="false" [visible]="processMonitorService.hasStandardProcesses()()" position="bottom" [style]="{ width: '90rem' }">
+
+  @for(pm of processMonitorService.standardProcesses()().processes; track pm) {
+    <div style="display: flex; flex-direction: row; width: 100%">
+        <div style="display: flex; flex-direction: column; width: 50%; gap: 2px">
+          <div style="font-weight: bolder">{{pm.input().label}}</div>
+          <div style="font-style: italic; margin-left: 15px">{{pm.input().detail}}</div>
+        </div>
+        @if (pm.input().percentComplete) {
+          <div style="min-width: 50vw">
+            <p-progress-bar [value]="pm.input().percentComplete" />
+          </div>
+        }
+    </div>
+  }
+
+</p-dialog>

package/src/components/process-monitor-simple-display/process-monitor-simple-display.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { ContextMenuModule } from "primeng/contextmenu";
+import { CardModule } from "primeng/card";
+import { MultiSelectModule } from "primeng/multiselect";
+import { TableModule } from "primeng/table";
+import { PanelModule } from "primeng/panel";
+import { InputGroupAddonModule } from "primeng/inputgroupaddon";
+import { InputGroupModule } from "primeng/inputgroup";
+import { ProgressBar } from "primeng/progressbar";
+import { Dialog } from "primeng/dialog";
+import { ProcessMonitorService } from "../../services/process-monitor/process-monitor-service";
+
+
+@Component({
+  selector: 'ngx-acute-common-process-monitor-simple-display',
+  templateUrl: './process-monitor-simple-display.component.html',
+  imports: [
+    CardModule,
+    MultiSelectModule,
+    ContextMenuModule,
+    TableModule,
+    ReactiveFormsModule,
+    PanelModule,
+    InputGroupAddonModule,
+    InputGroupModule,
+    FormsModule,
+    ProgressBar,
+    Dialog
+  ],
+  standalone: true
+})
+export class ProcessMonitorSimpleDisplayComponent {
+  @Input() public normalHeader: string=null;
+
+  constructor(
+    public processMonitorService: ProcessMonitorService
+  ) {
+  }
+
+}

package/src/components/process-monitor-simple-modal-display/process-monitor-simple-modal-display.component.html

@@ -0,0 +1,21 @@
+
+<p-dialog [header]="header" [modal]="true"
+          [closable]="false"
+          [visible]="processMonitorService.hasModalProcesses()()" position="center" [style]="{ width: '90rem' }">
+  @for(pm of processMonitorService.modalProcesses()().processes; track pm) {
+    <div style="display: flex; flex-direction: row; width: 100%">
+
+      <div style="display: flex; flex-direction: column; width: 50%; gap: 2px">
+        <div style="font-weight: bolder">{{pm.input().label}}</div>
+        @if (pm.input().detail) {
+          <div style="font-style: italic; margin-left: 15px">{{pm.input().detail}}</div>
+        }
+      </div>
+      @if(pm.input().percentComplete) {
+        <div style="min-width: 50vw">
+          <p-progress-bar [value]="pm.input().percentComplete" />
+        </div>
+      }
+    </div>
+  }
+</p-dialog>

package/src/components/process-monitor-simple-modal-display/process-monitor-simple-modal-display.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { ContextMenuModule } from "primeng/contextmenu";
+import { CardModule } from "primeng/card";
+import { MultiSelectModule } from "primeng/multiselect";
+import { TableModule } from "primeng/table";
+import { PanelModule } from "primeng/panel";
+import { InputGroupAddonModule } from "primeng/inputgroupaddon";
+import { InputGroupModule } from "primeng/inputgroup";
+import { ProgressBar } from "primeng/progressbar";
+import { Dialog } from "primeng/dialog";
+import { ProcessMonitorService } from "../../services/process-monitor/process-monitor-service";
+
+
+@Component({
+  selector: 'ngx-acute-common-process-monitor-simple-modal-display',
+  templateUrl: './process-monitor-simple-modal-display.component.html',
+  imports: [
+    CardModule,
+    MultiSelectModule,
+    ContextMenuModule,
+    TableModule,
+    ReactiveFormsModule,
+    PanelModule,
+    InputGroupAddonModule,
+    InputGroupModule,
+    FormsModule,
+    ProgressBar,
+    Dialog
+  ],
+  standalone: true
+})
+export class ProcessMonitorSimpleModalDisplayComponent {
+  @Input() public header: string=null;
+
+  constructor(
+    public processMonitorService: ProcessMonitorService
+  ) {
+  }
+
+}

package/src/constants.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from "@angular/core";
+
+export const ACUTE_APPLICATION_NAME: InjectionToken<string> = new InjectionToken<string>('ACUTE_APPLICATION_NAME');

package/src/index.ts

@@ -0,0 +1,41 @@
+export * from './constants';
+
+export * from './build/ngx-acute-common-info';
+
+export * from './components/log-display/log-display.component';
+
+export * from './components/dialogs/alert/alert.component';
+
+export * from './components/process-monitor-simple-modal-display/process-monitor-simple-modal-display.component';
+export * from './components/process-monitor-simple-display/process-monitor-simple-display.component';
+
+export * from './acute-common-type-guards';
+
+export * from './model/google-analytics-config';
+
+export * from './pipes/capitalize.pipe';
+export * from './pipes/dollar-formatted.pipe';
+export * from './pipes/map-values.pipe';
+export * from './pipes/number-with-commas.pipe';
+export * from './pipes/order-by.pipe';
+export * from './pipes/percent-formatted.pipe';
+export * from './pipes/plural.pipe';
+export * from './pipes/round.pipe';
+export * from './pipes/time-ago-formatted.pipe';
+export * from './pipes/timing.pipe';
+export * from './pipes/duration-ms-formatted.pipe';
+
+export * from './services/google-analytics.service';
+export * from './services/graphql-query.service';
+export * from './services/graphql-query-execution-display-style';
+export * from './services/graphql-query-execution-options';
+export * from './services/local-storage.service';
+export * from './services/css-theme.service';
+export * from './services/window-ref.service';
+
+export * from './services/process-monitor/monitored-processes';
+export * from './services/process-monitor/process-holder';
+export * from './services/process-monitor/process-monitor-display-mode';
+export * from './services/process-monitor/process-monitor-service';
+export * from './services/process-monitor/process-monitor-state';
+

package/src/model/google-analytics-config.ts

@@ -0,0 +1,3 @@
+export interface GoogleAnalyticsConfig {
+  tagId: () => string | string;
+}

package/src/pipes/capitalize.pipe.ts

@@ -0,0 +1,8 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxAcuteCapitalize', standalone: true })
+export class CapitalizePipe implements PipeTransform {
+  transform(input: string): string {
+    return input && input.length ? input.charAt(0).toUpperCase() + input.slice(1).toLowerCase() : input;
+  }
+}

package/src/pipes/dollar-formatted.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { CurrencyRatchet } from '@bitblit/ratchet-common/lang/currency-ratchet';
+
+@Pipe({ name: 'ngxAcuteDollars', standalone: true })
+export class DollarFormattedPipe implements PipeTransform {
+  transform(input: number): string {
+    const rval: string = input === null || input === undefined ? 'Null' : CurrencyRatchet.dollarFormat(input);
+    return rval;
+  }
+}

package/src/pipes/duration-ms-formatted.pipe.ts

@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { DurationRatchet } from "@bitblit/ratchet-common/lang/duration-ratchet";
+import { StringRatchet } from "@bitblit/ratchet-common/lang/string-ratchet";
+import { NumberRatchet } from "@bitblit/ratchet-common/lang/number-ratchet";
+
+@Pipe({ name: "ngxDurationMsFormat", standalone: true })
+export class DurationMsFormattedPipe implements PipeTransform {
+  transform(ms: number | string, style: string='standard', includeMS: boolean=false): string {
+    const toFormat: number = NumberRatchet.safeNumber(ms, 0);
+    let rval: string;
+    switch (StringRatchet.trimToEmpty(style)) {
+      case "thin":
+        rval = DurationRatchet.thinFormatMsDuration(toFormat, includeMS);
+        break;
+      case "colon":
+        rval = DurationRatchet.colonFormatMsDuration(toFormat, includeMS);
+        break;
+      default:
+        rval = DurationRatchet.formatMsDuration(toFormat, includeMS);
+        break;
+    }
+    return rval;
+  }
+
+}

package/src/pipes/map-values.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Logger } from '@bitblit/ratchet-common/logger/logger';
+
+@Pipe({ name: 'ngxAcuteMapValues', standalone: true })
+export class MapValuesPipe implements PipeTransform {
+  transform(value: any, args?: any[]): any[] {
+    const returnArray = [];
+
+    for (const k of Object.keys(value)) {
+      returnArray.push({
+        key: k,
+        val: value[k],
+      });
+    }
+
+    Logger.info('Map values : %j : %j', returnArray, args);
+    return returnArray;
+  }
+}

package/src/pipes/number-with-commas.pipe.ts

@@ -0,0 +1,8 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxAcuteNumberWithCommas', standalone: true })
+export class NumberWithCommasPipe implements PipeTransform {
+  transform(input: number): string {
+    return new Intl.NumberFormat().format(input);
+  }
+}

package/src/pipes/order-by.pipe.ts

@@ -0,0 +1,59 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxAcuteOderBy', pure: false, standalone: true })
+export class OrderByPipe implements PipeTransform {
+  static _orderByComparator(a: any, b: any): number {
+    if (isNaN(parseFloat(a)) || !isFinite(a) || isNaN(parseFloat(b)) || !isFinite(b)) {
+      //Isn't a number so lowercase the string to properly compare
+      if (String(a).toLowerCase() < String(b).toLowerCase()) return -1;
+      if (String(a).toLowerCase() > String(b).toLowerCase()) return 1;
+    } else {
+      //Parse strings as numbers to compare properly
+      if (parseFloat(a) < parseFloat(b)) return -1;
+      if (parseFloat(a) > parseFloat(b)) return 1;
+    }
+
+    return 0; //equal each other
+  }
+
+  transform(input: any, [config = '+']): any {
+    if (!Array.isArray(input)) return input;
+
+    if (!Array.isArray(config) || (Array.isArray(config) && config.length == 1)) {
+      const propertyToCheck: string = !Array.isArray(config) ? config : config[0];
+      const desc = propertyToCheck.substr(0, 1) == '-';
+
+      //Basic array
+      if (!propertyToCheck || propertyToCheck == '-' || propertyToCheck == '+') {
+        return !desc ? input.sort() : input.sort().reverse();
+      } else {
+        const property: string =
+          propertyToCheck.substr(0, 1) == '+' || propertyToCheck.substr(0, 1) == '-' ? propertyToCheck.substr(1) : propertyToCheck;
+
+        return input.sort(function (a: any, b: any) {
+          return !desc
+            ? OrderByPipe._orderByComparator(a[property], b[property])
+            : -OrderByPipe._orderByComparator(a[property], b[property]);
+        });
+      }
+    } else {
+      //Loop over property of the array in order and sort
+      return input.sort(function (a: any, b: any) {
+        for (const cEntry of config) {
+          //for (let i: number = 0; i < config.length; i++) {
+          const desc = cEntry.substr(0, 1) == '-';
+          const property = cEntry.substr(0, 1) == '+' || cEntry.substr(0, 1) == '-' ? cEntry.substr(1) : cEntry;
+
+          const comparison = !desc
+            ? OrderByPipe._orderByComparator(a[property], b[property])
+            : -OrderByPipe._orderByComparator(a[property], b[property]);
+
+          //Don't return 0 yet in case of needing to sort by next property
+          if (comparison != 0) return comparison;
+        }
+
+        return 0; //equal each other
+      });
+    }
+  }
+}