@o3r/components 11.6.0-prerelease.2 → 11.6.0-prerelease.21

package/fesm2022/o3r-components.mjs

@@ -2,10 +2,10 @@ import { of, from, observeOn, animationFrameScheduler, BehaviorSubject, Subscrip
 import { mergeMap, bufferCount, concatMap, delay, scan, tap, filter, distinctUntilChanged, map, mapTo, switchMap } from 'rxjs/operators';
 import * as i0 from '@angular/core';
 import { InjectionToken, NgModule, Injectable, Optional, Inject, SimpleChange, forwardRef, Directive, Input, Pipe, Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
-import { asyncProps, createEntityAsyncRequestAdapter, asyncStoreItemAdapter, asyncEntitySerializer, otterComponentInfoPropertyName, sendOtterMessage, filterMessageContent } from '@o3r/core';
-import * as i1$1 from '@o3r/logger';
 import * as i1 from '@ngrx/store';
 import { createAction, props, on, createReducer, StoreModule, createFeatureSelector, createSelector } from '@ngrx/store';
+import { asyncProps, createEntityAsyncRequestAdapter, asyncStoreItemAdapter, asyncEntitySerializer, otterComponentInfoPropertyName, sendOtterMessage, filterMessageContent } from '@o3r/core';
+import * as i1$1 from '@o3r/logger';
 import { createEntityAdapter } from '@ngrx/entity';
 import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import * as i2 from '@angular/common';
@@ -17,7 +17,6 @@ import { CommonModule } from '@angular/common';
  * of similar components.
  * @param delayMs Delay between data emits
  * @param concurrency Amount of elements that should be emitted at once
- * @returns
  */
 function lazyArray(delayMs = 0, concurrency = 2) {
     let isFirstEmission = true;
@@ -46,97 +45,14 @@ function lazyArray(delayMs = 0, concurrency = 2) {
  * @param message message to check
  */
 const isComponentsMessage = (message) => {
-    return message && (message.dataType === 'requestMessages' ||
-        message.dataType === 'connect' ||
-        message.dataType === 'selectedComponentInfo' ||
-        message.dataType === 'isComponentSelectionAvailable' ||
-        message.dataType === 'placeholderMode' ||
-        message.dataType === 'toggleInspector');
+    return message && (message.dataType === 'requestMessages'
+        || message.dataType === 'connect'
+        || message.dataType === 'selectedComponentInfo'
+        || message.dataType === 'isComponentSelectionAvailable'
+        || message.dataType === 'placeholderMode'
+        || message.dataType === 'toggleInspector');
 };
 
-const ACTION_DELETE_ENTITY = '[PlaceholderTemplate] delete entity';
-const ACTION_SET_ENTITY = '[PlaceholderTemplate] set entity';
-const ACTION_TOGGLE_MODE = '[PlaceholderTemplate] toggle mode';
-/** Action to delete a specific entity */
-const deletePlaceholderTemplateEntity = createAction(ACTION_DELETE_ENTITY, props());
-/** Action to clear all placeholderTemplate and fill the store with the payload */
-const setPlaceholderTemplateEntity = createAction(ACTION_SET_ENTITY, props());
-const togglePlaceholderModeTemplate = createAction(ACTION_TOGGLE_MODE, props());
-
-/**
- * PlaceholderTemplate Store adapter
- */
-const placeholderTemplateAdapter = createEntityAdapter({
-    selectId: (model) => model.id
-});
-/**
- * PlaceholderTemplate Store initial value
- */
-const placeholderTemplateInitialState = placeholderTemplateAdapter.getInitialState({
-    mode: 'normal'
-});
-/**
- * List of basic actions for PlaceholderTemplate Store
- */
-const placeholderTemplateReducerFeatures = [
-    on(setPlaceholderTemplateEntity, (state, payload) => placeholderTemplateAdapter.addOne(payload.entity, placeholderTemplateAdapter.removeOne(payload.entity.id, state))),
-    on(deletePlaceholderTemplateEntity, (state, payload) => {
-        const id = payload.id;
-        if (!id || !state.entities[id]) {
-            return state;
-        }
-        return placeholderTemplateAdapter.removeOne(id, state);
-    }),
-    on(togglePlaceholderModeTemplate, (state, payload) => {
-        return {
-            ...state,
-            mode: payload.mode
-        };
-    })
-];
-/**
- * PlaceholderTemplate Store reducer
- */
-const placeholderTemplateReducer = createReducer(placeholderTemplateInitialState, ...placeholderTemplateReducerFeatures);
-
-/**
- * Name of the PlaceholderTemplate Store
- */
-const PLACEHOLDER_TEMPLATE_STORE_NAME = 'placeholderTemplate';
-
-/** Token of the PlaceholderTemplate reducer */
-const PLACEHOLDER_TEMPLATE_REDUCER_TOKEN = new InjectionToken('Feature PlaceholderTemplate Reducer');
-/** Provide default reducer for PlaceholderTemplate store */
-function getDefaultPlaceholderTemplateReducer() {
-    return placeholderTemplateReducer;
-}
-class PlaceholderTemplateStoreModule {
-    static forRoot(reducerFactory) {
-        return {
-            ngModule: PlaceholderTemplateStoreModule,
-            providers: [
-                { provide: PLACEHOLDER_TEMPLATE_REDUCER_TOKEN, useFactory: reducerFactory }
-            ]
-        };
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PlaceholderTemplateStoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: PlaceholderTemplateStoreModule, imports: [i1.StoreFeatureModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", 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: "18.2.12", ngImport: i0, type: PlaceholderTemplateStoreModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        StoreModule.forFeature(PLACEHOLDER_TEMPLATE_STORE_NAME, PLACEHOLDER_TEMPLATE_REDUCER_TOKEN)
-                    ],
-                    providers: [
-                        { provide: PLACEHOLDER_TEMPLATE_REDUCER_TOKEN, useFactory: getDefaultPlaceholderTemplateReducer }
-                    ]
-                }]
-        }] });
-
 const ACTION_FAIL_ENTITIES = '[PlaceholderRequest] fail entities';
 const ACTION_SET_ENTITY_FROM_URL = '[PlaceholderRequest] set entity from url';
 const ACTION_CANCEL_REQUEST = '[PlaceholderRequest] cancel request';
