@scion/components 19.0.0 → 19.2.0

package/fesm2022/scion-components-sashbox.mjs

@@ -1,10 +1,18 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, inject, ElementRef, NgZone, EventEmitter, Component, HostBinding, Output, ContentChildren, NgModule } from '@angular/core';
-import { switchMap, map, startWith, takeUntil } from 'rxjs/operators';
-import { BehaviorSubject, merge, Subject } from 'rxjs';
+import { input, booleanAttribute, inject, signal, TemplateRef, computed, linkedSignal, Directive, ElementRef, ChangeDetectorRef, effect, Component, output, contentChildren, NgZone, afterNextRender, IterableDiffers, untracked, HostBinding, NgModule } from '@angular/core';
 import { SciSplitterComponent } from '@scion/components/splitter';
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
+import { trigger, transition, style, animate } from '@angular/animations';
 
+/*
+ * Copyright (c) 2018-2025 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
 /**
  * Allows accessing the sashbox component from sashes.
  */
@@ -12,7 +20,7 @@ class SciSashBoxAccessor {
 }
 
 /*
- * Copyright (c) 2018-2019 Swiss Federal Railways
+ * Copyright (c) 2018-2025 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -40,130 +48,139 @@ class SciSashBoxAccessor {
  * </sci-sashbox>
  */
 class SciSashDirective {
-    sashTemplate;
-    _sashBoxAccessor;
-    _size = '1';
-    _flexGrow$ = new BehaviorSubject(0);
     /**
      * Specifies the sash size, either as fixed size with an explicit unit,
-     * or as a unitless proportion to distibute remaining space. A proportional
+     * or as a unitless proportion to distribute remaining space. A proportional
      * sash has the ability to grow or shrink if necessary, and must be >= 1.
      *
      * If not set, remaining space is distributed equally.
      */
-    set size(size) {
-        this._size = size ?? '1';
-    }
-    get size() {
-        return this._size;
-    }
+    size = input('1', { transform: (size) => size ?? '1' });
     /**
      * Specifies the minimal sash size in pixel or percent.
      * The min-size prevents the user from shrinking the sash below this minimal size.
      *
      * If the unit is omitted, the value is interpreted as a pixel value.
      */
-    minSize;
+    minSize = input();
     /**
-     * @internal
+     * Specifies an optional key to identify this sash.
+     *
+     * The key is used as the property key in the object emitted by {@link SciSashboxComponent.sashEnd2} to associate the size of this sash.
      */
-    element;
+    key = input();
     /**
+     * Controls whether to animate the entering and leaving of this sash, only if fixed-sized. Defaults to `false`.
+     *
+     * Enabling animation will mimic the behavior of a side panel that slides in or out.
+     *
+     * Note: Animates only sashes added or removed after the initial rendering.
+     */
+    animate = input(false, { transform: booleanAttribute });
+    _sashBoxAccessor = inject(SciSashBoxAccessor);
+    _component = signal(undefined);
+    /**
+     * Flex properties computed based on the configured {@link size}. Properties are updated when moving this sash.
+     */
+    _flexProperties = this.computeFlexProperties();
+    /**
+     * Represents the template used as sash content.
+     *
      * @internal
      */
-    set flexGrow(flexGrow) {
-        this._flexGrow$.next(flexGrow);
-    }
+    sashTemplate = inject(TemplateRef);
     /**
+     * Flex properties with normalized 'flex-grow' to ensure the sashes fill the entire sash-box space.
+     *
+     * Use these properties to lay out this sash in the sashbox's flex layout.
+     *
      * @internal
      */
-    get flexGrow() {
-        return this._flexGrow$.value;
-    }
+    flexProperties = this.normalizeFlexGrow(this._flexProperties);
     /**
+     * Returns if this sash has a fixed size, meaning that it has not the ability to grow or shrink.
+     *
      * @internal
      */
-    flexShrink;
+    isFixedSize = computed(() => Number.isNaN(+this.size()));
     /**
+     * Gets the component that renders this sash.
+     *
      * @internal
      */
-    flexBasis;
+    component = computed(() => this._component() ?? throwError('[SciSashbox] SashComponent not available yet.'));
     /**
-     * Normalized flex-grow proportion of this sash, which is a value >= 1.
+     * Sets the component that renders this sash.
      *
      * @internal
      */
-    flexGrowNormalized$;
-    constructor(sashTemplate, _sashBoxAccessor) {
-        this.sashTemplate = sashTemplate;
-        this._sashBoxAccessor = _sashBoxAccessor;
-        this.flexGrowNormalized$ = this._sashBoxAccessor.sashes$
-            .pipe(switchMap(sashes => merge(...sashes.map(sash => sash._flexGrow$))), map(() => this.normalizeFlexGrow(this.flexGrow)));
-    }
-    ngOnInit() {
-        this.setFlexItemProperties();
-    }
-    ngOnChanges(changes) {
-        this.setFlexItemProperties();
+    setComponent(component) {
+        this._component.set(component);
     }
     /**
-     * Returns if this sash has a fixed size, meaning that it has not the ability to grow or shrink if necessary.
+     * Returns the identity of this sash, or the passed index if not configured.
      *
      * @internal
      */
-    get isFixedSize() {
-        return Number.isNaN(+this.size);
+    computeKey(index) {
+        return this.key() ?? `${index}`;
     }
     /**
-     * Returns the effective sash size as rendered in the DOM.
+     * Updates the flex properties of this sash for layout in the sashbox's flex layout.
      *
      * @internal
      */
-    get computedSize() {
-        // Note: Use `boundingClientRect` to get the fractional size.
-        // see https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth
-        return this._sashBoxAccessor.direction === 'row' ? this.element.getBoundingClientRect().width : this.element.getBoundingClientRect().height;
+    updateFlexProperties(flexProperties) {
+        this._flexProperties.update(previousFlexProperties => ({ ...previousFlexProperties, ...flexProperties }));
     }
     /**
-     * Computes and sets the flex item properties based on the modelled size.
+     * Computes the flex properties to lay out this sash in the sashbox's flex layout based on the configured {@link size}.
      */
-    setFlexItemProperties() {
-        if (this.isFixedSize) {
-            // fixed-sized sash
-            this.flexGrow = 0;
-            this.flexShrink = 0;
-            this.flexBasis = `${this.size}`;
-        }
-        else {
-            // remaining space is distributed according to given proportion
-            const proportion = +this.size;
-            if (proportion < 1) {
-                throw Error(`[IllegalSashSizeError] The proportion for flexible sized sashes must be >=1 [size=${this.size}]`);
+    computeFlexProperties() {
+        return linkedSignal(() => {
+            const size = this.size();
+            if (this.isFixedSize()) {
+                // fixed-sized sash
+                return {
+                    flexGrow: 0,
+                    flexShrink: 0,
+                    flexBasis: `${size}`,
+                };
             }
-            this.flexGrow = proportion;
-            this.flexShrink = 1;
-            this.flexBasis = '0';
-        }
+            else {
+                // remaining space is distributed according to given proportion
+                const proportion = +size;
+                if (proportion < 1) {
+                    throw Error(`[IllegalSashSizeError] The proportion for flexible sized sashes must be >=1 [size=${this.size()}]`);
+                }
+                return {
+                    flexGrow: proportion,
+                    flexShrink: 1,
+                    flexBasis: '0',
+                };
+            }
+        });
     }
     /**
-     * Computes the normalized flex-grow proportion of the given sash, which is a value >= 1.
+     * Normalizes the 'flex-grow' of the passed {@link FlexProperties} to ensure that the sum of the 'flex-grow' proportions of all sashes is 1.
      *
-     * If the sum of all flex-grow proportions would be less than 1, then, the sashes would not fill the entire sash-box space.
-     * Without normalization in place, e.g., this could happen when removing a sash.
+     * If the sum of all flex-grow proportions were less than 1, the sashes would not fill the entire sash-box space.
+     * Without normalization, this could occur when a sash is removed.
      */
-    normalizeFlexGrow(flexGrow) {
-        if (flexGrow === 0) {
-            return 0;
-        }
-        const sashes = this._sashBoxAccessor.sashes;
-        const flexGrowSum = sashes.reduce((sum, sash) => sum + sash.flexGrow, 0);
-        if (flexGrowSum === 0) {
-            return 0;
-        }
-        return flexGrow / flexGrowSum;
+    normalizeFlexGrow(flexProperties) {
+        return computed(() => {
+            const sashes = this._sashBoxAccessor.sashes();
+            const { flexGrow, flexShrink, flexBasis } = flexProperties();
+            const flexGrowSum = sashes.reduce((sum, sash) => sum + sash._flexProperties().flexGrow, 0);
+            return {
+                flexGrow: flexGrow === 0 || flexGrowSum === 0 ? 0 : flexGrow / flexGrowSum, // Sum of normalized flex-grow proportions must be 1;
+                flexShrink,
+                flexBasis,
+            };
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashDirective, deps: [{ token: i0.TemplateRef }, { token: SciSashBoxAccessor }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: SciSashDirective, isStandalone: true, selector: "ng-template[sciSash]", inputs: { size: "size", minSize: "minSize" }, exportAs: ["sciSash"], usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: SciSashDirective, isStandalone: true, selector: "ng-template[sciSash]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["sciSash"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashDirective, decorators: [{
             type: Directive,
@@ -171,11 +188,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                     selector: 'ng-template[sciSash]',
                     exportAs: 'sciSash',
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: SciSashBoxAccessor }], propDecorators: { size: [{
-                type: Input
-            }], minSize: [{
-                type: Input
-            }] } });
+        }] });
+function throwError(error) {
+    throw Error(error);
+}
 
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways
@@ -187,32 +203,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  *  SPDX-License-Identifier: EPL-2.0
  */
 /**
- * Initializes {SashDirective} with the target {HTMLDivElement}.
+ * Provides access to the native {@link HTMLElement} of the host.
  */
-class SciSashInitializerDirective {
-    _host;
-    sash;
-    constructor(_host) {
-        this._host = _host;
-    }
-    ngOnChanges(changes) {
-        this.sash.element = this._host.nativeElement;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashInitializerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: SciSashInitializerDirective, isStandalone: true, selector: "div[sciSashInitializer].sash", inputs: { sash: ["sciSashInitializer", "sash"] }, usesOnChanges: true, ngImport: i0 });
+class SciElementRefDirective {
+    host = inject(ElementRef).nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciElementRefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: SciElementRefDirective, isStandalone: true, selector: "[sciElementRef]", exportAs: ["sciElementRef"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashInitializerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciElementRefDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'div[sciSashInitializer].sash',
+                    selector: '[sciElementRef]',
+                    exportAs: 'sciElementRef',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { sash: [{
-                type: Input,
-                args: [{ alias: 'sciSashInitializer', required: true }]
-            }] } });
+        }] });
 
 /*
- * Copyright (c) 2018-2019 Swiss Federal Railways
+ * Copyright (c) 2018-2025 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -221,28 +228,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  *  SPDX-License-Identifier: EPL-2.0
  */
 /**
- * Provides access to the native {@link HTMLElement} of the host.
+ * Represents a {@link SciSashDirective} in the DOM, displaying the specified sash template.
  */
-class SciElementRefDirective {
-    host;
-    nativeElement;
-    constructor(host) {
-        this.host = host;
-        this.nativeElement = host.nativeElement;
+class SashComponent {
+    /**
+     * Specifies the sash representing this component.
+     */
+    sash = input.required();
+    _host = inject(ElementRef).nativeElement;
+    _cd = inject(ChangeDetectorRef);
+    _sashBoxAccessor = inject(SciSashBoxAccessor);
+    animationState = linkedSignal(() => this.sash().animate() && this._sashBoxAccessor.afterFirstRender() ? 'enter' : null);
+    constructor() {
+        // Associate sash with this component.
+        effect(() => this.sash().setComponent(this));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciElementRefDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: SciElementRefDirective, isStandalone: true, selector: "[sciElementRef]", exportAs: ["sciElementRef"], ngImport: i0 });
+    /**
+     * Starts the leave animation, returning a signal to track animation completion.
+     */
+    startLeaveAnimation() {
+        // Detach change detector to prevent updates to the component during the animation.
+        this._cd.detach();
+        // Trigger 'leave' animation.
+        this.animationState.set('leave');
+        // Return signal to track animation completion.
+        return computed(() => void this.animationState(), { equal: () => false });
+    }
+    /**
+     * Notifies when ending the animation.
+     */
+    onAnimationEnd() {
+        this.animationState.set(null);
+    }
+    /**
+     * Gets the size of this sash in pixel.
+     */
+    get size() {
+        const { width, height } = this._host.getBoundingClientRect();
+        return this._sashBoxAccessor.direction() === 'row' ? width : height;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SashComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.0", type: SashComponent, isStandalone: true, selector: "sci-sash", inputs: { sash: { classPropertyName: "sash", publicName: "sash", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "@sash-animation.done": "onAnimationEnd();" }, properties: { "@sash-animation": "animationState()" } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"sash().sashTemplate\"/>\n", styles: [":host{display:grid;grid-auto-rows:100%;grid-auto-columns:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+            trigger('sash-animation', provideAnimation()),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SashComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-sash', imports: [
+                        NgTemplateOutlet,
+                    ], animations: [
+                        trigger('sash-animation', provideAnimation()),
+                    ], host: {
+                        '[@sash-animation]': 'animationState()',
+                        '(@sash-animation.done)': 'onAnimationEnd();',
+                    }, template: "<ng-container *ngTemplateOutlet=\"sash().sashTemplate\"/>\n", styles: [":host{display:grid;grid-auto-rows:100%;grid-auto-columns:100%;overflow:hidden}\n"] }]
+        }], ctorParameters: () => [] });
+/**
+ * Returns animation metadata to slide-in and slide-out a sash.
+ */
+function provideAnimation() {
+    return [
+        transition('void => enter', [
+            style({ 'flex-basis': 0 }),
+            animate(`125ms ease-out`, style({ 'flex-basis': '*' })),
+        ]),
+        transition('* => leave', [
+            style({ 'flex-basis': '*' }),
+            animate(`125ms ease-out`, style({ 'flex-basis': 0 })),
+        ]),
+    ];
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciElementRefDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[sciElementRef]',
-                    exportAs: 'sciElementRef',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
 /*
- * Copyright (c) 2018-2019 Swiss Federal Railways
+ * Copyright (c) 2018-2025 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -255,10 +313,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  * or column arrangement (as specified by the direction property). A splitter is added between each child to allow the user to
  * shrink or stretch the individual sashes.
  *
- * Sashes are modelled as content children inside a <ng-template> decorated with the 'sciSash' directive.
- * A sash can have a fixed size with an explicit unit, or a unitless proportion to distibute remaining space.
+ * Sashes are modelled as <ng-template> decorated with the 'sciSash' directive.
+ * A sash can have a fixed size with an explicit unit, or a unitless proportion to distribute remaining space.
  * A proportional sash has the ability to grow or shrink if necessary.
  *
+ * Sash content is added to a CSS grid container with a single column, stretching the content vertically and horizontally.
  *
  * ### Usage
  *
@@ -304,32 +363,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  * ```
  */
 class SciSashboxComponent {
-    _destroy$ = new Subject();
-    _host = inject((ElementRef)).nativeElement;
-    _zone = inject(NgZone);
-    sashes$ = new BehaviorSubject([]);
-    sashing = false;
-    maxHeight;
-    maxWidth;
     /**
      * Specifies if to lay out sashes in a row (which is by default) or column arrangement.
      */
-    direction = 'row';
+    direction = input('row');
     /**
-     * Emits when start sashing.
+     * Notifies when start sashing.
      */
-    sashStart = new EventEmitter();
+    sashStart = output();
     /**
-     * Emits the absolute sash sizes (px) when finished sashing.
+     * Emits an array with new sash sizes when sashing ends.
+     *
+     * The array contains the sash sizes in display order.
+     *
+     * TODO [Angular 20] BREAKING CHANGE: Change signature from `number[]` to `{[key: string]: number}` and remove {@link sashEnd2}.
      */
-    sashEnd = new EventEmitter();
+    sashEnd = output();
+    /**
+     * Emits an object with new sash sizes when sashing ends.
+     *
+     * Each sash size is associated with its {@link SciSashDirective.key} or its display position (zero-based) if not set.
+     *
+     * Note: This output will be renamed to `sashEnd` in version 20, changing the signature of {@link sashEnd} from `number[]` to `{[key: string]: number}`.
+     *
+     * TODO [Angular 20] BREAKING CHANGE: Replace with {@link sashEnd}.
+     */
+    sashEnd2 = output();
+    _host = inject(ElementRef).nativeElement;
+    _contentChildren = contentChildren(SciSashDirective);
     /** @internal */
-    set setSashes(queryList) {
-        queryList.changes
-            .pipe(startWith(queryList), takeUntil(this._destroy$))
-            .subscribe((sashes) => {
-            this.sashes$.next(sashes.toArray());
-        });
+    sashes = this.computeSashes(this._contentChildren);
+    /** @internal */
+    afterFirstRender = signal(false);
+    sashing = false;
+    maxHeight;
+    maxWidth;
+    constructor() {
+        this.detectFirstRendering();
     }
     onSashStart() {
         this.sashing = true;
@@ -338,12 +408,14 @@ class SciSashboxComponent {
         this.maxHeight = hostBounds.height;
         this.maxWidth = hostBounds.width;
         this.sashStart.emit();
-        // set the effective sash size as the flex-basis for non-fixed sashes (as sashing operates on pixel deltas)
-        this.sashes.forEach(sash => {
-            if (!sash.isFixedSize) {
-                sash.flexGrow = 0;
-                sash.flexShrink = 1;
-                sash.flexBasis = `${sash.computedSize}px`;
+        // Set the effective sash size as the flex-basis for non-fixed sashes (as sashing operates on pixel deltas).
+        this.sashes().forEach(sash => {
+            if (!sash.isFixedSize()) {
+                sash.updateFlexProperties({
+                    flexGrow: 0,
+                    flexShrink: 1,
+                    flexBasis: `${sash.component().size}px`,
+                });
             }
         });
     }
@@ -351,86 +423,80 @@ class SciSashboxComponent {
         this.sashing = false;
         this.maxHeight = undefined;
         this.maxWidth = undefined;
-        // unset the flex-basis for non-fixed sashes and set the flex-grow accordingly
-        const pixelToFlexGrowFactor = computePixelToFlexGrowFactor(this.sashes);
-        const absoluteSashSizes = this.sashes.map(sash => sash.computedSize);
-        this.sashes.forEach((sash, i) => {
-            if (!sash.isFixedSize) {
-                sash.flexGrow = pixelToFlexGrowFactor * absoluteSashSizes[i];
-                sash.flexShrink = 1;
-                sash.flexBasis = '0';
+        // Unset the flex-basis for non-fixed sashes and set the flex-grow accordingly.
+        const pixelToFlexGrowFactor = computePixelToFlexGrowFactor(this.sashes());
+        const sashSizes = this.sashes().reduce((acc, sash, i) => acc.set(sash.computeKey(i), sash.component().size), new Map());
+        this.sashes().forEach((sash, i) => {
+            if (!sash.isFixedSize()) {
+                sash.updateFlexProperties({
+                    flexGrow: pixelToFlexGrowFactor * sashSizes.get(sash.computeKey(i)),
+                    flexShrink: 1,
+                    flexBasis: '0',
+                });
             }
         });
-        this.sashEnd.emit(absoluteSashSizes);
+        this.sashEnd.emit(Array.from(sashSizes.values()));
+        this.sashEnd2.emit(Object.fromEntries(sashSizes));
     }
     onSash(splitter, sashIndex, moveEvent) {
+        NgZone.assertNotInAngularZone();
         const distance = moveEvent.distance;
         if (distance === 0) {
             return;
         }
-        NgZone.assertNotInAngularZone();
-        // compute the splitter position
+        // Compute the splitter position.
         const splitterRect = splitter.getBoundingClientRect();
         const splitterStart = (this.isRowDirection ? splitterRect.left : splitterRect.top);
         const splitterEnd = (this.isRowDirection ? splitterRect.left + splitterRect.width : splitterRect.top + splitterRect.height);
-        // ignore the event if outside of the splitter's action scope
+        // Ignore the event if outside the splitter's action scope.
         const eventPos = moveEvent.position.clientPos;
-        // i.e. the sash should not grow if moved the mouse pointer beyond the left bounds of the sash, and if now moving the mouse pointer back toward the current sash.
+        // The sash should not grow after moved the mouse pointer beyond the left bounds of the sash and now moving the mouse pointer back toward the current sash.
         if (distance > 0 && eventPos < splitterStart) {
             return;
         }
-        // i.e. the sash should not shrink if moved the mouse pointer beyond the right bounds of the sash, and if now moving the mouse pointer back toward the current sash.
+        // The sash should not shrink after moved the mouse pointer beyond the right bounds of the sash and now moving the mouse pointer back toward the current sash.
         if (distance < 0 && eventPos > splitterEnd) {
             return;
         }
-        // compute the new sash sizes
-        const sash1 = this.sashes[sashIndex];
-        const sash2 = this.sashes[sashIndex + 1];
-        const sashSize1 = sash1.computedSize;
-        const sashSize2 = sash2.computedSize;
-        const sashMinSize1 = sash1.minSize ? this.toPixel(sash1.minSize) : 0;
-        const sashMinSize2 = sash2.minSize ? this.toPixel(sash2.minSize) : 0;
+        // Compute the new sash sizes.
+        const sash1 = this.sashes()[sashIndex];
+        const sash2 = this.sashes()[sashIndex + 1];
+        const sashSize1 = sash1.component().size;
+        const sashSize2 = sash2.component().size;
+        const sashMinSize1 = sash1.minSize() ? this.toPixel(sash1.minSize()) : 0;
+        const sashMinSize2 = sash2.minSize() ? this.toPixel(sash2.minSize()) : 0;
         const newSashSize1 = between(Math.round(sashSize1 + distance), { min: sashMinSize1, max: sashSize1 + sashSize2 - sashMinSize2 });
         const newSashSize2 = between(Math.round(sashSize2 - distance), { min: sashMinSize2, max: sashSize1 + sashSize2 - sashMinSize1 });
-        // set the new computed sash sizes
-        this._zone.run(() => {
-            sash1.flexBasis = `${newSashSize1}px`;
-            sash2.flexBasis = `${newSashSize2}px`;
-        });
+        // Set the new computed sash sizes.
+        sash1.updateFlexProperties({ flexBasis: `${newSashSize1}px` });
+        sash2.updateFlexProperties({ flexBasis: `${newSashSize2}px` });
     }
     onSashReset(sashIndex) {
-        const sash1 = this.sashes[sashIndex];
-        const sash2 = this.sashes[sashIndex + 1];
-        const equalSashSize = (sash1.computedSize + sash2.computedSize) / 2;
-        const pixelToFlexGrowFactor = computePixelToFlexGrowFactor(this.sashes);
-        const absoluteSashSizesAfterReset = this.sashes.map((sash, index) => {
-            if (index === sashIndex || index === sashIndex + 1) {
-                return equalSashSize;
-            }
-            return sash.computedSize;
-        });
+        const sash1 = this.sashes()[sashIndex];
+        const sash2 = this.sashes()[sashIndex + 1];
+        const equalSashSize = (sash1.component().size + sash2.component().size) / 2;
+        const pixelToFlexGrowFactor = computePixelToFlexGrowFactor(this.sashes());
+        const sashSizesAfterReset = this.sashes().reduce((acc, sash, index) => {
+            const size = index === sashIndex || index === sashIndex + 1 ? equalSashSize : sash.component().size;
+            return acc.set(sash.computeKey(index), size);
+        }, new Map());
         [sash1, sash2].forEach(sash => {
-            if (sash.isFixedSize) {
-                sash.flexBasis = `${equalSashSize}px`;
+            if (sash.isFixedSize()) {
+                sash.updateFlexProperties({ flexBasis: `${equalSashSize}px` });
             }
             else {
-                sash.flexGrow = pixelToFlexGrowFactor * equalSashSize;
+                sash.updateFlexProperties({ flexGrow: pixelToFlexGrowFactor * equalSashSize });
             }
         });
         this.sashStart.emit();
-        this.sashEnd.emit(absoluteSashSizesAfterReset);
+        this.sashEnd.emit(Array.from(sashSizesAfterReset.values()));
+        this.sashEnd2.emit(Object.fromEntries(sashSizesAfterReset));
     }
     get isColumnDirection() {
-        return this.direction === 'column';
+        return this.direction() === 'column';
     }
     get isRowDirection() {
-        return this.direction === 'row';
-    }
-    get sashes() {
-        return this.sashes$.value;
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
+        return this.direction() === 'row';
     }
     toPixel(value) {
         if (typeof value === 'number') {
@@ -443,25 +509,63 @@ class SciSashboxComponent {
         }
         return parseInt(value, 10);
     }
+    /**
+     * Detects when rendered this component for the first time.
+     */
+    detectFirstRendering() {
+        afterNextRender({
+            read: () => this.afterFirstRender.set(true),
+        });
+    }
+    /**
+     * Mirrors the provided signal. If animated sashes are being removed, delays emission until the animation completes,
+     * effectively removing the element after the animation.
+     *
+     * Delayed removal is required for CDK Portals to not remove displayed content immediately.
+     */
+    computeSashes(contentChildren) {
+        const differ = inject(IterableDiffers).find([]).create();
+        const sashes = signal([]);
+        effect(() => {
+            // Compute removed sashes to be removed with an animation.
+            const removedAnimatedSashes = new Array();
+            differ.diff(contentChildren())?.forEachRemovedItem(({ item: sash }) => untracked(() => {
+                if (sash.animate()) {
+                    removedAnimatedSashes.push(sash);
+                }
+            }));
+            // Emit if no sashes are removed with an animation.
+            if (!removedAnimatedSashes.length) {
+                sashes.set(contentChildren());
+                return;
+            }
+            // Delay emission until a leave animation completes.
+            removedAnimatedSashes.forEach(sash => {
+                // Start the leave animation.
+                const done = sash.component().startLeaveAnimation();
+                // Track animation completion, re-running this effect to finally emit the sashes.
+                done();
+            });
+        });
+        return sashes;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: SciSashboxComponent, isStandalone: true, selector: "sci-sashbox", inputs: { direction: "direction" }, outputs: { sashStart: "sashStart", sashEnd: "sashEnd" }, host: { properties: { "class.sashing": "this.sashing", "style.--\u0275sci-sashbox-max-height": "this.maxHeight", "style.--\u0275sci-sashbox-max-width": "this.maxWidth", "class.column": "this.isColumnDirection", "class.row": "this.isRowDirection" } }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: SciSashboxComponent, isStandalone: true, selector: "sci-sashbox", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sashStart: "sashStart", sashEnd: "sashEnd", sashEnd2: "sashEnd2" }, host: { properties: { "class.sashing": "this.sashing", "style.--\u0275sci-sashbox-max-height": "this.maxHeight", "style.--\u0275sci-sashbox-max-width": "this.maxWidth", "class.column": "this.isColumnDirection", "class.row": "this.isRowDirection" } }, providers: [{
                 provide: SciSashBoxAccessor,
                 useFactory: provideSashBoxAccessor,
-            }], queries: [{ propertyName: "setSashes", predicate: SciSashDirective }], ngImport: i0, template: "@for (sash of sashes$ | async; track sash; let i = $index; let first = $first; let last = $last) {\n  <div class=\"sash\"\n       [class.first]=\"first\"\n       [class.last]=\"last\"\n       [sciSashInitializer]=\"sash\"\n       [style.flex-grow]=\"sash.flexGrowNormalized$ | async\"\n       [style.flex-shrink]=\"sash.flexShrink\"\n       [style.flex-basis]=\"sash.flexBasis\">\n    <ng-container *ngTemplateOutlet=\"sash.sashTemplate\"/>\n  </div>\n  @if (!last) {\n    <sci-splitter sciElementRef #sciElementRef=\"sciElementRef\"\n                  [orientation]=\"isRowDirection ? 'vertical' : 'horizontal'\"\n                  (start)=\"onSashStart()\"\n                  (move)=\"onSash(sciElementRef.nativeElement, i, $event)\"\n                  (end)=\"onSashEnd()\"\n                  (reset)=\"onSashReset(i)\"/>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:stretch;box-sizing:border-box;overflow:hidden;z-index:0}:host *{box-sizing:border-box}:host.column{flex-direction:column}:host.row{flex-direction:row}:host>div.sash{overflow:hidden;display:grid;grid-auto-rows:100%;grid-auto-columns:100%}:host.row>div.sash{margin:0 var(--sci-sashbox-gap)}:host.row>div.sash.first{margin-left:0}:host.row>div.sash.last{margin-right:0}:host.column>div.sash{margin:var(--sci-sashbox-gap) 0}:host.column>div.sash.first{margin-top:0}:host.column>div.sash.last{margin-bottom:0}:host.sashing{max-height:calc(var(--\\275sci-sashbox-max-height) * 1px);max-width:calc(var(--\\275sci-sashbox-max-width) * 1px)}:host.sashing>div.sash{pointer-events:none}:host>sci-splitter{--sci-splitter-background-color: var(--sci-sashbox-splitter-background-color);--sci-splitter-background-color-hover: var(--sci-sashbox-splitter-background-color-hover);--sci-splitter-size: var(--sci-sashbox-splitter-size);--sci-splitter-size-hover: var(--sci-sashbox-splitter-size-hover);--sci-splitter-touch-target-size: var(--sci-sashbox-splitter-touch-target-size);--sci-splitter-cross-axis-size: var(--sci-sashbox-splitter-cross-axis-size);--sci-splitter-border-radius: var(--sci-sashbox-splitter-border-radius);--sci-splitter-opacity-active: var(--sci-sashbox-splitter-opacity-active);--sci-splitter-opacity-hover: var(--sci-sashbox-splitter-opacity-hover);flex:none;z-index:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SciSashInitializerDirective, selector: "div[sciSashInitializer].sash", inputs: ["sciSashInitializer"] }, { kind: "component", type: SciSplitterComponent, selector: "sci-splitter", inputs: ["orientation"], outputs: ["start", "move", "end", "reset"] }, { kind: "directive", type: SciElementRefDirective, selector: "[sciElementRef]", exportAs: ["sciElementRef"] }] });
+            }], queries: [{ propertyName: "_contentChildren", predicate: SciSashDirective, isSignal: true }], ngImport: i0, template: "@for (sash of sashes(); track sash; let i = $index; let first = $first; let last = $last) {\n  <sci-sash [sash]=\"sash\"\n            [class.first]=\"first\"\n            [class.last]=\"last\"\n            [style.flex-grow]=\"sash.flexProperties().flexGrow\"\n            [style.flex-shrink]=\"sash.flexProperties().flexShrink\"\n            [style.flex-basis]=\"sash.flexProperties().flexBasis\"/>\n  @if (!last) {\n    <sci-splitter sciElementRef #sciElementRef=\"sciElementRef\"\n                  [orientation]=\"isRowDirection ? 'vertical' : 'horizontal'\"\n                  (start)=\"onSashStart()\"\n                  (move)=\"onSash(sciElementRef.host, i, $event)\"\n                  (end)=\"onSashEnd()\"\n                  (reset)=\"onSashReset(i)\"/>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:stretch;box-sizing:border-box;overflow:hidden;z-index:0}:host *{box-sizing:border-box}:host.column{flex-direction:column}:host.row{flex-direction:row}:host.row>sci-sash{margin:0 var(--sci-sashbox-gap)}:host.row>sci-sash.first{margin-left:0}:host.row>sci-sash.last{margin-right:0}:host.column>sci-sash{margin:var(--sci-sashbox-gap) 0}:host.column>sci-sash.first{margin-top:0}:host.column>sci-sash.last{margin-bottom:0}:host.sashing{max-height:calc(var(--\\275sci-sashbox-max-height) * 1px);max-width:calc(var(--\\275sci-sashbox-max-width) * 1px)}:host.sashing>sci-sash{pointer-events:none}:host>sci-splitter{--sci-splitter-background-color: var(--sci-sashbox-splitter-background-color);--sci-splitter-background-color-hover: var(--sci-sashbox-splitter-background-color-hover);--sci-splitter-size: var(--sci-sashbox-splitter-size);--sci-splitter-size-hover: var(--sci-sashbox-splitter-size-hover);--sci-splitter-touch-target-size: var(--sci-sashbox-splitter-touch-target-size);--sci-splitter-cross-axis-size: var(--sci-sashbox-splitter-cross-axis-size);--sci-splitter-border-radius: var(--sci-sashbox-splitter-border-radius);--sci-splitter-opacity-active: var(--sci-sashbox-splitter-opacity-active);--sci-splitter-opacity-hover: var(--sci-sashbox-splitter-opacity-hover);flex:none;z-index:1}\n"], dependencies: [{ kind: "component", type: SciSplitterComponent, selector: "sci-splitter", inputs: ["orientation"], outputs: ["start", "move", "end", "reset"] }, { kind: "directive", type: SciElementRefDirective, selector: "[sciElementRef]", exportAs: ["sciElementRef"] }, { kind: "component", type: SashComponent, selector: "sci-sash", inputs: ["sash"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-sashbox', imports: [
-                        AsyncPipe,
-                        NgTemplateOutlet,
-                        SciSashInitializerDirective,
                         SciSplitterComponent,
                         SciElementRefDirective,
+                        SashComponent,
                     ], providers: [{
                             provide: SciSashBoxAccessor,
                             useFactory: provideSashBoxAccessor,
-                        }], template: "@for (sash of sashes$ | async; track sash; let i = $index; let first = $first; let last = $last) {\n  <div class=\"sash\"\n       [class.first]=\"first\"\n       [class.last]=\"last\"\n       [sciSashInitializer]=\"sash\"\n       [style.flex-grow]=\"sash.flexGrowNormalized$ | async\"\n       [style.flex-shrink]=\"sash.flexShrink\"\n       [style.flex-basis]=\"sash.flexBasis\">\n    <ng-container *ngTemplateOutlet=\"sash.sashTemplate\"/>\n  </div>\n  @if (!last) {\n    <sci-splitter sciElementRef #sciElementRef=\"sciElementRef\"\n                  [orientation]=\"isRowDirection ? 'vertical' : 'horizontal'\"\n                  (start)=\"onSashStart()\"\n                  (move)=\"onSash(sciElementRef.nativeElement, i, $event)\"\n                  (end)=\"onSashEnd()\"\n                  (reset)=\"onSashReset(i)\"/>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:stretch;box-sizing:border-box;overflow:hidden;z-index:0}:host *{box-sizing:border-box}:host.column{flex-direction:column}:host.row{flex-direction:row}:host>div.sash{overflow:hidden;display:grid;grid-auto-rows:100%;grid-auto-columns:100%}:host.row>div.sash{margin:0 var(--sci-sashbox-gap)}:host.row>div.sash.first{margin-left:0}:host.row>div.sash.last{margin-right:0}:host.column>div.sash{margin:var(--sci-sashbox-gap) 0}:host.column>div.sash.first{margin-top:0}:host.column>div.sash.last{margin-bottom:0}:host.sashing{max-height:calc(var(--\\275sci-sashbox-max-height) * 1px);max-width:calc(var(--\\275sci-sashbox-max-width) * 1px)}:host.sashing>div.sash{pointer-events:none}:host>sci-splitter{--sci-splitter-background-color: var(--sci-sashbox-splitter-background-color);--sci-splitter-background-color-hover: var(--sci-sashbox-splitter-background-color-hover);--sci-splitter-size: var(--sci-sashbox-splitter-size);--sci-splitter-size-hover: var(--sci-sashbox-splitter-size-hover);--sci-splitter-touch-target-size: var(--sci-sashbox-splitter-touch-target-size);--sci-splitter-cross-axis-size: var(--sci-sashbox-splitter-cross-axis-size);--sci-splitter-border-radius: var(--sci-sashbox-splitter-border-radius);--sci-splitter-opacity-active: var(--sci-sashbox-splitter-opacity-active);--sci-splitter-opacity-hover: var(--sci-sashbox-splitter-opacity-hover);flex:none;z-index:1}\n"] }]
-        }], propDecorators: { sashing: [{
+                        }], template: "@for (sash of sashes(); track sash; let i = $index; let first = $first; let last = $last) {\n  <sci-sash [sash]=\"sash\"\n            [class.first]=\"first\"\n            [class.last]=\"last\"\n            [style.flex-grow]=\"sash.flexProperties().flexGrow\"\n            [style.flex-shrink]=\"sash.flexProperties().flexShrink\"\n            [style.flex-basis]=\"sash.flexProperties().flexBasis\"/>\n  @if (!last) {\n    <sci-splitter sciElementRef #sciElementRef=\"sciElementRef\"\n                  [orientation]=\"isRowDirection ? 'vertical' : 'horizontal'\"\n                  (start)=\"onSashStart()\"\n                  (move)=\"onSash(sciElementRef.host, i, $event)\"\n                  (end)=\"onSashEnd()\"\n                  (reset)=\"onSashReset(i)\"/>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:stretch;box-sizing:border-box;overflow:hidden;z-index:0}:host *{box-sizing:border-box}:host.column{flex-direction:column}:host.row{flex-direction:row}:host.row>sci-sash{margin:0 var(--sci-sashbox-gap)}:host.row>sci-sash.first{margin-left:0}:host.row>sci-sash.last{margin-right:0}:host.column>sci-sash{margin:var(--sci-sashbox-gap) 0}:host.column>sci-sash.first{margin-top:0}:host.column>sci-sash.last{margin-bottom:0}:host.sashing{max-height:calc(var(--\\275sci-sashbox-max-height) * 1px);max-width:calc(var(--\\275sci-sashbox-max-width) * 1px)}:host.sashing>sci-sash{pointer-events:none}:host>sci-splitter{--sci-splitter-background-color: var(--sci-sashbox-splitter-background-color);--sci-splitter-background-color-hover: var(--sci-sashbox-splitter-background-color-hover);--sci-splitter-size: var(--sci-sashbox-splitter-size);--sci-splitter-size-hover: var(--sci-sashbox-splitter-size-hover);--sci-splitter-touch-target-size: var(--sci-sashbox-splitter-touch-target-size);--sci-splitter-cross-axis-size: var(--sci-sashbox-splitter-cross-axis-size);--sci-splitter-border-radius: var(--sci-sashbox-splitter-border-radius);--sci-splitter-opacity-active: var(--sci-sashbox-splitter-opacity-active);--sci-splitter-opacity-hover: var(--sci-sashbox-splitter-opacity-hover);flex:none;z-index:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { sashing: [{
                 type: HostBinding,
                 args: ['class.sashing']
             }], maxHeight: [{
@@ -470,15 +574,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             }], maxWidth: [{
                 type: HostBinding,
                 args: ['style.--ɵsci-sashbox-max-width']
-            }], direction: [{
-                type: Input
-            }], sashStart: [{
-                type: Output
-            }], sashEnd: [{
-                type: Output
-            }], setSashes: [{
-                type: ContentChildren,
-                args: [SciSashDirective]
             }], isColumnDirection: [{
                 type: HostBinding,
                 args: ['class.column']
@@ -493,24 +588,18 @@ function between(value, minmax) {
  * Returns the factor to compute the flex-grow proportion from the pixel size of a sash.
  */
 function computePixelToFlexGrowFactor(sashes) {
-    const flexibleSashes = sashes.filter(sash => !sash.isFixedSize);
-    const proportionSum = flexibleSashes.reduce((sum, sash) => sum + Number(sash.size), 0);
-    const pixelSum = flexibleSashes.reduce((sum, sash) => sum + sash.computedSize, 0);
+    const flexibleSashes = sashes.filter(sash => !sash.isFixedSize());
+    const proportionSum = flexibleSashes.reduce((sum, sash) => sum + Number(sash.size()), 0);
+    const pixelSum = flexibleSashes.reduce((sum, sash) => sum + sash.component().size, 0);
     return proportionSum / pixelSum;
 }
 function provideSashBoxAccessor() {
     const component = inject(SciSashboxComponent);
     return new class {
-        get direction() {
-            return component.direction;
-        }
-        get sashes$() {
-            return component.sashes$;
-        }
-        get sashes() {
-            return component.sashes$.value;
-        }
-    };
+        sashes = component.sashes;
+        direction = component.direction;
+        afterFirstRender = component.afterFirstRender;
+    }();
 }
 
 /*