@o3r/components 11.0.0-next.0 → 11.0.0-next.1

package/fesm2022/o3r-components.mjs

@@ -1,11 +1,11 @@
-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 { of, from, observeOn, animationFrameScheduler, BehaviorSubject, Subscription, firstValueFrom, fromEvent, Subject, ReplaySubject, sample } from 'rxjs';
+import { mergeMap, bufferCount, concatMap, delay, scan, tap, filter, distinctUntilChanged, map, mapTo, switchMap } from 'rxjs/operators';
 import * as i0 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, props, createAction, on, createReducer, createFeatureSelector, createSelector } from '@ngrx/store';
+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 { createEntityAdapter } from '@ngrx/entity';
 import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import * as i2 from '@angular/common';
@@ -49,9 +49,323 @@ const isComponentsMessage = (message) => {
     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: "17.3.6", ngImport: i0, type: PlaceholderTemplateStoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: PlaceholderTemplateStoreModule, imports: [i1.StoreFeatureModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", 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: "17.3.6", 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';
+const ACTION_UPDATE_ENTITY = '[PlaceholderRequest] update entity';
+const ACTION_UPDATE_ENTITY_SYNC = '[PlaceholderRequest] update entity sync';
+/** Action to cancel a Request ID registered in the store. Can happen from effect based on a switchMap for instance */
+const cancelPlaceholderRequest = createAction(ACTION_CANCEL_REQUEST, props());
+/** Action to update failureStatus for PlaceholderRequestModels */
+const failPlaceholderRequestEntity = createAction(ACTION_FAIL_ENTITIES, props());
+/** Action to update an entity */
+const updatePlaceholderRequestEntity = createAction(ACTION_UPDATE_ENTITY, props());
+/** Action to update an entity without impact on request id */
+const updatePlaceholderRequestEntitySync = createAction(ACTION_UPDATE_ENTITY_SYNC, props());
+/** Action to update PlaceholderRequest with known IDs, will create the entity with only the url, the call will be created in the effect */
+const setPlaceholderRequestEntityFromUrl = createAction(ACTION_SET_ENTITY_FROM_URL, asyncProps());
+
+/**
+ * PlaceholderRequest Store adapter
+ */
+const placeholderRequestAdapter = createEntityAsyncRequestAdapter(createEntityAdapter({
+    selectId: (model) => model.id
+}));
+/**
+ * PlaceholderRequest Store initial value
+ */
+const placeholderRequestInitialState = placeholderRequestAdapter.getInitialState({
+    requestIds: []
+});
+/**
+ * Reducers of Placeholder request store that handles the call to the placeholder template URL
+ */
+const placeholderRequestReducerFeatures = [
+    on(cancelPlaceholderRequest, (state, action) => {
+        const id = action.id;
+        if (!id || !state.entities[id]) {
+            return state;
+        }
+        return placeholderRequestAdapter.updateOne({
+            id: action.id,
+            changes: asyncStoreItemAdapter.resolveRequest(state.entities[id], action.requestId)
+        }, asyncStoreItemAdapter.resolveRequest(state, action.requestId));
+    }),
+    on(updatePlaceholderRequestEntity, (state, action) => {
+        const currentEntity = state.entities[action.entity.id];
+        const newEntity = asyncStoreItemAdapter.resolveRequest({ ...action.entity, ...asyncStoreItemAdapter.extractAsyncStoreItem(currentEntity) }, action.requestId);
+        return placeholderRequestAdapter.updateOne({
+            id: newEntity.id,
+            changes: newEntity
+        }, asyncStoreItemAdapter.resolveRequest(state, action.requestId));
+    }),
+    on(updatePlaceholderRequestEntitySync, (state, action) => {
+        return placeholderRequestAdapter.updateOne({
+            id: action.entity.id,
+            changes: {
+                ...action.entity
+            }
+        }, state);
+    }),
+    on(setPlaceholderRequestEntityFromUrl, (state, payload) => {
+        const currentEntity = state.entities[payload.id];
+        // Nothing to update if resolved URLs already match
+        if (currentEntity && currentEntity.resolvedUrl === payload.resolvedUrl) {
+            return state;
+        }
+        let newEntity = {
+            id: payload.id,
+            resolvedUrl: payload.resolvedUrl,
+            used: true
+        };
+        if (currentEntity) {
+            newEntity = { ...asyncStoreItemAdapter.extractAsyncStoreItem(currentEntity), ...newEntity };
+        }
+        return placeholderRequestAdapter.addOne(asyncStoreItemAdapter.addRequest(asyncStoreItemAdapter.initialize(newEntity), payload.requestId), asyncStoreItemAdapter.addRequest(state, payload.requestId));
+    }),
+    on(failPlaceholderRequestEntity, (state, payload) => {
+        return placeholderRequestAdapter.failRequestMany(asyncStoreItemAdapter.resolveRequest(state, payload.requestId), payload && payload.ids, payload.requestId);
+    })
+];
+/**
+ * PlaceholderRequest Store reducer
+ */
+const placeholderRequestReducer = createReducer(placeholderRequestInitialState, ...placeholderRequestReducerFeatures);
+
+/**
+ * Name of the PlaceholderRequest Store
+ */
+const PLACEHOLDER_REQUEST_STORE_NAME = 'placeholderRequest';
+
+/** Token of the PlaceholderRequest reducer */
+const PLACEHOLDER_REQUEST_REDUCER_TOKEN = new InjectionToken('Feature PlaceholderRequest Reducer');
+/** Provide default reducer for PlaceholderRequest store */
+function getDefaultplaceholderRequestReducer() {
+    return placeholderRequestReducer;
+}
+class PlaceholderRequestStoreModule {
+    static forRoot(reducerFactory) {
+        return {
+            ngModule: PlaceholderRequestStoreModule,
+            providers: [
+                { provide: PLACEHOLDER_REQUEST_REDUCER_TOKEN, useFactory: reducerFactory }
+            ]
+        };
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: PlaceholderRequestStoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: PlaceholderRequestStoreModule, imports: [i1.StoreFeatureModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", 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: "17.3.6", ngImport: i0, type: PlaceholderRequestStoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        StoreModule.forFeature(PLACEHOLDER_REQUEST_STORE_NAME, PLACEHOLDER_REQUEST_REDUCER_TOKEN)
+                    ],
+                    providers: [
+                        { provide: PLACEHOLDER_REQUEST_REDUCER_TOKEN, useFactory: getDefaultplaceholderRequestReducer }
+                    ]
+                }]
+        }] });
+
+const selectPlaceholderRequestState = createFeatureSelector(PLACEHOLDER_REQUEST_STORE_NAME);
+const { selectEntities: selectEntities$1 } = placeholderRequestAdapter.getSelectors();
+/** Select the dictionary of PlaceholderRequest entities */
+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) => {
+    return state?.entities[rawUrl] ? state?.entities[rawUrl].used : undefined;
+});
+
+const placeholderRequestStorageSerializer = asyncEntitySerializer;
+const placeholderRequestStorageDeserializer = (rawObject) => {
+    if (!rawObject || !rawObject.ids) {
+        return placeholderRequestInitialState;
+    }
+    const storeObject = placeholderRequestAdapter.getInitialState(rawObject);
+    for (const id of rawObject.ids) {
+        storeObject.entities[id] = rawObject.entities[id];
+    }
+    return storeObject;
+};
+const placeholderRequestStorageSync = {
+    serialize: placeholderRequestStorageSerializer,
+    deserialize: placeholderRequestStorageDeserializer
+};
+
+const { selectEntities } = placeholderTemplateAdapter.getSelectors();
+const selectPlaceholderTemplateState = createFeatureSelector(PLACEHOLDER_TEMPLATE_STORE_NAME);
+/** Select the dictionary of PlaceholderTemplate entities */
+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 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 selectSortedTemplates = (placeholderId) => createSelector(selectPlaceholderTemplateEntity(placeholderId), selectPlaceholderRequestState, (placeholderTemplate, placeholderRequestState) => {
+    if (!placeholderTemplate || !placeholderRequestState) {
+        return;
+    }
+    // The isPending will be considered true if any of the Url is still pending
+    let isPending = false;
+    const templates = [];
+    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
+            isPending = isPending || placeholderRequest.isPending;
+            // Templates in failure will be ignored from the list
+            if (!placeholderRequest.isFailure) {
+                templates.push({
+                    rawUrl: urlWithPriority.rawUrl,
+                    resolvedUrl: placeholderRequest.resolvedUrl,
+                    priority: urlWithPriority.priority,
+                    renderedTemplate: placeholderRequest.renderedTemplate
+                });
+            }
+        }
+    });
+    // No need to perform sorting if still pending
+    if (isPending) {
+        return { orderedTemplates: undefined, isPending };
+    }
+    // Sort templates by priority
+    const orderedTemplates = templates.sort((template1, template2) => {
+        return (template2.priority - template1.priority) || 1;
+    }).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 selectPlaceholderTemplateMode = createSelector(selectPlaceholderTemplateState, (state) => state.mode);
+
+const placeholderTemplateStorageDeserializer = (rawObject) => {
+    if (!rawObject || !rawObject.ids) {
+        return placeholderTemplateInitialState;
+    }
+    const storeObject = placeholderTemplateAdapter.getInitialState(rawObject);
+    for (const id of rawObject.ids) {
+        storeObject.entities[id] = rawObject.entities[id];
+    }
+    return storeObject;
+};
+const placeholderTemplateStorageSync = {
+    deserialize: placeholderTemplateStorageDeserializer
+};
+
 const OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS = {
     isActivatedOnBootstrap: false
 };
@@ -162,7 +476,8 @@ const getOtterLikeComponentInfo = (componentClassInstance, host) => {
     const translations = getTranslations(host);
     const analytics = getAnalyticEvents(host);
     return {
-        componentName: componentClassInstance.constructor.name,
+        // Cannot use anymore `constructor.name` else all components are named `_a`
+        componentName: componentClassInstance.constructor.ɵcmp?.debugInfo?.className || componentClassInstance.constructor.name,
         configId,
         translations,
         analytics
@@ -260,8 +575,7 @@ class OtterInspectorService {
             this.inspectorDiv.style.height = `${rect.height}px`;
             this.inspectorDiv.style.top = `${rect.top}px`;
             this.inspectorDiv.style.left = `${rect.left}px`;
-            // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-            this.inspectorDiv.firstChild.textContent = `<${this.selectedComponent.component.constructor.name}>`;
+            this.inspectorDiv.firstChild.textContent = `<${this.selectedComponent.componentName}>`;
         }
     }
     unHighlight() {
@@ -335,8 +649,9 @@ class OtterInspectorService {
 }
 
 class ComponentsDevtoolsMessageService {
-    constructor(logger, options) {
+    constructor(logger, store, options) {
         this.logger = logger;
+        this.store = store;
         this.subscriptions = new Subscription();
         this.sendMessage = (sendOtterMessage);
         this.options = {
@@ -360,405 +675,122 @@ class ComponentsDevtoolsMessageService {
     }
     async sendCurrentSelectedComponent() {
         const selectComponentInfo = await firstValueFrom(this.inspectorService.otterLikeComponentInfoToBeSent$);
-        if (selectComponentInfo) {
-            this.sendMessage('selectedComponentInfo', selectComponentInfo);
-        }
-    }
-    /**
-     * 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) {
-        if (!only || only.includes('selectedComponentInfo')) {
-            void this.sendCurrentSelectedComponent();
-        }
-    }
-    /**
-     * Function to handle the incoming messages from Otter Chrome DevTools extension
-     * @param event Event coming from the Otter Chrome DevTools extension
-     * @param message
-     */
-    async handleEvents(message) {
-        this.logger.debug('Message handling by the components service', message);
-        switch (message.dataType) {
-            case 'connect': {
-                await this.connectPlugin();
-                break;
-            }
-            case 'requestMessages': {
-                this.handleReEmitRequest(message.only);
-                break;
-            }
-            case 'toggleInspector': {
-                this.inspectorService.toggleInspector(message.isRunning);
-                break;
-            }
-            default: {
-                this.logger.warn('Message ignored by the components service', message);
-            }
-        }
-    }
-    /** @inheritDoc */
-    activate() {
-        this.subscriptions.add(fromEvent(window, 'message').pipe(filterMessageContent(isComponentsMessage)).subscribe((e) => this.handleEvents(e)));
-        this.inspectorService.prepareInspector();
-        this.subscriptions.add(this.inspectorService.otterLikeComponentInfoToBeSent$
-            .pipe(filter((info) => !!info)).subscribe((info) => this.sendMessage('selectedComponentInfo', info)));
-    }
-    /** @inheritDoc */
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    /** @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: "17.0.8", ngImport: i0, type: ComponentsDevtoolsMessageService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], 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) {
-        return {
-            ngModule: ComponentsDevtoolsModule,
-            providers: [
-                { provide: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, useValue: { ...OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS, ...options }, multi: false },
-                ComponentsDevtoolsMessageService
-            ]
-        };
-    }
-    /** @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: "17.0.8", ngImport: i0, type: ComponentsDevtoolsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        StoreModule
-                    ],
-                    providers: [
-                        { provide: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, useValue: OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS },
-                        ComponentsDevtoolsMessageService
-                    ]
-                }]
-        }] });
-
-const ACTION_DELETE_ENTITY = '[PlaceholderTemplate] delete entity';
-const ACTION_SET_ENTITY = '[PlaceholderTemplate] set entity';
-/** 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());
-
-/**
- * PlaceholderTemplate Store adapter
- */
-const placeholderTemplateAdapter = createEntityAdapter({
-    selectId: (model) => model.id
-});
-/**
- * PlaceholderTemplate Store initial value
- */
-const placeholderTemplateInitialState = placeholderTemplateAdapter.getInitialState();
-/**
- * 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);
-    })
-];
-/**
- * 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: "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: "17.0.8", 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';
-const ACTION_UPDATE_ENTITY = '[PlaceholderRequest] update entity';
-const ACTION_UPDATE_ENTITY_SYNC = '[PlaceholderRequest] update entity sync';
-/** Action to cancel a Request ID registered in the store. Can happen from effect based on a switchMap for instance */
-const cancelPlaceholderRequest = createAction(ACTION_CANCEL_REQUEST, props());
-/** Action to update failureStatus for PlaceholderRequestModels */
-const failPlaceholderRequestEntity = createAction(ACTION_FAIL_ENTITIES, props());
-/** Action to update an entity */
-const updatePlaceholderRequestEntity = createAction(ACTION_UPDATE_ENTITY, props());
-/** Action to update an entity without impact on request id */
-const updatePlaceholderRequestEntitySync = createAction(ACTION_UPDATE_ENTITY_SYNC, props());
-/** Action to update PlaceholderRequest with known IDs, will create the entity with only the url, the call will be created in the effect */
-const setPlaceholderRequestEntityFromUrl = createAction(ACTION_SET_ENTITY_FROM_URL, asyncProps());
-
-/**
- * PlaceholderRequest Store adapter
- */
-const placeholderRequestAdapter = createEntityAsyncRequestAdapter(createEntityAdapter({
-    selectId: (model) => model.id
-}));
-/**
- * PlaceholderRequest Store initial value
- */
-const placeholderRequestInitialState = placeholderRequestAdapter.getInitialState({
-    requestIds: []
-});
-/**
- * Reducers of Placeholder request store that handles the call to the placeholder template URL
- */
-const placeholderRequestReducerFeatures = [
-    on(cancelPlaceholderRequest, (state, action) => {
-        const id = action.id;
-        if (!id || !state.entities[id]) {
-            return state;
-        }
-        return placeholderRequestAdapter.updateOne({
-            id: action.id,
-            changes: asyncStoreItemAdapter.resolveRequest(state.entities[id], action.requestId)
-        }, asyncStoreItemAdapter.resolveRequest(state, action.requestId));
-    }),
-    on(updatePlaceholderRequestEntity, (state, action) => {
-        const currentEntity = state.entities[action.entity.id];
-        const newEntity = asyncStoreItemAdapter.resolveRequest({ ...action.entity, ...asyncStoreItemAdapter.extractAsyncStoreItem(currentEntity) }, action.requestId);
-        return placeholderRequestAdapter.updateOne({
-            id: newEntity.id,
-            changes: newEntity
-        }, asyncStoreItemAdapter.resolveRequest(state, action.requestId));
-    }),
-    on(updatePlaceholderRequestEntitySync, (state, action) => {
-        return placeholderRequestAdapter.updateOne({
-            id: action.entity.id,
-            changes: {
-                ...action.entity
-            }
-        }, state);
-    }),
-    on(setPlaceholderRequestEntityFromUrl, (state, payload) => {
-        const currentEntity = state.entities[payload.id];
-        // Nothing to update if resolved URLs already match
-        if (currentEntity && currentEntity.resolvedUrl === payload.resolvedUrl) {
-            return state;
+        if (selectComponentInfo) {
+            this.sendMessage('selectedComponentInfo', selectComponentInfo);
         }
-        let newEntity = {
-            id: payload.id,
-            resolvedUrl: payload.resolvedUrl,
-            used: true
-        };
-        if (currentEntity) {
-            newEntity = { ...asyncStoreItemAdapter.extractAsyncStoreItem(currentEntity), ...newEntity };
+    }
+    sendIsComponentSelectionAvailable() {
+        this.sendMessage('isComponentSelectionAvailable', { available: !!window.ng });
+    }
+    /**
+     * 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) {
+        if (!only) {
+            void this.sendCurrentSelectedComponent();
+            this.sendIsComponentSelectionAvailable();
+            return;
         }
-        return placeholderRequestAdapter.addOne(asyncStoreItemAdapter.addRequest(asyncStoreItemAdapter.initialize(newEntity), payload.requestId), asyncStoreItemAdapter.addRequest(state, payload.requestId));
-    }),
-    on(failPlaceholderRequestEntity, (state, payload) => {
-        return placeholderRequestAdapter.failRequestMany(asyncStoreItemAdapter.resolveRequest(state, payload.requestId), payload && payload.ids, payload.requestId);
-    })
-];
-/**
- * PlaceholderRequest Store reducer
- */
-const placeholderRequestReducer = createReducer(placeholderRequestInitialState, ...placeholderRequestReducerFeatures);
-
-/**
- * Name of the PlaceholderRequest Store
- */
-const PLACEHOLDER_REQUEST_STORE_NAME = 'placeholderRequest';
-
-/** Token of the PlaceholderRequest reducer */
-const PLACEHOLDER_REQUEST_REDUCER_TOKEN = new InjectionToken('Feature PlaceholderRequest Reducer');
-/** Provide default reducer for PlaceholderRequest store */
-function getDefaultplaceholderRequestReducer() {
-    return placeholderRequestReducer;
+        if (only.includes('selectedComponentInfo')) {
+            void this.sendCurrentSelectedComponent();
+        }
+        if (only.includes('isComponentSelectionAvailable')) {
+            this.sendIsComponentSelectionAvailable();
+        }
+    }
+    /**
+     * Function to handle the incoming messages from Otter Chrome DevTools extension
+     * @param event Event coming from the Otter Chrome DevTools extension
+     * @param message
+     */
+    async handleEvents(message) {
+        this.logger.debug('Message handling by the components service', message);
+        switch (message.dataType) {
+            case 'connect': {
+                await this.connectPlugin();
+                break;
+            }
+            case 'requestMessages': {
+                this.handleReEmitRequest(message.only);
+                break;
+            }
+            case 'toggleInspector': {
+                this.inspectorService.toggleInspector(message.isRunning);
+                break;
+            }
+            case 'placeholderMode': {
+                this.store.dispatch(togglePlaceholderModeTemplate({ mode: message.mode }));
+                break;
+            }
+            default: {
+                this.logger.warn('Message ignored by the components service', message);
+            }
+        }
+    }
+    /** @inheritDoc */
+    activate() {
+        this.subscriptions.add(fromEvent(window, 'message').pipe(filterMessageContent(isComponentsMessage)).subscribe((e) => this.handleEvents(e)));
+        this.inspectorService.prepareInspector();
+        this.subscriptions.add(this.inspectorService.otterLikeComponentInfoToBeSent$
+            .pipe(filter((info) => !!info)).subscribe((info) => this.sendMessage('selectedComponentInfo', info)));
+    }
+    /** @inheritDoc */
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", 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: "17.3.6", ngImport: i0, type: ComponentsDevtoolsMessageService, providedIn: 'root' }); }
 }
-class PlaceholderRequestStoreModule {
-    static forRoot(reducerFactory) {
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ComponentsDevtoolsMessageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.LoggerService }, { type: i1.Store }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [OTTER_COMPONENTS_DEVTOOLS_OPTIONS]
+                }] }] });
+
+class ComponentsDevtoolsModule {
+    /**
+     * Initialize Otter Devtools
+     * @param options
+     */
+    static instrument(options) {
         return {
-            ngModule: PlaceholderRequestStoreModule,
+            ngModule: ComponentsDevtoolsModule,
             providers: [
-                { provide: PLACEHOLDER_REQUEST_REDUCER_TOKEN, useFactory: reducerFactory }
+                { provide: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, useValue: { ...OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS, ...options }, multi: false },
+                ComponentsDevtoolsMessageService
             ]
         };
     }
-    /** @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)] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ComponentsDevtoolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: ComponentsDevtoolsModule, imports: [StoreModule,
+            PlaceholderTemplateStoreModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", 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: "17.0.8", ngImport: i0, type: PlaceholderRequestStoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ComponentsDevtoolsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        StoreModule.forFeature(PLACEHOLDER_REQUEST_STORE_NAME, PLACEHOLDER_REQUEST_REDUCER_TOKEN)
+                        StoreModule,
+                        PlaceholderTemplateStoreModule
                     ],
                     providers: [
-                        { provide: PLACEHOLDER_REQUEST_REDUCER_TOKEN, useFactory: getDefaultplaceholderRequestReducer }
+                        { provide: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, useValue: OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS },
+                        ComponentsDevtoolsMessageService
                     ]
                 }]
         }] });
 
-const selectPlaceholderRequestState = createFeatureSelector(PLACEHOLDER_REQUEST_STORE_NAME);
-const { selectEntities: selectEntities$1 } = placeholderRequestAdapter.getSelectors();
-/** Select the dictionary of PlaceholderRequest entities */
-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) => {
-    return state?.entities[rawUrl] ? state?.entities[rawUrl].used : undefined;
-});
-
-const placeholderRequestStorageSerializer = asyncEntitySerializer;
-const placeholderRequestStorageDeserializer = (rawObject) => {
-    if (!rawObject || !rawObject.ids) {
-        return placeholderRequestInitialState;
-    }
-    const storeObject = placeholderRequestAdapter.getInitialState(rawObject);
-    for (const id of rawObject.ids) {
-        storeObject.entities[id] = rawObject.entities[id];
-    }
-    return storeObject;
-};
-const placeholderRequestStorageSync = {
-    serialize: placeholderRequestStorageSerializer,
-    deserialize: placeholderRequestStorageDeserializer
-};
-
-const { selectEntities } = placeholderTemplateAdapter.getSelectors();
-const selectPlaceholderTemplateState = createFeatureSelector(PLACEHOLDER_TEMPLATE_STORE_NAME);
-/** Select the dictionary of PlaceholderTemplate entities */
-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 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 selectSortedTemplates = (placeholderId) => createSelector(selectPlaceholderTemplateEntity(placeholderId), selectPlaceholderRequestState, (placeholderTemplate, placeholderRequestState) => {
-    if (!placeholderTemplate || !placeholderRequestState) {
-        return;
-    }
-    // The isPending will be considered true if any of the Url is still pending
-    let isPending = false;
-    const templates = [];
-    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
-            isPending = isPending || placeholderRequest.isPending;
-            // Templates in failure will be ignored from the list
-            if (!placeholderRequest.isFailure) {
-                templates.push({
-                    rawUrl: urlWithPriority.rawUrl,
-                    resolvedUrl: placeholderRequest.resolvedUrl,
-                    priority: urlWithPriority.priority,
-                    renderedTemplate: placeholderRequest.renderedTemplate
-                });
-            }
-        }
-    });
-    // No need to perform sorting if still pending
-    if (isPending) {
-        return { orderedTemplates: undefined, isPending };
-    }
-    // Sort templates by priority
-    const orderedTemplates = templates.sort((template1, template2) => {
-        return (template2.priority - template1.priority) || 1;
-    }).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) => {
-    if (!rawObject || !rawObject.ids) {
-        return placeholderTemplateInitialState;
-    }
-    const storeObject = placeholderTemplateAdapter.getInitialState(rawObject);
-    for (const id of rawObject.ids) {
-        storeObject.entities[id] = rawObject.entities[id];
-    }
-    return storeObject;
-};
-const placeholderTemplateStorageSync = {
-    deserialize: placeholderTemplateStorageDeserializer
-};
-
 class C11nDirective {
     /** The input setter */
     set inputs(value) {
@@ -867,10 +899,12 @@ class C11nDirective {
      */
     ngOnDestroy() {
         this.componentSubscriptions.forEach((s) => s.unsubscribe());
-        this.componentRef.destroy();
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
     }
-    /** @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: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", 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.3.6", type: C11nDirective, selector: "[c11n]", inputs: { component: "component", config: "config", formControl: "formControl", inputs: "inputs", outputs: "outputs" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => C11nDirective)),
@@ -883,7 +917,7 @@ class C11nDirective {
             }
         ], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: C11nDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c11n]',
@@ -940,10 +974,10 @@ class C11nService {
             return typeof presenterConfig === 'string' && presenterConfig !== '' ? (this.presentersMap.get(presenterConfig) || defaultPres) : defaultPres;
         }));
     }
-    /** @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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", 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.3.6", ngImport: i0, type: C11nService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: C11nService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: Map, decorators: [{
                     type: Inject,
@@ -979,11 +1013,11 @@ class 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: C11nModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: C11nModule, declarations: [C11nDirective], exports: [C11nDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: C11nModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: C11nModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [C11nDirective],
@@ -1004,10 +1038,10 @@ function registerCustomComponent(customComponentsMap, customComponentKey, custom
 
 /** C11n directive mock */
 class MockC11nDirective {
-    /** @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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: MockC11nDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: MockC11nDirective, selector: "[c11n]", inputs: { config: "config", component: "component", inputs: "inputs", outputs: "outputs" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MockC11nDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: MockC11nDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c11n]',
@@ -1021,21 +1055,21 @@ class C11nMockService {
     getPresenter(_defaultPres, _presKey) {
         return (source) => source.pipe(mapTo(null));
     }
-    /** @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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: C11nMockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: C11nMockService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nMockService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", 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: "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 }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: C11nMockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: C11nMockModule, declarations: [MockC11nDirective], exports: [MockC11nDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: C11nMockModule, providers: [{ provide: C11nService, useClass: C11nMockService }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: C11nMockModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: C11nMockModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MockC11nDirective],
@@ -1044,26 +1078,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 }]
         }] });
 
-class CapitalizePipe {
+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: "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" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: O3rCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: O3rCapitalizePipe, isStandalone: true, name: "o3rCapitalize" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: O3rCapitalizePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'o3rCapitalize', standalone: true }]
+        }] });
+/**
+ * @deprecated please use O3rCapitalizePipe, will be removed in v12.
+ */
+class CapitalizePipe extends O3rCapitalizePipe {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CapitalizePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: CapitalizePipe, name: "capitalize" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CapitalizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CapitalizePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'capitalize' }]
         }] });
 
