@scion/components 19.2.1 → 20.0.0

package/design/themes/_scion-dark-theme.scss

@@ -22,8 +22,10 @@ $theme: sci-theming.map-merge(scion-static-colors.$tokens, scion-dark-colors.$to
   --sci-color-notice-inverse: var(--sci-static-color-white),
   --sci-color-background-notice: var(--sci-color-orange-1200),
   // Use for skeleton loading progress indicators.
+  --sci-color-skeleton-subtle: var(--sci-color-gray-200),
   --sci-color-skeleton: var(--sci-color-gray-300),
-  --sci-color-skeleton-subtle: var(--sci-color-gray-400),
+  --sci-color-skeleton-hover: var(--sci-color-gray-400),
+  --sci-color-skeleton-active: var(--sci-color-gray-400),
   // Use as the primary background for the UI.
   --sci-color-background-primary: var(--sci-color-gray-50),
   // Use as the background for navbars, menubars, toolbars, tabbars, sidebars and panels

package/design/themes/_scion-light-theme.scss

@@ -22,8 +22,10 @@ $theme: sci-theming.map-merge(scion-static-colors.$tokens, scion-light-colors.$t
   --sci-color-notice-inverse: var(--sci-static-color-white),
   --sci-color-background-notice: var(--sci-color-orange-100),
   // Use for skeleton loading progress indicators.
-  --sci-color-skeleton: var(--sci-color-gray-300),
   --sci-color-skeleton-subtle: var(--sci-color-gray-200),
+  --sci-color-skeleton: var(--sci-color-gray-300),
+  --sci-color-skeleton-hover: var(--sci-color-gray-400),
+  --sci-color-skeleton-active: var(--sci-color-gray-400),
   // Use as the primary background for the UI.
   --sci-color-background-primary: var(--sci-color-gray-50),
   // Use as the background for navbars, menubars, toolbars, tabbars, sidebars and panels

package/dimension/index.d.ts

@@ -1,5 +1,81 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, Signal, Injector } from '@angular/core';
+
 /**
- * Generated bundle index. Do not edit.
+ * Represents the dimension of an element.
  */
-/// <amd-module name="@scion/components/dimension" />
-export * from './public_api';
+interface SciDimension {
+    offsetWidth: number;
+    offsetHeight: number;
+    clientWidth: number;
+    clientHeight: number;
+    element: HTMLElement;
+}
+
+/**
+ * Observes the size of the host element.
+ *
+ * ---
+ * Usage:
+ *
+ * ```html
+ * <div sciDimension (sciDimensionChange)="onDimensionChange($event)"></div>
+ * ```
+ */
+declare class SciDimensionDirective {
+    /**
+     * Controls if to output outside the Angular zone. Defaults to `false`.
+     */
+    readonly emitOutsideAngular: _angular_core.InputSignal<boolean>;
+    /**
+     * Outputs the size of the element.
+     */
+    readonly dimensionChange: _angular_core.OutputEmitterRef<SciDimension>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SciDimensionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SciDimensionDirective, "[sciDimension]", never, { "emitOutsideAngular": { "alias": "emitOutsideAngular"; "required": false; "isSignal": true; }; }, { "dimensionChange": "sciDimensionChange"; }, never, never, true, never>;
+}
+
+/**
+ * Creates a signal observing the size of an element.
+ *
+ * The element can be passed as a signal, enabling observation of view children in the component constructor.
+ *
+ * The signal subscribes to the native {@link ResizeObserver} to monitor element size changes. Destroying the injection context will unsubscribe the observer.
+ *
+ * Usage:
+ * - Must be called within an injection context or an injector provided. Destroying the injector will unsubscribe the signal.
+ * - Must not be called within a reactive context to avoid repeated subscriptions.
+ */
+declare function dimension(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement>>, options?: {
+    injector?: Injector;
+}): Signal<SciDimension>;
+declare function dimension(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {
+    injector?: Injector;
+}): Signal<SciDimension | undefined>;
+
+/**
+ * Creates a signal observing the bounding box of an element.
+ *
+ * The bounding box includes the element's position relative to the top-left of the viewport and its size.
+ * Refer to https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect for more details.
+ *
+ * The element can be passed as a signal, enabling observation of view children in the component constructor.
+ *
+ * There is no native browser API to observe the position of an element. The signal uses {@link IntersectionObserver} and
+ * {@link ResizeObserver} to detect position changes. For tracking only size changes, use the {@link dimension} signal instead.
+ *
+ * Usage:
+ * - Must be called within an injection context or an injector provided. Destroying the injector will unsubscribe the signal.
+ * - Must not be called within a reactive context to avoid repeated subscriptions.
+ * - The element and the document root (`<html>`) must be positioned `relative` or `absolute`. If not, positioning is changed to `relative`.
+ */
+declare function boundingClientRect(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement>>, options?: {
+    injector?: Injector;
+}): Signal<DOMRect>;
+declare function boundingClientRect(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {
+    injector?: Injector;
+}): Signal<DOMRect | undefined>;
+
+export { SciDimensionDirective, boundingClientRect, dimension };
+export type { SciDimension };

package/fesm2022/scion-components-dimension.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, inject, ElementRef, NgZone, Directive, NgModule, assertNotInReactiveContext, assertInInjectionContext, Injector, computed, isSignal, signal, effect, untracked } from '@angular/core';
+import { input, output, inject, ElementRef, NgZone, Directive, assertNotInReactiveContext, assertInInjectionContext, Injector, computed, isSignal, signal, effect, untracked } from '@angular/core';
 import { fromResize$, fromBoundingClientRect$ } from '@scion/toolkit/observable';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { subscribeIn, observeIn } from '@scion/toolkit/operators';
