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

package/fesm2022/o3r-components.mjs

@@ -1,7 +1,8 @@
-import { of, from, observeOn, animationFrameScheduler, BehaviorSubject, Subscription, firstValueFrom, fromEvent, Subject, ReplaySubject, sample } from 'rxjs';
+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, Injectable, Optional, Inject, SimpleChange, forwardRef, Directive, Input, Pipe, Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { InjectionToken, NgModule, inject, DestroyRef, Injectable, Optional, Inject, SimpleChange, forwardRef, Directive, Input, Pipe, Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@ngrx/store';
 import { createAction, props, on, createReducer, StoreModule, createFeatureSelector, createSelector } from '@ngrx/store';
 import { asyncProps, createEntityAsyncRequestAdapter, asyncStoreItemAdapter, asyncEntitySerializer, otterComponentInfoPropertyName, sendOtterMessage, filterMessageContent } from '@o3r/core';
@@ -651,8 +652,8 @@ class ComponentsDevtoolsMessageService {
     constructor(logger, store, options) {
         this.logger = logger;
         this.store = store;
-        this.subscriptions = new Subscription();
         this.sendMessage = (sendOtterMessage);
+        this.destroyRef = inject(DestroyRef);
         this.options = {
             ...OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS,
             ...options
@@ -728,14 +729,10 @@ class ComponentsDevtoolsMessageService {
     }
     /** @inheritDoc */
     activate() {
-        this.subscriptions.add(fromEvent(window, 'message').pipe(filterMessageContent(isComponentsMessage)).subscribe((e) => this.handleEvents(e)));
+        fromEvent(window, 'message').pipe(takeUntilDestroyed(this.destroyRef), 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();
+        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: "18.2.13", ngImport: i0, type: ComponentsDevtoolsMessageService, deps: [{ token: i1$1.LoggerService }, { token: i1.Store }, { token: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentsDevtoolsMessageService, providedIn: 'root' }); }
@@ -1341,15 +1338,15 @@ class PlaceholderComponent {
     constructor(store, cd) {
         this.store = store;
         this.cd = cd;
-        this.subscription = new Subscription();
         this.id$ = new BehaviorSubject(undefined);
         this.afterViewInit$ = new Subject();
         this.messages$ = new ReplaySubject(1);
+        this.destroyRef = inject(DestroyRef);
         this.mode = this.store.selectSignal(selectPlaceholderTemplateMode);
     }
     /** @inheritdoc */
     ngOnInit() {
-        this.subscription.add(this.id$.pipe(filter((id) => !!id), distinctUntilChanged(), switchMap((id) => this.store.select(selectSortedTemplates(id)).pipe(map((placeholders) => ({
+        this.id$.pipe(filter((id) => !!id), distinctUntilChanged(), switchMap((id) => this.store.select(selectSortedTemplates(id)).pipe(map((placeholders) => ({
             id,
             orderedTemplates: placeholders?.orderedTemplates,
             isPending: placeholders?.isPending
@@ -1369,8 +1366,8 @@ class PlaceholderComponent {
                 });
             }
             this.cd.markForCheck();
-        }));
-        this.messages$.pipe(sample(this.afterViewInit$), distinctUntilChanged((previous, current) => JSON.stringify(current) === JSON.stringify(previous))).subscribe({
+        });
+        this.messages$.pipe(takeUntilDestroyed(this.destroyRef), sample(this.afterViewInit$), distinctUntilChanged((previous, current) => JSON.stringify(current) === JSON.stringify(previous))).subscribe({
             next: (data) => sendOtterMessage('placeholder-loading-status', data, false),
             complete: () => sendOtterMessage('placeholder-loading-status', {
                 placeholderId: this.id$.value,
@@ -1384,9 +1381,9 @@ class PlaceholderComponent {
     }
     /** @inheritdoc */
     ngOnDestroy() {
+        this.id$.complete();
         this.messages$.complete();
         this.afterViewInit$.complete();
-        this.subscription.unsubscribe();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderComponent, deps: [{ token: i1.Store }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PlaceholderComponent, selector: "o3r-placeholder", inputs: { id: "id" }, host: { properties: { "class.debug": "mode() === 'debug'" } }, ngImport: i0, template: "<ng-template #projection>\n  <ng-content></ng-content>\n</ng-template>\n@switch (mode()) {\n  @case ('debug') {\n    <span class=\"placehoder-id\">{{ id$ | async }}</span>\n  }\n  @case ('pending') {\n    <ng-container *ngTemplateOutlet=\"projection\" />\n  }\n  @case ('normal') {\n    @if (isPending) {\n      <ng-container *ngTemplateOutlet=\"projection\" />\n    } @else {\n      <div [innerHTML]=\"template\"></div>\n    }\n  }\n}\n", styles: [".debug{padding:15px;text-align:center;border:2px dashed var(--o3r-placeholder-debug-color, #a65c27);border-radius:10px;width:100%;background:var(--o3r-placeholder-background, #fff2ea);border-style:dashed;color:var(--o3r-placeholder-debug-color, #a65c27);font-size:larger}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }