@siemens/element-ng 49.16.0 → 51.0.0-rc.10

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

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, computed, inject, ElementRef, booleanAttribute, numberAttribute, Input, Output, ChangeDetectionStrategy, Component, NgZone, ChangeDetectorRef, DOCUMENT, DestroyRef, ContentChildren, NgModule } from '@angular/core';
+import { input, booleanAttribute, numberAttribute, output, signal, linkedSignal, computed, 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 { elementDoubleRight } from '@siemens/element-icons';
+import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
+import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { __decorate } from 'tslib';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+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';
@@ -13,38 +14,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 = [];
+    icons = addIcons({ elementDoubleRight });
     /**
-     * @defaultValue 'start'
+     * Action buttons displayed in the split part header.
+     *
+     * @defaultValue []
+     */
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines whether and in which direction the split part can collapse.
+     * When unset, the collapse button is hidden.
+     *
+     * @defaultValue undefined
      */
-    collapseDirection = 'start';
+    collapsible = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "collapsible" }] : /* 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(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { 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
@@ -53,41 +67,38 @@ class SiSplitPartComponent {
      *
      * @defaultValue false
      */
-    removeContentOnCollapse = false;
-    /**
-     * 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';
-    /**
-     * Defines if the collapse button of a split part is displayed. Default value is true.
-     *
-     * @defaultValue true
-     */
-    showCollapseButton = true;
+    removeContentOnCollapse = input(false, { ...(ngDevMode ? { debugName: "removeContentOnCollapse" } : /* 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'
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_SPLIT.COLLAPSE_LABEL:Collapse`)
+     * ```
      */
-    collapseLabel = 'collapse';
+    collapseLabel = input(t(() => $localize `:@@SI_SPLIT.COLLAPSE_LABEL: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.
+     */
+    size = input.required({ ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
-     * Expanded size in px.
+     * Unit for the configured {@link size}.
      */
-    size;
+    unit = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
     /**
      * 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.
@@ -95,21 +106,49 @@ 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 });
+    /**
+     * Emits when the part is collapsed or expanded.
+     */
+    collapseChanged = output();
+    /**
+     * Emits the part's expanded state and size after it is toggled.
+     */
+    stateChange = output();
     /** @internal */
     index = 0;
     /** @internal */
-    before;
+    before = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "before" }] : /* istanbul ignore next */ []));
     /** @internal */
-    after;
+    after = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "after" }] : /* istanbul ignore next */ []));
     /** @internal */
-    fractionalSize = signal(undefined, ...(ngDevMode ? [{ debugName: "fractionalSize" }] : []));
+    fractionalSize = linkedSignal(() => (this.unit() === 'fr' ? this.size() : undefined), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fractionalSize" }] : /* istanbul ignore next */ []));
     /** @internal */
-    collapsedSize = signal(0, ...(ngDevMode ? [{ debugName: "collapsedSize" }] : []));
-    /** @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 collapsible}
+     * input but can be overwritten while cascading collapse state to sibling parts.
+     * @internal
+     */
+    collapseDirectionState = linkedSignal(() => this.collapsible(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseDirectionState" }] : /* istanbul ignore next */ []));
     /**
      * Get collapsed state.
      * @returns True if the split part is collapsed, false is expanded.
@@ -118,14 +157,16 @@ class SiSplitPartComponent {
         return this.collapsedState();
     }
     /** @internal */
-    expandedSize = signal(undefined, ...(ngDevMode ? [{ debugName: "expandedSize" }] : []));
+    expandedSize = linkedSignal({ ...(ngDevMode ? { debugName: "expandedSize" } : /* istanbul ignore next */ {}), source: () => ({ size: this.size(), unit: this.unit() }),
+        computation: source => (source.unit === 'fr' ? undefined : source.size) });
     /** @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 */
@@ -133,34 +174,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) {
@@ -179,224 +211,163 @@ 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() === 'to-end') {
             this.collapsedState.set(true);
-            this.collapseDirection = 'end';
-            this.after?.refreshCollapsedToEnd();
+            this.collapseDirectionState.set('to-end');
+            this.after()?.refreshCollapsedToEnd();
         }
     }
     refreshCollapseToStart() {
-        if (this.after?.collapsedState() && this.after.collapseDirection === 'start') {
+        const after = this.after();
+        if (after?.collapsedState() && after.collapseDirectionState() === 'to-start') {
             this.collapsedState.set(true);
-            this.collapseDirection = 'start';
-            this.before?.refreshCollapseToStart();
+            this.collapseDirectionState.set('to-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=\"btn btn-icon btn-tertiary-ghost 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=\"btn btn-icon btn-tertiary-ghost 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}: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.8", ngImport: i0, type: SiSplitPartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiSplitPartComponent, isStandalone: true, selector: "si-split-part", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", 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 }, 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: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: true, 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() === \"to-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=\"btn btn-icon btn-tertiary-ghost 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 (collapsible()) {\n      <div class=\"si-split-part-collapse-button\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-tertiary-ghost si-split-button\"\n          [attr.aria-label]=\"collapseLabel() | translate\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon class=\"collapse-icon\" [icon]=\"collapseIconClass() ?? icons.elementDoubleRight\" />\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:var(--si-sys-sizing-spacing-y-30) var(--si-sys-sizing-spacing-x-30);background:var(--si-sys-background-0);block-size:40px}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header{flex:auto;flex-direction:column;max-block-size:100%;padding:var(--si-sys-sizing-spacing-y-30) var(--si-sys-sizing-spacing-x-30)}: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:var(--si-sys-sizing-spacing-x-40);flex:0 0 auto}: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.8", 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() === "to-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=\"btn btn-icon btn-tertiary-ghost 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=\"btn btn-icon btn-tertiary-ghost 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}: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=\"btn btn-icon btn-tertiary-ghost 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 (collapsible()) {\n      <div class=\"si-split-part-collapse-button\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-tertiary-ghost si-split-button\"\n          [attr.aria-label]=\"collapseLabel() | translate\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon class=\"collapse-icon\" [icon]=\"collapseIconClass() ?? icons.elementDoubleRight\" />\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:var(--si-sys-sizing-spacing-y-30) var(--si-sys-sizing-spacing-x-30);background:var(--si-sys-background-0);block-size:40px}:host-context(.horizontal)>:host(.is-collapsed) .si-split-part-header{flex:auto;flex-direction:column;max-block-size:100%;padding:var(--si-sys-sizing-spacing-y-30) var(--si-sys-sizing-spacing-x-30)}: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:var(--si-sys-sizing-spacing-x-40);flex:0 0 auto}: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 }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", 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 }] }], 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: true }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: true }] }], 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 */ []));
     /**
      * 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 */ []));
+    /**
+     * Emits the sizes of all parts as percentages when the user resizes a gutter.
+     */
+    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.unit() === 'px'
+                ? `minmax(${part.minSize()}px, ${part.expandedSize() ?? part.size()}px)`
+                : `minmax(${part.minSize()}px, ${part.expandedSize() === undefined
+                    ? part.fractionalSize() * this.fractionalSizeToExpandedSizeFactor()
+                    : part.fractionalSize()}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.parts) {
-            this.sizes.forEach((size, index) => {
-                const part = this.parts.get(index);
-                if (part) {
-                    part.fractionalSize.set(size);
-                    part.expandedSize.set(undefined);
-                }
-            });
-            this.alignRelativeSizes();
-        }
+    // Existing fr parts are measured in pixels after layout or dragging, so their fr weights become
+    // pixel-derived. A newly added fr part has not been measured yet and still has its configured
+    // weight. This factor converts that configured weight into the same scale until it is measured.
+    // It is the ratio of measured expanded sizes to configured weights of visible measured fr parts.
+    fractionalSizeToExpandedSizeFactor = computed(() => {
+        const measuredParts = this.parts().filter(part => !part.collapsedState() && part.unit() === 'fr' && part.expandedSize() !== undefined);
+        const configuredSizeSum = measuredParts.reduce((sum, part) => sum + part.size(), 0);
+        const expandedSizeSum = measuredParts.reduce((sum, part) => sum + part.expandedSize(), 0);
+        return configuredSizeSum ? expandedSizeSum / configuredSizeSum : 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fractionalSizeToExpandedSizeFactor" }] : /* istanbul ignore next */ []));
+    initialized = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
+    constructor() {
+        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();
-                        })
-                    });
-                }
-            }
-            this.alignRelativeSizes();
-            this.updateFractionalSizeToExpandSizeFactor();
-            this.restoreFromUIState();
-            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();
-    }
-    alignRelativeSizes() {
-        const requestedNoSize = this.parts.filter(part => !part.size && !part.fractionalSize());
-        const requestedRelSize = this.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;
-            const totalAssignedRelSize = totalRequestedRelSize + requestedNoSize.length * averageRelSize;
-            requestedNoSize.forEach(part => part.fractionalSize.set(averageRelSize / totalAssignedRelSize));
-            requestedRelSize.forEach(part => part.fractionalSize.set(part.fractionalSize() / totalAssignedRelSize));
-        }
-        else {
-            requestedNoSize.forEach(part => part.fractionalSize.set(1 / requestedNoSize.length));
-        }
-    }
-    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) {
-                previousScalableExpandedSizeSum += component.expandedSize();
-                previousScalableFractionalSum += component.fractionalSize();
+    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.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.fractionalSizeToExpandedSizeFactor = previousScalableFractionalSum
-            ? previousScalableExpandedSizeSum / previousScalableFractionalSum
-            : 10;
+        this.gutters.set(gutters);
+        this.restoreFromUIState();
+        setTimeout(() => this.refreshAllPartSizes());
     }
     refreshAllPartSizes() {
-        const refParts = this.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));
-        const afterFrSum = refParts.reduce((a, b) => a + b.expandedSize(), 0);
-        const beforeToAfterFactor = beforeFrSum > 0 ? afterFrSum / beforeFrSum : 1;
-        this.parts
-            .filter(part => part.collapsedState() && (part.scale === 'auto' || part.expandedSize() === undefined))
-            .forEach(part => part.expandedSize.update(prev => (prev ?? part.fractionalSize()) * beforeToAfterFactor));
+        this.parts().forEach(part => {
+            part.refreshSizePx(this.orientation());
+            if (!part.collapsedState() && part.unit() === 'fr') {
+                part.fractionalSize.set(part.expandedSize());
+            }
+        });
     }
     resizeStart(gutter, event) {
         this.refreshAllPartSizes();
@@ -407,9 +378,8 @@ 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 containerSize = this.measureContainerSize();
+        const minDelta = -1 * (beforeSize - gutter.before.minSize());
+        const maxDelta = afterSize - afterPart.minSize();
         event.preventDefault(); // prevents text-selection
         this.ngZone.runOutsideAngular(() => {
             merge(fromEvent(this.document, 'mousemove'), fromEvent(this.document, 'touchmove'))
@@ -417,7 +387,7 @@ class SiSplitComponent {
                 .subscribe({
                 next: move => {
                     let delta = this.getPosition(move) - startPosition;
-                    if (rtl && this.orientation === 'horizontal') {
+                    if (rtl && this.orientation() === 'horizontal') {
                         delta *= -1;
                     }
                     delta -= appliedDelta;
@@ -435,21 +405,33 @@ class SiSplitComponent {
                     appliedDelta += delta;
                     gutter.before.expandedSize.set(beforeSize);
                     afterPart.expandedSize.set(afterSize);
-                    if (this.orientation === 'vertical') {
+                    if (gutter.before.unit() === 'fr') {
+                        gutter.before.fractionalSize.set(beforeSize);
+                    }
+                    if (afterPart.unit() === 'fr') {
+                        afterPart.fractionalSize.set(afterSize);
+                    }
+                    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.emitSizesChange();
                 },
                 complete: () => this.saveUIState()
             });
         });
     }
+    emitSizesChange() {
+        const containerSize = this.measureContainerSize();
+        if (containerSize > 0) {
+            this.ngZone.run(() => this.sizesChange.emit(this.parts().map(part => (part.actualSize() * 100) / containerSize)));
+        }
+    }
     measureContainerSize() {
         const rect = this.elementRef.nativeElement.getBoundingClientRect();
-        if (this._orientation() === 'vertical') {
+        if (this.orientation() === 'vertical') {
             return rect.height;
         }
         else {
@@ -458,86 +440,88 @@ 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] = {
-                    size: ((part.expandedSize() ?? 0) * 100) / containerSize,
-                    initialSize: this.sizes[part.index],
-                    expanded: part.expanded
+        const state = this.parts().reduce((partState, part) => {
+            const partStateId = part.stateId();
+            if (partStateId) {
+                const unit = part.unit();
+                partState[partStateId] = {
+                    size: unit === 'px' ? part.expandedSize() : part.fractionalSize(),
+                    initialSize: part.size(),
+                    initialUnit: unit,
+                    expanded: !part.collapsedState()
                 };
             }
             return partState;
         }, {});
-        this.uiStateService.save(this.stateId, state);
+        this.uiStateService.save(stateId, state);
     }
     restoreFromUIState() {
-        if (!this.stateId || !this.uiStateService) {
+        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)
+            let restored = false;
+            this.parts()
+                .filter(part => part.stateId())
+                .map(part => ({ part, state: uiState[part.stateId()] }))
+                .filter((item) => !!item.state && item.state.initialUnit === item.part.unit())
                 .forEach(({ part, state }) => {
-                part.expandedSize.set(undefined);
-                part.fractionalSize.set(state?.size);
-                part.collapsedState.set(!(state?.expanded ?? true));
+                restored = true;
+                if (part.unit() === 'px') {
+                    part.expandedSize.set(state.size);
+                }
+                else {
+                    part.fractionalSize.set(state.size);
+                }
+                part.collapsedState.set(!state.expanded);
+            });
+            setTimeout(() => {
+                this.refreshAllPartSizes();
+                if (restored) {
+                    this.emitSizesChange();
+                }
             });
-            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.8", ngImport: i0, type: SiSplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 }, 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(--si-sys-background-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(--si-sys-border-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(--si-sys-border-accent-hover)}.si-split-gutter:active:before{background:var(--si-sys-border-accent-active)}\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.8", 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(--si-sys-background-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(--si-sys-border-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(--si-sys-border-accent-hover)}.si-split-gutter:active:before{background:var(--si-sys-border-accent-active)}\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 }] }], 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.8", ngImport: i0, type: SiSplitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: SiSplitModule, imports: [SiSplitComponent, SiSplitPartComponent], exports: [SiSplitComponent, SiSplitPartComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", 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.8", ngImport: i0, type: SiSplitModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiSplitComponent, SiSplitPartComponent],