@@ -240,13 +156,13 @@ class PlaceholderRequestStoreModule {
             ]
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PlaceholderRequestStoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: PlaceholderRequestStoreModule, imports: [i1.StoreFeatureModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PlaceholderRequestStoreModule, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderRequestStoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderRequestStoreModule, imports: [i1.StoreFeatureModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.12", ngImport: i0, type: PlaceholderRequestStoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderRequestStoreModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -286,6 +202,89 @@ const placeholderRequestStorageSync = {
     deserialize: placeholderRequestStorageDeserializer
 };
 
+const ACTION_DELETE_ENTITY = '[PlaceholderTemplate] delete entity';
+const ACTION_SET_ENTITY = '[PlaceholderTemplate] set entity';
+const ACTION_TOGGLE_MODE = '[PlaceholderTemplate] toggle mode';
+/** Action to delete a specific entity */
+const deletePlaceholderTemplateEntity = createAction(ACTION_DELETE_ENTITY, props());
+/** Action to clear all placeholderTemplate and fill the store with the payload */
+const setPlaceholderTemplateEntity = createAction(ACTION_SET_ENTITY, props());
+const togglePlaceholderModeTemplate = createAction(ACTION_TOGGLE_MODE, props());
+
+/**
+ * PlaceholderTemplate Store adapter
+ */
+const placeholderTemplateAdapter = createEntityAdapter({
+    selectId: (model) => model.id
+});
+/**
+ * PlaceholderTemplate Store initial value
+ */
+const placeholderTemplateInitialState = placeholderTemplateAdapter.getInitialState({
+    mode: 'normal'
+});
+/**
+ * List of basic actions for PlaceholderTemplate Store
+ */
+const placeholderTemplateReducerFeatures = [
+    on(setPlaceholderTemplateEntity, (state, payload) => placeholderTemplateAdapter.addOne(payload.entity, placeholderTemplateAdapter.removeOne(payload.entity.id, state))),
+    on(deletePlaceholderTemplateEntity, (state, payload) => {
+        const id = payload.id;
+        if (!id || !state.entities[id]) {
+            return state;
+        }
+        return placeholderTemplateAdapter.removeOne(id, state);
+    }),
+    on(togglePlaceholderModeTemplate, (state, payload) => {
+        return {
+            ...state,
+            mode: payload.mode
+        };
+    })
+];
+/**
+ * PlaceholderTemplate Store reducer
+ */
+const placeholderTemplateReducer = createReducer(placeholderTemplateInitialState, ...placeholderTemplateReducerFeatures);
+
+/**
+ * Name of the PlaceholderTemplate Store
+ */
+const PLACEHOLDER_TEMPLATE_STORE_NAME = 'placeholderTemplate';
+
+/** Token of the PlaceholderTemplate reducer */
+const PLACEHOLDER_TEMPLATE_REDUCER_TOKEN = new InjectionToken('Feature PlaceholderTemplate Reducer');
+/** Provide default reducer for PlaceholderTemplate store */
+function getDefaultPlaceholderTemplateReducer() {
+    return placeholderTemplateReducer;
+}
+class PlaceholderTemplateStoreModule {
+    static forRoot(reducerFactory) {
+        return {
+            ngModule: PlaceholderTemplateStoreModule,
+            providers: [
+                { provide: PLACEHOLDER_TEMPLATE_REDUCER_TOKEN, useFactory: reducerFactory }
+            ]
+        };
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderTemplateStoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderTemplateStoreModule, imports: [i1.StoreFeatureModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: PlaceholderTemplateStoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        StoreModule.forFeature(PLACEHOLDER_TEMPLATE_STORE_NAME, PLACEHOLDER_TEMPLATE_REDUCER_TOKEN)
+                    ],
+                    providers: [
+                        { provide: PLACEHOLDER_TEMPLATE_REDUCER_TOKEN, useFactory: getDefaultPlaceholderTemplateReducer }
+                    ]
+                }]
+        }] });
+
 const { selectEntities } = placeholderTemplateAdapter.getSelectors();
 const selectPlaceholderTemplateState = createFeatureSelector(PLACEHOLDER_TEMPLATE_STORE_NAME);
 /** Select the dictionary of PlaceholderTemplate entities */