@@ -57,49 +57,16 @@ class SciDimensionDirective {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciDimensionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: SciDimensionDirective, isStandalone: true, selector: "[sciDimension]", inputs: { emitOutsideAngular: { classPropertyName: "emitOutsideAngular", publicName: "emitOutsideAngular", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dimensionChange: "sciDimensionChange" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciDimensionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.1", type: SciDimensionDirective, isStandalone: true, selector: "[sciDimension]", inputs: { emitOutsideAngular: { classPropertyName: "emitOutsideAngular", publicName: "emitOutsideAngular", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dimensionChange: "sciDimensionChange" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciDimensionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciDimensionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sciDimension]',
                 }]
         }], ctorParameters: () => [] });
 
-/*
- * Copyright (c) 2018-2019 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
- */
-/**
- * Provides a directive for observing changes to the size of the host element.
- *
- * @deprecated since version 19.0.0; Import standalone directive instead; API will be removed in a future release.
- *
- * @see fromDimension$
- */
-class SciDimensionModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciDimensionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: SciDimensionModule, imports: [SciDimensionDirective], exports: [SciDimensionDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciDimensionModule });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciDimensionModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        SciDimensionDirective,
-                    ],
-                    exports: [
-                        SciDimensionDirective,
-                    ],
-                }]
-        }] });
-
 /*
  * Copyright (c) 2018-2024 Swiss Federal Railways
  *
@@ -227,5 +194,5 @@ function isEqualDomRect(a, b) {
  * Generated bundle index. Do not edit.
  */
 
