@scion/components 19.1.0 → 19.2.1

package/fesm2022/scion-components-sashbox.mjs

@@ -1,8 +1,18 @@
 import * as i0 from '@angular/core';
-import { input, inject, TemplateRef, computed, signal, linkedSignal, Directive, ElementRef, effect, output, contentChildren, NgZone, Component, HostBinding, NgModule } from '@angular/core';
+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 { 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.
  */
@@ -10,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
@@ -54,22 +64,31 @@ class SciSashDirective {
      */
     minSize = input();
     /**
-     * Optional key to identify this sash.
+     * Specifies an 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.
+     * The 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.
+     * Controls whether to animate the entering and leaving of this sash, only if fixed-sized. Defaults to `false`.
      *
-     * @internal
+     * 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.
      */
-    sashTemplate = inject(TemplateRef);
+    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
+     */
+    sashTemplate = inject(TemplateRef);
     /**
      * Flex properties with normalized 'flex-grow' to ensure the sashes fill the entire sash-box space.
      *
@@ -85,27 +104,18 @@ class SciSashDirective {
      */
     isFixedSize = computed(() => Number.isNaN(+this.size()));
     /**
-     * Gets the DOM element that renders this sash.
+     * Gets the component that renders this sash.
      *
      * @internal
      */
-    element = signal(undefined);
+    component = computed(() => this._component() ?? throwError('[SciSashbox] SashComponent not available yet.'));
     /**
-     * Gets the effective size of this sash in the DOM.
+     * Sets the component that renders this sash.
      *
      * @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;
-        }
+    setComponent(component) {
+        this._component.set(component);
     }
     /**
      * Returns the identity of this sash, or the passed index if not configured.
@@ -170,7 +180,7 @@ class SciSashDirective {
         });
     }
     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 });
+    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,
@@ -179,6 +189,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                     exportAs: 'sciSash',
                 }]
         }] });
+function throwError(error) {
+    throw Error(error);
+}
 
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways
@@ -190,26 +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 {
-    sash = input.required({ alias: 'sciSashInitializer' });
-    constructor() {
-        const host = inject(ElementRef).nativeElement;
-        effect(() => this.sash().element.set(host));
-    }
-    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 });
+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: () => [] });
+        }] });
 
 /*
- * 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
@@ -218,23 +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 = 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 });
+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));
+    }
+    /**
+     * 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',
-                }]
-        }] });
 
 /*
- * 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
@@ -324,11 +390,17 @@ class SciSashboxComponent {
      */
     sashEnd2 = output();
     _host = inject(ElementRef).nativeElement;
+    _contentChildren = contentChildren(SciSashDirective);
+    /** @internal */
+    sashes = this.computeSashes(this._contentChildren);
     /** @internal */
-    sashes = contentChildren(SciSashDirective);
+    afterFirstRender = signal(false);
     sashing = false;
     maxHeight;
     maxWidth;
+    constructor() {
+        this.detectFirstRendering();
+    }
     onSashStart() {
         this.sashing = true;
         // Avoid overflow when sashing.
@@ -342,7 +414,7 @@ class SciSashboxComponent {
                 sash.updateFlexProperties({
                     flexGrow: 0,
                     flexShrink: 1,
-                    flexBasis: `${sash.elementSize}px`,
+                    flexBasis: `${sash.component().size}px`,
                 });
             }
         });
@@ -353,7 +425,7 @@ class SciSashboxComponent {
         this.maxWidth = undefined;
         // 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());
+        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({
@@ -374,8 +446,8 @@ class SciSashboxComponent {
         }
         // 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);
+        const splitterStart = (this.direction() === 'row' ? splitterRect.left : splitterRect.top);
+        const splitterEnd = (this.direction() === 'row' ? splitterRect.left + splitterRect.width : splitterRect.top + splitterRect.height);
         // Ignore the event if outside the splitter's action scope.
         const eventPos = moveEvent.position.clientPos;
         // 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.
@@ -389,8 +461,8 @@ class SciSashboxComponent {
         // 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 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 });
@@ -402,10 +474,10 @@ class SciSashboxComponent {
     onSashReset(sashIndex) {
         const sash1 = this.sashes()[sashIndex];
         const sash2 = this.sashes()[sashIndex + 1];
-        const equalSashSize = (sash1.elementSize + sash2.elementSize) / 2;
+        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.elementSize;
+            const size = index === sashIndex || index === sashIndex + 1 ? equalSashSize : sash.component().size;
             return acc.set(sash.computeKey(index), size);
         }, new Map());
         [sash1, sash2].forEach(sash => {
@@ -420,41 +492,76 @@ class SciSashboxComponent {
         this.sashEnd.emit(Array.from(sashSizesAfterReset.values()));
         this.sashEnd2.emit(Object.fromEntries(sashSizesAfterReset));
     }
-    get isColumnDirection() {
-        return this.direction() === 'column';
-    }
-    get isRowDirection() {
-        return this.direction() === 'row';
-    }
     toPixel(value) {
         if (typeof value === 'number') {
             return value;
         }
         if (value.endsWith('%')) {
             const hostBounds = this._host.getBoundingClientRect();
-            const hostSize = (this.isRowDirection ? hostBounds.width : hostBounds.height);
+            const hostSize = (this.direction() === 'row' ? hostBounds.width : hostBounds.height);
             return parseInt(value, 10) * hostSize / 100;
         }
         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: { 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: [{
+    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: { "attr.data-direction": "direction()", "class.sashing": "this.sashing", "style.--\u0275sci-sashbox-max-height": "this.maxHeight", "style.--\u0275sci-sashbox-max-width": "this.maxWidth" } }, providers: [{
                 provide: SciSashBoxAccessor,
                 useFactory: provideSashBoxAccessor,
-            }], 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"] }] });
+            }], 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]=\"direction() === 'row' ? '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[data-direction=column]{flex-direction:column}:host[data-direction=row]{flex-direction:row}:host[data-direction=row]>sci-sash{margin:0 var(--sci-sashbox-gap)}:host[data-direction=row]>sci-sash.first{margin-left:0}:host[data-direction=row]>sci-sash.last{margin-right:0}:host[data-direction=column]>sci-sash{margin:var(--sci-sashbox-gap) 0}:host[data-direction=column]>sci-sash.first{margin-top:0}:host[data-direction=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: [
-                        NgTemplateOutlet,
-                        SciSashInitializerDirective,
                         SciSplitterComponent,
                         SciElementRefDirective,
+                        SashComponent,
                     ], providers: [{
                             provide: SciSashBoxAccessor,
                             useFactory: provideSashBoxAccessor,
-                        }], 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: [{
+                        }], host: {
+                        '[attr.data-direction]': 'direction()',
+                    }, 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]=\"direction() === 'row' ? '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[data-direction=column]{flex-direction:column}:host[data-direction=row]{flex-direction:row}:host[data-direction=row]>sci-sash{margin:0 var(--sci-sashbox-gap)}:host[data-direction=row]>sci-sash.first{margin-left:0}:host[data-direction=row]>sci-sash.last{margin-right:0}:host[data-direction=column]>sci-sash{margin:var(--sci-sashbox-gap) 0}:host[data-direction=column]>sci-sash.first{margin-top:0}:host[data-direction=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: [{
@@ -463,12 +570,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             }], maxWidth: [{
                 type: HostBinding,
                 args: ['style.--ɵsci-sashbox-max-width']
-            }], isColumnDirection: [{
-                type: HostBinding,
-                args: ['class.column']
-            }], isRowDirection: [{
-                type: HostBinding,
-                args: ['class.row']
             }] } });
 function between(value, minmax) {
     return Math.min(minmax.max, Math.max(minmax.min, value));
@@ -479,14 +580,15 @@ function between(value, minmax) {
 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.elementSize, 0);
+    const pixelSum = flexibleSashes.reduce((sum, sash) => sum + sash.component().size, 0);
     return proportionSum / pixelSum;
 }
 function provideSashBoxAccessor() {
     const component = inject(SciSashboxComponent);
     return new class {
-        direction = component.direction;
         sashes = component.sashes;
+        direction = component.direction;
+        afterFirstRender = component.afterFirstRender;
     }();
 }
 