@@ -308,7 +307,7 @@ const selectSortedTemplates = (placeholderId) => createSelector(selectPlaceholde
     // The isPending will be considered true if any of the Url is still pending
     let isPending = false;
     const templates = [];
-    placeholderTemplate.urlsWithPriority.forEach(urlWithPriority => {
+    placeholderTemplate.urlsWithPriority.forEach((urlWithPriority) => {
         const placeholderRequest = placeholderRequestState.entities[urlWithPriority.rawUrl];
         if (placeholderRequest) {
             // If one of the items is pending, we will wait to display all contents at the same time
@@ -331,7 +330,7 @@ const selectSortedTemplates = (placeholderId) => createSelector(selectPlaceholde
     // Sort templates by priority
     const orderedTemplates = templates.sort((template1, template2) => {
         return (template2.priority - template1.priority) || 1;
-    }).filter(templateData => !!templateData.renderedTemplate);
+    }).filter((templateData) => !!templateData.renderedTemplate);
     return { orderedTemplates, isPending };
 });
 /**
@@ -346,7 +345,7 @@ const selectPlaceholderRenderedTemplates = (placeholderId) => createSelector(sel
         return;
     }
     return {
-        orderedRenderedTemplates: placeholderData.orderedTemplates?.map(placeholder => placeholder.renderedTemplate),
+        orderedRenderedTemplates: placeholderData.orderedTemplates?.map((placeholder) => placeholder.renderedTemplate),
         isPending: placeholderData.isPending
     };
 });
@@ -408,7 +407,7 @@ function getTranslationsRec(node, rec) {
     const translations = {};
     subTranslations.forEach((s) => {
         Object.entries(s || {}).forEach(([k, v]) => {
-            if (v.length) {
+            if (v.length > 0) {
                 translations[k] = v;
             }
         });
@@ -416,11 +415,11 @@ function getTranslationsRec(node, rec) {
     if (component) {
         const componentName = component.constructor.name;
         const componentTranslations = Object.values(component[o3rInfoProperty]?.translations || {}).filter((t) => typeof t === 'string');
-        if (componentTranslations.length) {
+        if (componentTranslations.length > 0) {
             translations[componentName] = componentTranslations;
         }
     }
-    return Object.keys(translations).length ? translations : undefined;
+    return Object.keys(translations).length > 0 ? translations : undefined;
 }
 /**
  * Determine the translations of a node
@@ -445,7 +444,7 @@ function getAnalyticEventsRec(node, rec) {
     const events = {};
     subEvents.forEach((s) => {
         Object.entries(s || {}).forEach(([k, v]) => {
-            if (v.length) {
+            if (v.length > 0) {
                 events[k] = v;
             }
         });
@@ -453,11 +452,11 @@ function getAnalyticEventsRec(node, rec) {
     if (component && component[o3rInfoProperty]) {
         const componentName = component.constructor.name;
         const componentEvents = Object.values(component.analyticsEvents || {}).map((eventConstructor) => eventConstructor.name);
-        if (componentEvents.length) {
+        if (componentEvents.length > 0) {
             events[componentName] = componentEvents;
         }
     }
-    return Object.keys(events).length ? events : undefined;
+    return Object.keys(events).length > 0 ? events : undefined;
 }
 /**
  * Determine the analytics of a node
@@ -518,7 +517,6 @@ class OtterInspectorService {
         const container = isContainer(parentHost)
             ? getOtterLikeComponentInfo(parent, parentHost)
             : undefined;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { component, host, ...infoToBeSent } = this.selectedComponent;
         this.otterLikeComponentInfoToBeSent.next({
             ...infoToBeSent,
@@ -528,7 +526,7 @@ class OtterInspectorService {
     isOtterLikeComponent(info) {
         const hasConfigId = !!info.configId;
         const hasTranslations = !!info.translations?.length;
-        const hasAnalytics = !!Object.keys(info.analytics || {}).length;
+        const hasAnalytics = Object.keys(info.analytics || {}).length > 0;
         return hasConfigId || hasTranslations || hasAnalytics;
     }
     findComponentInfo(node) {
@@ -623,10 +621,11 @@ class OtterInspectorService {
       }`;
         const inspectorDiv = document.createElement('div');
         const inspectorSpan = document.createElement('span');
-        inspectorDiv.appendChild(inspectorSpan);
+        inspectorDiv.append(inspectorSpan);
         inspectorDiv.classList.add(INSPECTOR_CLASS);
-        document.head.appendChild(inspectorCss);
-        this.inspectorDiv = document.body.appendChild(inspectorDiv);
+        document.head.append(inspectorCss);
+        document.body.append(inspectorDiv);
+        this.inspectorDiv = inspectorDiv;
     }
     /**
      * Toggle the inspector.
@@ -701,8 +700,7 @@ 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
+     * @param message message coming from the Otter Chrome DevTools extension
      */
     async handleEvents(message) {
         this.logger.debug('Message handling by the components service', message);
@@ -739,10 +737,10 @@ class ComponentsDevtoolsMessageService {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ComponentsDevtoolsMessageService, deps: [{ token: i1$1.LoggerService }, { token: i1.Store }, { token: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ComponentsDevtoolsMessageService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentsDevtoolsMessageService, deps: [{ token: i1$1.LoggerService }, { token: i1.Store }, { token: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentsDevtoolsMessageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ComponentsDevtoolsMessageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentsDevtoolsMessageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -768,16 +766,16 @@ class ComponentsDevtoolsModule {
             ]
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ComponentsDevtoolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: ComponentsDevtoolsModule, imports: [StoreModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentsDevtoolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ComponentsDevtoolsModule, imports: [StoreModule,
             PlaceholderTemplateStoreModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ComponentsDevtoolsModule, providers: [
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentsDevtoolsModule, providers: [
             { provide: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, useValue: OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS },
             ComponentsDevtoolsMessageService
         ], imports: [StoreModule,
             PlaceholderTemplateStoreModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ComponentsDevtoolsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentsDevtoolsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -796,6 +794,7 @@ class C11nDirective {
     set inputs(value) {
         this._inputs = value;
         if (!this.differInputs && value) {
+            // eslint-disable-next-line unicorn/no-array-callback-reference -- KeyValueDiffers.find is not an array function
             this.differInputs = this.differsService.find(value).create();
         }
     }
@@ -840,7 +839,7 @@ class C11nDirective {
             this.viewContainerRef.clear();
             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)))
+                .filter((prop) => !(this.outputs && Object.keys(this.outputs).includes(prop)))
                 .forEach((prop) => {
                 this.uninitializedInputs.add(prop);
             });
@@ -878,7 +877,7 @@ class C11nDirective {
             inputChanges.config = new SimpleChange(this.componentRef.instance.config, changes.config.currentValue, this.uninitializedInputs.has('config'));
             this.uninitializedInputs.delete('config');
         }
-        if (this.componentRef && Object.keys(inputChanges).length) {
+        if (this.componentRef && Object.keys(inputChanges).length > 0) {
             Object.entries(inputChanges).forEach(([inputName, value]) => {
                 this.componentRef.setInput(inputName, value.currentValue);
             });
@@ -903,8 +902,8 @@ class C11nDirective {
             this.componentRef.destroy();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", 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: "18.2.12", 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: "18.2.13", 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: "18.2.13", type: C11nDirective, selector: "[c11n]", inputs: { component: "component", config: "config", formControl: "formControl", inputs: "inputs", outputs: "outputs" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => C11nDirective)),
@@ -917,7 +916,7 @@ class C11nDirective {
             }
         ], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: C11nDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: C11nDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c11n]',
@@ -946,6 +945,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ *  Register a custom component
+ * @param customComponentsMap an object containing the already registered custom component
+ * @param customComponentKey
+ * @param customComponent
+ */
+function registerCustomComponent(customComponentsMap, customComponentKey, customComponent) {
+    customComponentsMap.set(customComponentKey, customComponent);
+    return customComponentsMap;
+}
+
 /** The C11n injection token */
 const C11N_PRESENTERS_MAP_TOKEN = new InjectionToken('C11n injection token');
 /** Function used to register custom components */
@@ -974,16 +984,58 @@ class C11nService {
             return typeof presenterConfig === 'string' && presenterConfig !== '' ? (this.presentersMap.get(presenterConfig) || defaultPres) : defaultPres;
         }));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", 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: "18.2.12", ngImport: i0, type: C11nService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: C11nService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: C11nService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: C11nService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: Map, decorators: [{
                     type: Inject,
                     args: [C11N_PRESENTERS_MAP_TOKEN]
                 }] }] });
 
+/** C11n directive mock */
+class MockC11nDirective {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MockC11nDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MockC11nDirective, selector: "[c11n]", inputs: { config: "config", component: "component", inputs: "inputs", outputs: "outputs" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MockC11nDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[c11n]',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property -- mocked directive
+                    inputs: ['config', 'component', 'inputs', 'outputs']
+                }]
+        }] });
+/** C11n service mock */
+class C11nMockService {
+    addPresenter(_presKey, _presType) { }
+    getPresenter(_defaultPres, _presKey) {
+        return (source) => source.pipe(mapTo(null));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: C11nMockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: C11nMockService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: C11nMockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: C11nMockModule, declarations: [MockC11nDirective], exports: [MockC11nDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: C11nMockModule, providers: [{ provide: C11nService, useClass: C11nMockService }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: C11nMockModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MockC11nDirective],
+                    exports: [MockC11nDirective],
+                    providers: [{ provide: C11nService, useClass: C11nMockService }]
+                }]
+        }] });
+
 /**
  * Customization service factory
  * @param config -> registerCompFunc - a function which returns the map of custom components which will be injected in c11n service
@@ -998,6 +1050,7 @@ function createC11nService(config) {
 }
 class C11nModule {
     /**
+     * Get the module with providers for the root component
      * @param config -> registerCompFunc - a function which returns the map of custom components which will be injected in c11n service
      * @param config.registerCompFunc
      */
@@ -1013,11 +1066,11 @@ class C11nModule {
                 }]
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: C11nModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: C11nModule, declarations: [C11nDirective], exports: [C11nDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: C11nModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: C11nModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: C11nModule, declarations: [C11nDirective], exports: [C11nDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: C11nModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: C11nModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: C11nModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [C11nDirective],
@@ -1025,69 +1078,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 }]
         }] });
 
-/**
- *  Register a custom component
- * @param customComponentsMap an object containing the already registered custom component
- * @param customComponentKey
- * @param customComponent
- */
-function registerCustomComponent(customComponentsMap, customComponentKey, customComponent) {
-    customComponentsMap.set(customComponentKey, customComponent);
-    return customComponentsMap;
-}
-
-/** C11n directive mock */
-class MockC11nDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MockC11nDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: MockC11nDirective, selector: "[c11n]", inputs: { config: "config", component: "component", inputs: "inputs", outputs: "outputs" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MockC11nDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[c11n]',
-                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['config', 'component', 'inputs', 'outputs']
-                }]
-        }] });
-/** C11n service mock */
-class C11nMockService {
-    addPresenter(_presKey, _presType) { }
-    getPresenter(_defaultPres, _presKey) {
-        return (source) => source.pipe(mapTo(null));
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: C11nMockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: C11nMockService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", 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: "18.2.12", ngImport: i0, type: C11nMockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: C11nMockModule, declarations: [MockC11nDirective], exports: [MockC11nDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: C11nMockModule, providers: [{ provide: C11nService, useClass: C11nMockService }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: C11nMockModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MockC11nDirective],
-                    exports: [MockC11nDirective],
-                    providers: [{ provide: C11nService, useClass: C11nMockService }]
-                }]
-        }] });
-
 class O3rCapitalizePipe {
     transform(value) {
         const val = value && value.toString && value.toString();
         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: "18.2.12", ngImport: i0, type: O3rCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: O3rCapitalizePipe, isStandalone: true, name: "o3rCapitalize" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: O3rCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: O3rCapitalizePipe, isStandalone: true, name: "o3rCapitalize" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: O3rCapitalizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: O3rCapitalizePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'o3rCapitalize', standalone: true }]
         }] });
