@o3r/components 10.0.0-next.9 → 11.0.0-next.0

package/fesm2022/o3r-components.mjs

@@ -1,11 +1,11 @@
-import { of, from, observeOn, animationFrameScheduler, BehaviorSubject, Subscription, firstValueFrom, fromEvent, ReplaySubject } from 'rxjs';
-import { mergeMap, bufferCount, concatMap, delay, scan, tap, filter, distinctUntilChanged, map, mapTo, switchMap } from 'rxjs/operators';
+import { of, from, animationFrameScheduler, observeOn, BehaviorSubject, Subscription, firstValueFrom, fromEvent, Subject, ReplaySubject, sample } from 'rxjs';
+import { bufferCount, delay, concatMap, scan, tap, mergeMap, filter, distinctUntilChanged, map, mapTo, switchMap } from 'rxjs/operators';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, NgModule, SimpleChange, ChangeDetectorRef, forwardRef, Directive, Input, Pipe, Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, NgModule, SimpleChange, forwardRef, Directive, Input, Pipe, Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
 import { otterComponentInfoPropertyName, sendOtterMessage, filterMessageContent, asyncProps, createEntityAsyncRequestAdapter, asyncStoreItemAdapter, asyncEntitySerializer } from '@o3r/core';
 import * as i1 from '@o3r/logger';
 import * as i1$1 from '@ngrx/store';
-import { StoreModule, createAction, props, on, createReducer, createFeatureSelector, createSelector } from '@ngrx/store';
+import { StoreModule, props, createAction, on, createReducer, createFeatureSelector, createSelector } from '@ngrx/store';
 import { createEntityAdapter } from '@ngrx/entity';
 import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import * as i2 from '@angular/common';
@@ -15,7 +15,6 @@ import { CommonModule } from '@angular/common';
  * Buffers and emits data for lazy/progressive rendering of big lists
  * That could solve issues with long-running tasks when trying to render an array
  * of similar components.
- *
  * @param delayMs Delay between data emits
  * @param concurrency Amount of elements that should be emitted at once
  * @returns
@@ -44,7 +43,6 @@ function lazyArray(delayMs = 0, concurrency = 2) {
 
 /**
  * Determine if the given message is a Components message
- *
  * @param message message to check
  */
 const isComponentsMessage = (message) => {
@@ -65,7 +63,6 @@ const OTTER_COMPONENTS_DEVTOOLS_OPTIONS = new InjectionToken('Otter Components D
 const INSPECTOR_CLASS = 'otter-devtools-inspector';
 /**
  * Determine if a node is an Otter container
- *
  * @param node Element to check
  * @returns true if the node is an Otter container
  */
@@ -74,7 +71,6 @@ const isContainer = (node) => {
 };
 /**
  * Determine the config id of a component instance
- *
  * @param instance component instance
  * @returns the config id of the component instance
  */
@@ -83,7 +79,6 @@ const getConfigId = (instance) => {
 };
 /**
  * Recursive method to determin the translations of a node
- *
  * @param node HTMLElement to check
  * @param rec recursive method
  * @returns the trasnslations associated to their component name
@@ -115,14 +110,12 @@ function getTranslationsRec(node, rec) {
 }
 /**
  * Determine the translations of a node
- *
  * @param node HTMLElement to check
  * @returns the translations associated to their component name
  */
 const getTranslations = (node) => getTranslationsRec(node, getTranslations);
 /**
  * Recursive method to determine the analytics of a node
- *
  * @param node Element to check
  * @param rec recursive method
  * @returns the analytics associated to their component name
@@ -154,14 +147,12 @@ function getAnalyticEventsRec(node, rec) {
 }
 /**
  * Determine the analytics of a node
- *
  * @param node Element to check
  * @returns the analytics associated to their component name
  */
 const getAnalyticEvents = (node) => getAnalyticEventsRec(node, getAnalyticEvents);
 /**
  * Determine all info from an Otter component
- *
  * @param componentClassInstance component instance
  * @param host HTML element hosting the component
  * @returns all info from an Otter component
@@ -325,7 +316,6 @@ class OtterInspectorService {
     }
     /**
      * Toggle the inspector.
-     *
      * @param isRunning true if the inspector is running
      */
     toggleInspector(isRunning) {
@@ -376,7 +366,6 @@ class ComponentsDevtoolsMessageService {
     }
     /**
      * Function to trigger a re-send a requested messages to the Otter Chrome DevTools extension
-     *
      * @param only restricted list of messages to re-send
      */
     handleReEmitRequest(only) {
@@ -386,7 +375,6 @@ class ComponentsDevtoolsMessageService {
     }
     /**
      * Function to handle the incoming messages from Otter Chrome DevTools extension
-     *
      * @param event Event coming from the Otter Chrome DevTools extension
      * @param message
      */
@@ -421,25 +409,24 @@ class ComponentsDevtoolsMessageService {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComponentsDevtoolsMessageService, deps: [{ token: i1.LoggerService }, { token: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComponentsDevtoolsMessageService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ComponentsDevtoolsMessageService, deps: [{ token: i1.LoggerService }, { token: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ComponentsDevtoolsMessageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComponentsDevtoolsMessageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ComponentsDevtoolsMessageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LoggerService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1.LoggerService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [OTTER_COMPONENTS_DEVTOOLS_OPTIONS]
-                }] }]; } });
+                }] }] });
 
 class ComponentsDevtoolsModule {
     /**
      * Initialize Otter Devtools
-     *
      * @param options
      */
     static instrument(options) {
@@ -451,14 +438,14 @@ class ComponentsDevtoolsModule {
             ]
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComponentsDevtoolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: ComponentsDevtoolsModule, imports: [StoreModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComponentsDevtoolsModule, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ComponentsDevtoolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ComponentsDevtoolsModule, imports: [StoreModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ComponentsDevtoolsModule, providers: [
             { provide: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, useValue: OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS },
             ComponentsDevtoolsMessageService
         ], imports: [StoreModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ComponentsDevtoolsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ComponentsDevtoolsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -526,13 +513,13 @@ class PlaceholderTemplateStoreModule {
             ]
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PlaceholderTemplateStoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: PlaceholderTemplateStoreModule, imports: [i1$1.StoreFeatureModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PlaceholderTemplateStoreModule, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderTemplateStoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderTemplateStoreModule, imports: [i1$1.StoreFeatureModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderTemplateStoreModule, providers: [
             { provide: PLACEHOLDER_TEMPLATE_REDUCER_TOKEN, useFactory: getDefaultPlaceholderTemplateReducer }
         ], imports: [StoreModule.forFeature(PLACEHOLDER_TEMPLATE_STORE_NAME, PLACEHOLDER_TEMPLATE_REDUCER_TOKEN)] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PlaceholderTemplateStoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderTemplateStoreModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -647,13 +634,13 @@ class PlaceholderRequestStoreModule {
             ]
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PlaceholderRequestStoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: PlaceholderRequestStoreModule, imports: [i1$1.StoreFeatureModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PlaceholderRequestStoreModule, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderRequestStoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderRequestStoreModule, imports: [i1$1.StoreFeatureModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderRequestStoreModule, providers: [
             { provide: PLACEHOLDER_REQUEST_REDUCER_TOKEN, useFactory: getDefaultplaceholderRequestReducer }
         ], imports: [StoreModule.forFeature(PLACEHOLDER_REQUEST_STORE_NAME, PLACEHOLDER_REQUEST_REDUCER_TOKEN)] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PlaceholderRequestStoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderRequestStoreModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -671,7 +658,6 @@ const { selectEntities: selectEntities$1 } = placeholderRequestAdapter.getSelect
 const selectPlaceholderRequestEntities = createSelector(selectPlaceholderRequestState, (state) => state && selectEntities$1(state));
 /**
  * Select a specific PlaceholderRequest entity using a raw url as id
- *
  * @param rawUrl
  */
 const selectPlaceholderRequestEntityUsage = (rawUrl) => createSelector(selectPlaceholderRequestState, (state) => {
@@ -700,18 +686,16 @@ const selectPlaceholderTemplateState = createFeatureSelector(PLACEHOLDER_TEMPLAT
 const selectPlaceholderTemplateEntities = createSelector(selectPlaceholderTemplateState, (state) => state && selectEntities(state));
 /**
  * Select a specific PlaceholderTemplate
- *
  * @param placeholderId
  */
 const selectPlaceholderTemplateEntity = (placeholderId) => createSelector(selectPlaceholderTemplateState, (state) => state?.entities[placeholderId]);
 /**
- * Select the ordered rendered templates for a given placeholderId
+ * Select the ordered rendered placeholder template full data (url, priority etc.) for a given placeholderId
  * Return undefined if the placeholder is not found
  * Returns {orderedRenderedTemplates: undefined, isPending: true} if any of the request is still pending
- *
  * @param placeholderId
  */
-const selectPlaceholderRenderedTemplates = (placeholderId) => createSelector(selectPlaceholderTemplateEntity(placeholderId), selectPlaceholderRequestState, (placeholderTemplate, placeholderRequestState) => {
+const selectSortedTemplates = (placeholderId) => createSelector(selectPlaceholderTemplateEntity(placeholderId), selectPlaceholderRequestState, (placeholderTemplate, placeholderRequestState) => {
     if (!placeholderTemplate || !placeholderRequestState) {
         return;
     }
@@ -727,6 +711,7 @@ const selectPlaceholderRenderedTemplates = (placeholderId) => createSelector(sel
             if (!placeholderRequest.isFailure) {
                 templates.push({
                     rawUrl: urlWithPriority.rawUrl,
+                    resolvedUrl: placeholderRequest.resolvedUrl,
                     priority: urlWithPriority.priority,
                     renderedTemplate: placeholderRequest.renderedTemplate
                 });
@@ -735,14 +720,29 @@ const selectPlaceholderRenderedTemplates = (placeholderId) => createSelector(sel
     });
     // No need to perform sorting if still pending
     if (isPending) {
-        return { orderedRenderedTemplates: undefined, isPending };
+        return { orderedTemplates: undefined, isPending };
     }
     // Sort templates by priority
-    const orderedRenderedTemplates = templates.sort((template1, template2) => {
+    const orderedTemplates = templates.sort((template1, template2) => {
         return (template2.priority - template1.priority) || 1;
-    }).map(template => template.renderedTemplate)
-        .filter(renderedTemplate => !!renderedTemplate);
-    return { orderedRenderedTemplates, isPending };
+    }).filter(templateData => !!templateData.renderedTemplate);
+    return { orderedTemplates, isPending };
+});
+/**
+ * Select the ordered rendered templates for a given placeholderId
+ * Return undefined if the placeholder is not found
+ * Returns {orderedRenderedTemplates: undefined, isPending: true} if any of the request is still pending
+ * @param placeholderId
+ * @deprecated Please use {@link selectSortedTemplates} instead
+ */
+const selectPlaceholderRenderedTemplates = (placeholderId) => createSelector(selectSortedTemplates(placeholderId), (placeholderData) => {
+    if (!placeholderData) {
+        return;
+    }
+    return {
+        orderedRenderedTemplates: placeholderData.orderedTemplates?.map(placeholder => placeholder.renderedTemplate),
+        isPending: placeholderData.isPending
+    };
 });
 
 const placeholderTemplateStorageDeserializer = (rawObject) => {
@@ -771,9 +771,8 @@ class C11nDirective {
     get inputs() {
         return this._inputs;
     }
-    constructor(viewContainerRef, componentFactoryResolver, differsService, injector) {
+    constructor(viewContainerRef, differsService, injector) {
         this.viewContainerRef = viewContainerRef;
-        this.componentFactoryResolver = componentFactoryResolver;
         this.differsService = differsService;
         this.injector = injector;
         this.componentSubscriptions = [];
@@ -782,7 +781,6 @@ class C11nDirective {
     }
     /**
      * Type guard for component implementing CVA
-     *
      * @param _cmp Component instance
      */
     componentImplementsCva(_cmp) {
@@ -792,12 +790,10 @@ class C11nDirective {
         const recordKey = record.key;
         const isFirstChange = this.uninitializedInputs.has(recordKey);
         this.uninitializedInputs.delete(recordKey);
-        this.componentRef.instance[recordKey] = record.currentValue;
         inputChanges[recordKey] = new SimpleChange(record.previousValue, record.currentValue, isFirstChange);
     }
     /**
      * called when data-bound property change
-     *
      * @param changes The changes that occur
      */
     ngOnChanges(changes) {
@@ -809,12 +805,13 @@ class C11nDirective {
                 this.componentRef.destroy();
             }
             const ngControl = !!this.formControl && this.injector.get(NgControl);
-            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(changes.component.currentValue);
-            componentFactory.inputs.forEach((prop) => {
-                this.uninitializedInputs.add(prop.propName);
-            });
             this.viewContainerRef.clear();
-            this.componentRef = this.viewContainerRef.createComponent(componentFactory);
+            this.componentRef = this.viewContainerRef.createComponent(changes.component.currentValue);
+            Object.keys(this.componentRef.instance)
+                .filter(prop => !(this.outputs && Object.keys(this.outputs).some(o => o === prop)))
+                .forEach((prop) => {
+                this.uninitializedInputs.add(prop);
+            });
             if (ngControl && this.componentImplementsCva(this.componentRef.instance)) {
                 ngControl.valueAccessor = this.componentRef.instance;
             }
@@ -828,13 +825,11 @@ class C11nDirective {
                 Object.keys(this.inputs).forEach((inputName) => {
                     const currentInputValue = this.inputs[inputName];
                     inputChanges[inputName] = new SimpleChange(undefined, currentInputValue, true);
-                    this.componentRef.instance[inputName] = currentInputValue;
                     this.uninitializedInputs.delete(inputName);
                 });
             }
             // In case of lazy loaded component keep the config
             if (!changes.config && this.config) {
-                this.componentRef.instance.config = { ...this.componentRef.instance.config, ...this.config };
                 inputChanges.config = new SimpleChange(this.componentRef.instance.config, this.config, true);
                 this.uninitializedInputs.delete('config');
             }
@@ -848,18 +843,17 @@ class C11nDirective {
             }
         }
         if (this.componentRef && changes.config) {
-            this.componentRef.instance.config = { ...this.componentRef.instance.config, ...changes.config.currentValue };
             inputChanges.config = new SimpleChange(this.componentRef.instance.config, changes.config.currentValue, this.uninitializedInputs.has('config'));
             this.uninitializedInputs.delete('config');
         }
-        if (this.componentRef && this.componentRef.instance.ngOnChanges && Object.keys(inputChanges).length) {
-            this.componentRef.instance.ngOnChanges(inputChanges);
-            this.componentRef.injector.get(ChangeDetectorRef).markForCheck();
+        if (this.componentRef && Object.keys(inputChanges).length) {
+            Object.entries(inputChanges).forEach(([inputName, value]) => {
+                this.componentRef.setInput(inputName, value.currentValue);
+            });
         }
     }
     /**
      * returns validation errors from component instance if validate method exists else returns null
-     *
      * @param control Form control
      */
     validate(control) {
@@ -875,8 +869,8 @@ class C11nDirective {
         this.componentSubscriptions.forEach((s) => s.unsubscribe());
         this.componentRef.destroy();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: C11nDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i0.KeyValueDiffers }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: C11nDirective, selector: "[c11n]", inputs: { component: "component", config: "config", formControl: "formControl", inputs: "inputs", outputs: "outputs" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.KeyValueDiffers }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: C11nDirective, selector: "[c11n]", inputs: { component: "component", config: "config", formControl: "formControl", inputs: "inputs", outputs: "outputs" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => C11nDirective)),
@@ -889,7 +883,7 @@ class C11nDirective {
             }
         ], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: C11nDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c11n]',
@@ -906,7 +900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i0.KeyValueDiffers }, { type: i0.Injector }]; }, propDecorators: { component: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.KeyValueDiffers }, { type: i0.Injector }], propDecorators: { component: [{
                 type: Input
             }], config: [{
                 type: Input
@@ -929,7 +923,6 @@ class C11nService {
     }
     /**
      * Add a presenter
-     *
      * @param presKey The presenter key to set
      * @param presenter The new presenter
      */
@@ -938,7 +931,6 @@ class C11nService {
     }
     /**
      * Operator to retrieve the presenter based on a given presKey
-     *
      * @param defaultPres The default presenter
      * @param presKey The presenter key to retrieve
      */
@@ -948,19 +940,18 @@ class C11nService {
             return typeof presenterConfig === 'string' && presenterConfig !== '' ? (this.presentersMap.get(presenterConfig) || defaultPres) : defaultPres;
         }));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: C11nService, deps: [{ token: C11N_PRESENTERS_MAP_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: C11nService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nService, deps: [{ token: C11N_PRESENTERS_MAP_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: C11nService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: Map, decorators: [{
+        }], ctorParameters: () => [{ type: Map, decorators: [{
                     type: Inject,
                     args: [C11N_PRESENTERS_MAP_TOKEN]
-                }] }]; } });
+                }] }] });
 
 /**
  * Customization service factory
- *
  * @param config -> registerCompFunc - a function which returns the map of custom components which will be injected in c11n service
  * @param config.registerCompFunc
  */
@@ -988,11 +979,11 @@ class C11nModule {
                 }]
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: C11nModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: C11nModule, declarations: [C11nDirective], exports: [C11nDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: C11nModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: C11nModule, declarations: [C11nDirective], exports: [C11nDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: C11nModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [C11nDirective],
@@ -1002,7 +993,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
 
 /**
  *  Register a custom component
- *
  * @param customComponentsMap an object containing the already registered custom component
  * @param customComponentKey
  * @param customComponent
@@ -1014,10 +1004,10 @@ function registerCustomComponent(customComponentsMap, customComponentKey, custom
 
 /** C11n directive mock */
 class MockC11nDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: MockC11nDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: MockC11nDirective, selector: "[c11n]", inputs: { config: "config", component: "component", inputs: "inputs", outputs: "outputs" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MockC11nDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: MockC11nDirective, selector: "[c11n]", inputs: { config: "config", component: "component", inputs: "inputs", outputs: "outputs" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: MockC11nDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MockC11nDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c11n]',
@@ -1031,21 +1021,21 @@ class C11nMockService {
     getPresenter(_defaultPres, _presKey) {
         return (source) => source.pipe(mapTo(null));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: C11nMockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: C11nMockService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nMockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nMockService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: C11nMockService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nMockService, decorators: [{
             type: Injectable
         }] });
 /**
  * The purpose of this module is to be imported in the unit tests of the components which are using c11n directive
  */
 class C11nMockModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: C11nMockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: C11nMockModule, declarations: [MockC11nDirective], exports: [MockC11nDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: C11nMockModule, providers: [{ provide: C11nService, useClass: C11nMockService }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nMockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: C11nMockModule, declarations: [MockC11nDirective], exports: [MockC11nDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nMockModule, providers: [{ provide: C11nService, useClass: C11nMockService }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: C11nMockModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nMockModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MockC11nDirective],
@@ -1060,20 +1050,20 @@ class CapitalizePipe {
         const firstLetter = val && val.charAt(0);
         return firstLetter ? firstLetter.toUpperCase() + val.slice(1) : value;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: CapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: CapitalizePipe, name: "capitalize" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: CapitalizePipe, name: "capitalize" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: CapitalizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CapitalizePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'capitalize' }]
         }] });
 
 class CapitalizePipeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: CapitalizePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: CapitalizePipeModule, declarations: [CapitalizePipe], exports: [CapitalizePipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: CapitalizePipeModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CapitalizePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: CapitalizePipeModule, declarations: [CapitalizePipe], exports: [CapitalizePipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CapitalizePipeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: CapitalizePipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CapitalizePipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CapitalizePipe],
@@ -1103,7 +1093,6 @@ const defaultTimeUnits = [
 
 /**
  * Pad a number with zeroes
- *
  * @param num
  * @param digits
  */
@@ -1156,20 +1145,20 @@ class DurationPipe {
             return result.replace(matchedPatternToReplace, padded);
         }, pattern);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: DurationPipe, name: "duration" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: DurationPipe, name: "duration" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DurationPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DurationPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'duration' }]
         }] });
 
 class DurationPipeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DurationPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: DurationPipeModule, declarations: [DurationPipe], exports: [DurationPipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DurationPipeModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DurationPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: DurationPipeModule, declarations: [DurationPipe], exports: [DurationPipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DurationPipeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: DurationPipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DurationPipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DurationPipe],
@@ -1181,10 +1170,10 @@ class KeepWhiteSpacePipe {
     transform(value) {
         return value.replace(/\s/g, ' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: KeepWhiteSpacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: KeepWhiteSpacePipe, name: "keepWhiteSpace" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: KeepWhiteSpacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: KeepWhiteSpacePipe, name: "keepWhiteSpace" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: KeepWhiteSpacePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: KeepWhiteSpacePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'keepWhiteSpace',
@@ -1193,11 +1182,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
         }] });
 
 class KeepWhiteSpacePipeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: KeepWhiteSpacePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: KeepWhiteSpacePipeModule, declarations: [KeepWhiteSpacePipe], exports: [KeepWhiteSpacePipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: KeepWhiteSpacePipeModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: KeepWhiteSpacePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: KeepWhiteSpacePipeModule, declarations: [KeepWhiteSpacePipe], exports: [KeepWhiteSpacePipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: KeepWhiteSpacePipeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: KeepWhiteSpacePipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: KeepWhiteSpacePipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [KeepWhiteSpacePipe],
@@ -1218,10 +1207,10 @@ class ReplaceWithBoldPipe {
     escapeRegExp(str) {
         return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ReplaceWithBoldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: ReplaceWithBoldPipe, name: "replaceWithBold" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReplaceWithBoldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ReplaceWithBoldPipe, name: "replaceWithBold" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ReplaceWithBoldPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReplaceWithBoldPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'replaceWithBold',
@@ -1230,11 +1219,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
         }] });
 
 class ReplaceWithBoldPipeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ReplaceWithBoldPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: ReplaceWithBoldPipeModule, declarations: [ReplaceWithBoldPipe], exports: [ReplaceWithBoldPipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ReplaceWithBoldPipeModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReplaceWithBoldPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ReplaceWithBoldPipeModule, declarations: [ReplaceWithBoldPipe], exports: [ReplaceWithBoldPipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReplaceWithBoldPipeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: ReplaceWithBoldPipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReplaceWithBoldPipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ReplaceWithBoldPipe],
@@ -1245,7 +1234,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
 /**
  * Placeholder component that is bind to the PlaceholderTemplateStore to display a template based on its ID
  * A loading indication can be provided via projection
- *
  * @example
  *  <o3r-placeholder id="my-template-id">Is loading ...</o3r-placeholder>
  */
@@ -1258,37 +1246,58 @@ class PlaceholderComponent {
         this.store = store;
         this.cd = cd;
         this.subscription = new Subscription();
-        this.id$ = new ReplaySubject(1);
+        this.id$ = new BehaviorSubject(undefined);
+        this.afterViewInit$ = new Subject();
+        this.messages$ = new ReplaySubject(1);
     }
     /** @inheritdoc */
     ngOnInit() {
-        this.subscription.add(this.id$.pipe(distinctUntilChanged(), switchMap((id) => this.store.select(selectPlaceholderRenderedTemplates(id)))).subscribe((templates) => {
-            if (templates) {
-                this.isPending = templates.isPending;
-                const orderedRenderedTemplates = templates.orderedRenderedTemplates;
-                if (!orderedRenderedTemplates || !orderedRenderedTemplates.length) {
-                    this.template = undefined;
-                }
-                else {
-                    // Concatenates the list of templates
-                    this.template = orderedRenderedTemplates.join('');
-                }
+        this.subscription.add(this.id$.pipe(filter((id) => !!id), distinctUntilChanged(), switchMap((id) => this.store.select(selectSortedTemplates(id)).pipe(map((placeholders) => ({
+            id,
+            orderedTemplates: placeholders?.orderedTemplates,
+            isPending: placeholders?.isPending
+        })), distinctUntilChanged((previous, current) => previous.id === current.id &&
+            previous.isPending === current.isPending &&
+            previous.orderedTemplates?.map(placeholder => placeholder.renderedTemplate).join('') ===
+                current.orderedTemplates?.map(placeholder => placeholder.renderedTemplate).join(''))))).subscribe(({ id, orderedTemplates, isPending }) => {
+            this.isPending = isPending;
+            if (!orderedTemplates?.length) {
+                this.template = undefined;
             }
             else {
-                this.isPending = false;
-                this.template = undefined;
+                // Concatenates the list of templates
+                this.template = orderedTemplates.map(placeholder => placeholder.renderedTemplate).join('');
+            }
+            if (this.isPending === false) {
+                this.messages$.next({
+                    templateIds: !this.isPending ? (orderedTemplates || []).map(placeholder => placeholder.resolvedUrl) : [],
+                    placeholderId: id
+                });
             }
             this.cd.markForCheck();
         }));
+        this.messages$.pipe(sample(this.afterViewInit$), distinctUntilChanged((previous, current) => JSON.stringify(current) === JSON.stringify(previous))).subscribe({
+            next: (data) => sendOtterMessage('placeholder-loading-status', data, false),
+            complete: () => sendOtterMessage('placeholder-loading-status', {
+                placeholderId: this.id$.value,
+                templateIds: []
+            }, false)
+        });
+    }
+    ngAfterViewChecked() {
+        // Make sure the view is rendered before posting the status
+        this.afterViewInit$.next();
     }
     /** @inheritdoc */
     ngOnDestroy() {
+        this.messages$.complete();
+        this.afterViewInit$.complete();
         this.subscription.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PlaceholderComponent, deps: [{ token: i1$1.Store }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: PlaceholderComponent, selector: "o3r-placeholder", inputs: { id: "id" }, ngImport: i0, template: "<ng-content *ngIf=\"isPending; else displayTemplate\"></ng-content><ng-template #displayTemplate><div [innerHTML]=\"template\"></div></ng-template>", isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderComponent, deps: [{ token: i1$1.Store }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PlaceholderComponent, selector: "o3r-placeholder", inputs: { id: "id" }, ngImport: i0, template: "<ng-content *ngIf=\"isPending; else displayTemplate\"></ng-content><ng-template #displayTemplate><div [innerHTML]=\"template\"></div></ng-template>", isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'o3r-placeholder',
@@ -1297,22 +1306,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.Store }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i1$1.Store }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
                 type: Input
             }] } });
 
 class PlaceholderModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PlaceholderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: PlaceholderModule, declarations: [PlaceholderComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderModule, declarations: [PlaceholderComponent], imports: [CommonModule,
             StoreModule,
             PlaceholderTemplateStoreModule,
             PlaceholderRequestStoreModule], exports: [PlaceholderComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PlaceholderModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderModule, imports: [CommonModule,
             StoreModule,
             PlaceholderTemplateStoreModule,
             PlaceholderRequestStoreModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: PlaceholderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1330,5 +1339,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { C11N_PRESENTERS_MAP_TOKEN, C11N_REGISTER_FUNC_TOKEN, C11nDirective, C11nMockModule, C11nMockService, C11nModule, C11nService, CapitalizePipe, CapitalizePipeModule, ComponentsDevtoolsMessageService, ComponentsDevtoolsModule, DurationPipe, DurationPipeModule, INSPECTOR_CLASS, KeepWhiteSpacePipe, KeepWhiteSpacePipeModule, MockC11nDirective, OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS, OTTER_COMPONENTS_DEVTOOLS_OPTIONS, OtterInspectorService, PLACEHOLDER_REQUEST_REDUCER_TOKEN, PLACEHOLDER_REQUEST_STORE_NAME, PLACEHOLDER_TEMPLATE_REDUCER_TOKEN, PLACEHOLDER_TEMPLATE_STORE_NAME, PlaceholderComponent, PlaceholderModule, PlaceholderRequestStoreModule, PlaceholderTemplateStoreModule, ReplaceWithBoldPipe, ReplaceWithBoldPipeModule, cancelPlaceholderRequest, createC11nService, deletePlaceholderTemplateEntity, failPlaceholderRequestEntity, getAnalyticEvents, getAnalyticEventsRec, getConfigId, getDefaultPlaceholderTemplateReducer, getDefaultplaceholderRequestReducer, getOtterLikeComponentInfo, getTranslations, getTranslationsRec, isComponentsMessage, isContainer, lazyArray, placeholderRequestAdapter, placeholderRequestInitialState, placeholderRequestReducer, placeholderRequestReducerFeatures, placeholderRequestStorageDeserializer, placeholderRequestStorageSerializer, placeholderRequestStorageSync, placeholderTemplateAdapter, placeholderTemplateInitialState, placeholderTemplateReducer, placeholderTemplateReducerFeatures, placeholderTemplateStorageDeserializer, placeholderTemplateStorageSync, registerCustomComponent, selectPlaceholderRenderedTemplates, selectPlaceholderRequestEntities, selectPlaceholderRequestEntityUsage, selectPlaceholderRequestState, selectPlaceholderTemplateEntities, selectPlaceholderTemplateEntity, selectPlaceholderTemplateState, setPlaceholderRequestEntityFromUrl, setPlaceholderTemplateEntity, updatePlaceholderRequestEntity, updatePlaceholderRequestEntitySync };
+export { C11N_PRESENTERS_MAP_TOKEN, C11N_REGISTER_FUNC_TOKEN, C11nDirective, C11nMockModule, C11nMockService, C11nModule, C11nService, CapitalizePipe, CapitalizePipeModule, ComponentsDevtoolsMessageService, ComponentsDevtoolsModule, DurationPipe, DurationPipeModule, INSPECTOR_CLASS, KeepWhiteSpacePipe, KeepWhiteSpacePipeModule, MockC11nDirective, OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS, OTTER_COMPONENTS_DEVTOOLS_OPTIONS, OtterInspectorService, PLACEHOLDER_REQUEST_REDUCER_TOKEN, PLACEHOLDER_REQUEST_STORE_NAME, PLACEHOLDER_TEMPLATE_REDUCER_TOKEN, PLACEHOLDER_TEMPLATE_STORE_NAME, PlaceholderComponent, PlaceholderModule, PlaceholderRequestStoreModule, PlaceholderTemplateStoreModule, ReplaceWithBoldPipe, ReplaceWithBoldPipeModule, cancelPlaceholderRequest, createC11nService, deletePlaceholderTemplateEntity, failPlaceholderRequestEntity, getAnalyticEvents, getAnalyticEventsRec, getConfigId, getDefaultPlaceholderTemplateReducer, getDefaultplaceholderRequestReducer, getOtterLikeComponentInfo, getTranslations, getTranslationsRec, isComponentsMessage, isContainer, lazyArray, placeholderRequestAdapter, placeholderRequestInitialState, placeholderRequestReducer, placeholderRequestReducerFeatures, placeholderRequestStorageDeserializer, placeholderRequestStorageSerializer, placeholderRequestStorageSync, placeholderTemplateAdapter, placeholderTemplateInitialState, placeholderTemplateReducer, placeholderTemplateReducerFeatures, placeholderTemplateStorageDeserializer, placeholderTemplateStorageSync, registerCustomComponent, selectPlaceholderRenderedTemplates, selectPlaceholderRequestEntities, selectPlaceholderRequestEntityUsage, selectPlaceholderRequestState, selectPlaceholderTemplateEntities, selectPlaceholderTemplateEntity, selectPlaceholderTemplateState, selectSortedTemplates, setPlaceholderRequestEntityFromUrl, setPlaceholderTemplateEntity, updatePlaceholderRequestEntity, updatePlaceholderRequestEntitySync };
 //# sourceMappingURL=o3r-components.mjs.map