@onecx/angular-accelerator 7.0.3 → 8.0.0-rc.2

package/fesm2022/onecx-angular-accelerator.mjs

@@ -2,11 +2,11 @@ import * as i0 from '@angular/core';
 import { inject, ElementRef, Input, Directive, Renderer2, ViewContainerRef, TemplateRef, HostListener, EventEmitter, Output, Injectable, Injector, LOCALE_ID, Pipe, ContentChild, ViewEncapsulation, Component, ViewChild, ContentChildren, NgZone, ChangeDetectorRef, ViewChildren, QueryList, Type, NgModule, APP_INITIALIZER } from '@angular/core';
 import { UserService, AppStateService, ConfigurationService, CONFIG_KEY, ShellCapabilityService, Capability, AppConfigService } from '@onecx/angular-integration-interface';
 import { HAS_PERMISSION_CHECKER, SKIP_STYLE_SCOPING, getScopeIdentifier, dataStyleIdKey, dataNoPortalLayoutStylesKey, MultiLanguageMissingTranslationHandler, providePermissionChecker, provideTranslationPathFromMeta, provideTranslationConnectionService } from '@onecx/angular-utils';
-import { BehaviorSubject, switchMap, of, from, map, filter, concat, combineLatest, startWith, debounceTime, firstValueFrom, mergeMap, first, shareReplay, withLatestFrom, ReplaySubject, timestamp, distinctUntilChanged, isObservable, skip } from 'rxjs';
+import { BehaviorSubject, switchMap, of, from, take, map, filter, concat, combineLatest, startWith, debounceTime, firstValueFrom, mergeMap, first, shareReplay, withLatestFrom, ReplaySubject, timestamp, distinctUntilChanged, isObservable, skip } from 'rxjs';
+import { createLoggerFactory, Topic, getLocation, isValidDate, getUTCDateWithoutTimezoneIssues } from '@onecx/accelerator';
 import { HttpClient } from '@angular/common/http';
 import * as i3 from '@angular/forms';
 import { FormGroupDirective, FormControlName, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Topic, getLocation, isValidDate, getUTCDateWithoutTimezoneIssues } from '@onecx/accelerator';
 import * as i1 from '@angular/common';
 import { DatePipe, DecimalPipe, CurrencyPipe, formatDate, CommonModule } from '@angular/common';
 import * as i2$1 from 'primeng/button';
@@ -209,6 +209,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
+// This file is not planned to be in the index.ts so it is private to this lib
+const createLogger = createLoggerFactory('@onecx/angular-accelerator');
+
 class IfPermissionDirective {
     set permission(value) {
         this.permissionSubject$.next(value);
@@ -227,6 +230,7 @@ class IfPermissionDirective {
         this.ocxIfPermissionElseTemplate = value;
     }
     constructor() {
+        this.logger = createLogger('IfPermissionDirective');
         this.renderer = inject(Renderer2);
         this.el = inject(ElementRef);
         this.viewContainer = inject(ViewContainerRef);
@@ -265,7 +269,7 @@ class IfPermissionDirective {
         if (this.ocxIfPermissionPermissions) {
             const result = permission.every((p) => this.ocxIfPermissionPermissions?.includes(p));
             if (!result) {
-                console.log('👮‍♀️ No permission in overwrites for: `', permission);
+                this.logger.debug('No permission in overwrites for:', permission);
             }
             return of(result);
         }
@@ -273,7 +277,7 @@ class IfPermissionDirective {
             return this.permissionChecker.getPermissions().pipe(switchMap((permissions) => {
                 const result = permission.every((p) => permissions.includes(p));
                 if (!result) {
-                    console.log('👮‍♀️ No permission from permission checker for: `', permission);
+                    this.logger.debug('No permission from permission checker for:', permission);
                 }
                 return of(result);
             }));
@@ -390,28 +394,37 @@ class SrcDirective {
         return this._src;
     }
     set ocxSrc(value) {
-        if (value && this._src !== value && window.location.hostname) {
+        if (value && this._src !== value && globalThis.location.hostname) {
             try {
-                if (new URL(value, window.location.origin).hostname === window.location.hostname) {
-                    this.httpClient.get(value, { observe: 'response', responseType: 'blob' }).subscribe((response) => {
-                        // ok with content
-                        if (response?.status === 200) {
-                            const url = URL.createObjectURL(response.body);
-                            this.el.nativeElement.addEventListener('load', () => {
-                                URL.revokeObjectURL(url);
-                            });
-                            this.el.nativeElement.src = url;
-                        }
-                        // no content
-                        if (response?.status === 204) {
+                if (new URL(value, globalThis.location.origin).hostname === globalThis.location.hostname) {
+                    this.httpClient
+                        .get(value, { observe: 'response', responseType: 'blob' })
+                        .pipe(take(1))
+                        .subscribe({
+                        next: (response) => {
+                            // ok with content
+                            if (response?.status === 200) {
+                                const url = URL.createObjectURL(response.body);
+                                const onLoad = () => {
+                                    URL.revokeObjectURL(url);
+                                    this.el.nativeElement.removeEventListener('load', onLoad);
+                                };
+                                this.el.nativeElement.addEventListener('load', onLoad);
+                                this.el.nativeElement.src = url;
+                            }
+                            // no content
+                            if (response?.status === 204) {
+                                this.error.emit();
+                            }
+                        },
+                        error: () => {
+                            // on error
                             this.error.emit();
-                        }
-                    }, () => {
-                        // on error
-                        this.error.emit();
-                    }, () => {
-                        // on complete
-                        this.el.nativeElement.style.visibility = 'initial';
+                        },
+                        complete: () => {
+                            // on complete
+                            this.el.nativeElement.style.visibility = 'initial';
+                        },
                     });
                 }
                 else {
@@ -420,7 +433,7 @@ class SrcDirective {
                 }
             }
             catch (error) {
-                console.error('Cannot parse URL ', value, error);
+                this.logger.error('Cannot parse URL', value, error);
                 this.el.nativeElement.src = value;
                 this.el.nativeElement.style.visibility = 'initial';
             }
@@ -428,6 +441,7 @@ class SrcDirective {
         }
     }
     constructor() {
+        this.logger = createLogger('SrcDirective');
         this.el = inject(ElementRef);
         this.httpClient = inject(HttpClient);
         // eslint-disable-next-line @angular-eslint/no-output-native
@@ -1000,7 +1014,7 @@ class AdvancedDirective {
         this.searchHeader = inject(SearchHeaderComponent, { optional: true });
         const searchHeader = this.searchHeader;
         if (!searchHeader) {
-            throw 'Advanced directive can only be used inside search header component';
+            throw new Error('Advanced directive can only be used inside search header component');
         }
         searchHeader.hasAdvanced = true;
     }
@@ -1102,7 +1116,7 @@ class BasicDirective {
         this.searchHeader = inject(SearchHeaderComponent, { optional: true });
         const searchHeader = this.searchHeader;
         if (!searchHeader) {
-            throw 'Basic directive can only be used inside search header component';
+            throw new Error('Basic directive can only be used inside search header component');
         }
     }
     ngDoCheck() {
@@ -1157,11 +1171,11 @@ class LoadingIndicatorDirective {
     }
     toggleLoadingIndicator() {
         if (this.ocxLoadingIndicator) {
-            if (this.overlayFullPage == false) {
-                this.elementLoader();
+            if (this.overlayFullPage) {
+                this.componentRef = this.viewContainerRef.createComponent(LoadingIndicatorComponent);
             }
             else {
-                this.componentRef = this.viewContainerRef.createComponent(LoadingIndicatorComponent);
+                this.elementLoader();
             }
         }
         else {
@@ -4413,16 +4427,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class GroupByCountDiagramComponent {
     constructor() {
         this.translateService = inject(TranslateService);
+        this._data$ = new BehaviorSubject([]);
         this.sumKey = 'SEARCH.SUMMARY_TITLE';
         this.diagramType = "PIE" /* DiagramType.PIE */;
         /**
          * This property determines if diagram should generate the colors for the data that does not have any set.
          *
-         * Setting this property to false will result in using the provided colors only if every data item has one. In the scenario where at least one item does not have a color set, diagram will generate all colors.
+         * Setting this property to false will result in using the provided colors only if every data item has one.
+         *  In the scenario where at least one item does not have a color set, diagram will generate all colors.
          */
         this.fillMissingColors = true;
         this.supportedDiagramTypes = [];
-        this._data$ = new BehaviorSubject([]);
+        this._allLabelKeys$ = new BehaviorSubject([]);
+        this._showAllLabels$ = new BehaviorSubject(false);
         this._columnType$ = new BehaviorSubject(ColumnType.STRING);
         this._columnField$ = new BehaviorSubject('');
         this._colors$ = new BehaviorSubject({});
@@ -4430,6 +4447,18 @@ class GroupByCountDiagramComponent {
         this.diagramTypeChanged = new EventEmitter();
         this.componentStateChanged = new EventEmitter();
     }
+    get allLabelKeys() {
+        return this._allLabelKeys$.getValue();
+    }
+    set allLabelKeys(value) {
+        this._allLabelKeys$.next(value);
+    }
+    get showAllLabels() {
+        return this._showAllLabels$.getValue();
+    }
+    set showAllLabels(value) {
+        this._showAllLabels$.next(value);
+    }
     get data() {
         return this._data$.getValue();
     }
@@ -4462,13 +4491,39 @@ class GroupByCountDiagramComponent {
         this._colors$.next(value);
     }
     ngOnInit() {
-        this.diagramData$ = combineLatest([this._data$, this._columnField$, this._columnType$, this._colors$]).pipe(mergeMap(([data, columnField, columnType, colors]) => {
+        this.diagramData$ = combineLatest([
+            this._data$,
+            this._columnField$,
+            this._columnType$,
+            this._colors$,
+            this._allLabelKeys$,
+            this._showAllLabels$,
+        ]).pipe(mergeMap(([data, columnField, columnType, colors, allLabelKeys, showAllLabels]) => {
             const columnData = data.map((d) => ObjectUtils.resolveFieldData(d, columnField));
-            const occurrences = columnData.reduce((acc, current) => {
-                return acc.some((e) => e.label === current)
-                    ? (acc.find((e) => e.label === current).value++, acc)
-                    : [...acc, { label: current, value: 1, backgroundColor: colors[current.toString()] }];
-            }, []);
+            let occurrences = [];
+            if (showAllLabels && allLabelKeys.length > 0) {
+                occurrences = allLabelKeys.map((label) => ({
+                    label: label,
+                    value: 0,
+                    backgroundColor: colors[label],
+                }));
+                columnData.forEach((current) => {
+                    const foundColumn = occurrences.find((e) => e.label === current);
+                    if (foundColumn) {
+                        foundColumn.value++;
+                    }
+                    else {
+                        occurrences.push({ label: current, value: 1, backgroundColor: colors[current.toString()] });
+                    }
+                });
+            }
+            else {
+                occurrences = columnData.reduce((acc, current) => {
+                    return acc.some((e) => e.label === current)
+                        ? (acc.find((e) => e.label === current).value++, acc)
+                        : [...acc, { label: current, value: 1, backgroundColor: colors[current.toString()] }];
+                }, []);
+            }
             if (columnType === ColumnType.TRANSLATION_KEY && occurrences.length > 0) {
                 return this.translateService.get(occurrences.map((o) => o.label)).pipe(map((translations) => occurrences.map((o) => ({
                     label: translations[o.label],
@@ -4476,9 +4531,7 @@ class GroupByCountDiagramComponent {
                     backgroundColor: o.backgroundColor,
                 }))));
             }
-            else {
-                return of(occurrences);
-            }
+            return of(occurrences);
         }));
     }
     dataClicked(event) {
@@ -4492,7 +4545,7 @@ class GroupByCountDiagramComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GroupByCountDiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: GroupByCountDiagramComponent, isStandalone: false, selector: "ocx-group-by-count-diagram", inputs: { sumKey: "sumKey", diagramType: "diagramType", fillMissingColors: "fillMissingColors", supportedDiagramTypes: "supportedDiagramTypes", data: "data", columnType: "columnType", columnField: "columnField", column: "column", colors: "colors" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<ocx-diagram\n  [data]=\"(diagramData$ | async) || []\"\n  [fillMissingColors]=\"fillMissingColors\"\n  [sumKey]=\"sumKey\"\n  [diagramType]=\"diagramType\"\n  (onDataSelect)=\"dataClicked($event)\"\n  [supportedDiagramTypes]=\"supportedDiagramTypes\"\n  (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n", dependencies: [{ kind: "component", type: DiagramComponent, selector: "ocx-diagram", inputs: ["data", "sumKey", "fillMissingColors", "diagramType", "supportedDiagramTypes"], outputs: ["dataSelected", "diagramTypeChanged", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: GroupByCountDiagramComponent, isStandalone: false, selector: "ocx-group-by-count-diagram", inputs: { sumKey: "sumKey", diagramType: "diagramType", fillMissingColors: "fillMissingColors", supportedDiagramTypes: "supportedDiagramTypes", allLabelKeys: "allLabelKeys", showAllLabels: "showAllLabels", data: "data", columnType: "columnType", columnField: "columnField", column: "column", colors: "colors" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<ocx-diagram\n  [data]=\"(diagramData$ | async) || []\"\n  [fillMissingColors]=\"fillMissingColors\"\n  [sumKey]=\"sumKey\"\n  [diagramType]=\"diagramType\"\n  (onDataSelect)=\"dataClicked($event)\"\n  [supportedDiagramTypes]=\"supportedDiagramTypes\"\n  (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n", dependencies: [{ kind: "component", type: DiagramComponent, selector: "ocx-diagram", inputs: ["data", "sumKey", "fillMissingColors", "diagramType", "supportedDiagramTypes"], outputs: ["dataSelected", "diagramTypeChanged", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GroupByCountDiagramComponent, decorators: [{
             type: Component,
@@ -4505,6 +4558,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], supportedDiagramTypes: [{
                 type: Input
+            }], allLabelKeys: [{
+                type: Input
+            }], showAllLabels: [{
+                type: Input
             }], data: [{
                 type: Input
             }], columnType: [{
@@ -5529,6 +5586,7 @@ class PortalDialogService {
         this.dialogService = inject(DialogService);
         this.translateService = inject(TranslateService);
         this.router = inject(Router);
+        this.logger = createLogger('PortalDialogService');
         this.skipStyleScoping = inject(SKIP_STYLE_SCOPING, { optional: true });
         this.remoteComponentConfig = inject(REMOTE_COMPONENT_CONFIG, { optional: true });
         this.appStateService = inject(AppStateService);
@@ -5593,7 +5651,7 @@ class PortalDialogService {
                 },
             });
             if (!dialogRef) {
-                console.error('Dialog could not be opened, dialog creation failed.');
+                this.logger.error('Dialog could not be opened, dialog creation failed.');
                 return of(null);
             }
             const dialogComponent = this.dialogService.getInstance(dialogRef);
@@ -5601,7 +5659,7 @@ class PortalDialogService {
                 this.setScopeIdentifier(dialogComponent);
             }
             else {
-                console.warn('Dialog component instance could not be found after creation. The displayed dialog may not function as expected.');
+                this.logger.warn('Dialog component instance could not be found after creation. The displayed dialog may not function as expected.');
             }
             return dialogRef.onClose;
         }));
@@ -5611,7 +5669,7 @@ class PortalDialogService {
             this.dialogService.dialogComponentRefMap.forEach((_, dialogRef) => {
                 const dialogComponent = this.dialogService.getInstance(dialogRef);
                 if (!dialogComponent) {
-                    console.warn('Dialog component instance could not be found during cleanup. The displayed dialog may not function as expected.');
+                    this.logger.warn('Dialog component instance could not be found during cleanup. The displayed dialog may not function as expected.');
                     return;
                 }
                 dialogRef.close();
@@ -6276,65 +6334,66 @@ const atLeastOneFieldFilledValidator = (form) => {
     return null;
 };
 
+const logger = createLogger('DataOperationStrategy');
 /* eslint-disable @typescript-eslint/no-unused-vars */
 class DataOperationStrategy {
     endsWith(column, value, target) {
-        console.error('endsWith method not implemented');
+        logger.error('endsWith method not implemented');
         return true;
     }
     startsWith(column, value, target) {
-        console.error('startsWith method not implemented');
+        logger.error('startsWith method not implemented');
         return true;
     }
     contains(column, value, target) {
-        console.error('contains method not implemented');
+        logger.error('contains method not implemented');
         return true;
     }
     notContains(column, value, target) {
-        console.error('notContains method not implemented');
+        logger.error('notContains method not implemented');
         return true;
     }
     equals(column, value, target) {
-        console.error('equals method not implemented');
+        logger.error('equals method not implemented');
         return true;
     }
     notEquals(column, value, target) {
-        console.error('notEquals method not implemented');
+        logger.error('notEquals method not implemented');
         return true;
     }
     lessThan(column, value, target) {
-        console.error('lessThan method not implemented');
+        logger.error('lessThan method not implemented');
         return true;
     }
     greaterThan(column, value, target) {
-        console.error('greaterThan method not implemented');
+        logger.error('greaterThan method not implemented');
         return true;
     }
     lessThanOrEqual(column, value, target) {
-        console.error('lessThanOrEqual method not implemented');
+        logger.error('lessThanOrEqual method not implemented');
         return true;
     }
     greaterThanOrEqual(column, value, target) {
-        console.error('greaterThanOrEqual method not implemented');
+        logger.error('greaterThanOrEqual method not implemented');
         return true;
     }
     isEmpty(column, value) {
-        console.error('isEmpty method not implemented');
+        logger.error('isEmpty method not implemented');
         return true;
     }
     isNotEmpty(column, value) {
-        console.error('isNotEmpty method not implemented');
+        logger.error('isNotEmpty method not implemented');
         return true;
     }
     compare(a, b, column) {
-        console.error('compare method not implemented');
+        logger.error('compare method not implemented');
         return 0;
     }
     filterOptions(hayStack, filterObject, columns) {
         const hayStackOptions = hayStack.map((item) => this.mapHaystackItemToValue(item, filterObject));
         const column = columns.find((c) => c.id === filterObject.columnId);
         if (!column) {
-            console.warn('Filter does not have a column id set. All items will be considered a valid option');
+            logger.warn('Filter does not have a column id set. All items will be considered a valid option');
             return hayStackOptions;
         }
         return hayStackOptions.filter((item, index, self) => index === self.findIndex((t) => this.compare(t, item, column) === 0));
@@ -6342,12 +6401,12 @@ class DataOperationStrategy {
     filter(hayStack, filter, columns) {
         const { filterType, value } = filter;
         if (!filterType) {
-            console.warn('Filter does not have a type set. All items will resolve as true');
+            logger.warn('Filter does not have a type set. All items will resolve as true');
             return hayStack;
         }
         const column = columns.find((c) => c.id === filter.columnId);
         if (!column) {
-            console.warn('Filter does not have a column id set. All items will be considered a valid option');
+            logger.warn('Filter does not have a column id set. All items will be considered a valid option');
             return hayStack;
         }
         return hayStack.filter((item) => this[filterType](column, this.mapHaystackItemToValue(item, filter), value));