Merge branch 'main' into docs/provide-stackblitz-button

Author: spliffone

api-goldens/element-ng/dashboard/index.api.md

@@ -56,7 +56,7 @@ export class SiDashboardCardComponent extends SiCardComponent implements OnDestr
 }
 
 // @public (undocumented)
-export class SiDashboardComponent implements OnChanges, OnDestroy, AfterViewInit {
+export class SiDashboardComponent implements OnChanges, AfterViewInit {
     constructor();
     // (undocumented)
     protected dashboardFrameEndPadding: number | null;
@@ -71,8 +71,6 @@ export class SiDashboardComponent implements OnChanges, OnDestroy, AfterViewInit
     ngAfterViewInit(): void;
     // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
-    // (undocumented)
-    ngOnDestroy(): void;
     restore(): void;
     readonly sticky: _angular_core.InputSignalWithTransform<boolean, unknown>;
     // (undocumented)

api-goldens/element-ng/filtered-search/index.api.md

@@ -9,7 +9,6 @@ import { BackgroundColorVariant } from '@siemens/element-ng/common';
 import { DatepickerInputConfig } from '@siemens/element-ng/datepicker';
 import { Observable } from 'rxjs';
 import { OnChanges } from '@angular/core';
-import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { SimpleChanges } from '@angular/core';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
@@ -64,7 +63,7 @@ export interface SearchCriteria {
 }
 
 // @public (undocumented)
-export class SiFilteredSearchComponent implements OnInit, OnChanges, OnDestroy {
+export class SiFilteredSearchComponent implements OnInit, OnChanges {
     constructor();
     // (undocumented)
     protected autoEditCriteria: boolean;
@@ -109,8 +108,6 @@ export class SiFilteredSearchComponent implements OnInit, OnChanges, OnDestroy {
     // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
     // (undocumented)
-    ngOnDestroy(): void;
-    // (undocumented)
     ngOnInit(): void;
     readonly onlySelectValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly optionsInScrollableView: _angular_core.InputSignal<number>;

api-goldens/element-ng/navbar-vertical/index.api.md

@@ -10,7 +10,6 @@ import { IsActiveMatchOptions } from '@angular/router';
 import { MenuItem } from '@siemens/element-ng/common';
 import { NavigationExtras } from '@angular/router';
 import { OnChanges } from '@angular/core';
-import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
 import { SimpleChanges } from '@angular/core';
@@ -81,7 +80,7 @@ export interface NavbarVerticalItemRouterLink extends NavbarVerticalItemBase {
 export type NavbarVerticalSubItem = NavbarVerticalItemRouterLink | NavbarVerticalItemLink | NavbarVerticalItemAction;
 
 // @public (undocumented)
-export class SiNavbarVerticalComponent implements OnChanges, OnInit, OnDestroy {
+export class SiNavbarVerticalComponent implements OnChanges, OnInit {
     constructor();
     // (undocumented)
     protected readonly activatedRoute: ActivatedRoute | null;
@@ -100,8 +99,6 @@ export class SiNavbarVerticalComponent implements OnChanges, OnInit, OnDestroy {
     // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
     // (undocumented)
-    ngOnDestroy(): void;
-    // (undocumented)
     ngOnInit(): void;
     // (undocumented)
     protected readonly ready = true;

playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--open-menu-element-examples-chromium-dark-linux.png

@@ -6,20 +6,21 @@ import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
 import {
   Component,
   ComponentRef,
+  DestroyRef,
   EnvironmentInjector,
   inject,
   Injector,
   input,
   isSignal,
   OnChanges,
-  OnDestroy,
   OnInit,
   output,
   SimpleChanges,
   TemplateRef,
   viewChild,
   ViewContainerRef
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { SiActionDialogService } from '@siemens/element-ng/action-modal';
 // We need one import from the main entry.
 // Otherwise, module federation is confused.
@@ -29,8 +30,6 @@ import { ContentActionBarMainItem, ViewType } from '@siemens/element-ng/content-
 import { SiDashboardCardComponent } from '@siemens/element-ng/dashboard';
 import { MenuItem } from '@siemens/element-ng/menu';
 import { t } from '@siemens/element-translate-ng/translate';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 import { WidgetConfig, WidgetConfigEvent, WidgetInstance } from '../../model/widgets.model';
 import { SiGridService } from '../../services/si-grid.service';
@@ -45,13 +44,12 @@ import { setupWidgetInstance } from '../../widget-loader';
     class: 'grid-stack-item'
   }
 })
-export class SiWidgetHostComponent implements OnInit, OnDestroy, OnChanges {
-  private siModal = inject(SiActionDialogService);
-  private gridService = inject(SiGridService);
-  private injector = inject(Injector);
-  private envInjector = inject(EnvironmentInjector);
-
-  private unsubscribe = new Subject<void>();
+export class SiWidgetHostComponent implements OnInit, OnChanges {
+  private readonly siModal = inject(SiActionDialogService);
+  private readonly gridService = inject(SiGridService);
+  private readonly injector = inject(Injector);
+  private readonly envInjector = inject(EnvironmentInjector);
+  private readonly destroyRef = inject(DestroyRef);
 
   readonly widgetConfig = input.required<WidgetConfig>();
 
@@ -156,15 +154,10 @@ export class SiWidgetHostComponent implements OnInit, OnDestroy, OnChanges {
   ngOnInit(): void {
     this.attachWidgetInstance();
     this.editable$
-      .pipe<boolean>(takeUntil(this.unsubscribe))
+      .pipe<boolean>(takeUntilDestroyed(this.destroyRef))
       .subscribe(editable => this.setupEditable(editable));
   }
 
-  ngOnDestroy(): void {
-    this.unsubscribe.next();
-    this.unsubscribe.complete();
-  }
-
   private attachWidgetInstance(): void {
     const widget = this.gridService.getWidget(this.widgetConfig().widgetId);
     if (widget) {
@@ -182,7 +175,7 @@ export class SiWidgetHostComponent implements OnInit, OnDestroy, OnChanges {
             // on web component, who pushes their configuration through an event after being attached
             // to the DOM.
             this.widgetInstance.configChange
-              .pipe(takeUntil(this.unsubscribe))
+              .pipe(takeUntilDestroyed(this.destroyRef))
               .subscribe(event =>
                 setTimeout(() => this.setupEditable(this.editable$.value, event))
               );

playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--open-menu-element-examples-chromium-light-linux.png

@@ -9,7 +9,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  DestroyRef,
   ElementRef,
   inject,
   input,
@@ -131,7 +130,6 @@ export class SiCollapsiblePanelComponent {
   protected isHCollapsible = false;
   protected readonly icons = addIcons({ elementDown2 });
 
-  private readonly destroyRef = inject(DestroyRef);
   private readonly accordionService = inject(SiAccordionService, { optional: true });
   private readonly accordionHCollapseService = inject(SiAccordionHCollapseService, {
     optional: true
@@ -145,7 +143,7 @@ export class SiCollapsiblePanelComponent {
     this.isHCollapsible = !!this.accordionHCollapseService;
     this.accordionService?.toggle$
       .pipe(
-        takeUntilDestroyed(this.destroyRef),
+        takeUntilDestroyed(),
         filter(item => item !== this)
       )
       .subscribe(() => this.openClose(false));

projects/dashboards-ng/src/components/widget-host/si-widget-host.component.ts

@@ -10,25 +10,24 @@ import {
   ChangeDetectorRef,
   Component,
   computed,
+  DestroyRef,
   DOCUMENT,
   ElementRef,
   inject,
   input,
   OnChanges,
-  OnDestroy,
   signal,
   SimpleChanges,
   viewChild
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ScrollbarHelper } from '@siemens/element-ng/common';
 import {
   BOOTSTRAP_BREAKPOINTS,
   ElementDimensions,
   ResizeObserverService
 } from '@siemens/element-ng/resize-observer';
 import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 import { SiDashboardCardComponent } from './si-dashboard-card.component';
 import { SiDashboardService } from './si-dashboard.service';
@@ -43,7 +42,8 @@ const FIX_SCROLL_PADDING_RESIZE_OBSERVER_THROTTLE = 10;
   providers: [SiDashboardService],
   host: { class: 'si-layout-fixed-height' }
 })
-export class SiDashboardComponent implements OnChanges, OnDestroy, AfterViewInit {
+export class SiDashboardComponent implements OnChanges, AfterViewInit {
+  private readonly destroyRef = inject(DestroyRef);
   /**
    * Heading for the dashboard page.
    */
@@ -84,7 +84,6 @@ export class SiDashboardComponent implements OnChanges, OnDestroy, AfterViewInit
   );
 
   private _isExpanded = false;
-  private unsubscribe = new Subject<void>();
   private scrollPosition: [number, number] = [0, 0];
 
   private cards: SiDashboardCardComponent[] = [];
@@ -107,7 +106,7 @@ export class SiDashboardComponent implements OnChanges, OnDestroy, AfterViewInit
 
   constructor() {
     this.dashboardService.cards$
-      .pipe(takeUntil(this.unsubscribe))
+      .pipe(takeUntilDestroyed())
       .subscribe(cards => this.subscribeToCards(cards));
   }
 
@@ -120,19 +119,14 @@ export class SiDashboardComponent implements OnChanges, OnDestroy, AfterViewInit
   ngAfterViewInit(): void {
     this.resizeObserver
       .observe(this.dashboard().nativeElement, FIX_SCROLL_PADDING_RESIZE_OBSERVER_THROTTLE)
-      .pipe(takeUntil(this.unsubscribe))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(x => this.setDashboardFrameEndPadding(this.dashboardFrameDimensions, x));
     this.resizeObserver
       .observe(this.dashboardFrame().nativeElement, FIX_SCROLL_PADDING_RESIZE_OBSERVER_THROTTLE)
-      .pipe(takeUntil(this.unsubscribe))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(dims => this.setDashboardFrameEndPadding(dims, this.dashboardDimensions));
   }
 
-  ngOnDestroy(): void {
-    this.unsubscribe.next();
-    this.unsubscribe.complete();
-  }
-
   private subscribeToCards(cards: SiDashboardCardComponent[]): void {
     this.cards = cards;
     this.initCards();

projects/element-ng/accordion/si-collapsible-panel.component.ts

@@ -7,20 +7,21 @@ import {
   ChangeDetectorRef,
   Component,
   computed,
+  DestroyRef,
   ElementRef,
   inject,
   input,
   LOCALE_ID,
   model,
   OnChanges,
-  OnDestroy,
   OnInit,
   output,
   signal,
   SimpleChanges,
   viewChild,
   viewChildren
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { BackgroundColorVariant, isRTL } from '@siemens/element-ng/common';
 import { addIcons, elementCancel, elementSearch, SiIconComponent } from '@siemens/element-ng/icon';
@@ -32,7 +33,7 @@ import {
   TranslatableString
 } from '@siemens/element-translate-ng/translate';
 import { BehaviorSubject, Observable, of, Subject, switchMap } from 'rxjs';
-import { debounceTime, map, takeUntil } from 'rxjs/operators';
+import { debounceTime, map } from 'rxjs/operators';
 
 import {
   differenceByName,
@@ -66,7 +67,7 @@ import {
     '[class.dark-background]': "colorVariant() === 'base-0'"
   }
 })
-export class SiFilteredSearchComponent implements OnInit, OnChanges, OnDestroy {
+export class SiFilteredSearchComponent implements OnInit, OnChanges {
   private static readonly criterionRegex = /(.+?):(.*)$/;
 
   /**
@@ -317,10 +318,10 @@ export class SiFilteredSearchComponent implements OnInit, OnChanges, OnDestroy {
   private typeaheadInputChange = new BehaviorSubject<string>('');
   /** Used to debounce the Search emissions */
   private searchEmitQueue = new Subject<SearchCriteria | undefined>();
-  private destroySubscriptions = new Subject<boolean>();
-  private cdRef = inject(ChangeDetectorRef);
-  private translateService = injectSiTranslateService();
-  private locale = inject(LOCALE_ID).toString();
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly cdRef = inject(ChangeDetectorRef);
+  private readonly translateService = injectSiTranslateService();
+  private readonly locale = inject(LOCALE_ID).toString();
   /**
    * The cache is used to control when the interceptDisplayedCriteria event needs to be called.
    * Every time a criteria gain the focus we have to reset the cache to call the interceptor.
@@ -397,15 +398,10 @@ export class SiFilteredSearchComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     this.searchEmitQueue
-      .pipe(debounceTime(this.searchDebounceTime()), takeUntil(this.destroySubscriptions))
+      .pipe(debounceTime(this.searchDebounceTime()), takeUntilDestroyed(this.destroyRef))
       .subscribe(searchCriteria => this.doSearch.emit(searchCriteria!));
   }
 
-  ngOnDestroy(): void {
-    this.destroySubscriptions.next(true);
-    this.destroySubscriptions.unsubscribe();
-  }
-
   private initCriteria(): void {
     this.internalCriterionDefinitions = this.loadedCriteria().map(c => toInternalCriteria(c));
   }

projects/element-ng/dashboard/si-dashboard.component.ts

@@ -24,22 +24,20 @@ import {
   input,
   model,
   OnChanges,
-  OnDestroy,
   OnInit,
   output,
   signal,
   SimpleChanges,
   viewChild,
   viewChildren
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, RouterLink, RouterLinkActive } from '@angular/router';
 import { MenuItem, SI_UI_STATE_SERVICE } from '@siemens/element-ng/common';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
 import { SiSearchBarComponent } from '@siemens/element-ng/search-bar';
 import { SiSkipLinkTargetDirective } from '@siemens/element-ng/skip-links';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 import { SiNavbarVerticalDividerComponent } from './si-navbar-vertical-divider.component';
 import { SiNavbarVerticalGroupTriggerDirective } from './si-navbar-vertical-group-trigger.directive';
@@ -143,7 +141,7 @@ export class SiNavbarVerticalItemGuardDirective {
     ])
   ]
 })
-export class SiNavbarVerticalComponent implements OnChanges, OnInit, OnDestroy {
+export class SiNavbarVerticalComponent implements OnChanges, OnInit {
   /**
    * Whether the navbar-vertical is collapsed.
    *
@@ -281,15 +279,14 @@ export class SiNavbarVerticalComponent implements OnChanges, OnInit, OnDestroy {
 
   protected readonly smallScreen = signal(false);
   protected readonly uiStateExpandedItems = signal<Record<string, boolean>>({});
-  private destroyer = new Subject<void>();
 
   // Indicates if the user prefers a collapsed navbar. Relevant for resizing.
   private preferCollapse = false;
 
   constructor() {
     this.breakpointObserver
       .observe(`(max-width: ${BOOTSTRAP_BREAKPOINTS.lgMinimum}px)`)
-      .pipe(takeUntil(this.destroyer))
+      .pipe(takeUntilDestroyed())
       .subscribe(({ matches }) => {
         this.collapsed.set(matches || this.preferCollapse);
         this.smallScreen.set(matches);
@@ -315,11 +312,6 @@ export class SiNavbarVerticalComponent implements OnChanges, OnInit, OnDestroy {
     }
   }
 
-  ngOnDestroy(): void {
-    this.destroyer.next();
-    this.destroyer.complete();
-  }
-
   protected toggleCollapse(): void {
     if (this.collapsed()) {
       this.expand();