package/fesm2022/scion-components-sashbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"scion-components-sashbox.mjs","sources":["../../../../projects/scion/components/sashbox/src/sashbox-accessor.ts","../../../../projects/scion/components/sashbox/src/sash.directive.ts","../../../../projects/scion/components/sashbox/src/sash-initializer.directive.ts","../../../../projects/scion/components/sashbox/src/element-ref.directive.ts","../../../../projects/scion/components/sashbox/src/sashbox.component.ts","../../../../projects/scion/components/sashbox/src/sashbox.component.html","../../../../projects/scion/components/sashbox/src/sashbox.module.ts","../../../../projects/scion/components/sashbox/src/public_api.ts","../../../../projects/scion/components/sashbox/src/scion-components-sashbox.ts"],"sourcesContent":["import {SciSashDirective} from './sash.directive';\nimport {Signal} from '@angular/core';\n\n/**\n * Allows accessing the sashbox component from sashes.\n */\nexport abstract class SciSashBoxAccessor {\n\n  public abstract readonly sashes: Signal<readonly SciSashDirective[]>;\n\n  public abstract readonly direction: Signal<'column' | 'row'>;\n}\n","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {computed, Directive, inject, input, linkedSignal, signal, Signal, TemplateRef, WritableSignal} from '@angular/core';\nimport {SciSashBoxAccessor} from './sashbox-accessor';\n\n/**\n * Use this directive to model a sash for {@link SciSashboxComponent}.\n * The host element of this modelling directive must be a <ng-template> which is used as sash template.\n *\n *\n * ### Usage:\n *\n * <sci-sashbox direction=\"row\">\n *   <!-- fixed size sash -->\n *   <ng-template sciSash size=\"200px\">\n *     ...\n *   </ng-template>\n *\n *   <!-- sash which takes the remaining space -->\n *   <ng-template sciSash>\n *     ...\n *   </ng-template>\n * </sci-sashbox>\n */\n@Directive({\n  selector: 'ng-template[sciSash]',\n  exportAs: 'sciSash',\n})\nexport class SciSashDirective {\n\n  /**\n   * Specifies the sash size, either as fixed size with an explicit unit,\n   * or as a unitless proportion to distribute remaining space. A proportional\n   * sash has the ability to grow or shrink if necessary, and must be >= 1.\n   *\n   * If not set, remaining space is distributed equally.\n   */\n  public readonly size = input('1', {transform: (size: string | number | null | undefined): string | number => size ?? '1'});\n\n  /**\n   * Specifies the minimal sash size in pixel or percent.\n   * The min-size prevents the user from shrinking the sash below this minimal size.\n   *\n   * If the unit is omitted, the value is interpreted as a pixel value.\n   */\n  public readonly minSize = input<string | number | undefined>();\n\n  /**\n   * Optional key to identify this sash.\n   *\n   * 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.\n   */\n  public readonly key = input<string | undefined>();\n\n  /**\n   * Represents the template used as sash content.\n   *\n   * @internal\n   */\n  public readonly sashTemplate = inject<TemplateRef<void>>(TemplateRef);\n  private readonly _sashBoxAccessor = inject(SciSashBoxAccessor);\n\n  /**\n   * Flex properties computed based on the configured {@link size}. Properties are updated when moving this sash.\n   */\n  private readonly _flexProperties = this.computeFlexProperties();\n\n  /**\n   * Flex properties with normalized 'flex-grow' to ensure the sashes fill the entire sash-box space.\n   *\n   * Use these properties to lay out this sash in the sashbox's flex layout.\n   *\n   * @internal\n   */\n  public readonly flexProperties = this.normalizeFlexGrow(this._flexProperties);\n\n  /**\n   * Returns if this sash has a fixed size, meaning that it has not the ability to grow or shrink.\n   *\n   * @internal\n   */\n  public readonly isFixedSize = computed(() => Number.isNaN(+this.size()));\n\n  /**\n   * Gets the DOM element that renders this sash.\n   *\n   * @internal\n   */\n  public readonly element = signal<HTMLElement | undefined>(undefined);\n\n  /**\n   * Gets the effective size of this sash in the DOM.\n   *\n   * @internal\n   */\n  public get elementSize(): number {\n    const element = this.element();\n    if (!element) {\n      return 0;\n    }\n    if (this._sashBoxAccessor.direction() === 'row') {\n      return element.getBoundingClientRect().width;\n    }\n    else {\n      return element.getBoundingClientRect().height;\n    }\n  }\n\n  /**\n   * Returns the identity of this sash, or the passed index if not configured.\n   *\n   * @internal\n   */\n  public computeKey(index: number): string {\n    return this.key() ?? `${index}`;\n  }\n\n  /**\n   * Updates the flex properties of this sash for layout in the sashbox's flex layout.\n   *\n   * @internal\n   */\n  public updateFlexProperties(flexProperties: Partial<FlexProperties>): void {\n    this._flexProperties.update(previousFlexProperties => ({...previousFlexProperties, ...flexProperties}));\n  }\n\n  /**\n   * Computes the flex properties to lay out this sash in the sashbox's flex layout based on the configured {@link size}.\n   */\n  private computeFlexProperties(): WritableSignal<FlexProperties> {\n    return linkedSignal(() => {\n      const size = this.size();\n      if (this.isFixedSize()) {\n        // fixed-sized sash\n        return {\n          flexGrow: 0,\n          flexShrink: 0,\n          flexBasis: `${size}`,\n        };\n      }\n      else {\n        // remaining space is distributed according to given proportion\n        const proportion = +size;\n        if (proportion < 1) {\n          throw Error(`[IllegalSashSizeError] The proportion for flexible sized sashes must be >=1 [size=${this.size()}]`);\n        }\n        return {\n          flexGrow: proportion,\n          flexShrink: 1,\n          flexBasis: '0',\n        };\n      }\n    });\n  }\n\n  /**\n   * Normalizes the 'flex-grow' of the passed {@link FlexProperties} to ensure that the sum of the 'flex-grow' proportions of all sashes is 1.\n   *\n   * If the sum of all flex-grow proportions were less than 1, the sashes would not fill the entire sash-box space.\n   * Without normalization, this could occur when a sash is removed.\n   */\n  private normalizeFlexGrow(flexProperties: Signal<FlexProperties>): Signal<FlexProperties> {\n    return computed(() => {\n      const sashes = this._sashBoxAccessor.sashes();\n      const {flexGrow, flexShrink, flexBasis} = flexProperties();\n      const flexGrowSum = sashes.reduce((sum, sash) => sum + sash._flexProperties().flexGrow, 0);\n\n      return {\n        flexGrow: flexGrow === 0 || flexGrowSum === 0 ? 0 : flexGrow / flexGrowSum, // Sum of normalized flex-grow proportions must be 1;\n        flexShrink,\n        flexBasis,\n      };\n    });\n  }\n}\n\n/**\n * Flex properties to lay out the sash in the sashbox's flex layout.\n */\ninterface FlexProperties {\n  flexGrow: number;\n  flexShrink: number;\n  flexBasis: string;\n}\n","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {Directive, effect, ElementRef, inject, input} from '@angular/core';\nimport {SciSashDirective} from './sash.directive';\n\n/**\n * Initializes {SashDirective} with the target {HTMLDivElement}.\n */\n@Directive({\n  selector: 'div[sciSashInitializer].sash',\n})\nexport class SciSashInitializerDirective {\n\n  public readonly sash = input.required<SciSashDirective>({alias: 'sciSashInitializer'});\n\n  constructor() {\n    const host = inject(ElementRef).nativeElement as HTMLDivElement;\n    effect(() => this.sash().element.set(host));\n  }\n}\n","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {Directive, ElementRef, inject} from '@angular/core';\n\n/**\n * Provides access to the native {@link HTMLElement} of the host.\n */\n@Directive({\n  selector: '[sciElementRef]',\n  exportAs: 'sciElementRef',\n})\nexport class SciElementRefDirective {\n\n  public readonly host = inject(ElementRef).nativeElement as HTMLElement;\n}\n","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {Component, contentChildren, ElementRef, HostBinding, inject, input, NgZone, output} from '@angular/core';\nimport {SciSplitterComponent, SplitterMoveEvent} from '@scion/components/splitter';\nimport {SciSashDirective} from './sash.directive';\nimport {SciSashBoxAccessor} from './sashbox-accessor';\nimport {NgTemplateOutlet} from '@angular/common';\nimport {SciSashInitializerDirective} from './sash-initializer.directive';\nimport {SciElementRefDirective} from './element-ref.directive';\n\n/**\n * The <sci-sashbox> is like a CSS flexbox container that lays out its content children (sashes) in a row (which is by default)\n * or column arrangement (as specified by the direction property). A splitter is added between each child to allow the user to\n * shrink or stretch the individual sashes.\n *\n * Sashes are modelled as <ng-template> decorated with the 'sciSash' directive.\n * A sash can have a fixed size with an explicit unit, or a unitless proportion to distribute remaining space.\n * A proportional sash has the ability to grow or shrink if necessary.\n *\n * Sash content is added to a CSS grid container with a single column, stretching the content vertically and horizontally.\n *\n * ### Usage\n *\n * ```html\n * <sci-sashbox direction=\"row\">\n *   <ng-template sciSash size=\"1\">\n *     ...\n *   </ng-template>\n *\n *   <ng-template sciSash size=\"2\">\n *     ...\n *   </ng-template>\n *\n *   <ng-template sciSash size=\"1\">\n *     ...\n *   </ng-template>\n * </sci-sashbox>\n * ```\n *\n * ### Styling\n *\n * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.\n * To style a specific `sci-sashbox` component, the following CSS variables can be set directly on the component.\n *\n * - --sci-sashbox-gap: Sets the gaps (gutters) between sashes.\n * - --sci-sashbox-splitter-background-color: Sets the background color of the splitter.\n * - --sci-sashbox-splitter-background-color-hover: Sets the background color of the splitter when hovering it.\n * - --sci-sashbox-splitter-size: Sets the size of the splitter along the main axis.\n * - --sci-sashbox-splitter-size-hover: Sets the size of the splitter along the main axis when hovering it.\n * - --sci-sashbox-splitter-touch-target-size: Sets the touch target size to move the splitter (accessibility).\n * - --sci-sashbox-splitter-cross-axis-size: Sets the splitter size along the cross axis.\n * - --sci-sashbox-splitter-border-radius: Sets the border radius of the splitter.\n * - --sci-sashbox-splitter-opacity-active: Sets the opacity of the splitter while the user moves the splitter.\n * - --sci-sashbox-splitter-opacity-hover: Sets the opacity of the splitter when hovering it.\n *\n * Example:\n *\n * ```scss\n * sci-sashbox {\n *   --sci-sashbox-splitter-background-color: black;\n *   --sci-sashbox-splitter-background-color-hover: black;\n * }\n * ```\n */\n@Component({\n  selector: 'sci-sashbox',\n  templateUrl: './sashbox.component.html',\n  styleUrls: ['./sashbox.component.scss'],\n  imports: [\n    NgTemplateOutlet,\n    SciSashInitializerDirective,\n    SciSplitterComponent,\n    SciElementRefDirective,\n  ],\n  providers: [{\n    provide: SciSashBoxAccessor,\n    useFactory: provideSashBoxAccessor,\n  }],\n})\nexport class SciSashboxComponent {\n\n  /**\n   * Specifies if to lay out sashes in a row (which is by default) or column arrangement.\n   */\n  public readonly direction = input<'column' | 'row'>('row');\n\n  /**\n   * Notifies when start sashing.\n   */\n  public readonly sashStart = output<void>();\n\n  /**\n   * Emits an array with new sash sizes when sashing ends.\n   *\n   * The array contains the sash sizes in display order.\n   *\n   * TODO [Angular 20] BREAKING CHANGE: Change signature from `number[]` to `{[key: string]: number}` and remove {@link sashEnd2}.\n   */\n  public readonly sashEnd = output<number[]>();\n\n  /**\n   * Emits an object with new sash sizes when sashing ends.\n   *\n   * Each sash size is associated with its {@link SciSashDirective.key} or its display position (zero-based) if not set.\n   *\n   * Note: This output will be renamed to `sashEnd` in version 20, changing the signature of {@link sashEnd} from `number[]` to `{[key: string]: number}`.\n   *\n   * TODO [Angular 20] BREAKING CHANGE: Replace with {@link sashEnd}.\n   */\n  public readonly sashEnd2 = output<{[key: string]: number}>();\n\n  private readonly _host = inject(ElementRef).nativeElement as HTMLElement;\n\n  /** @internal */\n  public readonly sashes = contentChildren(SciSashDirective);\n\n  @HostBinding('class.sashing')\n  protected sashing = false;\n\n  @HostBinding('style.--ɵsci-sashbox-max-height')\n  protected maxHeight: number | undefined;\n\n  @HostBinding('style.--ɵsci-sashbox-max-width')\n  protected maxWidth: number | undefined;\n\n  protected onSashStart(): void {\n    this.sashing = true;\n\n    // Avoid overflow when sashing.\n    const hostBounds = this._host.getBoundingClientRect();\n    this.maxHeight = hostBounds.height;\n    this.maxWidth = hostBounds.width;\n    this.sashStart.emit();\n\n    // Set the effective sash size as the flex-basis for non-fixed sashes (as sashing operates on pixel deltas).\n    this.sashes().forEach(sash => {\n      if (!sash.isFixedSize()) {\n        sash.updateFlexProperties({\n          flexGrow: 0,\n          flexShrink: 1,\n          flexBasis: `${sash.elementSize}px`,\n        });\n      }\n    });\n  }\n\n  protected onSashEnd(): void {\n    this.sashing = false;\n    this.maxHeight = undefined;\n    this.maxWidth = undefined;\n\n    // Unset the flex-basis for non-fixed sashes and set the flex-grow accordingly.\n    const pixelToFlexGrowFactor = computePixelToFlexGrowFactor(this.sashes());\n    const sashSizes = this.sashes().reduce((acc, sash, i) => acc.set(sash.computeKey(i), sash.elementSize), new Map<string, number>());\n\n    this.sashes().forEach((sash, i) => {\n      if (!sash.isFixedSize()) {\n        sash.updateFlexProperties({\n          flexGrow: pixelToFlexGrowFactor * sashSizes.get(sash.computeKey(i))!,\n          flexShrink: 1,\n          flexBasis: '0',\n        });\n      }\n    });\n\n    this.sashEnd.emit(Array.from(sashSizes.values()));\n    this.sashEnd2.emit(Object.fromEntries(sashSizes));\n  }\n\n  protected onSash(splitter: HTMLElement, sashIndex: number, moveEvent: SplitterMoveEvent): void {\n    NgZone.assertNotInAngularZone();\n\n    const distance = moveEvent.distance;\n    if (distance === 0) {\n      return;\n    }\n\n    // Compute the splitter position.\n    const splitterRect = splitter.getBoundingClientRect();\n    const splitterStart = (this.isRowDirection ? splitterRect.left : splitterRect.top);\n    const splitterEnd = (this.isRowDirection ? splitterRect.left + splitterRect.width : splitterRect.top + splitterRect.height);\n\n    // Ignore the event if outside the splitter's action scope.\n    const eventPos = moveEvent.position.clientPos;\n    // 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.\n    if (distance > 0 && eventPos < splitterStart) {\n      return;\n    }\n\n    // 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.\n    if (distance < 0 && eventPos > splitterEnd) {\n      return;\n    }\n\n    // Compute the new sash sizes.\n    const sash1 = this.sashes()[sashIndex]!;\n    const sash2 = this.sashes()[sashIndex + 1]!;\n\n    const sashSize1 = sash1.elementSize;\n    const sashSize2 = sash2.elementSize;\n\n    const sashMinSize1 = sash1.minSize() ? this.toPixel(sash1.minSize()!) : 0;\n    const sashMinSize2 = sash2.minSize() ? this.toPixel(sash2.minSize()!) : 0;\n\n    const newSashSize1 = between(Math.round(sashSize1 + distance), {min: sashMinSize1, max: sashSize1 + sashSize2 - sashMinSize2});\n    const newSashSize2 = between(Math.round(sashSize2 - distance), {min: sashMinSize2, max: sashSize1 + sashSize2 - sashMinSize1});\n\n    // Set the new computed sash sizes.\n    sash1.updateFlexProperties({flexBasis: `${newSashSize1}px`});\n    sash2.updateFlexProperties({flexBasis: `${newSashSize2}px`});\n  }\n\n  protected onSashReset(sashIndex: number): void {\n    const sash1 = this.sashes()[sashIndex]!;\n    const sash2 = this.sashes()[sashIndex + 1]!;\n    const equalSashSize = (sash1.elementSize + sash2.elementSize) / 2;\n    const pixelToFlexGrowFactor = computePixelToFlexGrowFactor(this.sashes());\n\n    const sashSizesAfterReset = this.sashes().reduce((acc, sash, index) => {\n      const size = index === sashIndex || index === sashIndex + 1 ? equalSashSize : sash.elementSize;\n      return acc.set(sash.computeKey(index), size);\n    }, new Map<string, number>());\n\n    [sash1, sash2].forEach(sash => {\n      if (sash.isFixedSize()) {\n        sash.updateFlexProperties({flexBasis: `${equalSashSize}px`});\n      }\n      else {\n        sash.updateFlexProperties({flexGrow: pixelToFlexGrowFactor * equalSashSize});\n      }\n    });\n\n    this.sashStart.emit();\n    this.sashEnd.emit(Array.from(sashSizesAfterReset.values()));\n    this.sashEnd2.emit(Object.fromEntries(sashSizesAfterReset));\n  }\n\n  @HostBinding('class.column')\n  protected get isColumnDirection(): boolean {\n    return this.direction() === 'column';\n  }\n\n  @HostBinding('class.row')\n  protected get isRowDirection(): boolean {\n    return this.direction() === 'row';\n  }\n\n  private toPixel(value: string | number): number {\n    if (typeof value === 'number') {\n      return value;\n    }\n    if (value.endsWith('%')) {\n      const hostBounds = this._host.getBoundingClientRect();\n      const hostSize = (this.isRowDirection ? hostBounds.width : hostBounds.height);\n      return parseInt(value, 10) * hostSize / 100;\n    }\n    return parseInt(value, 10);\n  }\n}\n\nfunction between(value: number, minmax: {min: number; max: number}): number {\n  return Math.min(minmax.max, Math.max(minmax.min, value));\n}\n\n/**\n * Returns the factor to compute the flex-grow proportion from the pixel size of a sash.\n */\nfunction computePixelToFlexGrowFactor(sashes: readonly SciSashDirective[]): number {\n  const flexibleSashes = sashes.filter(sash => !sash.isFixedSize());\n\n  const proportionSum = flexibleSashes.reduce((sum, sash) => sum + Number(sash.size()), 0);\n  const pixelSum = flexibleSashes.reduce((sum, sash) => sum + sash.elementSize, 0);\n\n  return proportionSum / pixelSum;\n}\n\nfunction provideSashBoxAccessor(): SciSashBoxAccessor {\n  const component = inject(SciSashboxComponent);\n\n  return new class implements SciSashBoxAccessor {\n    public readonly direction = component.direction;\n    public readonly sashes = component.sashes;\n  }();\n}\n","@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","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {NgModule} from '@angular/core';\nimport {SciSashboxComponent} from './sashbox.component';\nimport {SciSashDirective} from './sash.directive';\n\n/**\n * Provides a sashbox component that lays out its children in a row or column arrangement and places a splitter between each child.\n *\n * ### Usage:\n *\n * ```html\n * <sci-sashbox direction=\"row\">\n *   <ng-template sciSash size=\"1\">\n *     ...\n *   </ng-template>\n *\n *   <ng-template sciSash size=\"2\">\n *     ...\n *   </ng-template>\n *\n *   <ng-template sciSash size=\"1\">\n *     ...\n *   </ng-template>\n * </sci-sashbox>\n * ```\n *\n * @deprecated since version 19.0.0; Import standalone component and directive instead; API will be removed in a future release.\n */\n@NgModule({ // TODO [Angular 20] Remove deprecated NgModule\n  imports: [\n    SciSashboxComponent,\n    SciSashDirective,\n  ],\n  exports: [\n    SciSashboxComponent,\n    SciSashDirective,\n  ],\n})\nexport class SciSashboxModule {\n}\n","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\n/*\n * Secondary entrypoint: '@scion/components/sashbox'\n *\n * @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n */\nexport {SciSashboxModule} from './sashbox.module';\nexport {SciSashboxComponent} from './sashbox.component';\nexport {SciSashDirective} from './sash.directive';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;AAGA;;AAEG;MACmB,kBAAkB,CAAA;AAKvC;;ACXD;;;;;;;;AAQG;AAKH;;;;;;;;;;;;;;;;;;AAkBG;MAKU,gBAAgB,CAAA;AAE3B;;;;;;AAMG;AACa,IAAA,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,EAAC,SAAS,EAAE,CAAC,IAAwC,KAAsB,IAAI,IAAI,GAAG,EAAC,CAAC;AAE1H;;;;;AAKG;IACa,OAAO,GAAG,KAAK,EAA+B;AAE9D;;;;AAIG;IACa,GAAG,GAAG,KAAK,EAAsB;AAEjD;;;;AAIG;AACa,IAAA,YAAY,GAAG,MAAM,CAAoB,WAAW,CAAC;AACpD,IAAA,gBAAgB,GAAG,MAAM,CAAC,kBAAkB,CAAC;AAE9D;;AAEG;AACc,IAAA,eAAe,GAAG,IAAI,CAAC,qBAAqB,EAAE;AAE/D;;;;;;AAMG;IACa,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC;AAE7E;;;;AAIG;AACa,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;AAExE;;;;AAIG;AACa,IAAA,OAAO,GAAG,MAAM,CAA0B,SAAS,CAAC;AAEpE;;;;AAIG;AACH,IAAA,IAAW,WAAW,GAAA;AACpB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;QAC9B,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,CAAC;;QAEV,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,KAAK,EAAE;AAC/C,YAAA,OAAO,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK;;aAEzC;AACH,YAAA,OAAO,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM;;;AAIjD;;;;AAIG;AACI,IAAA,UAAU,CAAC,KAAa,EAAA;QAC7B,OAAO,IAAI,CAAC,GAAG,EAAE,IAAI,CAAG,EAAA,KAAK,EAAE;;AAGjC;;;;AAIG;AACI,IAAA,oBAAoB,CAAC,cAAuC,EAAA;AACjE,QAAA,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,sBAAsB,KAAK,EAAC,GAAG,sBAAsB,EAAE,GAAG,cAAc,EAAC,CAAC,CAAC;;AAGzG;;AAEG;IACK,qBAAqB,GAAA;QAC3B,OAAO,YAAY,CAAC,MAAK;AACvB,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACxB,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;;gBAEtB,OAAO;AACL,oBAAA,QAAQ,EAAE,CAAC;AACX,oBAAA,UAAU,EAAE,CAAC;oBACb,SAAS,EAAE,CAAG,EAAA,IAAI,CAAE,CAAA;iBACrB;;iBAEE;;AAEH,gBAAA,MAAM,UAAU,GAAG,CAAC,IAAI;AACxB,gBAAA,IAAI,UAAU,GAAG,CAAC,EAAE;oBAClB,MAAM,KAAK,CAAC,CAAqF,kFAAA,EAAA,IAAI,CAAC,IAAI,EAAE,CAAG,CAAA,CAAA,CAAC;;gBAElH,OAAO;AACL,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,UAAU,EAAE,CAAC;AACb,oBAAA,SAAS,EAAE,GAAG;iBACf;;AAEL,SAAC,CAAC;;AAGJ;;;;;AAKG;AACK,IAAA,iBAAiB,CAAC,cAAsC,EAAA;QAC9D,OAAO,QAAQ,CAAC,MAAK;YACnB,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE;YAC7C,MAAM,EAAC,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAC,GAAG,cAAc,EAAE;YAC1D,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;YAE1F,OAAO;AACL,gBAAA,QAAQ,EAAE,QAAQ,KAAK,CAAC,IAAI,WAAW,KAAK,CAAC,GAAG,CAAC,GAAG,QAAQ,GAAG,WAAW;gBAC1E,UAAU;gBACV,SAAS;aACV;AACH,SAAC,CAAC;;uGAhJO,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAhB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAJ5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sBAAsB;AAChC,oBAAA,QAAQ,EAAE,SAAS;AACpB,iBAAA;;;ACnCD;;;;;;;;AAQG;AAKH;;AAEG;MAIU,2BAA2B,CAAA;IAEtB,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAmB,EAAC,KAAK,EAAE,oBAAoB,EAAC,CAAC;AAEtF,IAAA,WAAA,GAAA;QACE,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,aAA+B;AAC/D,QAAA,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;;uGANlC,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAA3B,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAA3B,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAHvC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,8BAA8B;AACzC,iBAAA;;;AClBD;;;;;;;;AAQG;AAIH;;AAEG;MAKU,sBAAsB,CAAA;AAEjB,IAAA,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,aAA4B;uGAF3D,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,QAAQ,EAAE,eAAe;AAC1B,iBAAA;;;AClBD;;;;;;;;AAQG;AAUH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDG;MAgBU,mBAAmB,CAAA;AAE9B;;AAEG;AACa,IAAA,SAAS,GAAG,KAAK,CAAmB,KAAK,CAAC;AAE1D;;AAEG;IACa,SAAS,GAAG,MAAM,EAAQ;AAE1C;;;;;;AAMG;IACa,OAAO,GAAG,MAAM,EAAY;AAE5C;;;;;;;;AAQG;IACa,QAAQ,GAAG,MAAM,EAA2B;AAE3C,IAAA,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,aAA4B;;AAGxD,IAAA,MAAM,GAAG,eAAe,CAAC,gBAAgB,CAAC;IAGhD,OAAO,GAAG,KAAK;AAGf,IAAA,SAAS;AAGT,IAAA,QAAQ;IAER,WAAW,GAAA;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;QAGnB,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE;AACrD,QAAA,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,MAAM;AAClC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC,KAAK;AAChC,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;QAGrB,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,IAAI,IAAG;AAC3B,YAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;gBACvB,IAAI,CAAC,oBAAoB,CAAC;AACxB,oBAAA,QAAQ,EAAE,CAAC;AACX,oBAAA,UAAU,EAAE,CAAC;AACb,oBAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAC,WAAW,CAAI,EAAA,CAAA;AACnC,iBAAA,CAAC;;AAEN,SAAC,CAAC;;IAGM,SAAS,GAAA;AACjB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;;QAGzB,MAAM,qBAAqB,GAAG,4BAA4B,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;AACzE,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,GAAG,EAAkB,CAAC;QAElI,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;AAChC,YAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;gBACvB,IAAI,CAAC,oBAAoB,CAAC;AACxB,oBAAA,QAAQ,EAAE,qBAAqB,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAE;AACpE,oBAAA,UAAU,EAAE,CAAC;AACb,oBAAA,SAAS,EAAE,GAAG;AACf,iBAAA,CAAC;;AAEN,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC;AACjD,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;;AAGzC,IAAA,MAAM,CAAC,QAAqB,EAAE,SAAiB,EAAE,SAA4B,EAAA;QACrF,MAAM,CAAC,sBAAsB,EAAE;AAE/B,QAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ;AACnC,QAAA,IAAI,QAAQ,KAAK,CAAC,EAAE;YAClB;;;AAIF,QAAA,MAAM,YAAY,GAAG,QAAQ,CAAC,qBAAqB,EAAE;AACrD,QAAA,MAAM,aAAa,IAAI,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,GAAG,YAAY,CAAC,GAAG,CAAC;QAClF,MAAM,WAAW,IAAI,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,GAAG,YAAY,CAAC,KAAK,GAAG,YAAY,CAAC,GAAG,GAAG,YAAY,CAAC,MAAM,CAAC;;AAG3H,QAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC,SAAS;;QAE7C,IAAI,QAAQ,GAAG,CAAC,IAAI,QAAQ,GAAG,aAAa,EAAE;YAC5C;;;QAIF,IAAI,QAAQ,GAAG,CAAC,IAAI,QAAQ,GAAG,WAAW,EAAE;YAC1C;;;QAIF,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,SAAS,CAAE;QACvC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,SAAS,GAAG,CAAC,CAAE;AAE3C,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW;AACnC,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW;QAEnC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,EAAG,CAAC,GAAG,CAAC;QACzE,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,EAAG,CAAC,GAAG,CAAC;QAEzE,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC,EAAE,EAAC,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,SAAS,GAAG,SAAS,GAAG,YAAY,EAAC,CAAC;QAC9H,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC,EAAE,EAAC,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,SAAS,GAAG,SAAS,GAAG,YAAY,EAAC,CAAC;;QAG9H,KAAK,CAAC,oBAAoB,CAAC,EAAC,SAAS,EAAE,CAAA,EAAG,YAAY,CAAA,EAAA,CAAI,EAAC,CAAC;QAC5D,KAAK,CAAC,oBAAoB,CAAC,EAAC,SAAS,EAAE,CAAA,EAAG,YAAY,CAAA,EAAA,CAAI,EAAC,CAAC;;AAGpD,IAAA,WAAW,CAAC,SAAiB,EAAA;QACrC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,SAAS,CAAE;QACvC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,SAAS,GAAG,CAAC,CAAE;AAC3C,QAAA,MAAM,aAAa,GAAG,CAAC,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,CAAC;QACjE,MAAM,qBAAqB,GAAG,4BAA4B,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;AAEzE,QAAA,MAAM,mBAAmB,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,KAAI;YACpE,MAAM,IAAI,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,GAAG,CAAC,GAAG,aAAa,GAAG,IAAI,CAAC,WAAW;AAC9F,YAAA,OAAO,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;AAC9C,SAAC,EAAE,IAAI,GAAG,EAAkB,CAAC;QAE7B,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;AAC5B,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;gBACtB,IAAI,CAAC,oBAAoB,CAAC,EAAC,SAAS,EAAE,CAAA,EAAG,aAAa,CAAA,EAAA,CAAI,EAAC,CAAC;;iBAEzD;gBACH,IAAI,CAAC,oBAAoB,CAAC,EAAC,QAAQ,EAAE,qBAAqB,GAAG,aAAa,EAAC,CAAC;;AAEhF,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACrB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,CAAC;AAC3D,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;;AAG7D,IAAA,IACc,iBAAiB,GAAA;AAC7B,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE,KAAK,QAAQ;;AAGtC,IAAA,IACc,cAAc,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE,KAAK,KAAK;;AAG3B,IAAA,OAAO,CAAC,KAAsB,EAAA;AACpC,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,YAAA,OAAO,KAAK;;AAEd,QAAA,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YACvB,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE;AACrD,YAAA,MAAM,QAAQ,IAAI,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC;YAC7E,OAAO,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,QAAQ,GAAG,GAAG;;AAE7C,QAAA,OAAO,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC;;uGAjLjB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,ohBALnB,CAAC;AACV,gBAAA,OAAO,EAAE,kBAAkB;AAC3B,gBAAA,UAAU,EAAE,sBAAsB;aACnC,CAAC,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,SAAA,EAqCuC,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1H3D,o1BAmBA,EAAA,MAAA,EAAA,CAAA,s5CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED0DI,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,2BAA2B,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC3B,oBAAoB,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACpB,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAOb,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAf/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAGd,OAAA,EAAA;wBACP,gBAAgB;wBAChB,2BAA2B;wBAC3B,oBAAoB;wBACpB,sBAAsB;AACvB,qBAAA,EAAA,SAAA,EACU,CAAC;AACV,4BAAA,OAAO,EAAE,kBAAkB;AAC3B,4BAAA,UAAU,EAAE,sBAAsB;yBACnC,CAAC,EAAA,QAAA,EAAA,o1BAAA,EAAA,MAAA,EAAA,CAAA,s5CAAA,CAAA,EAAA;8BAwCQ,OAAO,EAAA,CAAA;sBADhB,WAAW;uBAAC,eAAe;gBAIlB,SAAS,EAAA,CAAA;sBADlB,WAAW;uBAAC,iCAAiC;gBAIpC,QAAQ,EAAA,CAAA;sBADjB,WAAW;uBAAC,gCAAgC;gBAoH/B,iBAAiB,EAAA,CAAA;sBAD9B,WAAW;uBAAC,cAAc;gBAMb,cAAc,EAAA,CAAA;sBAD3B,WAAW;uBAAC,WAAW;;AAkB1B,SAAS,OAAO,CAAC,KAAa,EAAE,MAAkC,EAAA;AAChE,IAAA,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;AAC1D;AAEA;;AAEG;AACH,SAAS,4BAA4B,CAAC,MAAmC,EAAA;AACvE,IAAA,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;IAEjE,MAAM,aAAa,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;IACxF,MAAM,QAAQ,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;IAEhF,OAAO,aAAa,GAAG,QAAQ;AACjC;AAEA,SAAS,sBAAsB,GAAA;AAC7B,IAAA,MAAM,SAAS,GAAG,MAAM,CAAC,mBAAmB,CAAC;AAE7C,IAAA,OAAO,IAAI,MAAA;AACO,QAAA,SAAS,GAAG,SAAS,CAAC,SAAS;AAC/B,QAAA,MAAM,GAAG,SAAS,CAAC,MAAM;AAC1C,KAAA,EAAE;AACL;;AEnSA;;;;;;;;AAQG;AAMH;;;;;;;;;;;;;;;;;;;;;;AAsBG;MAWU,gBAAgB,CAAA;uGAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,YARzB,mBAAmB;AACnB,YAAA,gBAAgB,aAGhB,mBAAmB;YACnB,gBAAgB,CAAA,EAAA,CAAA;AAGP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,YARzB,mBAAmB,CAAA,EAAA,CAAA;;2FAQV,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAV5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;wBACP,mBAAmB;wBACnB,gBAAgB;AACjB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,mBAAmB;wBACnB,gBAAgB;AACjB,qBAAA;AACF,iBAAA;;;AC9CD;;;;;;;;AAQG;AAEH;;;;AAIG;;ACdH;;AAEG;;;;"}
+{"version":3,"file":"scion-components-sashbox.mjs","sources":["../../../../projects/scion/components/sashbox/src/sashbox-accessor.ts","../../../../projects/scion/components/sashbox/src/sash.directive.ts","../../../../projects/scion/components/sashbox/src/element-ref.directive.ts","../../../../projects/scion/components/sashbox/src/sash/sash.component.ts","../../../../projects/scion/components/sashbox/src/sash/sash.component.html","../../../../projects/scion/components/sashbox/src/sashbox.component.ts","../../../../projects/scion/components/sashbox/src/sashbox.component.html","../../../../projects/scion/components/sashbox/src/sashbox.module.ts","../../../../projects/scion/components/sashbox/src/public_api.ts","../../../../projects/scion/components/sashbox/src/scion-components-sashbox.ts"],"sourcesContent":["/*\n * Copyright (c) 2018-2025 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {SciSashDirective} from './sash.directive';\nimport {Signal} from '@angular/core';\n\n/**\n * Allows accessing the sashbox component from sashes.\n */\nexport abstract class SciSashBoxAccessor {\n\n  public abstract readonly sashes: Signal<readonly SciSashDirective[]>;\n  public abstract readonly direction: Signal<'column' | 'row'>;\n  public abstract readonly afterFirstRender: Signal<boolean>;\n}\n","/*\n * Copyright (c) 2018-2025 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {booleanAttribute, computed, Directive, inject, input, linkedSignal, signal, Signal, TemplateRef, WritableSignal} from '@angular/core';\nimport {SciSashBoxAccessor} from './sashbox-accessor';\nimport {SashComponent} from './sash/sash.component';\n\n/**\n * Use this directive to model a sash for {@link SciSashboxComponent}.\n * The host element of this modelling directive must be a <ng-template> which is used as sash template.\n *\n *\n * ### Usage:\n *\n * <sci-sashbox direction=\"row\">\n *   <!-- fixed size sash -->\n *   <ng-template sciSash size=\"200px\">\n *     ...\n *   </ng-template>\n *\n *   <!-- sash which takes the remaining space -->\n *   <ng-template sciSash>\n *     ...\n *   </ng-template>\n * </sci-sashbox>\n */\n@Directive({\n  selector: 'ng-template[sciSash]',\n  exportAs: 'sciSash',\n})\nexport class SciSashDirective {\n\n  /**\n   * Specifies the sash size, either as fixed size with an explicit unit,\n   * or as a unitless proportion to distribute remaining space. A proportional\n   * sash has the ability to grow or shrink if necessary, and must be >= 1.\n   *\n   * If not set, remaining space is distributed equally.\n   */\n  public readonly size = input('1', {transform: (size: string | number | null | undefined): string | number => size ?? '1'});\n\n  /**\n   * Specifies the minimal sash size in pixel or percent.\n   * The min-size prevents the user from shrinking the sash below this minimal size.\n   *\n   * If the unit is omitted, the value is interpreted as a pixel value.\n   */\n  public readonly minSize = input<string | number | undefined>();\n\n  /**\n   * Specifies an optional key to identify this sash.\n   *\n   * The key is used as the property key in the object emitted by {@link SciSashboxComponent.sashEnd2} to associate the size of this sash.\n   */\n  public readonly key = input<string | undefined>();\n\n  /**\n   * Controls whether to animate the entering and leaving of this sash, only if fixed-sized. Defaults to `false`.\n   *\n   * Enabling animation will mimic the behavior of a side panel that slides in or out.\n   *\n   * Note: Animates only sashes added or removed after the initial rendering.\n   */\n  public readonly animate = input(false, {transform: booleanAttribute});\n\n  private readonly _sashBoxAccessor = inject(SciSashBoxAccessor);\n  private readonly _component = signal<SashComponent | undefined>(undefined);\n\n  /**\n   * Flex properties computed based on the configured {@link size}. Properties are updated when moving this sash.\n   */\n  private readonly _flexProperties = this.computeFlexProperties();\n\n  /**\n   * Represents the template used as sash content.\n   *\n   * @internal\n   */\n  public readonly sashTemplate = inject<TemplateRef<void>>(TemplateRef);\n\n  /**\n   * Flex properties with normalized 'flex-grow' to ensure the sashes fill the entire sash-box space.\n   *\n   * Use these properties to lay out this sash in the sashbox's flex layout.\n   *\n   * @internal\n   */\n  public readonly flexProperties = this.normalizeFlexGrow(this._flexProperties);\n\n  /**\n   * Returns if this sash has a fixed size, meaning that it has not the ability to grow or shrink.\n   *\n   * @internal\n   */\n  public readonly isFixedSize = computed(() => Number.isNaN(+this.size()));\n\n  /**\n   * Gets the component that renders this sash.\n   *\n   * @internal\n   */\n  public readonly component = computed(() => this._component() ?? throwError('[SciSashbox] SashComponent not available yet.'));\n\n  /**\n   * Sets the component that renders this sash.\n   *\n   * @internal\n   */\n  public setComponent(component: SashComponent): void {\n    this._component.set(component);\n  }\n\n  /**\n   * Returns the identity of this sash, or the passed index if not configured.\n   *\n   * @internal\n   */\n  public computeKey(index: number): string {\n    return this.key() ?? `${index}`;\n  }\n\n  /**\n   * Updates the flex properties of this sash for layout in the sashbox's flex layout.\n   *\n   * @internal\n   */\n  public updateFlexProperties(flexProperties: Partial<FlexProperties>): void {\n    this._flexProperties.update(previousFlexProperties => ({...previousFlexProperties, ...flexProperties}));\n  }\n\n  /**\n   * Computes the flex properties to lay out this sash in the sashbox's flex layout based on the configured {@link size}.\n   */\n  private computeFlexProperties(): WritableSignal<FlexProperties> {\n    return linkedSignal(() => {\n      const size = this.size();\n      if (this.isFixedSize()) {\n        // fixed-sized sash\n        return {\n          flexGrow: 0,\n          flexShrink: 0,\n          flexBasis: `${size}`,\n        };\n      }\n      else {\n        // remaining space is distributed according to given proportion\n        const proportion = +size;\n        if (proportion < 1) {\n          throw Error(`[IllegalSashSizeError] The proportion for flexible sized sashes must be >=1 [size=${this.size()}]`);\n        }\n        return {\n          flexGrow: proportion,\n          flexShrink: 1,\n          flexBasis: '0',\n        };\n      }\n    });\n  }\n\n  /**\n   * Normalizes the 'flex-grow' of the passed {@link FlexProperties} to ensure that the sum of the 'flex-grow' proportions of all sashes is 1.\n   *\n   * If the sum of all flex-grow proportions were less than 1, the sashes would not fill the entire sash-box space.\n   * Without normalization, this could occur when a sash is removed.\n   */\n  private normalizeFlexGrow(flexProperties: Signal<FlexProperties>): Signal<FlexProperties> {\n    return computed(() => {\n      const sashes = this._sashBoxAccessor.sashes();\n      const {flexGrow, flexShrink, flexBasis} = flexProperties();\n      const flexGrowSum = sashes.reduce((sum, sash) => sum + sash._flexProperties().flexGrow, 0);\n\n      return {\n        flexGrow: flexGrow === 0 || flexGrowSum === 0 ? 0 : flexGrow / flexGrowSum, // Sum of normalized flex-grow proportions must be 1;\n        flexShrink,\n        flexBasis,\n      };\n    });\n  }\n}\n\n/**\n * Flex properties to lay out the sash in the sashbox's flex layout.\n */\ninterface FlexProperties {\n  flexGrow: number;\n  flexShrink: number;\n  flexBasis: string;\n}\n\nfunction throwError(error: string): never {\n  throw Error(error);\n}\n","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {Directive, ElementRef, inject} from '@angular/core';\n\n/**\n * Provides access to the native {@link HTMLElement} of the host.\n */\n@Directive({\n  selector: '[sciElementRef]',\n  exportAs: 'sciElementRef',\n})\nexport class SciElementRefDirective {\n\n  public readonly host = inject(ElementRef).nativeElement as HTMLElement;\n}\n","/*\n * Copyright (c) 2018-2025 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {ChangeDetectorRef, Component, computed, effect, ElementRef, inject, input, linkedSignal, Signal} from '@angular/core';\nimport {NgTemplateOutlet} from '@angular/common';\nimport {animate, AnimationMetadata, style, transition, trigger} from '@angular/animations';\nimport {SciSashBoxAccessor} from '../sashbox-accessor';\nimport {SciSashDirective} from '../sash.directive';\n\n/**\n * Represents a {@link SciSashDirective} in the DOM, displaying the specified sash template.\n */\n@Component({\n  selector: 'sci-sash',\n  templateUrl: './sash.component.html',\n  styleUrls: ['./sash.component.scss'],\n  imports: [\n    NgTemplateOutlet,\n  ],\n  animations: [\n    trigger('sash-animation', provideAnimation()),\n  ],\n  host: {\n    '[@sash-animation]': 'animationState()',\n    '(@sash-animation.done)': 'onAnimationEnd();',\n  },\n})\nexport class SashComponent {\n\n  /**\n   * Specifies the sash representing this component.\n   */\n  public readonly sash = input.required<SciSashDirective>();\n\n  private readonly _host = inject(ElementRef).nativeElement as HTMLElement;\n  private readonly _cd = inject(ChangeDetectorRef);\n  private readonly _sashBoxAccessor = inject(SciSashBoxAccessor);\n\n  protected readonly animationState = linkedSignal<'enter' | 'leave' | null>(() => this.sash().animate() && this._sashBoxAccessor.afterFirstRender() ? 'enter' : null);\n\n  constructor() {\n    // Associate sash with this component.\n    effect(() => this.sash().setComponent(this));\n  }\n\n  /**\n   * Starts the leave animation, returning a signal to track animation completion.\n   */\n  public startLeaveAnimation(): Signal<void> {\n    // Detach change detector to prevent updates to the component during the animation.\n    this._cd.detach();\n    // Trigger 'leave' animation.\n    this.animationState.set('leave');\n    // Return signal to track animation completion.\n    return computed(() => void this.animationState(), {equal: () => false});\n  }\n\n  /**\n   * Notifies when ending the animation.\n   */\n  protected onAnimationEnd(): void {\n    this.animationState.set(null);\n  }\n\n  /**\n   * Gets the size of this sash in pixel.\n   */\n  public get size(): number {\n    const {width, height} = this._host.getBoundingClientRect();\n    return this._sashBoxAccessor.direction() === 'row' ? width : height;\n  }\n}\n\n/**\n * Returns animation metadata to slide-in and slide-out a sash.\n */\nfunction provideAnimation(): AnimationMetadata[] {\n  return [\n    transition('void => enter', [\n      style({'flex-basis': 0}),\n      animate(`125ms ease-out`, style({'flex-basis': '*'})),\n    ]),\n    transition('* => leave', [\n      style({'flex-basis': '*'}),\n      animate(`125ms ease-out`, style({'flex-basis': 0})),\n    ]),\n  ];\n}\n","<ng-container *ngTemplateOutlet=\"sash().sashTemplate\"/>\n","/*\n * Copyright (c) 2018-2025 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {afterNextRender, Component, contentChildren, effect, ElementRef, HostBinding, inject, input, IterableDiffers, NgZone, output, Signal, signal, untracked} from '@angular/core';\nimport {SciSplitterComponent, SplitterMoveEvent} from '@scion/components/splitter';\nimport {SciSashDirective} from './sash.directive';\nimport {SciSashBoxAccessor} from './sashbox-accessor';\nimport {SciElementRefDirective} from './element-ref.directive';\nimport {SashComponent} from './sash/sash.component';\n\n/**\n * The <sci-sashbox> is like a CSS flexbox container that lays out its content children (sashes) in a row (which is by default)\n * or column arrangement (as specified by the direction property). A splitter is added between each child to allow the user to\n * shrink or stretch the individual sashes.\n *\n * Sashes are modelled as <ng-template> decorated with the 'sciSash' directive.\n * A sash can have a fixed size with an explicit unit, or a unitless proportion to distribute remaining space.\n * A proportional sash has the ability to grow or shrink if necessary.\n *\n * Sash content is added to a CSS grid container with a single column, stretching the content vertically and horizontally.\n *\n * ### Usage\n *\n * ```html\n * <sci-sashbox direction=\"row\">\n *   <ng-template sciSash size=\"1\">\n *     ...\n *   </ng-template>\n *\n *   <ng-template sciSash size=\"2\">\n *     ...\n *   </ng-template>\n *\n *   <ng-template sciSash size=\"1\">\n *     ...\n *   </ng-template>\n * </sci-sashbox>\n * ```\n *\n * ### Styling\n *\n * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.\n * To style a specific `sci-sashbox` component, the following CSS variables can be set directly on the component.\n *\n * - --sci-sashbox-gap: Sets the gaps (gutters) between sashes.\n * - --sci-sashbox-splitter-background-color: Sets the background color of the splitter.\n * - --sci-sashbox-splitter-background-color-hover: Sets the background color of the splitter when hovering it.\n * - --sci-sashbox-splitter-size: Sets the size of the splitter along the main axis.\n * - --sci-sashbox-splitter-size-hover: Sets the size of the splitter along the main axis when hovering it.\n * - --sci-sashbox-splitter-touch-target-size: Sets the touch target size to move the splitter (accessibility).\n * - --sci-sashbox-splitter-cross-axis-size: Sets the splitter size along the cross axis.\n * - --sci-sashbox-splitter-border-radius: Sets the border radius of the splitter.\n * - --sci-sashbox-splitter-opacity-active: Sets the opacity of the splitter while the user moves the splitter.\n * - --sci-sashbox-splitter-opacity-hover: Sets the opacity of the splitter when hovering it.\n *\n * Example:\n *\n * ```scss\n * sci-sashbox {\n *   --sci-sashbox-splitter-background-color: black;\n *   --sci-sashbox-splitter-background-color-hover: black;\n * }\n * ```\n */\n@Component({\n  selector: 'sci-sashbox',\n  templateUrl: './sashbox.component.html',\n  styleUrls: ['./sashbox.component.scss'],\n  imports: [\n    SciSplitterComponent,\n    SciElementRefDirective,\n    SashComponent,\n  ],\n  providers: [{\n    provide: SciSashBoxAccessor,\n    useFactory: provideSashBoxAccessor,\n  }],\n  host: {\n    '[attr.data-direction]': 'direction()',\n  },\n})\nexport class SciSashboxComponent {\n\n  /**\n   * Specifies if to lay out sashes in a row (which is by default) or column arrangement.\n   */\n  public readonly direction = input<'column' | 'row'>('row');\n\n  /**\n   * Notifies when start sashing.\n   */\n  public readonly sashStart = output<void>();\n\n  /**\n   * Emits an array with new sash sizes when sashing ends.\n   *\n   * The array contains the sash sizes in display order.\n   *\n   * TODO [Angular 20] BREAKING CHANGE: Change signature from `number[]` to `{[key: string]: number}` and remove {@link sashEnd2}.\n   */\n  public readonly sashEnd = output<number[]>();\n\n  /**\n   * Emits an object with new sash sizes when sashing ends.\n   *\n   * Each sash size is associated with its {@link SciSashDirective.key} or its display position (zero-based) if not set.\n   *\n   * Note: This output will be renamed to `sashEnd` in version 20, changing the signature of {@link sashEnd} from `number[]` to `{[key: string]: number}`.\n   *\n   * TODO [Angular 20] BREAKING CHANGE: Replace with {@link sashEnd}.\n   */\n  public readonly sashEnd2 = output<{[key: string]: number}>();\n\n  private readonly _host = inject(ElementRef).nativeElement as HTMLElement;\n  private readonly _contentChildren = contentChildren(SciSashDirective);\n\n  /** @internal */\n  public readonly sashes = this.computeSashes(this._contentChildren);\n  /** @internal */\n  public afterFirstRender = signal(false);\n\n  @HostBinding('class.sashing')\n  protected sashing = false;\n\n  @HostBinding('style.--ɵsci-sashbox-max-height')\n  protected maxHeight: number | undefined;\n\n  @HostBinding('style.--ɵsci-sashbox-max-width')\n  protected maxWidth: number | undefined;\n\n  constructor() {\n    this.detectFirstRendering();\n  }\n\n  protected onSashStart(): void {\n    this.sashing = true;\n\n    // Avoid overflow when sashing.\n    const hostBounds = this._host.getBoundingClientRect();\n    this.maxHeight = hostBounds.height;\n    this.maxWidth = hostBounds.width;\n    this.sashStart.emit();\n\n    // Set the effective sash size as the flex-basis for non-fixed sashes (as sashing operates on pixel deltas).\n    this.sashes().forEach(sash => {\n      if (!sash.isFixedSize()) {\n        sash.updateFlexProperties({\n          flexGrow: 0,\n          flexShrink: 1,\n          flexBasis: `${sash.component().size}px`,\n        });\n      }\n    });\n  }\n\n  protected onSashEnd(): void {\n    this.sashing = false;\n    this.maxHeight = undefined;\n    this.maxWidth = undefined;\n\n    // Unset the flex-basis for non-fixed sashes and set the flex-grow accordingly.\n    const pixelToFlexGrowFactor = computePixelToFlexGrowFactor(this.sashes());\n    const sashSizes = this.sashes().reduce((acc, sash, i) => acc.set(sash.computeKey(i), sash.component().size), new Map<string, number>());\n\n    this.sashes().forEach((sash, i) => {\n      if (!sash.isFixedSize()) {\n        sash.updateFlexProperties({\n          flexGrow: pixelToFlexGrowFactor * sashSizes.get(sash.computeKey(i))!,\n          flexShrink: 1,\n          flexBasis: '0',\n        });\n      }\n    });\n\n    this.sashEnd.emit(Array.from(sashSizes.values()));\n    this.sashEnd2.emit(Object.fromEntries(sashSizes));\n  }\n\n  protected onSash(splitter: HTMLElement, sashIndex: number, moveEvent: SplitterMoveEvent): void {\n    NgZone.assertNotInAngularZone();\n\n    const distance = moveEvent.distance;\n    if (distance === 0) {\n      return;\n    }\n\n    // Compute the splitter position.\n    const splitterRect = splitter.getBoundingClientRect();\n    const splitterStart = (this.direction() === 'row' ? splitterRect.left : splitterRect.top);\n    const splitterEnd = (this.direction() === 'row' ? splitterRect.left + splitterRect.width : splitterRect.top + splitterRect.height);\n\n    // Ignore the event if outside the splitter's action scope.\n    const eventPos = moveEvent.position.clientPos;\n    // 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.\n    if (distance > 0 && eventPos < splitterStart) {\n      return;\n    }\n\n    // 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.\n    if (distance < 0 && eventPos > splitterEnd) {\n      return;\n    }\n\n    // Compute the new sash sizes.\n    const sash1 = this.sashes()[sashIndex]!;\n    const sash2 = this.sashes()[sashIndex + 1]!;\n\n    const sashSize1 = sash1.component().size;\n    const sashSize2 = sash2.component().size;\n\n    const sashMinSize1 = sash1.minSize() ? this.toPixel(sash1.minSize()!) : 0;\n    const sashMinSize2 = sash2.minSize() ? this.toPixel(sash2.minSize()!) : 0;\n\n    const newSashSize1 = between(Math.round(sashSize1 + distance), {min: sashMinSize1, max: sashSize1 + sashSize2 - sashMinSize2});\n    const newSashSize2 = between(Math.round(sashSize2 - distance), {min: sashMinSize2, max: sashSize1 + sashSize2 - sashMinSize1});\n\n    // Set the new computed sash sizes.\n    sash1.updateFlexProperties({flexBasis: `${newSashSize1}px`});\n    sash2.updateFlexProperties({flexBasis: `${newSashSize2}px`});\n  }\n\n  protected onSashReset(sashIndex: number): void {\n    const sash1 = this.sashes()[sashIndex]!;\n    const sash2 = this.sashes()[sashIndex + 1]!;\n    const equalSashSize = (sash1.component().size + sash2.component().size) / 2;\n    const pixelToFlexGrowFactor = computePixelToFlexGrowFactor(this.sashes());\n\n    const sashSizesAfterReset = this.sashes().reduce((acc, sash, index) => {\n      const size = index === sashIndex || index === sashIndex + 1 ? equalSashSize : sash.component().size;\n      return acc.set(sash.computeKey(index), size);\n    }, new Map<string, number>());\n\n    [sash1, sash2].forEach(sash => {\n      if (sash.isFixedSize()) {\n        sash.updateFlexProperties({flexBasis: `${equalSashSize}px`});\n      }\n      else {\n        sash.updateFlexProperties({flexGrow: pixelToFlexGrowFactor * equalSashSize});\n      }\n    });\n\n    this.sashStart.emit();\n    this.sashEnd.emit(Array.from(sashSizesAfterReset.values()));\n    this.sashEnd2.emit(Object.fromEntries(sashSizesAfterReset));\n  }\n\n  private toPixel(value: string | number): number {\n    if (typeof value === 'number') {\n      return value;\n    }\n    if (value.endsWith('%')) {\n      const hostBounds = this._host.getBoundingClientRect();\n      const hostSize = (this.direction() === 'row' ? hostBounds.width : hostBounds.height);\n      return parseInt(value, 10) * hostSize / 100;\n    }\n    return parseInt(value, 10);\n  }\n\n  /**\n   * Detects when rendered this component for the first time.\n   */\n  private detectFirstRendering(): void {\n    afterNextRender({\n      read: () => this.afterFirstRender.set(true),\n    });\n  }\n\n  /**\n   * Mirrors the provided signal. If animated sashes are being removed, delays emission until the animation completes,\n   * effectively removing the element after the animation.\n   *\n   * Delayed removal is required for CDK Portals to not remove displayed content immediately.\n   */\n  private computeSashes(contentChildren: Signal<readonly SciSashDirective[]>): Signal<readonly SciSashDirective[]> {\n    const differ = inject(IterableDiffers).find([]).create<SciSashDirective>();\n    const sashes = signal<readonly SciSashDirective[]>([]);\n\n    effect(() => {\n      // Compute removed sashes to be removed with an animation.\n      const removedAnimatedSashes = new Array<SciSashDirective>();\n      differ.diff(contentChildren())?.forEachRemovedItem(({item: sash}) => untracked(() => {\n        if (sash.animate()) {\n          removedAnimatedSashes.push(sash);\n        }\n      }));\n\n      // Emit if no sashes are removed with an animation.\n      if (!removedAnimatedSashes.length) {\n        sashes.set(contentChildren());\n        return;\n      }\n\n      // Delay emission until a leave animation completes.\n      removedAnimatedSashes.forEach(sash => {\n        // Start the leave animation.\n        const done = sash.component().startLeaveAnimation();\n        // Track animation completion, re-running this effect to finally emit the sashes.\n        done();\n      });\n    });\n\n    return sashes;\n  }\n}\n\nfunction between(value: number, minmax: {min: number; max: number}): number {\n  return Math.min(minmax.max, Math.max(minmax.min, value));\n}\n\n/**\n * Returns the factor to compute the flex-grow proportion from the pixel size of a sash.\n */\nfunction computePixelToFlexGrowFactor(sashes: readonly SciSashDirective[]): number {\n  const flexibleSashes = sashes.filter(sash => !sash.isFixedSize());\n\n  const proportionSum = flexibleSashes.reduce((sum, sash) => sum + Number(sash.size()), 0);\n  const pixelSum = flexibleSashes.reduce((sum, sash) => sum + sash.component().size, 0);\n\n  return proportionSum / pixelSum;\n}\n\nfunction provideSashBoxAccessor(): SciSashBoxAccessor {\n  const component = inject(SciSashboxComponent);\n\n  return new class implements SciSashBoxAccessor {\n    public readonly sashes = component.sashes;\n    public readonly direction = component.direction;\n    public readonly afterFirstRender = component.afterFirstRender;\n  }();\n}\n","@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]=\"direction() === 'row' ? 'vertical' : 'horizontal'\"\n                  (start)=\"onSashStart()\"\n                  (move)=\"onSash(sciElementRef.host, i, $event)\"\n                  (end)=\"onSashEnd()\"\n                  (reset)=\"onSashReset(i)\"/>\n  }\n}\n","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\nimport {NgModule} from '@angular/core';\nimport {SciSashboxComponent} from './sashbox.component';\nimport {SciSashDirective} from './sash.directive';\n\n/**\n * Provides a sashbox component that lays out its children in a row or column arrangement and places a splitter between each child.\n *\n * ### Usage:\n *\n * ```html\n * <sci-sashbox direction=\"row\">\n *   <ng-template sciSash size=\"1\">\n *     ...\n *   </ng-template>\n *\n *   <ng-template sciSash size=\"2\">\n *     ...\n *   </ng-template>\n *\n *   <ng-template sciSash size=\"1\">\n *     ...\n *   </ng-template>\n * </sci-sashbox>\n * ```\n *\n * @deprecated since version 19.0.0; Import standalone component and directive instead; API will be removed in a future release.\n */\n@NgModule({ // TODO [Angular 20] Remove deprecated NgModule\n  imports: [\n    SciSashboxComponent,\n    SciSashDirective,\n  ],\n  exports: [\n    SciSashboxComponent,\n    SciSashDirective,\n  ],\n})\nexport class SciSashboxModule {\n}\n","/*\n * Copyright (c) 2018-2019 Swiss Federal Railways\n *\n * This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n *\n *  SPDX-License-Identifier: EPL-2.0\n */\n\n/*\n * Secondary entrypoint: '@scion/components/sashbox'\n *\n * @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n */\nexport {SciSashboxModule} from './sashbox.module';\nexport {SciSashboxComponent} from './sashbox.component';\nexport {SciSashDirective} from './sash.directive';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scion/components",
-  "version": "19.1.0",
+  "version": "19.2.1",
   "description": "Provides a collection of Angular components and directives primarily for use in SCION libraries such as `@scion/workbench` and `@scion/microfrontend-platform`. This library is not a comprehensive component library as its focus is on SCION requirements.",
   "license": "EPL-2.0",
   "private": false,

package/sashbox/sash/sash.component.d.ts

@@ -0,0 +1,31 @@
+import { Signal } from '@angular/core';
+import { SciSashDirective } from '../sash.directive';
+import * as i0 from "@angular/core";
+/**
+ * Represents a {@link SciSashDirective} in the DOM, displaying the specified sash template.
+ */
+export declare class SashComponent {
+    /**
+     * Specifies the sash representing this component.
+     */
+    readonly sash: import("@angular/core").InputSignal<SciSashDirective>;
+    private readonly _host;
+    private readonly _cd;
+    private readonly _sashBoxAccessor;
+    protected readonly animationState: import("@angular/core").WritableSignal<"enter" | "leave" | null>;
+    constructor();
+    /**
+     * Starts the leave animation, returning a signal to track animation completion.
+     */
+    startLeaveAnimation(): Signal<void>;
+    /**
+     * Notifies when ending the animation.
+     */
+    protected onAnimationEnd(): void;
+    /**
+     * Gets the size of this sash in pixel.
+     */
+    get size(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SashComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SashComponent, "sci-sash", never, { "sash": { "alias": "sash"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/sashbox/sash.directive.d.ts

@@ -35,12 +35,21 @@ export declare class SciSashDirective {
      */
     readonly minSize: import("@angular/core").InputSignal<string | number | undefined>;
     /**
-     * Optional key to identify this sash.
+     * Specifies an 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.
+     * The key is used as the property key in the object emitted by {@link SciSashboxComponent.sashEnd2} to associate the size of this sash.
      */
     readonly key: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * 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.
+     */
+    readonly animate: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     private readonly _sashBoxAccessor;
+    private readonly _component;
     /**
      * Flex properties computed based on the configured {@link size}. Properties are updated when moving this sash.
      */
@@ -57,5 +66,5 @@ export declare class SciSashDirective {
      */
     private normalizeFlexGrow;
     static ɵfac: i0.ɵɵFactoryDeclaration<SciSashDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SciSashDirective, "ng-template[sciSash]", ["sciSash"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SciSashDirective, "ng-template[sciSash]", ["sciSash"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/sashbox/sashbox-accessor.d.ts

@@ -6,4 +6,5 @@ import { Signal } from '@angular/core';
 export declare abstract class SciSashBoxAccessor {
     abstract readonly sashes: Signal<readonly SciSashDirective[]>;
     abstract readonly direction: Signal<'column' | 'row'>;
+    abstract readonly afterFirstRender: Signal<boolean>;
 }

package/sashbox/sashbox.component.d.ts

@@ -84,16 +84,27 @@ export declare class SciSashboxComponent {
         [key: string]: number;
     }>;
     private readonly _host;
+    private readonly _contentChildren;
     protected sashing: boolean;
     protected maxHeight: number | undefined;
     protected maxWidth: number | undefined;
+    constructor();
     protected onSashStart(): void;
     protected onSashEnd(): void;
     protected onSash(splitter: HTMLElement, sashIndex: number, moveEvent: SplitterMoveEvent): void;
     protected onSashReset(sashIndex: number): void;
-    protected get isColumnDirection(): boolean;
-    protected get isRowDirection(): boolean;
     private toPixel;
+    /**
+     * Detects when rendered this component for the first time.
+     */
+    private detectFirstRendering;
+    /**
+     * 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.
+     */
+    private computeSashes;
     static ɵfac: i0.ɵɵFactoryDeclaration<SciSashboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SciSashboxComponent, "sci-sashbox", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, { "sashStart": "sashStart"; "sashEnd": "sashEnd"; "sashEnd2": "sashEnd2"; }, ["sashes"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SciSashboxComponent, "sci-sashbox", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, { "sashStart": "sashStart"; "sashEnd": "sashEnd"; "sashEnd2": "sashEnd2"; }, ["_contentChildren"], never, true, never>;
 }

package/sashbox/sash-initializer.directive.d.ts

@@ -1,11 +0,0 @@
-import { SciSashDirective } from './sash.directive';
-import * as i0 from "@angular/core";
-/**
- * Initializes {SashDirective} with the target {HTMLDivElement}.
- */
-export declare class SciSashInitializerDirective {
-    readonly sash: import("@angular/core").InputSignal<SciSashDirective>;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<SciSashInitializerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SciSashInitializerDirective, "div[sciSashInitializer].sash", never, { "sash": { "alias": "sciSashInitializer"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
-}