@@ -1095,10 +1095,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
  * @deprecated please use O3rCapitalizePipe, will be removed in v12.
  */
 class CapitalizePipe extends O3rCapitalizePipe {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CapitalizePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: CapitalizePipe, name: "capitalize" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CapitalizePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: CapitalizePipe, name: "capitalize" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CapitalizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CapitalizePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'capitalize' }]
         }] });
@@ -1107,11 +1107,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
  * @deprecated please use O3rCapitalizePipe, will be removed in v12.
  */
 class CapitalizePipeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CapitalizePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: CapitalizePipeModule, declarations: [CapitalizePipe], exports: [CapitalizePipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CapitalizePipeModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CapitalizePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: CapitalizePipeModule, declarations: [CapitalizePipe], exports: [CapitalizePipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CapitalizePipeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CapitalizePipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CapitalizePipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CapitalizePipe],
@@ -1156,6 +1156,7 @@ function padNum(num, digits) {
  */
 class O3rDurationPipe {
     /**
+     * Converts a duration in seconds into the HH:mm format
      * @param value the value in seconds
      * @param pattern the desired output format.
      * The pattern takes into account static format characters surrounded by braces
@@ -1193,10 +1194,10 @@ class O3rDurationPipe {
             return result.replace(matchedPatternToReplace, padded);
         }, pattern);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: O3rDurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: O3rDurationPipe, isStandalone: true, name: "o3rDuration" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: O3rDurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: O3rDurationPipe, isStandalone: true, name: "o3rDuration" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: O3rDurationPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: O3rDurationPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'o3rDuration', standalone: true }]
         }] });
@@ -1205,10 +1206,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
  * @deprecated please use O3rDurationPipe, will be removed in v12.
  */
 class DurationPipe extends O3rDurationPipe {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DurationPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: DurationPipe, name: "duration" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DurationPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DurationPipe, name: "duration" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DurationPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DurationPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'duration' }]
         }] });
