@o3r/components 14.6.0-prerelease.5 → 14.6.0-prerelease.50

package/fesm2022/o3r-components.mjs

@@ -1,15 +1,14 @@
 import { of, from, observeOn, animationFrameScheduler, BehaviorSubject, 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, NgModule, inject, DestroyRef, Injectable, ViewContainerRef, KeyValueDiffers, Injector, SimpleChange, forwardRef, Input, Directive, makeEnvironmentProviders, Pipe, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, NgModule, makeEnvironmentProviders, inject, DestroyRef, Injectable, ViewContainerRef, KeyValueDiffers, Injector, SimpleChange, forwardRef, Input, Directive, Pipe, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@ngrx/store';
-import { createAction, props, on, createReducer, StoreModule, createFeatureSelector, createSelector, Store } from '@ngrx/store';
+import { createAction, props, on, createReducer, StoreModule, provideState, createFeatureSelector, createSelector, Store } from '@ngrx/store';
 import { asyncProps, createEntityAsyncRequestAdapter, asyncStoreItemAdapter, asyncEntitySerializer, otterComponentInfoPropertyName, sendOtterMessage, filterMessageContent } from '@o3r/core';
 import { LoggerService } from '@o3r/logger';
 import { createEntityAdapter } from '@ngrx/entity';
-import * as i1$1 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
 import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 
 /**
@@ -150,6 +149,9 @@ const PLACEHOLDER_REQUEST_REDUCER_TOKEN = new InjectionToken('Feature Placeholde
 function getDefaultplaceholderRequestReducer() {
     return placeholderRequestReducer;
 }
+/**
+ * @deprecated Will be removed in v16. Use {@link providePlaceholderRequestStore} instead.
+ */
 class PlaceholderRequestStoreModule {
     static forRoot(reducerFactory) {
         return {
@@ -159,13 +161,13 @@ class PlaceholderRequestStoreModule {
             ]
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PlaceholderRequestStoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: PlaceholderRequestStoreModule, imports: [i1.StoreFeatureModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PlaceholderRequestStoreModule, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PlaceholderRequestStoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: PlaceholderRequestStoreModule, imports: [i1.StoreFeatureModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", 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: "21.2.17", ngImport: i0, type: PlaceholderRequestStoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PlaceholderRequestStoreModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -176,6 +178,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     ]
                 }]
         }] });
+/**
+ * Provide PlaceholderRequest feature store.
+ * @param reducerFactory Optional factory to override the default reducer.
+ */
+function providePlaceholderRequestStore(reducerFactory) {
+    return makeEnvironmentProviders([
+        provideState(PLACEHOLDER_REQUEST_STORE_NAME, reducerFactory ? reducerFactory() : placeholderRequestReducer)
+    ]);
+}
 
 const selectPlaceholderRequestState = createFeatureSelector(PLACEHOLDER_REQUEST_STORE_NAME);
 const { selectEntities: selectEntities$1 } = placeholderRequestAdapter.getSelectors();
@@ -261,6 +272,9 @@ const PLACEHOLDER_TEMPLATE_REDUCER_TOKEN = new InjectionToken('Feature Placehold
 function getDefaultPlaceholderTemplateReducer() {
     return placeholderTemplateReducer;
 }
+/**
+ * @deprecated Will be removed in v16. Use {@link providePlaceholderTemplateStore} instead.
+ */
 class PlaceholderTemplateStoreModule {
     static forRoot(reducerFactory) {
         return {
@@ -270,13 +284,13 @@ class PlaceholderTemplateStoreModule {
             ]
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PlaceholderTemplateStoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: PlaceholderTemplateStoreModule, imports: [i1.StoreFeatureModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PlaceholderTemplateStoreModule, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PlaceholderTemplateStoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: PlaceholderTemplateStoreModule, imports: [i1.StoreFeatureModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", 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: "21.2.17", ngImport: i0, type: PlaceholderTemplateStoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PlaceholderTemplateStoreModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -287,6 +301,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     ]
                 }]
         }] });
+/**
+ * Provide PlaceholderTemplate feature store.
+ * @param reducerFactory Optional factory to override the default reducer.
+ */
+function providePlaceholderTemplateStore(reducerFactory) {
+    return makeEnvironmentProviders([
+        provideState(PLACEHOLDER_TEMPLATE_STORE_NAME, reducerFactory ? reducerFactory() : placeholderTemplateReducer)
+    ]);
+}
 
 const { selectEntities } = placeholderTemplateAdapter.getSelectors();
 const selectPlaceholderTemplateState = createFeatureSelector(PLACEHOLDER_TEMPLATE_STORE_NAME);