-export { SciDimensionDirective, SciDimensionModule, boundingClientRect, dimension };
+export { SciDimensionDirective, boundingClientRect, dimension };
 //# sourceMappingURL=scion-components-dimension.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"scion-components-dimension.mjs","sources":["../../../../projects/scion/components/dimension/src/dimension.directive.ts","../../../../projects/scion/components/dimension/src/dimension.module.ts","../../../../projects/scion/components/dimension/src/dimension.signal.ts","../../../../projects/scion/components/dimension/src/bounding-client-rect.signal.ts","../../../../projects/scion/components/dimension/src/public_api.ts","../../../../projects/scion/components/dimension/src/scion-components-dimension.ts"],"sourcesContent":["/*\n * Copyright (c) 2018-2024 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, input, NgZone, output} from '@angular/core';\nimport {fromResize$} from '@scion/toolkit/observable';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {observeIn, subscribeIn} from '@scion/toolkit/operators';\nimport {SciDimension} from './dimension';\n\n/**\n * Observes the size of the host element.\n *\n * ---\n * Usage:\n *\n * ```html\n * <div sciDimension (sciDimensionChange)=\"onDimensionChange($event)\"></div>\n * ```\n */\n@Directive({\n  selector: '[sciDimension]',\n})\nexport class SciDimensionDirective {\n\n  /**\n   * Controls if to output outside the Angular zone. Defaults to `false`.\n   */\n  public readonly emitOutsideAngular = input(false);\n\n  /**\n   * Outputs the size of the element.\n   */\n  public readonly dimensionChange = output<SciDimension>({alias: 'sciDimensionChange'});\n\n  constructor() {\n    const host = inject(ElementRef).nativeElement as HTMLElement;\n    const zone = inject(NgZone);\n\n    fromResize$(host)\n      .pipe(\n        // Avoid triggering change detection cycle.\n        subscribeIn(fn => zone.runOutsideAngular(fn)),\n        // Run in animation frame to prevent 'ResizeObserver loop completed with undelivered notifications' error.\n        // Do not use `animationFrameScheduler` because the scheduler does not necessarily execute in the current execution context, such as inside or outside Angular.\n        // The scheduler always executes tasks in the context (e.g. zone) where the scheduler was first used in the application.\n        observeIn(fn => requestAnimationFrame(fn)),\n        observeIn(fn => this.emitOutsideAngular() ? fn() : zone.run(fn)),\n        takeUntilDestroyed(),\n      )\n      .subscribe(() => {\n        // Assert Angular zone.\n        this.emitOutsideAngular() ? NgZone.assertNotInAngularZone() : NgZone.assertInAngularZone();\n\n        this.dimensionChange.emit({\n          clientWidth: host.clientWidth,\n          offsetWidth: host.offsetWidth,\n          clientHeight: host.clientHeight,\n          offsetHeight: host.offsetHeight,\n          element: host,\n        });\n      });\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 {SciDimensionDirective} from './dimension.directive';\n\n/**\n * Provides a directive for observing changes to the size of the host element.\n *\n * @deprecated since version 19.0.0; Import standalone directive instead; API will be removed in a future release.\n *\n * @see fromDimension$\n */\n@NgModule({ // TODO [Angular 20] Remove deprecated NgModule\n  imports: [\n    SciDimensionDirective,\n  ],\n  exports: [\n    SciDimensionDirective,\n  ],\n})\nexport class SciDimensionModule {\n}\n","/*\n * Copyright (c) 2018-2024 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 {assertInInjectionContext, assertNotInReactiveContext, computed, effect, ElementRef, inject, Injector, isSignal, NgZone, signal, Signal, untracked} from '@angular/core';\nimport {SciDimension} from './dimension';\nimport {coerceElement} from '@angular/cdk/coercion';\nimport {Objects} from '@scion/toolkit/util';\nimport {fromResize$} from '@scion/toolkit/observable';\nimport {observeIn, subscribeIn} from '@scion/toolkit/operators';\n\n/**\n * Creates a signal observing the size of an element.\n *\n * The element can be passed as a signal, enabling observation of view children in the component constructor.\n *\n * The signal subscribes to the native {@link ResizeObserver} to monitor element size changes. Destroying the injection context will unsubscribe the observer.\n *\n * Usage:\n * - Must be called within an injection context or an injector provided. Destroying the injector will unsubscribe the signal.\n * - Must not be called within a reactive context to avoid repeated subscriptions.\n */\nexport function dimension(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement>>, options?: {injector?: Injector}): Signal<SciDimension>;\nexport function dimension(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {injector?: Injector}): Signal<SciDimension | undefined>;\nexport function dimension(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {injector?: Injector}): Signal<SciDimension | undefined> {\n  assertNotInReactiveContext(dimension, 'Invoking `dimension` causes new subscriptions every time. Move `dimension` outside of the reactive context and read the signal value where needed.');\n  if (!options?.injector) {\n    assertInInjectionContext(dimension);\n  }\n\n  const injector = options?.injector ?? inject(Injector);\n  const zone = injector.get(NgZone);\n  const element = computed(() => coerceElement(isSignal(elementLike) ? elementLike() : elementLike));\n  const onResize = signal<void>(undefined, {equal: () => false});\n\n  // Subscribe to element size changes.\n  effect(onCleanup => {\n    const el = element();\n    if (!el) {\n      return;\n    }\n\n    untracked(() => {\n      const subscription = fromResize$(el)\n        .pipe(\n          // Avoid triggering change detection cycle.\n          subscribeIn(fn => zone.runOutsideAngular(fn)),\n          // Run in animation frame to prevent 'ResizeObserver loop completed with undelivered notifications' error.\n          // Do not use `animationFrameScheduler` because the scheduler does not necessarily execute in the current execution context, such as inside or outside Angular.\n          // The scheduler always executes tasks in the context (e.g. zone) where the scheduler was first used in the application.\n          observeIn(fn => requestAnimationFrame(fn)),\n        )\n        .subscribe(() => {\n          NgZone.assertNotInAngularZone();\n          onResize.set();\n        });\n      onCleanup(() => subscription.unsubscribe());\n    });\n  }, {injector});\n\n  // Create signal that recomputes each time the size changes.\n  return computed(() => {\n    const el = element();\n    if (!el) {\n      return undefined;\n    }\n\n    // Track element size.\n    onResize();\n\n    return {\n      clientWidth: el.clientWidth,\n      offsetWidth: el.offsetWidth,\n      clientHeight: el.clientHeight,\n      offsetHeight: el.offsetHeight,\n      element: el,\n    };\n  }, {equal: Objects.isEqual});\n}\n","/*\n * Copyright (c) 2018-2024 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 {assertInInjectionContext, assertNotInReactiveContext, computed, effect, ElementRef, inject, Injector, isSignal, NgZone, signal, Signal, untracked} from '@angular/core';\nimport {coerceElement} from '@angular/cdk/coercion';\nimport {fromBoundingClientRect$} from '@scion/toolkit/observable';\nimport {subscribeIn} from '@scion/toolkit/operators';\n\n/**\n * Creates a signal observing the bounding box of an element.\n *\n * The bounding box includes the element's position relative to the top-left of the viewport and its size.\n * Refer to https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect for more details.\n *\n * The element can be passed as a signal, enabling observation of view children in the component constructor.\n *\n * There is no native browser API to observe the position of an element. The signal uses {@link IntersectionObserver} and\n * {@link ResizeObserver} to detect position changes. For tracking only size changes, use the {@link dimension} signal instead.\n *\n * Usage:\n * - Must be called within an injection context or an injector provided. Destroying the injector will unsubscribe the signal.\n * - Must not be called within a reactive context to avoid repeated subscriptions.\n * - The element and the document root (`<html>`) must be positioned `relative` or `absolute`. If not, a warning is logged, and positioning changed to `relative`.\n */\nexport function boundingClientRect(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement>>, options?: {injector?: Injector}): Signal<DOMRect>;\nexport function boundingClientRect(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {injector?: Injector}): Signal<DOMRect | undefined>;\nexport function boundingClientRect(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {injector?: Injector}): Signal<DOMRect | undefined> {\n  assertNotInReactiveContext(boundingClientRect, 'Invoking `boundingClientRect` causes new subscriptions every time. Move `boundingClientRect` outside of the reactive context and read the signal value where needed.');\n  if (!options?.injector) {\n    assertInInjectionContext(boundingClientRect);\n  }\n\n  const injector = options?.injector ?? inject(Injector);\n  const zone = injector.get(NgZone);\n  const element = computed(() => coerceElement(isSignal(elementLike) ? elementLike() : elementLike));\n  const onBoundingBoxChange = signal<void>(undefined, {equal: () => false});\n\n  // Subscribe to element bounding box changes.\n  effect(onCleanup => {\n    const el = element();\n    if (!el) {\n      return;\n    }\n\n    untracked(() => {\n      const subscription = fromBoundingClientRect$(el)\n        // Avoid triggering change detection cycle.\n        .pipe(subscribeIn(fn => zone.runOutsideAngular(fn)))\n        .subscribe(() => {\n          NgZone.assertNotInAngularZone();\n          onBoundingBoxChange.set();\n        });\n      onCleanup(() => subscription.unsubscribe());\n    });\n  }, {injector});\n\n  // Create signal that recomputes each time the bounding box changes.\n  return computed(() => {\n    const el = element();\n    if (!el) {\n      return undefined;\n    }\n\n    // Track bounding box.\n    onBoundingBoxChange();\n\n    return el.getBoundingClientRect();\n  }, {equal: isEqualDomRect});\n}\n\nfunction isEqualDomRect(a: DOMRect | undefined, b: DOMRect | undefined): boolean {\n  return a?.top === b?.top && a?.right === b?.right && a?.bottom === b?.bottom && a?.left === b?.left;\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/dimension'\n *\n * @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n */\nexport {SciDimensionModule} from './dimension.module';\nexport {SciDimensionDirective} from './dimension.directive';\nexport {dimension} from './dimension.signal';\nexport {boundingClientRect} from './bounding-client-rect.signal';\nexport {type SciDimension} from './dimension';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"scion-components-dimension.mjs","sources":["../../../../projects/scion/components/dimension/src/dimension.directive.ts","../../../../projects/scion/components/dimension/src/dimension.signal.ts","../../../../projects/scion/components/dimension/src/bounding-client-rect.signal.ts","../../../../projects/scion/components/dimension/src/public_api.ts","../../../../projects/scion/components/dimension/src/scion-components-dimension.ts"],"sourcesContent":["/*\n * Copyright (c) 2018-2024 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, input, NgZone, output} from '@angular/core';\nimport {fromResize$} from '@scion/toolkit/observable';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {observeIn, subscribeIn} from '@scion/toolkit/operators';\nimport {SciDimension} from './dimension';\n\n/**\n * Observes the size of the host element.\n *\n * ---\n * Usage:\n *\n * ```html\n * <div sciDimension (sciDimensionChange)=\"onDimensionChange($event)\"></div>\n * ```\n */\n@Directive({\n  selector: '[sciDimension]',\n})\nexport class SciDimensionDirective {\n\n  /**\n   * Controls if to output outside the Angular zone. Defaults to `false`.\n   */\n  public readonly emitOutsideAngular = input(false);\n\n  /**\n   * Outputs the size of the element.\n   */\n  public readonly dimensionChange = output<SciDimension>({alias: 'sciDimensionChange'});\n\n  constructor() {\n    const host = inject(ElementRef).nativeElement as HTMLElement;\n    const zone = inject(NgZone);\n\n    fromResize$(host)\n      .pipe(\n        // Avoid triggering change detection cycle.\n        subscribeIn(fn => zone.runOutsideAngular(fn)),\n        // Run in animation frame to prevent 'ResizeObserver loop completed with undelivered notifications' error.\n        // Do not use `animationFrameScheduler` because the scheduler does not necessarily execute in the current execution context, such as inside or outside Angular.\n        // The scheduler always executes tasks in the context (e.g. zone) where the scheduler was first used in the application.\n        observeIn(fn => requestAnimationFrame(fn)),\n        observeIn(fn => this.emitOutsideAngular() ? fn() : zone.run(fn)),\n        takeUntilDestroyed(),\n      )\n      .subscribe(() => {\n        // Assert Angular zone.\n        this.emitOutsideAngular() ? NgZone.assertNotInAngularZone() : NgZone.assertInAngularZone();\n\n        this.dimensionChange.emit({\n          clientWidth: host.clientWidth,\n          offsetWidth: host.offsetWidth,\n          clientHeight: host.clientHeight,\n          offsetHeight: host.offsetHeight,\n          element: host,\n        });\n      });\n  }\n}\n","/*\n * Copyright (c) 2018-2024 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 {assertInInjectionContext, assertNotInReactiveContext, computed, effect, ElementRef, inject, Injector, isSignal, NgZone, signal, Signal, untracked} from '@angular/core';\nimport {SciDimension} from './dimension';\nimport {coerceElement} from '@angular/cdk/coercion';\nimport {Objects} from '@scion/toolkit/util';\nimport {fromResize$} from '@scion/toolkit/observable';\nimport {observeIn, subscribeIn} from '@scion/toolkit/operators';\n\n/**\n * Creates a signal observing the size of an element.\n *\n * The element can be passed as a signal, enabling observation of view children in the component constructor.\n *\n * The signal subscribes to the native {@link ResizeObserver} to monitor element size changes. Destroying the injection context will unsubscribe the observer.\n *\n * Usage:\n * - Must be called within an injection context or an injector provided. Destroying the injector will unsubscribe the signal.\n * - Must not be called within a reactive context to avoid repeated subscriptions.\n */\nexport function dimension(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement>>, options?: {injector?: Injector}): Signal<SciDimension>;\nexport function dimension(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {injector?: Injector}): Signal<SciDimension | undefined>;\nexport function dimension(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {injector?: Injector}): Signal<SciDimension | undefined> {\n  assertNotInReactiveContext(dimension, 'Invoking `dimension` causes new subscriptions every time. Move `dimension` outside of the reactive context and read the signal value where needed.');\n  if (!options?.injector) {\n    assertInInjectionContext(dimension);\n  }\n\n  const injector = options?.injector ?? inject(Injector);\n  const zone = injector.get(NgZone);\n  const element = computed(() => coerceElement(isSignal(elementLike) ? elementLike() : elementLike));\n  const onResize = signal<void>(undefined, {equal: () => false});\n\n  // Subscribe to element size changes.\n  effect(onCleanup => {\n    const el = element();\n    if (!el) {\n      return;\n    }\n\n    untracked(() => {\n      const subscription = fromResize$(el)\n        .pipe(\n          // Avoid triggering change detection cycle.\n          subscribeIn(fn => zone.runOutsideAngular(fn)),\n          // Run in animation frame to prevent 'ResizeObserver loop completed with undelivered notifications' error.\n          // Do not use `animationFrameScheduler` because the scheduler does not necessarily execute in the current execution context, such as inside or outside Angular.\n          // The scheduler always executes tasks in the context (e.g. zone) where the scheduler was first used in the application.\n          observeIn(fn => requestAnimationFrame(fn)),\n        )\n        .subscribe(() => {\n          NgZone.assertNotInAngularZone();\n          onResize.set();\n        });\n      onCleanup(() => subscription.unsubscribe());\n    });\n  }, {injector});\n\n  // Create signal that recomputes each time the size changes.\n  return computed(() => {\n    const el = element();\n    if (!el) {\n      return undefined;\n    }\n\n    // Track element size.\n    onResize();\n\n    return {\n      clientWidth: el.clientWidth,\n      offsetWidth: el.offsetWidth,\n      clientHeight: el.clientHeight,\n      offsetHeight: el.offsetHeight,\n      element: el,\n    };\n  }, {equal: Objects.isEqual});\n}\n","/*\n * Copyright (c) 2018-2024 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 {assertInInjectionContext, assertNotInReactiveContext, computed, effect, ElementRef, inject, Injector, isSignal, NgZone, signal, Signal, untracked} from '@angular/core';\nimport {coerceElement} from '@angular/cdk/coercion';\nimport {fromBoundingClientRect$} from '@scion/toolkit/observable';\nimport {subscribeIn} from '@scion/toolkit/operators';\n\n/**\n * Creates a signal observing the bounding box of an element.\n *\n * The bounding box includes the element's position relative to the top-left of the viewport and its size.\n * Refer to https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect for more details.\n *\n * The element can be passed as a signal, enabling observation of view children in the component constructor.\n *\n * There is no native browser API to observe the position of an element. The signal uses {@link IntersectionObserver} and\n * {@link ResizeObserver} to detect position changes. For tracking only size changes, use the {@link dimension} signal instead.\n *\n * Usage:\n * - Must be called within an injection context or an injector provided. Destroying the injector will unsubscribe the signal.\n * - Must not be called within a reactive context to avoid repeated subscriptions.\n * - The element and the document root (`<html>`) must be positioned `relative` or `absolute`. If not, positioning is changed to `relative`.\n */\nexport function boundingClientRect(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement>>, options?: {injector?: Injector}): Signal<DOMRect>;\nexport function boundingClientRect(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {injector?: Injector}): Signal<DOMRect | undefined>;\nexport function boundingClientRect(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {injector?: Injector}): Signal<DOMRect | undefined> {\n  assertNotInReactiveContext(boundingClientRect, 'Invoking `boundingClientRect` causes new subscriptions every time. Move `boundingClientRect` outside of the reactive context and read the signal value where needed.');\n  if (!options?.injector) {\n    assertInInjectionContext(boundingClientRect);\n  }\n\n  const injector = options?.injector ?? inject(Injector);\n  const zone = injector.get(NgZone);\n  const element = computed(() => coerceElement(isSignal(elementLike) ? elementLike() : elementLike));\n  const onBoundingBoxChange = signal<void>(undefined, {equal: () => false});\n\n  // Subscribe to element bounding box changes.\n  effect(onCleanup => {\n    const el = element();\n    if (!el) {\n      return;\n    }\n\n    untracked(() => {\n      const subscription = fromBoundingClientRect$(el)\n        // Avoid triggering change detection cycle.\n        .pipe(subscribeIn(fn => zone.runOutsideAngular(fn)))\n        .subscribe(() => {\n          NgZone.assertNotInAngularZone();\n          onBoundingBoxChange.set();\n        });\n      onCleanup(() => subscription.unsubscribe());\n    });\n  }, {injector});\n\n  // Create signal that recomputes each time the bounding box changes.\n  return computed(() => {\n    const el = element();\n    if (!el) {\n      return undefined;\n    }\n\n    // Track bounding box.\n    onBoundingBoxChange();\n\n    return el.getBoundingClientRect();\n  }, {equal: isEqualDomRect});\n}\n\nfunction isEqualDomRect(a: DOMRect | undefined, b: DOMRect | undefined): boolean {\n  return a?.top === b?.top && a?.right === b?.right && a?.bottom === b?.bottom && a?.left === b?.left;\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/dimension'\n *\n * @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n */\nexport {SciDimensionDirective} from './dimension.directive';\nexport {dimension} from './dimension.signal';\nexport {boundingClientRect} from './bounding-client-rect.signal';\nexport {type SciDimension} from './dimension';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;AAAA;;;;;;;;AAQG;AAQH;;;;;;;;;AASG;MAIU,qBAAqB,CAAA;AAEhC;;AAEG;AACa,IAAA,kBAAkB,GAAG,KAAK,CAAC,KAAK,CAAC;AAEjD;;AAEG;IACa,eAAe,GAAG,MAAM,CAAe,EAAC,KAAK,EAAE,oBAAoB,EAAC,CAAC;AAErF,IAAA,WAAA,GAAA;QACE,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,aAA4B;AAC5D,QAAA,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC;QAE3B,WAAW,CAAC,IAAI;aACb,IAAI;;QAEH,WAAW,CAAC,EAAE,IAAI,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;;;;AAI7C,QAAA,SAAS,CAAC,EAAE,IAAI,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAC1C,SAAS,CAAC,EAAE,IAAI,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAChE,kBAAkB,EAAE;aAErB,SAAS,CAAC,MAAK;;AAEd,YAAA,IAAI,CAAC,kBAAkB,EAAE,GAAG,MAAM,CAAC,sBAAsB,EAAE,GAAG,MAAM,CAAC,mBAAmB,EAAE;AAE1F,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;gBACxB,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC7B,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC7B,YAAY,EAAE,IAAI,CAAC,YAAY;gBAC/B,YAAY,EAAE,IAAI,CAAC,YAAY;AAC/B,gBAAA,OAAO,EAAE,IAAI;AACd,aAAA,CAAC;AACJ,SAAC,CAAC;;uGAtCK,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAHjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC3B,iBAAA;;;AC5BD;;;;;;;;AAQG;AAsBa,SAAA,SAAS,CAAC,WAA8G,EAAE,OAA+B,EAAA;AACvK,IAAA,0BAA0B,CAAC,SAAS,EAAE,oJAAoJ,CAAC;AAC3L,IAAA,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE;QACtB,wBAAwB,CAAC,SAAS,CAAC;;IAGrC,MAAM,QAAQ,GAAG,OAAO,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC;IACtD,MAAM,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC;IACjC,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,WAAW,EAAE,GAAG,WAAW,CAAC,CAAC;AAClG,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAO,SAAS,EAAE,EAAC,KAAK,EAAE,MAAM,KAAK,EAAC,CAAC;;IAG9D,MAAM,CAAC,SAAS,IAAG;AACjB,QAAA,MAAM,EAAE,GAAG,OAAO,EAAE;QACpB,IAAI,CAAC,EAAE,EAAE;YACP;;QAGF,SAAS,CAAC,MAAK;AACb,YAAA,MAAM,YAAY,GAAG,WAAW,CAAC,EAAE;iBAChC,IAAI;;YAEH,WAAW,CAAC,EAAE,IAAI,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;;;;YAI7C,SAAS,CAAC,EAAE,IAAI,qBAAqB,CAAC,EAAE,CAAC,CAAC;iBAE3C,SAAS,CAAC,MAAK;gBACd,MAAM,CAAC,sBAAsB,EAAE;gBAC/B,QAAQ,CAAC,GAAG,EAAE;AAChB,aAAC,CAAC;YACJ,SAAS,CAAC,MAAM,YAAY,CAAC,WAAW,EAAE,CAAC;AAC7C,SAAC,CAAC;AACJ,KAAC,EAAE,EAAC,QAAQ,EAAC,CAAC;;IAGd,OAAO,QAAQ,CAAC,MAAK;AACnB,QAAA,MAAM,EAAE,GAAG,OAAO,EAAE;QACpB,IAAI,CAAC,EAAE,EAAE;AACP,YAAA,OAAO,SAAS;;;AAIlB,QAAA,QAAQ,EAAE;QAEV,OAAO;YACL,WAAW,EAAE,EAAE,CAAC,WAAW;YAC3B,WAAW,EAAE,EAAE,CAAC,WAAW;YAC3B,YAAY,EAAE,EAAE,CAAC,YAAY;YAC7B,YAAY,EAAE,EAAE,CAAC,YAAY;AAC7B,YAAA,OAAO,EAAE,EAAE;SACZ;KACF,EAAE,EAAC,KAAK,EAAE,OAAO,CAAC,OAAO,EAAC,CAAC;AAC9B;;ACpFA;;;;;;;;AAQG;AAyBa,SAAA,kBAAkB,CAAC,WAA8G,EAAE,OAA+B,EAAA;AAChL,IAAA,0BAA0B,CAAC,kBAAkB,EAAE,sKAAsK,CAAC;AACtN,IAAA,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE;QACtB,wBAAwB,CAAC,kBAAkB,CAAC;;IAG9C,MAAM,QAAQ,GAAG,OAAO,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC;IACtD,MAAM,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC;IACjC,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,WAAW,EAAE,GAAG,WAAW,CAAC,CAAC;AAClG,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAO,SAAS,EAAE,EAAC,KAAK,EAAE,MAAM,KAAK,EAAC,CAAC;;IAGzE,MAAM,CAAC,SAAS,IAAG;AACjB,QAAA,MAAM,EAAE,GAAG,OAAO,EAAE;QACpB,IAAI,CAAC,EAAE,EAAE;YACP;;QAGF,SAAS,CAAC,MAAK;AACb,YAAA,MAAM,YAAY,GAAG,uBAAuB,CAAC,EAAE;;AAE5C,iBAAA,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;iBAClD,SAAS,CAAC,MAAK;gBACd,MAAM,CAAC,sBAAsB,EAAE;gBAC/B,mBAAmB,CAAC,GAAG,EAAE;AAC3B,aAAC,CAAC;YACJ,SAAS,CAAC,MAAM,YAAY,CAAC,WAAW,EAAE,CAAC;AAC7C,SAAC,CAAC;AACJ,KAAC,EAAE,EAAC,QAAQ,EAAC,CAAC;;IAGd,OAAO,QAAQ,CAAC,MAAK;AACnB,QAAA,MAAM,EAAE,GAAG,OAAO,EAAE;QACpB,IAAI,CAAC,EAAE,EAAE;AACP,YAAA,OAAO,SAAS;;;AAIlB,QAAA,mBAAmB,EAAE;AAErB,QAAA,OAAO,EAAE,CAAC,qBAAqB,EAAE;AACnC,KAAC,EAAE,EAAC,KAAK,EAAE,cAAc,EAAC,CAAC;AAC7B;AAEA,SAAS,cAAc,CAAC,CAAsB,EAAE,CAAsB,EAAA;AACpE,IAAA,OAAO,CAAC,EAAE,GAAG,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,MAAM,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE,IAAI;AACrG;;AC/EA;;;;;;;;AAQG;AAEH;;;;AAIG;;ACdH;;AAEG;;;;"}