+/**
+ * @deprecated please use O3rCapitalizePipe, will be removed in v12.
+ */
 class 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CapitalizePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: CapitalizePipeModule, declarations: [CapitalizePipe], exports: [CapitalizePipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CapitalizePipeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CapitalizePipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CapitalizePipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CapitalizePipe],
@@ -1106,7 +1154,7 @@ function padNum(num, digits) {
 /**
  * Converts a duration in seconds into the HH:mm format
  */
-class DurationPipe {
+class O3rDurationPipe {
     /**
      * @param value the value in seconds
      * @param pattern the desired output format.
@@ -1145,20 +1193,35 @@ class DurationPipe {
             return result.replace(matchedPatternToReplace, padded);
         }, pattern);
     }
-    /** @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" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: O3rDurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: O3rDurationPipe, isStandalone: true, name: "o3rDuration" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: O3rDurationPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'o3rDuration', standalone: true }]
+        }] });
+/**
+ * Converts a duration in seconds into the HH:mm format
+ * @deprecated please use O3rDurationPipe, will be removed in v12.
+ */
+class DurationPipe extends O3rDurationPipe {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DurationPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: DurationPipe, name: "duration" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DurationPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DurationPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'duration' }]
         }] });
 
+/**
+ * @deprecated please use O3rDurationPipe, will be removed in v12.
+ */
 class 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DurationPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: DurationPipeModule, declarations: [DurationPipe], exports: [DurationPipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DurationPipeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DurationPipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DurationPipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DurationPipe],
@@ -1166,27 +1229,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 }]
         }] });
 
-class KeepWhiteSpacePipe {
+class O3rKeepWhiteSpacePipe {
     transform(value) {
         return value.replace(/\s/g, '&nbsp;');
     }
-    /** @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" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: O3rKeepWhiteSpacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: O3rKeepWhiteSpacePipe, name: "o3rKeepWhiteSpace" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: O3rKeepWhiteSpacePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'o3rKeepWhiteSpace'
+                }]
+        }] });
+/**
+ * @deprecated please use O3rKeepWhiteSpacePipe, will be removed in v12.
+ */
+class KeepWhiteSpacePipe extends O3rKeepWhiteSpacePipe {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: KeepWhiteSpacePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: KeepWhiteSpacePipe, name: "keepWhiteSpace" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: KeepWhiteSpacePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: KeepWhiteSpacePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'keepWhiteSpace',
-                    pure: true
+                    name: 'keepWhiteSpace'
                 }]
         }] });
 
+/**
+ * @deprecated please use O3rKeepWhiteSpacePipe, will be removed in v12.
+ */
 class 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: KeepWhiteSpacePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: KeepWhiteSpacePipeModule, declarations: [KeepWhiteSpacePipe], exports: [KeepWhiteSpacePipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: KeepWhiteSpacePipeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: KeepWhiteSpacePipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: KeepWhiteSpacePipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [KeepWhiteSpacePipe],
@@ -1194,36 +1272,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 }]
         }] });
 
-class ReplaceWithBoldPipe {
+const escapeRegExp = (str) => str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
+class O3rReplaceWithBoldPipe {
     transform(value, inputText) {
         if (inputText) {
-            const regexp = new RegExp(this.escapeRegExp(inputText.trim()), 'gi');
+            const regexp = new RegExp(escapeRegExp(inputText.trim()), 'gi');
             return value.replace(regexp, (match) => `<strong>${match}</strong>`);
         }
         else {
             return value;
         }
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: O3rReplaceWithBoldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: O3rReplaceWithBoldPipe, isStandalone: true, name: "o3rReplaceWithBold" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: O3rReplaceWithBoldPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'o3rReplaceWithBold',
+                    standalone: true
+                }]
+        }] });
+/**
+ * @deprecated please use O3rReplaceWithBoldPipe, will be removed in v12.
+ */
+class ReplaceWithBoldPipe extends O3rReplaceWithBoldPipe {
     escapeRegExp(str) {
-        return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
+        return escapeRegExp(str);
     }
-    /** @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" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ReplaceWithBoldPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: ReplaceWithBoldPipe, name: "replaceWithBold" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReplaceWithBoldPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ReplaceWithBoldPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'replaceWithBold',
-                    pure: true
+                    name: 'replaceWithBold'
                 }]
         }] });
 
+/**
+ * @deprecated please use O3rReplaceWithBoldPipe, will be removed in v12.
+ */
 class 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ReplaceWithBoldPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: ReplaceWithBoldPipeModule, declarations: [ReplaceWithBoldPipe], exports: [ReplaceWithBoldPipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ReplaceWithBoldPipeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReplaceWithBoldPipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ReplaceWithBoldPipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ReplaceWithBoldPipe],
@@ -1249,6 +1344,7 @@ class PlaceholderComponent {
         this.id$ = new BehaviorSubject(undefined);
         this.afterViewInit$ = new Subject();
         this.messages$ = new ReplaySubject(1);
+        this.mode = this.store.selectSignal(selectPlaceholderTemplateMode);
     }
     /** @inheritdoc */
     ngOnInit() {
@@ -1294,34 +1390,31 @@ class PlaceholderComponent {
         this.afterViewInit$.complete();
         this.subscription.unsubscribe();
     }
-    /** @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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", 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: "17.3.6", 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: "17.0.8", ngImport: i0, type: PlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: PlaceholderComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'o3r-placeholder',
-                    template: '<ng-content *ngIf="isPending; else displayTemplate"></ng-content>' +
-                        '<ng-template #displayTemplate><div [innerHTML]="template"></div></ng-template>',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], ctorParameters: () => [{ type: i1$1.Store }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
+            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: [{
                 type: Input
             }] } });
 
 class PlaceholderModule {
-    /** @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,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: PlaceholderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: PlaceholderModule, declarations: [PlaceholderComponent], imports: [CommonModule,
             StoreModule,
             PlaceholderTemplateStoreModule,
             PlaceholderRequestStoreModule], exports: [PlaceholderComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: PlaceholderModule, imports: [CommonModule,
             StoreModule,
             PlaceholderTemplateStoreModule,
             PlaceholderRequestStoreModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PlaceholderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: PlaceholderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1339,5 +1432,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", 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, selectSortedTemplates, 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, O3rCapitalizePipe, O3rDurationPipe, O3rKeepWhiteSpacePipe, O3rReplaceWithBoldPipe, 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, selectPlaceholderTemplateMode, selectPlaceholderTemplateState, selectSortedTemplates, setPlaceholderRequestEntityFromUrl, setPlaceholderTemplateEntity, togglePlaceholderModeTemplate, updatePlaceholderRequestEntity, updatePlaceholderRequestEntitySync };
 //# sourceMappingURL=o3r-components.mjs.map