@@ -1217,11 +1218,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
  * @deprecated please use O3rDurationPipe, will be removed in v12.
  */
 class DurationPipeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DurationPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: DurationPipeModule, declarations: [DurationPipe], exports: [DurationPipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DurationPipeModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DurationPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DurationPipeModule, declarations: [DurationPipe], exports: [DurationPipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DurationPipeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DurationPipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DurationPipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DurationPipe],
@@ -1233,10 +1234,10 @@ class O3rKeepWhiteSpacePipe {
     transform(value) {
         return value.replace(/\s/g, ' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: O3rKeepWhiteSpacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: O3rKeepWhiteSpacePipe, name: "o3rKeepWhiteSpace" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: O3rKeepWhiteSpacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: O3rKeepWhiteSpacePipe, name: "o3rKeepWhiteSpace" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: O3rKeepWhiteSpacePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: O3rKeepWhiteSpacePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'o3rKeepWhiteSpace'
@@ -1246,10 +1247,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
  * @deprecated please use O3rKeepWhiteSpacePipe, will be removed in v12.
  */
 class KeepWhiteSpacePipe extends O3rKeepWhiteSpacePipe {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: KeepWhiteSpacePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: KeepWhiteSpacePipe, name: "keepWhiteSpace" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeepWhiteSpacePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: KeepWhiteSpacePipe, name: "keepWhiteSpace" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: KeepWhiteSpacePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeepWhiteSpacePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'keepWhiteSpace'
@@ -1260,11 +1261,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
  * @deprecated please use O3rKeepWhiteSpacePipe, will be removed in v12.
  */
 class KeepWhiteSpacePipeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: KeepWhiteSpacePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: KeepWhiteSpacePipeModule, declarations: [KeepWhiteSpacePipe], exports: [KeepWhiteSpacePipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: KeepWhiteSpacePipeModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeepWhiteSpacePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: KeepWhiteSpacePipeModule, declarations: [KeepWhiteSpacePipe], exports: [KeepWhiteSpacePipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeepWhiteSpacePipeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: KeepWhiteSpacePipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeepWhiteSpacePipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [KeepWhiteSpacePipe],
@@ -1272,7 +1273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 }]
         }] });
 
-const escapeRegExp = (str) => str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
+const escapeRegExp = (str) => str.replace(/[$()*+./?[\\\]^{|}-]/g, '\\$&');
 class O3rReplaceWithBoldPipe {
     transform(value, inputText) {
         if (inputText) {
@@ -1283,10 +1284,10 @@ class O3rReplaceWithBoldPipe {
             return value;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: O3rReplaceWithBoldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: O3rReplaceWithBoldPipe, isStandalone: true, name: "o3rReplaceWithBold" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: O3rReplaceWithBoldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: O3rReplaceWithBoldPipe, isStandalone: true, name: "o3rReplaceWithBold" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: O3rReplaceWithBoldPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: O3rReplaceWithBoldPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'o3rReplaceWithBold',
@@ -1300,10 +1301,10 @@ class ReplaceWithBoldPipe extends O3rReplaceWithBoldPipe {
     escapeRegExp(str) {
         return escapeRegExp(str);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ReplaceWithBoldPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: ReplaceWithBoldPipe, name: "replaceWithBold" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReplaceWithBoldPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ReplaceWithBoldPipe, name: "replaceWithBold" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ReplaceWithBoldPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReplaceWithBoldPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'replaceWithBold'
@@ -1314,11 +1315,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
  * @deprecated please use O3rReplaceWithBoldPipe, will be removed in v12.
  */
 class ReplaceWithBoldPipeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ReplaceWithBoldPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: ReplaceWithBoldPipeModule, declarations: [ReplaceWithBoldPipe], exports: [ReplaceWithBoldPipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ReplaceWithBoldPipeModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReplaceWithBoldPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ReplaceWithBoldPipeModule, declarations: [ReplaceWithBoldPipe], exports: [ReplaceWithBoldPipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReplaceWithBoldPipeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ReplaceWithBoldPipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReplaceWithBoldPipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ReplaceWithBoldPipe],
@@ -1352,21 +1353,18 @@ class PlaceholderComponent {
             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 }) => {
+        })), 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.template = orderedTemplates?.length
                 // Concatenates the list of templates
-                this.template = orderedTemplates.map(placeholder => placeholder.renderedTemplate).join('');
-            }
+                ? orderedTemplates.map((placeholder) => placeholder.renderedTemplate).join('')
+                : undefined;
             if (this.isPending === false) {
                 this.messages$.next({
-                    templateIds: !this.isPending ? (orderedTemplates || []).map(placeholder => placeholder.resolvedUrl) : [],
+                    templateIds: this.isPending ? [] : (orderedTemplates || []).map((placeholder) => placeholder.resolvedUrl),
                     placeholderId: id
                 });
             }
@@ -1390,13 +1388,12 @@ class PlaceholderComponent {
         this.afterViewInit$.complete();
         this.subscription.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PlaceholderComponent, deps: [{ token: i1.Store }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: PlaceholderComponent, selector: "o3r-placeholder", inputs: { id: "id" }, host: { properties: { "class.debug": "mode() === 'debug'" } }, ngImport: i0, template: "<ng-template #projection>\n  <ng-content></ng-content>\n</ng-template>\n@switch (mode()) {\n  @case ('debug') {\n    <span class=\"placehoder-id\">{{ id$ | async }}</span>\n  }\n  @case ('pending') {\n    <ng-container *ngTemplateOutlet=\"projection\" />\n  }\n  @case ('normal') {\n    @if (isPending) {\n      <ng-container *ngTemplateOutlet=\"projection\" />\n    } @else {\n      <div [innerHTML]=\"template\"></div>\n    }\n  }\n}\n", styles: [".debug{padding:15px;text-align:center;border:2px dashed var(--o3r-placeholder-debug-color, #a65c27);border-radius:10px;width:100%;background:var(--o3r-placeholder-background, #fff2ea);border-style:dashed;color:var(--o3r-placeholder-debug-color, #a65c27);font-size:larger}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderComponent, deps: [{ token: i1.Store }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PlaceholderComponent, selector: "o3r-placeholder", inputs: { id: "id" }, host: { properties: { "class.debug": "mode() === 'debug'" } }, ngImport: i0, template: "<ng-template #projection>\n  <ng-content></ng-content>\n</ng-template>\n@switch (mode()) {\n  @case ('debug') {\n    <span class=\"placehoder-id\">{{ id$ | async }}</span>\n  }\n  @case ('pending') {\n    <ng-container *ngTemplateOutlet=\"projection\" />\n  }\n  @case ('normal') {\n    @if (isPending) {\n      <ng-container *ngTemplateOutlet=\"projection\" />\n    } @else {\n      <div [innerHTML]=\"template\"></div>\n    }\n  }\n}\n", styles: [".debug{padding:15px;text-align:center;border:2px dashed var(--o3r-placeholder-debug-color, #a65c27);border-radius:10px;width:100%;background:var(--o3r-placeholder-background, #fff2ea);border-style:dashed;color:var(--o3r-placeholder-debug-color, #a65c27);font-size:larger}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o3r-placeholder', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
                         '[class.debug]': `mode() === 'debug'`
                     }, template: "<ng-template #projection>\n  <ng-content></ng-content>\n</ng-template>\n@switch (mode()) {\n  @case ('debug') {\n    <span class=\"placehoder-id\">{{ id$ | async }}</span>\n  }\n  @case ('pending') {\n    <ng-container *ngTemplateOutlet=\"projection\" />\n  }\n  @case ('normal') {\n    @if (isPending) {\n      <ng-container *ngTemplateOutlet=\"projection\" />\n    } @else {\n      <div [innerHTML]=\"template\"></div>\n    }\n  }\n}\n", styles: [".debug{padding:15px;text-align:center;border:2px dashed var(--o3r-placeholder-debug-color, #a65c27);border-radius:10px;width:100%;background:var(--o3r-placeholder-background, #fff2ea);border-style:dashed;color:var(--o3r-placeholder-debug-color, #a65c27);font-size:larger}\n"] }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
@@ -1404,17 +1401,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
             }] } });
 
 class PlaceholderModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PlaceholderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: PlaceholderModule, declarations: [PlaceholderComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderModule, declarations: [PlaceholderComponent], imports: [CommonModule,
             StoreModule,
             PlaceholderTemplateStoreModule,
             PlaceholderRequestStoreModule], exports: [PlaceholderComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PlaceholderModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderModule, imports: [CommonModule,
             StoreModule,
             PlaceholderTemplateStoreModule,
             PlaceholderRequestStoreModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PlaceholderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [