@scion/components 18.1.1 → 19.1.0

package/fesm2022/scion-components-sashbox.mjs

@@ -1,9 +1,7 @@
 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, inject, TemplateRef, computed, signal, linkedSignal, Directive, ElementRef, effect, output, contentChildren, NgZone, Component, HostBinding, NgModule } from '@angular/core';
 import { SciSplitterComponent } from '@scion/components/splitter';
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 
 /**
  * Allows accessing the sashbox component from sashes.
@@ -42,114 +40,145 @@ class SciSashBoxAccessor {
 class SciSashDirective {
     /**
      * 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 = input();
     /**
+     * Optional key to identify this sash.
+     *
+     * If set, this key is used as the property key in the object emitted by {@link SciSashboxComponent.sashEnd2} to associate the size of this sash.
+     */
+    key = input();
+    /**
+     * Represents the template used as sash content.
+     *
      * @internal
      */
-    set flexGrow(flexGrow) {
-        this._flexGrow$.next(flexGrow);
-    }
+    sashTemplate = inject(TemplateRef);
+    _sashBoxAccessor = inject(SciSashBoxAccessor);
     /**
+     * Flex properties computed based on the configured {@link size}. Properties are updated when moving this sash.
+     */
+    _flexProperties = this.computeFlexProperties();
+    /**
+     * 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;
-    }
-    constructor(sashTemplate, _sashBoxAccessor) {
-        this.sashTemplate = sashTemplate;
-        this._sashBoxAccessor = _sashBoxAccessor;
-        this._size = '1';
-        this._flexGrow$ = new BehaviorSubject(0);
-        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();
+    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
+     */
+    isFixedSize = computed(() => Number.isNaN(+this.size()));
+    /**
+     * Gets the DOM element that renders this sash.
+     *
+     * @internal
+     */
+    element = signal(undefined);
+    /**
+     * Gets the effective size of this sash in the DOM.
+     *
+     * @internal
+     */
+    get elementSize() {
+        const element = this.element();
+        if (!element) {
+            return 0;
+        }
+        if (this._sashBoxAccessor.direction() === 'row') {
+            return element.getBoundingClientRect().width;
+        }
+        else {
+            return element.getBoundingClientRect().height;
+        }
     }
     /**
-     * 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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciSashDirective, deps: [{ token: i0.TemplateRef }, { token: SciSashBoxAccessor }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", 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 } }, exportAs: ["sciSash"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciSashDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[sciSash]',
                     exportAs: 'sciSash',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: SciSashBoxAccessor }], propDecorators: { size: [{
-                type: Input
-            }], minSize: [{
-                type: Input
-            }] } });
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways
@@ -164,25 +193,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
  * Initializes {SashDirective} with the target {HTMLDivElement}.
  */
 class SciSashInitializerDirective {
-    constructor(_host) {
-        this._host = _host;
-    }
-    ngOnChanges(changes) {
-        this.sash.element = this._host.nativeElement;
+    sash = input.required({ alias: 'sciSashInitializer' });
+    constructor() {
+        const host = inject(ElementRef).nativeElement;
+        effect(() => this.sash().element.set(host));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciSashInitializerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: SciSashInitializerDirective, isStandalone: true, selector: "div[sciSashInitializer].sash", inputs: { sash: ["sciSashInitializer", "sash"] }, usesOnChanges: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashInitializerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: SciSashInitializerDirective, isStandalone: true, selector: "div[sciSashInitializer].sash", inputs: { sash: { classPropertyName: "sash", publicName: "sciSashInitializer", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciSashInitializerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashInitializerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[sciSashInitializer].sash',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { sash: [{
-                type: Input,
-                args: [{ alias: 'sciSashInitializer', required: true }]
-            }] } });
+        }], ctorParameters: () => [] });
 
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways
@@ -197,21 +221,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
  * Provides access to the native {@link HTMLElement} of the host.
  */
 class SciElementRefDirective {
-    constructor(host) {
-        this.host = host;
-        this.nativeElement = host.nativeElement;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciElementRefDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: SciElementRefDirective, isStandalone: true, selector: "[sciElementRef]", exportAs: ["sciElementRef"], ngImport: i0 }); }
+    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: "18.0.1", ngImport: i0, type: SciElementRefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciElementRefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sciElementRef]',
                     exportAs: 'sciElementRef',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+        }] });
 
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways
@@ -227,10 +247,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", 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
  *
@@ -276,33 +297,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
  * ```
  */
 class SciSashboxComponent {
-    constructor() {
-        this._destroy$ = new Subject();
-        this._host = inject((ElementRef)).nativeElement;
-        this._zone = inject(NgZone);
-        this.sashes$ = new BehaviorSubject([]);
-        this.sashing = false;
-        /**
-         * Specifies if to lay out sashes in a row (which is by default) or column arrangement.
-         */
-        this.direction = 'row';
-        /**
-         * Emits when start sashing.
-         */
-        this.sashStart = new EventEmitter();
-        /**
-         * Emits the absolute sash sizes (px) when finished sashing.
-         */
-        this.sashEnd = new EventEmitter();
-    }
+    /**
+     * Specifies if to lay out sashes in a row (which is by default) or column arrangement.
+     */
+    direction = input('row');
+    /**
+     * Notifies when start sashing.
+     */
+    sashStart = output();
+    /**
+     * 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 = 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;
     /** @internal */
-    set setSashes(queryList) {
-        queryList.changes
-            .pipe(startWith(queryList), takeUntil(this._destroy$))
-            .subscribe((sashes) => {
-            this.sashes$.next(sashes.toArray());
-        });
-    }
+    sashes = contentChildren(SciSashDirective);
+    sashing = false;
+    maxHeight;
+    maxWidth;
     onSashStart() {
         this.sashing = true;
         // Avoid overflow when sashing.
@@ -310,12 +336,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.elementSize}px`,
+                });
             }
         });
     }
@@ -323,86 +351,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.elementSize), 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.elementSize;
+        const sashSize2 = sash2.elementSize;
+        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.elementSize + sash2.elementSize) / 2;
+        const pixelToFlexGrowFactor = computePixelToFlexGrowFactor(this.sashes());
+        const sashSizesAfterReset = this.sashes().reduce((acc, sash, index) => {
+            const size = index === sashIndex || index === sashIndex + 1 ? equalSashSize : sash.elementSize;
+            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') {
@@ -415,16 +437,15 @@ class SciSashboxComponent {
         }
         return parseInt(value, 10);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciSashboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", 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 ɵ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: { 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: "sashes", predicate: SciSashDirective, isSignal: true }], ngImport: i0, template: "@for (sash of sashes(); 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.flexProperties().flexGrow\"\n       [style.flex-shrink]=\"sash.flexProperties().flexShrink\"\n       [style.flex-basis]=\"sash.flexProperties().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.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>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: "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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciSashboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sci-sashbox', standalone: true, imports: [
-                        AsyncPipe,
+            args: [{ selector: 'sci-sashbox', imports: [
                         NgTemplateOutlet,
                         SciSashInitializerDirective,
                         SciSplitterComponent,
@@ -432,7 +453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
                     ], 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"] }]
+                        }], template: "@for (sash of sashes(); 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.flexProperties().flexGrow\"\n       [style.flex-shrink]=\"sash.flexProperties().flexShrink\"\n       [style.flex-basis]=\"sash.flexProperties().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.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>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: [{
                 type: HostBinding,
                 args: ['class.sashing']
@@ -442,15 +463,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", 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']
@@ -465,24 +477,17 @@ 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.elementSize, 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;
-        }
-    };
+        direction = component.direction;
+        sashes = component.sashes;
+    }();
 }
 
 /*
@@ -514,15 +519,17 @@ function provideSashBoxAccessor() {
  *   </ng-template>
  * </sci-sashbox>
  * ```
+ *
+ * @deprecated since version 19.0.0; Import standalone component and directive instead; API will be removed in a future release.
  */
 class SciSashboxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciSashboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: SciSashboxModule, imports: [SciSashboxComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: SciSashboxModule, imports: [SciSashboxComponent,
             SciSashDirective], exports: [SciSashboxComponent,
-            SciSashDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciSashboxModule, imports: [SciSashboxComponent] }); }
+            SciSashDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashboxModule, imports: [SciSashboxComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SciSashboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [