@siemens/element-ng 49.12.0 → 51.0.0-rc.3

package/fesm2022/siemens-element-ng-split.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, computed, inject, ElementRef, booleanAttribute, numberAttribute, Input, Output, ChangeDetectionStrategy, Component, NgZone, ChangeDetectorRef, DOCUMENT, ContentChildren, NgModule } from '@angular/core';
+import { input, booleanAttribute, numberAttribute, output, signal, computed, linkedSignal, inject, ElementRef, effect, untracked, Component, contentChildren, NgZone, ChangeDetectorRef, DOCUMENT, DestroyRef, NgModule } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { SiIconComponent } from '@siemens/element-ng/icon';
 import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { __decorate } from 'tslib';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { SI_UI_STATE_SERVICE, isRTL, WebComponentContentChildren } from '@siemens/element-ng/common';
 import { asapScheduler, merge, fromEvent } from 'rxjs';
 import { observeOn, takeUntil } from 'rxjs/operators';
@@ -12,38 +13,51 @@ import { observeOn, takeUntil } from 'rxjs/operators';
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-/* eslint-disable @angular-eslint/prefer-output-emitter-ref */
 class SiSplitPartComponent {
-    /** @defaultValue [] */
-    actions = [];
     /**
+     * Action buttons displayed in the split part header.
+     *
+     * @defaultValue []
+     */
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines which direction the split part collapses to.
+     *
      * @defaultValue 'start'
      */
-    collapseDirection = 'start';
+    collapseDirection = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseDirection" }] : /* istanbul ignore next */ []));
     /**
      * Sets the icon class that is used in the buttons of split parts to
      * collapse and uncollapse the parts.
      *
      * @defaultValue 'element-double-right'
      */
-    collapseIconClass = 'element-double-right';
+    collapseIconClass = input('element-double-right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseIconClass" }] : /* istanbul ignore next */ []));
     /**
      * Collapse only to the given min size.
      *
      * @defaultValue false
      */
-    collapseToMinSize = false;
-    headerTemplate;
+    collapseToMinSize = input(false, { ...(ngDevMode ? { debugName: "collapseToMinSize" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Custom template for the split part header. The template receives the component instance as implicit context.
+     */
+    headerTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Sets the title of the split part header.
      */
-    heading;
+    heading = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
     /**
      * Minimum size in px.
      *
      * @defaultValue 0
      */
-    minSize = 0;
+    minSize = input(0, { ...(ngDevMode ? { debugName: "minSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
      * When a split part is collapsed, the content gets hidden but it will
      * still remain within the DOM. If you want to remove and destroy the component
@@ -52,41 +66,46 @@ class SiSplitPartComponent {
      *
      * @defaultValue false
      */
-    removeContentOnCollapse = false;
+    removeContentOnCollapse = input(false, { ...(ngDevMode ? { debugName: "removeContentOnCollapse" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Defines the behavior of the split part during scaling.
      * E.g. when set to `none`, the spit part will keep its current size even when the parent container grows or shrinks.
      *
      * @defaultValue 'auto'
      */
-    scale = 'auto';
+    scale = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
     /**
      * Defines if the collapse button of a split part is displayed. Default value is true.
      *
      * @defaultValue true
      */
-    showCollapseButton = true;
+    showCollapseButton = input(true, { ...(ngDevMode ? { debugName: "showCollapseButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Defines if the header of the split part is visible. Default is true.
      *
      * @defaultValue true
      */
-    showHeader = true;
+    showHeader = input(true, { ...(ngDevMode ? { debugName: "showHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Aria label for collapse button. Needed for a11y
      *
      * @defaultValue 'collapse'
      */
-    collapseLabel = 'collapse';
+    collapseLabel = input('collapse', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []));
     /**
      * An optional stateId to uniquely identify a component instance.
      * Required for persistence of ui state.
      */
-    stateId;
+    stateId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "stateId" }] : /* istanbul ignore next */ []));
     /**
      * Expanded size in px.
+     *
+     * @defaultValue undefined
      */
-    size;
+    size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
      * This toggles the behavior when collapsing this split part.
      * If enabled, all split parts between this one and the end of the split in the respective direction will be collapsed if this part is collapsed.
@@ -94,21 +113,43 @@ class SiSplitPartComponent {
      *
      * @defaultValue false
      */
-    collapseOthers = false;
-    collapseChanged = new EventEmitter();
-    stateChange = new EventEmitter();
+    collapseOthers = input(false, { ...(ngDevMode ? { debugName: "collapseOthers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Sets the initial expanded or collapsed state of the split part.
+     *
+     * @defaultValue true
+     */
+    expanded = input(true, { ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    collapseChanged = output();
+    stateChange = output();
     /** @internal */
     index = 0;
     /** @internal */
-    before;
-    /** @internal */
-    after;
+    before = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "before" }] : /* istanbul ignore next */ []));
     /** @internal */
-    fractionalSize = signal(undefined, ...(ngDevMode ? [{ debugName: "fractionalSize" }] : []));
+    after = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "after" }] : /* istanbul ignore next */ []));
     /** @internal */
-    collapsedSize = signal(0, ...(ngDevMode ? [{ debugName: "collapsedSize" }] : []));
+    fractionalSize = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fractionalSize" }] : /* istanbul ignore next */ []));
     /** @internal */
-    collapsedState = signal(false, ...(ngDevMode ? [{ debugName: "collapsedState" }] : []));
+    collapsedSize = computed(() => (this.collapseToMinSize() ? (this.minSize() ?? 40) : 40), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Internal, mutable collapsed state. Initialized from the {@link expanded} input but can be
+     * overwritten while toggling, cascading to sibling parts or restoring the persisted ui state.
+     * @internal
+     */
+    collapsedState = linkedSignal(() => !this.expanded(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedState" }] : /* istanbul ignore next */ []));
+    /**
+     * Internal, mutable collapse direction. Initialized from the {@link collapseDirection}
+     * input but can be overwritten while cascading collapse state to sibling parts.
+     * @internal
+     */
+    collapseDirectionState = linkedSignal(() => this.collapseDirection(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseDirectionState" }] : /* istanbul ignore next */ []));
     /**
      * Get collapsed state.
      * @returns True if the split part is collapsed, false is expanded.
@@ -117,14 +158,16 @@ class SiSplitPartComponent {
         return this.collapsedState();
     }
     /** @internal */
-    expandedSize = signal(undefined, ...(ngDevMode ? [{ debugName: "expandedSize" }] : []));
+    expandedSize = linkedSignal(() => this.size(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedSize" }] : /* istanbul ignore next */ []));
     /** @internal */
     actualSize = computed(() => {
         if (this.collapsedState()) {
             return this.collapsedSize();
         }
         return this.expandedSize() ?? 0;
-    }, ...(ngDevMode ? [{ debugName: "actualSize" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actualSize" }] : /* istanbul ignore next */ []));
     /** @internal */
     saveUIState;
     /** @internal */
@@ -132,34 +175,25 @@ class SiSplitPartComponent {
         if (!this.collapsedState()) {
             return this;
         }
-        const nextExpanded = this.after ? this.after.nextExpandedAfter() : this;
+        const after = this.after();
+        const nextExpanded = after ? after.nextExpandedAfter() : this;
         return nextExpanded;
-    }, ...(ngDevMode ? [{ debugName: "nextExpandedAfter" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextExpandedAfter" }] : /* istanbul ignore next */ []));
     elementRef = inject(ElementRef);
     headerContext = {
         $implicit: this
     };
-    /** @defaultValue true */
-    set expanded(value) {
-        this.collapsedState.set(!value);
-        if (this.collapseOthers) {
-            this.before?.refreshCollapseToStart();
-            this.after?.refreshCollapsedToEnd();
-        }
-    }
-    get expanded() {
-        return !this.collapsedState();
-    }
-    ngOnChanges(changes) {
-        if (changes.collapseToMinSize && this.collapseToMinSize) {
-            this.collapsedSize.set(this.minSize ?? 40);
-        }
-        else {
-            this.collapsedSize.set(40); // 40px is default size of the header
-        }
-        if (changes.size) {
-            this.expandedSize.set(this.size);
-        }
+    constructor() {
+        effect(() => {
+            this.expanded();
+            untracked(() => {
+                if (this.collapseOthers()) {
+                    this.before()?.refreshCollapseToStart();
+                    this.after()?.refreshCollapsedToEnd();
+                }
+            });
+        });
     }
     /** @internal */
     refreshSizePx(orientation) {
@@ -178,187 +212,177 @@ class SiSplitPartComponent {
      */
     toggleCollapse() {
         this.collapsedState.update(v => !v);
-        if (this.collapseOthers) {
-            this.before?.refreshCollapseToStart();
-            this.after?.refreshCollapsedToEnd();
+        if (this.collapseOthers()) {
+            this.before()?.refreshCollapseToStart();
+            this.after()?.refreshCollapsedToEnd();
         }
         this.collapseChanged.emit(this.collapsedState());
-        this.stateChange.emit({ expanded: this.expanded, size: this.actualSize() });
+        this.stateChange.emit({ expanded: !this.collapsedState(), size: this.actualSize() });
         this.saveUIState();
     }
     refreshCollapsedToEnd() {
-        if (this.before?.collapsedState() && this.before.collapseDirection === 'end') {
+        const before = this.before();
+        if (before?.collapsedState() && before.collapseDirectionState() === 'end') {
             this.collapsedState.set(true);
-            this.collapseDirection = 'end';
-            this.after?.refreshCollapsedToEnd();
+            this.collapseDirectionState.set('end');
+            this.after()?.refreshCollapsedToEnd();
         }
     }
     refreshCollapseToStart() {
-        if (this.after?.collapsedState() && this.after.collapseDirection === 'start') {
+        const after = this.after();
+        if (after?.collapsedState() && after.collapseDirectionState() === 'start') {
             this.collapsedState.set(true);
-            this.collapseDirection = 'start';
-            this.before?.refreshCollapseToStart();
+            this.collapseDirectionState.set('start');
+            this.before()?.refreshCollapseToStart();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSplitPartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSplitPartComponent, isStandalone: true, selector: "si-split-part", inputs: { actions: "actions", collapseDirection: "collapseDirection", collapseIconClass: "collapseIconClass", collapseToMinSize: ["collapseToMinSize", "collapseToMinSize", booleanAttribute], headerTemplate: "headerTemplate", heading: "heading", minSize: ["minSize", "minSize", numberAttribute], removeContentOnCollapse: ["removeContentOnCollapse", "removeContentOnCollapse", booleanAttribute], scale: "scale", showCollapseButton: ["showCollapseButton", "showCollapseButton", booleanAttribute], showHeader: ["showHeader", "showHeader", booleanAttribute], collapseLabel: "collapseLabel", stateId: "stateId", size: ["size", "size", numberAttribute], collapseOthers: ["collapseOthers", "collapseOthers", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { collapseChanged: "collapseChanged", stateChange: "stateChange" }, host: { properties: { "class.is-collapsed": "collapsedState()", "class.collapse-start": "collapseDirection === \"start\"", "style.grid-area": "\"p-\" + this.index" } }, usesOnChanges: true, ngImport: i0, template: "@if (!headerTemplate && showHeader) {\n  <div class=\"si-split-part-header\" [class.is-collapsed]=\"collapsedState()\">\n    <div class=\"si-split-part-title text-truncate\">\n      {{ heading | translate }}\n    </div>\n    @if (!collapsedState()) {\n      <div class=\"si-split-part-actions\">\n        @for (action of actions; track $index) {\n          <button\n            type=\"button\"\n            class=\"si-split-button\"\n            [title]=\"action.tooltip || ''\"\n            [attr.aria-label]=\"action.tooltip\"\n            (click)=\"action.click($event)\"\n          >\n            <si-icon [icon]=\"action.iconClass\" />\n          </button>\n        }\n      </div>\n    }\n    @if (showCollapseButton) {\n      <div class=\"si-split-part-collapse-button\">\n        <button\n          type=\"button\"\n          class=\"si-split-button\"\n          [attr.aria-label]=\"collapseLabel | translate\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon class=\"collapse-icon\" [icon]=\"collapseIconClass\" />\n        </button>\n      </div>\n    }\n  </div>\n}\n\n@if (headerTemplate) {\n  <ng-container *ngTemplateOutlet=\"headerTemplate; context: headerContext\" />\n}\n\n<div\n  class=\"si-split-part-content\"\n  [class.d-none]=\"!removeContentOnCollapse && collapsedState() && !collapseToMinSize\"\n>\n  @if (!removeContentOnCollapse || !collapsedState()) {\n    <ng-content />\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden}.si-split-part-content{flex:1 1 auto;display:flex;overflow:hidden;flex-direction:column}.si-split-part-header{display:flex;flex-direction:row;flex:none;align-items:center;padding:6px;background:var(--element-base-0);block-size:40px}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header{flex:auto;flex-direction:column;max-block-size:100%;padding:6px}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header .si-split-part-title{inline-size:100%;writing-mode:vertical-rl;transform:rotate(180deg)}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header .si-split-part-collapse-button{order:-1}.si-split-part-title{font-weight:600;flex:1}.si-split-part-actions{padding-inline:8px;flex:0 0 auto}.si-split-button{display:inline-block;padding:4px;color:var(--element-text-primary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;font-size:20px;line-height:1;vertical-align:middle;-webkit-user-select:none;user-select:none;background:none;border:0;cursor:pointer}.si-split-button:hover{background:var(--element-action-secondary-hover)}:host-context(.vertical)>:host .si-split-button{--orientation-rotate: rotate(90deg)}[dir=rtl] :host-context(.horizontal)>:host .si-split-button{--orientation-rtl: scaleX(-1)}:dir(rtl) :host-context(.horizontal)>:host .si-split-button{--orientation-rtl: scaleX(-1)}:host(.is-collapsed) .si-split-button{--collapse-rotate: rotate(180deg)}:host(.collapse-start) .si-split-button{--collapse-direction: rotate(180deg)}.si-split-button .collapse-icon{transform:var(--orientation-rotate, rotate(0)) var(--collapse-rotate, rotate(0)) var(--collapse-direction, rotate(0)) var(--orientation-rtl, scaleX(1))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiSplitPartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SiSplitPartComponent, isStandalone: true, selector: "si-split-part", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, collapseDirection: { classPropertyName: "collapseDirection", publicName: "collapseDirection", isSignal: true, isRequired: false, transformFunction: null }, collapseIconClass: { classPropertyName: "collapseIconClass", publicName: "collapseIconClass", isSignal: true, isRequired: false, transformFunction: null }, collapseToMinSize: { classPropertyName: "collapseToMinSize", publicName: "collapseToMinSize", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, removeContentOnCollapse: { classPropertyName: "removeContentOnCollapse", publicName: "removeContentOnCollapse", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, showCollapseButton: { classPropertyName: "showCollapseButton", publicName: "showCollapseButton", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapseOthers: { classPropertyName: "collapseOthers", publicName: "collapseOthers", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapseChanged: "collapseChanged", stateChange: "stateChange" }, host: { properties: { "class.is-collapsed": "collapsedState()", "class.collapse-start": "collapseDirectionState() === \"start\"", "style.grid-area": "\"p-\" + this.index" } }, ngImport: i0, template: "@if (!headerTemplate() && showHeader()) {\n  <div class=\"si-split-part-header\" [class.is-collapsed]=\"collapsedState()\">\n    <div class=\"si-split-part-title text-truncate\">\n      {{ heading() | translate }}\n    </div>\n    @if (!collapsedState()) {\n      <div class=\"si-split-part-actions\">\n        @for (action of actions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"si-split-button\"\n            [title]=\"action.tooltip || ''\"\n            [attr.aria-label]=\"action.tooltip\"\n            (click)=\"action.click($event)\"\n          >\n            <si-icon [icon]=\"action.iconClass\" />\n          </button>\n        }\n      </div>\n    }\n    @if (showCollapseButton()) {\n      <div class=\"si-split-part-collapse-button\">\n        <button\n          type=\"button\"\n          class=\"si-split-button\"\n          [attr.aria-label]=\"collapseLabel() | translate\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon class=\"collapse-icon\" [icon]=\"collapseIconClass()\" />\n        </button>\n      </div>\n    }\n  </div>\n}\n\n@if (headerTemplate(); as headerTemplate) {\n  <ng-container *ngTemplateOutlet=\"headerTemplate; context: headerContext\" />\n}\n\n<div\n  class=\"si-split-part-content\"\n  [class.d-none]=\"!removeContentOnCollapse() && collapsedState() && !collapseToMinSize()\"\n>\n  @if (!removeContentOnCollapse() || !collapsedState()) {\n    <ng-content />\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden}.si-split-part-content{flex:1 1 auto;display:flex;overflow:hidden;flex-direction:column}.si-split-part-header{display:flex;flex-direction:row;flex:none;align-items:center;padding:6px;background:var(--element-base-0);block-size:40px}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header{flex:auto;flex-direction:column;max-block-size:100%;padding:6px}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header .si-split-part-title{inline-size:100%;writing-mode:vertical-rl;transform:rotate(180deg)}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header .si-split-part-collapse-button{order:-1}.si-split-part-title{font-weight:600;flex:1}.si-split-part-actions{padding-inline:8px;flex:0 0 auto}.si-split-button{display:inline-block;padding:4px;color:var(--element-text-primary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;font-size:20px;line-height:1;vertical-align:middle;-webkit-user-select:none;user-select:none;background:none;border:0;cursor:pointer}.si-split-button:hover{background:var(--element-action-secondary-hover)}:host-context(.vertical)>:host .si-split-button{--orientation-rotate: rotate(90deg)}[dir=rtl] :host-context(.horizontal)>:host .si-split-button{--orientation-rtl: scaleX(-1)}:dir(rtl) :host-context(.horizontal)>:host .si-split-button{--orientation-rtl: scaleX(-1)}:host(.is-collapsed) .si-split-button{--collapse-rotate: rotate(180deg)}:host(.collapse-start) .si-split-button{--collapse-direction: rotate(180deg)}.si-split-button .collapse-icon{transform:var(--orientation-rotate, rotate(0)) var(--collapse-rotate, rotate(0)) var(--collapse-direction, rotate(0)) var(--orientation-rtl, scaleX(1))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSplitPartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiSplitPartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-split-part', imports: [NgTemplateOutlet, SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Default, host: {
+            args: [{ selector: 'si-split-part', imports: [NgTemplateOutlet, SiIconComponent, SiTranslatePipe], host: {
                         '[class.is-collapsed]': 'collapsedState()',
-                        '[class.collapse-start]': 'collapseDirection === "start"',
+                        '[class.collapse-start]': 'collapseDirectionState() === "start"',
                         '[style.grid-area]': '"p-" + this.index'
-                    }, template: "@if (!headerTemplate && showHeader) {\n  <div class=\"si-split-part-header\" [class.is-collapsed]=\"collapsedState()\">\n    <div class=\"si-split-part-title text-truncate\">\n      {{ heading | translate }}\n    </div>\n    @if (!collapsedState()) {\n      <div class=\"si-split-part-actions\">\n        @for (action of actions; track $index) {\n          <button\n            type=\"button\"\n            class=\"si-split-button\"\n            [title]=\"action.tooltip || ''\"\n            [attr.aria-label]=\"action.tooltip\"\n            (click)=\"action.click($event)\"\n          >\n            <si-icon [icon]=\"action.iconClass\" />\n          </button>\n        }\n      </div>\n    }\n    @if (showCollapseButton) {\n      <div class=\"si-split-part-collapse-button\">\n        <button\n          type=\"button\"\n          class=\"si-split-button\"\n          [attr.aria-label]=\"collapseLabel | translate\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon class=\"collapse-icon\" [icon]=\"collapseIconClass\" />\n        </button>\n      </div>\n    }\n  </div>\n}\n\n@if (headerTemplate) {\n  <ng-container *ngTemplateOutlet=\"headerTemplate; context: headerContext\" />\n}\n\n<div\n  class=\"si-split-part-content\"\n  [class.d-none]=\"!removeContentOnCollapse && collapsedState() && !collapseToMinSize\"\n>\n  @if (!removeContentOnCollapse || !collapsedState()) {\n    <ng-content />\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden}.si-split-part-content{flex:1 1 auto;display:flex;overflow:hidden;flex-direction:column}.si-split-part-header{display:flex;flex-direction:row;flex:none;align-items:center;padding:6px;background:var(--element-base-0);block-size:40px}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header{flex:auto;flex-direction:column;max-block-size:100%;padding:6px}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header .si-split-part-title{inline-size:100%;writing-mode:vertical-rl;transform:rotate(180deg)}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header .si-split-part-collapse-button{order:-1}.si-split-part-title{font-weight:600;flex:1}.si-split-part-actions{padding-inline:8px;flex:0 0 auto}.si-split-button{display:inline-block;padding:4px;color:var(--element-text-primary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;font-size:20px;line-height:1;vertical-align:middle;-webkit-user-select:none;user-select:none;background:none;border:0;cursor:pointer}.si-split-button:hover{background:var(--element-action-secondary-hover)}:host-context(.vertical)>:host .si-split-button{--orientation-rotate: rotate(90deg)}[dir=rtl] :host-context(.horizontal)>:host .si-split-button{--orientation-rtl: scaleX(-1)}:dir(rtl) :host-context(.horizontal)>:host .si-split-button{--orientation-rtl: scaleX(-1)}:host(.is-collapsed) .si-split-button{--collapse-rotate: rotate(180deg)}:host(.collapse-start) .si-split-button{--collapse-direction: rotate(180deg)}.si-split-button .collapse-icon{transform:var(--orientation-rotate, rotate(0)) var(--collapse-rotate, rotate(0)) var(--collapse-direction, rotate(0)) var(--orientation-rtl, scaleX(1))}\n"] }]
-        }], propDecorators: { actions: [{
-                type: Input
-            }], collapseDirection: [{
-                type: Input
-            }], collapseIconClass: [{
-                type: Input
-            }], collapseToMinSize: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], headerTemplate: [{
-                type: Input
-            }], heading: [{
-                type: Input
-            }], minSize: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], removeContentOnCollapse: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], scale: [{
-                type: Input
-            }], showCollapseButton: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], showHeader: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], collapseLabel: [{
-                type: Input
-            }], stateId: [{
-                type: Input
-            }], size: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], collapseOthers: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], collapseChanged: [{
-                type: Output
-            }], stateChange: [{
-                type: Output
-            }], expanded: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+                    }, template: "@if (!headerTemplate() && showHeader()) {\n  <div class=\"si-split-part-header\" [class.is-collapsed]=\"collapsedState()\">\n    <div class=\"si-split-part-title text-truncate\">\n      {{ heading() | translate }}\n    </div>\n    @if (!collapsedState()) {\n      <div class=\"si-split-part-actions\">\n        @for (action of actions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"si-split-button\"\n            [title]=\"action.tooltip || ''\"\n            [attr.aria-label]=\"action.tooltip\"\n            (click)=\"action.click($event)\"\n          >\n            <si-icon [icon]=\"action.iconClass\" />\n          </button>\n        }\n      </div>\n    }\n    @if (showCollapseButton()) {\n      <div class=\"si-split-part-collapse-button\">\n        <button\n          type=\"button\"\n          class=\"si-split-button\"\n          [attr.aria-label]=\"collapseLabel() | translate\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon class=\"collapse-icon\" [icon]=\"collapseIconClass()\" />\n        </button>\n      </div>\n    }\n  </div>\n}\n\n@if (headerTemplate(); as headerTemplate) {\n  <ng-container *ngTemplateOutlet=\"headerTemplate; context: headerContext\" />\n}\n\n<div\n  class=\"si-split-part-content\"\n  [class.d-none]=\"!removeContentOnCollapse() && collapsedState() && !collapseToMinSize()\"\n>\n  @if (!removeContentOnCollapse() || !collapsedState()) {\n    <ng-content />\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden}.si-split-part-content{flex:1 1 auto;display:flex;overflow:hidden;flex-direction:column}.si-split-part-header{display:flex;flex-direction:row;flex:none;align-items:center;padding:6px;background:var(--element-base-0);block-size:40px}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header{flex:auto;flex-direction:column;max-block-size:100%;padding:6px}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header .si-split-part-title{inline-size:100%;writing-mode:vertical-rl;transform:rotate(180deg)}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header .si-split-part-collapse-button{order:-1}.si-split-part-title{font-weight:600;flex:1}.si-split-part-actions{padding-inline:8px;flex:0 0 auto}.si-split-button{display:inline-block;padding:4px;color:var(--element-text-primary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;font-size:20px;line-height:1;vertical-align:middle;-webkit-user-select:none;user-select:none;background:none;border:0;cursor:pointer}.si-split-button:hover{background:var(--element-action-secondary-hover)}:host-context(.vertical)>:host .si-split-button{--orientation-rotate: rotate(90deg)}[dir=rtl] :host-context(.horizontal)>:host .si-split-button{--orientation-rtl: scaleX(-1)}:dir(rtl) :host-context(.horizontal)>:host .si-split-button{--orientation-rtl: scaleX(-1)}:host(.is-collapsed) .si-split-button{--collapse-rotate: rotate(180deg)}:host(.collapse-start) .si-split-button{--collapse-direction: rotate(180deg)}.si-split-button .collapse-icon{transform:var(--orientation-rotate, rotate(0)) var(--collapse-rotate, rotate(0)) var(--collapse-direction, rotate(0)) var(--orientation-rtl, scaleX(1))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], collapseDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseDirection", required: false }] }], collapseIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseIconClass", required: false }] }], collapseToMinSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseToMinSize", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], removeContentOnCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeContentOnCollapse", required: false }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], showCollapseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCollapseButton", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], stateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], collapseOthers: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseOthers", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], collapseChanged: [{ type: i0.Output, args: ["collapseChanged"] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }] } });
 
 class SiSplitComponent {
-    /** @defaultValue 16 */
-    gutterSize = 16;
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    _orientation = signal('horizontal', ...(ngDevMode ? [{ debugName: "_orientation" }] : []));
-    get orientation() {
-        return this._orientation();
-    }
-    set orientation(value) {
-        this._orientation.set(value);
-    }
-    /** @defaultValue [] */
-    sizes = [];
+    /**
+     * Size of the gutter (divider) between split parts in pixels.
+     *
+     * @defaultValue 16
+     */
+    gutterSize = input(16, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gutterSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines the split layout direction.
+     *
+     * @defaultValue 'horizontal'
+     */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Initial relative sizes of the split parts as fractional values.
+     *
+     * @defaultValue []
+     */
+    // eslint-disable-next-line @angular-eslint/prefer-signal-model
+    sizes = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizes" }] : /* istanbul ignore next */ []));
     /**
      * An optional stateId to uniquely identify a component instance.
      * Required for persistence of ui state.
      */
-    stateId;
-    sizesChange = new EventEmitter();
-    parts;
-    gutters = [];
-    // eslint-disable-next-line
-    gridTemplateRows = signal('', ...(ngDevMode ? [{ debugName: "gridTemplateRows" }] : []));
-    // eslint-disable-next-line
-    gridTemplateColumns = signal('', ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : []));
-    // eslint-disable-next-line
-    gridTemplateAreas = signal('', ...(ngDevMode ? [{ debugName: "gridTemplateAreas" }] : []));
+    stateId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "stateId" }] : /* istanbul ignore next */ []));
+    sizesChange = output();
+    parts = contentChildren(SiSplitPartComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parts" }] : /* istanbul ignore next */ []));
+    gutters = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gutters" }] : /* istanbul ignore next */ []));
+    gridTemplate = computed(() => {
+        if (!this.initialized()) {
+            return '';
+        }
+        return this.parts()
+            .map(part => part.collapsedState()
+            ? part.collapseToMinSize()
+                ? `${part.minSize()}px`
+                : 'min-content'
+            : part.actualSize()
+                ? part.scale() === 'auto'
+                    ? `minmax(${part.minSize()}px, ${part.actualSize()}fr)`
+                    : `minmax(${part.minSize()}px, ${part.actualSize()}px)`
+                : `minmax(${part.minSize()}px, ${part.fractionalSize() * this.fractionalSizeToExpandedSizeFactor()}fr)`)
+            .join(' min-content ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridTemplate" }] : /* istanbul ignore next */ []));
+    gridTemplateRows = computed(() => this.orientation() === 'vertical' ? this.gridTemplate() : '1fr', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridTemplateRows" }] : /* istanbul ignore next */ []));
+    gridTemplateColumns = computed(() => this.orientation() === 'horizontal' ? this.gridTemplate() : '1fr', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : /* istanbul ignore next */ []));
+    gridTemplateAreas = computed(() => {
+        if (!this.initialized()) {
+            return '';
+        }
+        const areaNames = this.parts()
+            .map((part, index) => [`p-${index}`, part.after() ? `g-${index}` : []])
+            .flat(2);
+        if (this.orientation() === 'horizontal') {
+            return `"${areaNames.join(' ')}"`;
+        }
+        else {
+            return `"${areaNames.join('" "')}"`;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridTemplateAreas" }] : /* istanbul ignore next */ []));
     elementRef = inject((ElementRef));
     ngZone = inject(NgZone);
     changeDetectorRef = inject(ChangeDetectorRef);
     document = inject(DOCUMENT);
     uiStateService = inject(SI_UI_STATE_SERVICE, { optional: true });
+    destroyRef = inject(DestroyRef);
     // New parts won't be measured, so we need this to scale up their fractional size to the expanded size.
     // Using 10, as the sum of all fractional sizes is 1, so we need to scale them up as fr-values should be >= 1.
-    fractionalSizeToExpandedSizeFactor = 10;
-    ngOnChanges(changes) {
-        if (changes.sizes && !changes.sizes.firstChange) {
-            this.sizes.forEach((size, index) => {
-                const part = this.parts.get(index);
-                if (part) {
-                    part.fractionalSize.set(size);
-                    part.expandedSize.set(undefined);
+    fractionalSizeToExpandedSizeFactor = signal(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fractionalSizeToExpandedSizeFactor" }] : /* istanbul ignore next */ []));
+    initialized = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const sizes = this.sizes();
+            untracked(() => {
+                if (!this.initialized()) {
+                    return;
                 }
+                sizes.forEach((size, index) => {
+                    const part = this.parts()[index];
+                    if (part) {
+                        part.fractionalSize.set(size);
+                        part.expandedSize.set(undefined);
+                    }
+                });
+                this.alignRelativeSizes();
             });
-            this.alignRelativeSizes();
-        }
+        });
+        toObservable(this.parts)
+            .pipe(observeOn(asapScheduler), takeUntilDestroyed())
+            .subscribe(() => this.setupParts());
     }
-    ngAfterContentInit() {
-        this.parts.changes.pipe(observeOn(asapScheduler)).subscribe(() => {
-            this.changeDetectorRef.markForCheck();
-            this.gutters = [];
-            for (let index = 0; index < this.parts.length; index++) {
-                const component = this.parts.get(index);
-                component.index = index;
-                component.after = this.parts.get(index + 1);
-                component.before = this.parts.get(index - 1);
-                component.fractionalSize.set(this.sizes[index]);
-                component.saveUIState = () => this.saveUIState();
-                if (component.after) {
-                    this.gutters.push({
-                        before: component,
-                        after: this.parts.get(index + 1),
-                        visible: computed(() => {
-                            const afterPart = component.after.nextExpandedAfter();
-                            return !afterPart.collapsedState() && !component.collapsedState();
-                        })
-                    });
-                }
+    setupParts() {
+        this.initialized.set(true);
+        const gutters = [];
+        const parts = this.parts();
+        for (let index = 0; index < parts.length; index++) {
+            const component = parts[index];
+            component.index = index;
+            component.after.set(parts[index + 1]);
+            component.before.set(parts[index - 1]);
+            component.fractionalSize.set(this.sizes()[index]);
+            component.saveUIState = () => this.saveUIState();
+            if (component.after()) {
+                gutters.push({
+                    before: component,
+                    after: parts[index + 1],
+                    visible: computed(() => {
+                        const afterPart = component.after().nextExpandedAfter();
+                        return !afterPart.collapsedState() && !component.collapsedState();
+                    })
+                });
             }
-            this.alignRelativeSizes();
-            this.updateFractionalSizeToExpandSizeFactor();
-            this.restoreFormUIState();
-            const gridTemplate = computed(() => this.parts
-                .map(part => part.collapsedState()
-                ? part.collapseToMinSize
-                    ? `${part.minSize}px`
-                    : 'min-content'
-                : part.actualSize()
-                    ? part.scale === 'auto'
-                        ? `minmax(${part.minSize}px, ${part.actualSize()}fr)`
-                        : `minmax(${part.minSize}px, ${part.actualSize()}px)`
-                    : `minmax(${part.minSize}px, ${part.fractionalSize() * this.fractionalSizeToExpandedSizeFactor}fr)`)
-                .join(' min-content '), ...(ngDevMode ? [{ debugName: "gridTemplate" }] : []));
-            this.gridTemplateRows = computed(() => this._orientation() === 'vertical' ? gridTemplate() : '1fr', ...(ngDevMode ? [{ debugName: "gridTemplateRows" }] : []));
-            this.gridTemplateColumns = computed(() => this._orientation() === 'horizontal' ? gridTemplate() : '1fr', ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : []));
-            this.gridTemplateAreas = computed(() => {
-                const areaNames = this.parts
-                    .map((part, index) => [`p-${index}`, part.after ? `g-${index}` : []])
-                    .flat(2);
-                if (this._orientation() === 'horizontal') {
-                    return `"${areaNames.join(' ')}"`;
-                }
-                else {
-                    return `"${areaNames.join('" "')}"`;
-                }
-            }, ...(ngDevMode ? [{ debugName: "gridTemplateAreas" }] : []));
-            setTimeout(() => this.refreshAllPartSizes());
-        });
-        this.parts.notifyOnChanges();
+        }
+        this.gutters.set(gutters);
+        this.alignRelativeSizes();
+        this.updateFractionalSizeToExpandSizeFactor();
+        this.restoreFromUIState();
+        setTimeout(() => this.refreshAllPartSizes());
     }
     alignRelativeSizes() {
-        const requestedNoSize = this.parts.filter(part => !part.size && !part.fractionalSize());
-        const requestedRelSize = this.parts.filter(part => part.fractionalSize() && !part.size);
+        const parts = this.parts();
+        const requestedNoSize = parts.filter(part => !part.size() && !part.fractionalSize());
+        const requestedRelSize = parts.filter(part => part.fractionalSize() && !part.size());
         if (requestedRelSize.length) {
             const totalRequestedRelSize = requestedRelSize.reduce((a, b) => a + b.fractionalSize(), 0);
             const averageRelSize = totalRequestedRelSize / requestedRelSize.length;
@@ -373,27 +397,27 @@ class SiSplitComponent {
     updateFractionalSizeToExpandSizeFactor() {
         let previousScalableFractionalSum = 0;
         let previousScalableExpandedSizeSum = 0;
-        for (let index = 0; index < this.parts.length; index++) {
-            const component = this.parts.get(index);
-            if (component.scale === 'auto' && component.expandedSize() !== undefined) {
+        for (const component of this.parts()) {
+            if (component.scale() === 'auto' && component.expandedSize() !== undefined) {
                 previousScalableExpandedSizeSum += component.expandedSize();
                 previousScalableFractionalSum += component.fractionalSize();
             }
         }
-        this.fractionalSizeToExpandedSizeFactor = previousScalableFractionalSum
+        this.fractionalSizeToExpandedSizeFactor.set(previousScalableFractionalSum
             ? previousScalableExpandedSizeSum / previousScalableFractionalSum
-            : 10;
+            : 10);
     }
     refreshAllPartSizes() {
-        const refParts = this.parts.filter(part => !part.collapsedState() &&
-            part.scale === 'auto' &&
+        const parts = this.parts();
+        const refParts = parts.filter(part => !part.collapsedState() &&
+            part.scale() === 'auto' &&
             (part.expandedSize() || part.fractionalSize()));
         const beforeFrSum = refParts.reduce((a, b) => a + (b.expandedSize() ?? b.fractionalSize()), 0);
-        this.parts.forEach(part => part.refreshSizePx(this.orientation));
+        parts.forEach(part => part.refreshSizePx(this.orientation()));
         const afterFrSum = refParts.reduce((a, b) => a + b.expandedSize(), 0);
-        const beforeToAfterFactor = afterFrSum / beforeFrSum;
-        this.parts
-            .filter(part => part.collapsedState() && (part.scale === 'auto' || part.expandedSize() === undefined))
+        const beforeToAfterFactor = beforeFrSum > 0 ? afterFrSum / beforeFrSum : 1;
+        parts
+            .filter(part => part.collapsedState() && (part.scale() === 'auto' || part.expandedSize() === undefined))
             .forEach(part => part.expandedSize.update(prev => (prev ?? part.fractionalSize()) * beforeToAfterFactor));
     }
     resizeStart(gutter, event) {
@@ -405,17 +429,17 @@ class SiSplitComponent {
         let appliedDelta = 0;
         const rtl = isRTL();
         const startPosition = this.getPosition(event);
-        const minDelta = -1 * (beforeSize - gutter.before.minSize);
-        const maxDelta = afterSize - afterPart.minSize;
+        const minDelta = -1 * (beforeSize - gutter.before.minSize());
+        const maxDelta = afterSize - afterPart.minSize();
         const containerSize = this.measureContainerSize();
         event.preventDefault(); // prevents text-selection
         this.ngZone.runOutsideAngular(() => {
             merge(fromEvent(this.document, 'mousemove'), fromEvent(this.document, 'touchmove'))
-                .pipe(takeUntil(merge(fromEvent(this.document, 'mouseup'), fromEvent(this.document, 'touchend'))))
+                .pipe(takeUntil(merge(fromEvent(this.document, 'mouseup'), fromEvent(this.document, 'touchend'))), takeUntilDestroyed(this.destroyRef))
                 .subscribe({
                 next: move => {
                     let delta = this.getPosition(move) - startPosition;
-                    if (rtl && this.orientation === 'horizontal') {
+                    if (rtl && this.orientation() === 'horizontal') {
                         delta *= -1;
                     }
                     delta -= appliedDelta;
@@ -433,13 +457,13 @@ class SiSplitComponent {
                     appliedDelta += delta;
                     gutter.before.expandedSize.set(beforeSize);
                     afterPart.expandedSize.set(afterSize);
-                    if (this.orientation === 'vertical') {
+                    if (this.orientation() === 'vertical') {
                         this.elementRef.nativeElement.style.setProperty('grid-template-rows', this.gridTemplateRows());
                     }
                     else {
                         this.elementRef.nativeElement.style.setProperty('grid-template-columns', this.gridTemplateColumns());
                     }
-                    this.ngZone.run(() => this.sizesChange.emit(this.parts.map(part => (part.actualSize() * 100) / containerSize)));
+                    this.ngZone.run(() => this.sizesChange.emit(this.parts().map(part => (part.actualSize() * 100) / containerSize)));
                 },
                 complete: () => this.saveUIState()
             });
@@ -447,7 +471,7 @@ class SiSplitComponent {
     }
     measureContainerSize() {
         const rect = this.elementRef.nativeElement.getBoundingClientRect();
-        if (this._orientation() === 'vertical') {
+        if (this.orientation() === 'vertical') {
             return rect.height;
         }
         else {
@@ -456,39 +480,42 @@ class SiSplitComponent {
     }
     getPosition(event) {
         const positionObject = event.touches?.[0] ?? event;
-        return this.orientation === 'horizontal'
+        return this.orientation() === 'horizontal'
             ? (positionObject.clientX ?? 0)
             : (positionObject.clientY ?? 0);
     }
     saveUIState() {
-        if (!this.stateId || !this.uiStateService) {
+        const stateId = this.stateId();
+        if (!stateId || !this.uiStateService) {
             return;
         }
         const containerSize = this.measureContainerSize();
-        const state = this.parts.reduce((partState, part) => {
-            if (part.stateId) {
-                partState[part.stateId] = {
+        const state = this.parts().reduce((partState, part) => {
+            const partStateId = part.stateId();
+            if (partStateId) {
+                partState[partStateId] = {
                     size: ((part.expandedSize() ?? 0) * 100) / containerSize,
-                    initialSize: this.sizes[part.index],
-                    expanded: part.expanded
+                    initialSize: this.sizes()[part.index],
+                    expanded: !part.collapsedState()
                 };
             }
             return partState;
         }, {});
-        this.uiStateService.save(this.stateId, state);
+        this.uiStateService.save(stateId, state);
     }
-    restoreFormUIState() {
-        if (!this.stateId || !this.uiStateService) {
+    restoreFromUIState() {
+        const stateId = this.stateId();
+        if (!stateId || !this.uiStateService) {
             return;
         }
-        this.uiStateService.load(this.stateId).then(uiState => {
+        this.uiStateService.load(stateId).then(uiState => {
             if (!uiState) {
                 return;
             }
-            this.parts
-                .filter(part => part.stateId)
-                .map(part => ({ part, state: uiState[part.stateId] }))
-                .filter(({ part, state }) => this.sizes[part.index] === state?.initialSize)
+            this.parts()
+                .filter(part => part.stateId())
+                .map(part => ({ part, state: uiState[part.stateId()] }))
+                .filter(({ part, state }) => this.sizes()[part.index] === state?.initialSize)
                 .forEach(({ part, state }) => {
                 part.expandedSize.set(undefined);
                 part.fractionalSize.set(state?.size);
@@ -497,45 +524,32 @@ class SiSplitComponent {
             setTimeout(() => this.refreshAllPartSizes());
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSplitComponent, isStandalone: true, selector: "si-split", inputs: { gutterSize: "gutterSize", orientation: "orientation", sizes: "sizes", stateId: "stateId" }, outputs: { sizesChange: "sizesChange" }, host: { properties: { "class": "_orientation()", "style.grid-template-rows": "gridTemplateRows()", "style.grid-template-columns": "gridTemplateColumns()", "style.grid-template-areas": "gridTemplateAreas()" } }, queries: [{ propertyName: "parts", predicate: SiSplitPartComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content />\n\n@for (gutter of gutters; track $index) {\n  @if ($index < parts.length - 1) {\n    <div\n      class=\"si-split-gutter\"\n      [class.d-none]=\"!gutter.visible()\"\n      [style.grid-area]=\"'g-' + $index\"\n      [style.width.px]=\"orientation === 'horizontal' ? gutterSize : null\"\n      [style.height.px]=\"orientation === 'vertical' ? gutterSize : null\"\n      (mousedown)=\"resizeStart(gutter, $event)\"\n      (touchstart)=\"resizeStart(gutter, $event)\"\n    ></div>\n  }\n}\n", styles: [":host{display:grid;inline-size:100%;block-size:100%}.si-split-gutter{flex:0 0 auto;background:var(--element-base-0);cursor:ew-resize}.si-split-gutter:before{display:block;content:\"\";position:relative;inset-block-start:50%;margin-block-start:-20px;inset-inline-start:50%;margin-inline-start:-3px;inline-size:6px;block-size:40px;background:var(--element-ui-2);border-radius:3px}:host(.vertical)>.si-split-gutter{inline-size:auto;cursor:ns-resize}:host(.vertical)>.si-split-gutter:before{transform:rotate(90deg)}.si-split-gutter:hover:before{background:var(--element-ui-0-hover)}.si-split-gutter:active:before{background:var(--element-ui-0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiSplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SiSplitComponent, isStandalone: true, selector: "si-split", inputs: { gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sizesChange: "sizesChange" }, host: { properties: { "class": "orientation()", "style.grid-template-rows": "gridTemplateRows()", "style.grid-template-columns": "gridTemplateColumns()", "style.grid-template-areas": "gridTemplateAreas()" } }, queries: [{ propertyName: "parts", predicate: SiSplitPartComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n\n@for (gutter of gutters(); track $index) {\n  @if ($index < parts().length - 1) {\n    <div\n      class=\"si-split-gutter\"\n      [class.d-none]=\"!gutter.visible()\"\n      [style.grid-area]=\"'g-' + $index\"\n      [style.width.px]=\"orientation() === 'horizontal' ? gutterSize() : null\"\n      [style.height.px]=\"orientation() === 'vertical' ? gutterSize() : null\"\n      (mousedown)=\"resizeStart(gutter, $event)\"\n      (touchstart)=\"resizeStart(gutter, $event)\"\n    ></div>\n  }\n}\n", styles: [":host{display:grid;inline-size:100%;block-size:100%}.si-split-gutter{flex:0 0 auto;background:var(--element-base-0);cursor:col-resize}.si-split-gutter:before{display:block;content:\"\";position:relative;inset-block-start:50%;margin-block-start:-20px;inset-inline-start:50%;margin-inline-start:-1px;inline-size:2px;block-size:40px;background:var(--element-ui-2)}:host(.vertical)>.si-split-gutter{inline-size:auto;cursor:row-resize}:host(.vertical)>.si-split-gutter:before{transform:rotate(90deg)}.si-split-gutter:hover:before{background:var(--element-ui-0-hover)}.si-split-gutter:active:before{background:var(--element-ui-0)}\n"] });
 }
 __decorate([
     WebComponentContentChildren(SiSplitPartComponent)
 ], SiSplitComponent.prototype, "parts", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSplitComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiSplitComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-split', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class]': '_orientation()',
+            args: [{ selector: 'si-split', host: {
+                        '[class]': 'orientation()',
                         '[style.grid-template-rows]': 'gridTemplateRows()',
                         '[style.grid-template-columns]': 'gridTemplateColumns()',
                         '[style.grid-template-areas]': 'gridTemplateAreas()'
-                    }, template: "<ng-content />\n\n@for (gutter of gutters; track $index) {\n  @if ($index < parts.length - 1) {\n    <div\n      class=\"si-split-gutter\"\n      [class.d-none]=\"!gutter.visible()\"\n      [style.grid-area]=\"'g-' + $index\"\n      [style.width.px]=\"orientation === 'horizontal' ? gutterSize : null\"\n      [style.height.px]=\"orientation === 'vertical' ? gutterSize : null\"\n      (mousedown)=\"resizeStart(gutter, $event)\"\n      (touchstart)=\"resizeStart(gutter, $event)\"\n    ></div>\n  }\n}\n", styles: [":host{display:grid;inline-size:100%;block-size:100%}.si-split-gutter{flex:0 0 auto;background:var(--element-base-0);cursor:ew-resize}.si-split-gutter:before{display:block;content:\"\";position:relative;inset-block-start:50%;margin-block-start:-20px;inset-inline-start:50%;margin-inline-start:-3px;inline-size:6px;block-size:40px;background:var(--element-ui-2);border-radius:3px}:host(.vertical)>.si-split-gutter{inline-size:auto;cursor:ns-resize}:host(.vertical)>.si-split-gutter:before{transform:rotate(90deg)}.si-split-gutter:hover:before{background:var(--element-ui-0-hover)}.si-split-gutter:active:before{background:var(--element-ui-0)}\n"] }]
-        }], propDecorators: { gutterSize: [{
-                type: Input
-            }], orientation: [{
-                type: Input
-            }], sizes: [{
-                type: Input
-            }], stateId: [{
-                type: Input
-            }], sizesChange: [{
-                type: Output
-            }], parts: [{
-                type: ContentChildren,
-                args: [SiSplitPartComponent]
-            }] } });
+                    }, template: "<ng-content />\n\n@for (gutter of gutters(); track $index) {\n  @if ($index < parts().length - 1) {\n    <div\n      class=\"si-split-gutter\"\n      [class.d-none]=\"!gutter.visible()\"\n      [style.grid-area]=\"'g-' + $index\"\n      [style.width.px]=\"orientation() === 'horizontal' ? gutterSize() : null\"\n      [style.height.px]=\"orientation() === 'vertical' ? gutterSize() : null\"\n      (mousedown)=\"resizeStart(gutter, $event)\"\n      (touchstart)=\"resizeStart(gutter, $event)\"\n    ></div>\n  }\n}\n", styles: [":host{display:grid;inline-size:100%;block-size:100%}.si-split-gutter{flex:0 0 auto;background:var(--element-base-0);cursor:col-resize}.si-split-gutter:before{display:block;content:\"\";position:relative;inset-block-start:50%;margin-block-start:-20px;inset-inline-start:50%;margin-inline-start:-1px;inline-size:2px;block-size:40px;background:var(--element-ui-2)}:host(.vertical)>.si-split-gutter{inline-size:auto;cursor:row-resize}:host(.vertical)>.si-split-gutter:before{transform:rotate(90deg)}.si-split-gutter:hover:before{background:var(--element-ui-0-hover)}.si-split-gutter:active:before{background:var(--element-ui-0)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }], stateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateId", required: false }] }], sizesChange: [{ type: i0.Output, args: ["sizesChange"] }], parts: [] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 class SiSplitModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSplitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiSplitModule, imports: [SiSplitComponent, SiSplitPartComponent], exports: [SiSplitComponent, SiSplitPartComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSplitModule, imports: [SiSplitPartComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiSplitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: SiSplitModule, imports: [SiSplitComponent, SiSplitPartComponent], exports: [SiSplitComponent, SiSplitPartComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiSplitModule, imports: [SiSplitPartComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSplitModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiSplitModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiSplitComponent, SiSplitPartComponent],