@@ -702,10 +725,10 @@ class HighlightService {
             this.singleRun = false;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HighlightService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HighlightService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HighlightService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HighlightService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1114,16 +1137,19 @@ class ComponentsDevtoolsMessageService {
         this.inspectorService.otterLikeComponentInfoToBeSent$
             .pipe(takeUntilDestroyed(this.destroyRef), filter((info) => !!info)).subscribe((info) => this.sendMessage('selectedComponentInfo', info));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ComponentsDevtoolsMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ComponentsDevtoolsMessageService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ComponentsDevtoolsMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ComponentsDevtoolsMessageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ComponentsDevtoolsMessageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ComponentsDevtoolsMessageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * @deprecated Will be removed in v16. Use {@link provideComponentsDevtools} instead.
+ */
 class ComponentsDevtoolsModule {
     /**
      * Initialize Otter Devtools
@@ -1138,16 +1164,16 @@ class ComponentsDevtoolsModule {
             ]
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ComponentsDevtoolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ComponentsDevtoolsModule, imports: [StoreModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ComponentsDevtoolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ComponentsDevtoolsModule, imports: [StoreModule,
             PlaceholderTemplateStoreModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ComponentsDevtoolsModule, providers: [
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", 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: "21.2.17", ngImport: i0, type: ComponentsDevtoolsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ComponentsDevtoolsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1160,6 +1186,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     ]
                 }]
         }] });
+/**
+ * Provide components devtools functionality.
+ * @param options Components devtools options
+ */
+function provideComponentsDevtools(options) {
+    return makeEnvironmentProviders([
+        providePlaceholderTemplateStore(),
+        { provide: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, useValue: { ...OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS, ...options } },
+        ComponentsDevtoolsMessageService
+    ]);
+}
 
 class C11nDirective {
     constructor() {
@@ -1275,8 +1312,8 @@ class C11nDirective {
             this.componentRef.destroy();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C11nDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: C11nDirective, isStandalone: true, 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: "21.2.18", ngImport: i0, type: C11nDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: C11nDirective, isStandalone: true, selector: "[c11n]", inputs: { component: "component", config: "config", formControl: "formControl", inputs: "inputs", outputs: "outputs" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => C11nDirective)),
@@ -1289,7 +1326,7 @@ class C11nDirective {
             }
         ], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C11nDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: C11nDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c11n]',
@@ -1357,19 +1394,19 @@ class C11nService {
             return typeof presenterConfig === 'string' && presenterConfig !== '' ? (this.presentersMap.get(presenterConfig) || defaultPres) : defaultPres;
         }));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C11nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C11nService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: C11nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: C11nService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C11nService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: C11nService, decorators: [{
             type: Injectable
         }] });
 
 /** C11n directive mock */
 class MockC11nDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MockC11nDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: MockC11nDirective, isStandalone: false, selector: "[c11n]", inputs: { config: "config", component: "component", inputs: "inputs", outputs: "outputs" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MockC11nDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: MockC11nDirective, isStandalone: false, selector: "[c11n]", inputs: { config: "config", component: "component", inputs: "inputs", outputs: "outputs" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MockC11nDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MockC11nDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c11n]',
@@ -1384,21 +1421,22 @@ class C11nMockService {
     getPresenter(_defaultPres, _presKey) {
         return (source) => source.pipe(mapTo(null));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C11nMockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C11nMockService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: C11nMockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: C11nMockService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C11nMockService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", 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
+ * @deprecated Will be removed in v16. Use {@link provideC11nMock} and import `MockC11nDirective` directly instead.
  */
 class C11nMockModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C11nMockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: C11nMockModule, declarations: [MockC11nDirective], exports: [MockC11nDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C11nMockModule, providers: [{ provide: C11nService, useClass: C11nMockService }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: C11nMockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: C11nMockModule, declarations: [MockC11nDirective], exports: [MockC11nDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: C11nMockModule, providers: [{ provide: C11nService, useClass: C11nMockService }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: C11nMockModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: C11nMockModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MockC11nDirective],
@@ -1406,6 +1444,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     providers: [{ provide: C11nService, useClass: C11nMockService }]
                 }]
         }] });
+/**
+ * Provide C11n mock service for testing.
+ */
+function provideC11nMock() {
+    return [
+        { provide: C11nService, useClass: C11nMockService }
+    ];
+}
 
 /**
  * Customization service factory
@@ -1460,10 +1506,10 @@ class O3rCapitalizePipe {
         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: "21.2.17", ngImport: i0, type: O3rCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: O3rCapitalizePipe, isStandalone: true, name: "o3rCapitalize" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: O3rCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: O3rCapitalizePipe, isStandalone: true, name: "o3rCapitalize" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: O3rCapitalizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: O3rCapitalizePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'o3rCapitalize' }]
         }] });
@@ -1543,10 +1589,10 @@ class O3rDurationPipe {
             return result.replace(matchedPatternToReplace, padded);
         }, pattern);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: O3rDurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: O3rDurationPipe, isStandalone: true, name: "o3rDuration" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: O3rDurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: O3rDurationPipe, isStandalone: true, name: "o3rDuration" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: O3rDurationPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: O3rDurationPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'o3rDuration' }]
         }] });
@@ -1555,10 +1601,10 @@ class O3rKeepWhiteSpacePipe {
     transform(value) {
         return value.replace(/\s/g, ' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: O3rKeepWhiteSpacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: O3rKeepWhiteSpacePipe, isStandalone: true, name: "o3rKeepWhiteSpace" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: O3rKeepWhiteSpacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: O3rKeepWhiteSpacePipe, isStandalone: true, name: "o3rKeepWhiteSpace" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: O3rKeepWhiteSpacePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: O3rKeepWhiteSpacePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'o3rKeepWhiteSpace' }]
         }] });
@@ -1574,10 +1620,10 @@ class O3rReplaceWithBoldPipe {
             return value;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: O3rReplaceWithBoldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: O3rReplaceWithBoldPipe, isStandalone: true, name: "o3rReplaceWithBold" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: O3rReplaceWithBoldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: O3rReplaceWithBoldPipe, isStandalone: true, name: "o3rReplaceWithBold" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: O3rReplaceWithBoldPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: O3rReplaceWithBoldPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'o3rReplaceWithBold' }]
         }] });
@@ -1643,46 +1689,61 @@ class PlaceholderComponent {
         this.messages$.complete();
         this.afterViewInit$.complete();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PlaceholderComponent, isStandalone: false, selector: "o3r-placeholder", inputs: { id: "id" }, host: { properties: { "class.debug": "mode() === 'debug'" } }, ngImport: i0, template: "<ng-template #projection>\n  <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: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: PlaceholderComponent, isStandalone: true, selector: "o3r-placeholder", inputs: { id: "id" }, host: { properties: { "class.debug": "mode() === 'debug'" } }, ngImport: i0, template: "<ng-template #projection>\n  <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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PlaceholderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'o3r-placeholder', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'o3r-placeholder', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        AsyncPipe,
+                        NgTemplateOutlet
+                    ], host: {
                         '[class.debug]': `mode() === 'debug'`
-                    }, standalone: false, template: "<ng-template #projection>\n  <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"] }]
+                    }, template: "<ng-template #projection>\n  <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: () => [], propDecorators: { id: [{
                 type: Input
             }] } });
 
+/**
+ * @deprecated Will be removed in v16. Use {@link providePlaceholder} and import `PlaceholderComponent` directly instead.
+ */
 class PlaceholderModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PlaceholderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: PlaceholderModule, declarations: [PlaceholderComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PlaceholderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: PlaceholderModule, imports: [CommonModule,
             StoreModule,
             PlaceholderTemplateStoreModule,
-            PlaceholderRequestStoreModule], exports: [PlaceholderComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PlaceholderModule, imports: [CommonModule,
+            PlaceholderRequestStoreModule,
+            PlaceholderComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PlaceholderModule, imports: [CommonModule,
             StoreModule,
             PlaceholderTemplateStoreModule,
             PlaceholderRequestStoreModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PlaceholderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PlaceholderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
                         StoreModule,
                         PlaceholderTemplateStoreModule,
-                        PlaceholderRequestStoreModule
-                    ],
-                    declarations: [PlaceholderComponent],
-                    exports: [PlaceholderComponent]
+                        PlaceholderRequestStoreModule,
+                        PlaceholderComponent
+                    ]
                 }]
         }] });
+/**
+ * Provide placeholder stores required by `PlaceholderComponent`.
+ */
+function providePlaceholder() {
+    return makeEnvironmentProviders([
+        providePlaceholderTemplateStore(),
+        providePlaceholderRequestStore()
+    ]);
+}
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { C11N_PRESENTERS_MAP_TOKEN, C11N_REGISTER_FUNC_TOKEN, C11nDirective, C11nMockModule, C11nMockService, C11nService, ComponentsDevtoolsMessageService, ComponentsDevtoolsModule, INSPECTOR_CLASS, 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, 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, provideCustomComponents, registerCustomComponent, selectPlaceholderRequestEntities, selectPlaceholderRequestEntityUsage, selectPlaceholderRequestState, selectPlaceholderTemplateEntities, selectPlaceholderTemplateEntity, selectPlaceholderTemplateMode, selectPlaceholderTemplateState, selectSortedTemplates, setPlaceholderRequestEntityFromUrl, setPlaceholderTemplateEntity, togglePlaceholderModeTemplate, updatePlaceholderRequestEntity, updatePlaceholderRequestEntitySync, withComponent };
+export { C11N_PRESENTERS_MAP_TOKEN, C11N_REGISTER_FUNC_TOKEN, C11nDirective, C11nMockModule, C11nMockService, C11nService, ComponentsDevtoolsMessageService, ComponentsDevtoolsModule, INSPECTOR_CLASS, 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, 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, provideC11nMock, provideComponentsDevtools, provideCustomComponents, providePlaceholder, providePlaceholderRequestStore, providePlaceholderTemplateStore, registerCustomComponent, selectPlaceholderRequestEntities, selectPlaceholderRequestEntityUsage, selectPlaceholderRequestState, selectPlaceholderTemplateEntities, selectPlaceholderTemplateEntity, selectPlaceholderTemplateMode, selectPlaceholderTemplateState, selectSortedTemplates, setPlaceholderRequestEntityFromUrl, setPlaceholderTemplateEntity, togglePlaceholderModeTemplate, updatePlaceholderRequestEntity, updatePlaceholderRequestEntitySync, withComponent };
 //# sourceMappingURL=o3r-components.mjs.map