package/fesm2022/scion-components-sashbox.mjs

@@ -1,5 +1,5 @@
 import * as i0 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 { input, booleanAttribute, inject, signal, TemplateRef, computed, linkedSignal, Directive, ElementRef, ChangeDetectorRef, effect, Component, output, contentChildren, NgZone, afterNextRender, IterableDiffers, untracked, HostBinding } from '@angular/core';
 import { SciSplitterComponent } from '@scion/components/splitter';
 import { NgTemplateOutlet } from '@angular/common';
 import { trigger, transition, style, animate } from '@angular/animations';
@@ -66,7 +66,7 @@ class SciSashDirective {
     /**
      * Specifies an optional key to identify this sash.
      *
-     * The key is used as the property key in the object emitted by {@link SciSashboxComponent.sashEnd2} to associate the size of this sash.
+     * The key is used as the property key in the object emitted by {@link SciSashboxComponent.sashEnd} to associate the size of this sash.
      */
     key = input();
     /**
@@ -179,10 +179,10 @@ 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 }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["sciSash"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciSashDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.1", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciSashDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[sciSash]',
@@ -207,10 +207,10 @@ function throwError(error) {
  */
 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciElementRefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.1", type: SciElementRefDirective, isStandalone: true, selector: "[sciElementRef]", exportAs: ["sciElementRef"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciElementRefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciElementRefDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sciElementRef]',
@@ -267,12 +267,12 @@ class SashComponent {
         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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SashComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.1", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SashComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-sash', imports: [
                         NgTemplateOutlet,
@@ -371,24 +371,12 @@ class SciSashboxComponent {
      * Notifies when start sashing.
      */
     sashStart = output();
-    /**
-     * Emits an array with new sash sizes when sashing ends.
-     *
-     * The array contains the sash sizes in display order.
-     *
-     * TODO [Angular 20] BREAKING CHANGE: Change signature from `number[]` to `{[key: string]: number}` and remove {@link sashEnd2}.
-     */
-    sashEnd = output();
     /**
      * Emits an object with new sash sizes when sashing ends.
      *
      * Each sash size is associated with its {@link SciSashDirective.key} or its display position (zero-based) if not set.
-     *
-     * Note: This output will be renamed to `sashEnd` in version 20, changing the signature of {@link sashEnd} from `number[]` to `{[key: string]: number}`.
-     *
-     * TODO [Angular 20] BREAKING CHANGE: Replace with {@link sashEnd}.
      */
-    sashEnd2 = output();
+    sashEnd = output();
     _host = inject(ElementRef).nativeElement;
     _contentChildren = contentChildren(SciSashDirective);
     /** @internal */
@@ -435,8 +423,7 @@ class SciSashboxComponent {
                 });
             }
         });
-        this.sashEnd.emit(Array.from(sashSizes.values()));
-        this.sashEnd2.emit(Object.fromEntries(sashSizes));
+        this.sashEnd.emit(Object.fromEntries(sashSizes));
     }
     onSash(splitter, sashIndex, moveEvent) {
         NgZone.assertNotInAngularZone();
@@ -489,8 +476,7 @@ class SciSashboxComponent {
             }
         });
         this.sashStart.emit();
-        this.sashEnd.emit(Array.from(sashSizesAfterReset.values()));
-        this.sashEnd2.emit(Object.fromEntries(sashSizesAfterReset));
+        this.sashEnd.emit(Object.fromEntries(sashSizesAfterReset));
     }
     toPixel(value) {
         if (typeof value === 'number') {
@@ -543,13 +529,13 @@ class SciSashboxComponent {
         });
         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: { "attr.data-direction": "direction()", "class.sashing": "this.sashing", "style.--\u0275sci-sashbox-max-height": "this.maxHeight", "style.--\u0275sci-sashbox-max-width": "this.maxWidth" } }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciSashboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SciSashboxComponent, isStandalone: true, selector: "sci-sashbox", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sashStart: "sashStart", sashEnd: "sashEnd" }, 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: "_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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciSashboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-sashbox', imports: [
                         SciSplitterComponent,
@@ -592,59 +578,6 @@ function provideSashBoxAccessor() {
     }();
 }
 
-/*
- * Copyright (c) 2018-2019 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
- */
-/**
- * Provides a sashbox component that lays out its children in a row or column arrangement and places a splitter between each child.
- *
- * ### Usage:
- *
- * ```html
- * <sci-sashbox direction="row">
- *   <ng-template sciSash size="1">
- *     ...
- *   </ng-template>
- *
- *   <ng-template sciSash size="2">
- *     ...
- *   </ng-template>
- *
- *   <ng-template sciSash size="1">
- *     ...
- *   </ng-template>
- * </sci-sashbox>
- * ```
- *
- * @deprecated since version 19.0.0; Import standalone component and directive instead; API will be removed in a future release.
- */
-class SciSashboxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: SciSashboxModule, imports: [SciSashboxComponent,
-            SciSashDirective], exports: [SciSashboxComponent,
-            SciSashDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashboxModule, imports: [SciSashboxComponent] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SciSashboxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        SciSashboxComponent,
-                        SciSashDirective,
-                    ],
-                    exports: [
-                        SciSashboxComponent,
-                        SciSashDirective,
-                    ],
-                }]
-        }] });
-
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways
  *
@@ -664,5 +597,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SciSashDirective, SciSashboxComponent, SciSashboxModule };
+export { SciSashDirective, SciSashboxComponent };
 //# sourceMappingURL=scion-components-sashbox.mjs.map