@scion/components 19.0.0 → 19.2.0

package/sashbox/sash.directive.d.ts

@@ -1,5 +1,3 @@
-import { OnChanges, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
-import { SciSashBoxAccessor } from './sashbox-accessor';
 import * as i0 from "@angular/core";
 /**
  * Use this directive to model a sash for {@link SciSashboxComponent}.
@@ -20,41 +18,53 @@ import * as i0 from "@angular/core";
  *   </ng-template>
  * </sci-sashbox>
  */
-export declare class SciSashDirective implements OnInit, OnChanges {
-    readonly sashTemplate: TemplateRef<void>;
-    private _sashBoxAccessor;
-    private _size;
-    private _flexGrow$;
+export declare class SciSashDirective {
     /**
      * Specifies the sash size, either as fixed size with an explicit unit,
-     * or as a unitless proportion to distibute remaining space. A proportional
+     * or as a unitless proportion to distribute remaining space. A proportional
      * sash has the ability to grow or shrink if necessary, and must be >= 1.
      *
      * If not set, remaining space is distributed equally.
      */
-    set size(size: string | number | null | undefined);
-    get size(): string | number;
+    readonly size: import("@angular/core").InputSignalWithTransform<string | number, string | number | null | undefined>;
     /**
      * Specifies the minimal sash size in pixel or percent.
      * The min-size prevents the user from shrinking the sash below this minimal size.
      *
      * If the unit is omitted, the value is interpreted as a pixel value.
      */
-    minSize?: string | number | undefined;
-    constructor(sashTemplate: TemplateRef<void>, _sashBoxAccessor: SciSashBoxAccessor);
-    ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
+    readonly minSize: import("@angular/core").InputSignal<string | number | undefined>;
     /**
-     * Computes and sets the flex item properties based on the modelled size.
+     * 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.
+     */
+    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.
+     */
+    private readonly _flexProperties;
+    /**
+     * Computes the flex properties to lay out this sash in the sashbox's flex layout based on the configured {@link size}.
      */
-    private setFlexItemProperties;
+    private computeFlexProperties;
     /**
-     * Computes the normalized flex-grow proportion of the given sash, which is a value >= 1.
+     * Normalizes the 'flex-grow' of the passed {@link FlexProperties} to ensure that the sum of the 'flex-grow' proportions of all sashes is 1.
      *
-     * If the sum of all flex-grow proportions would be less than 1, then, the sashes would not fill the entire sash-box space.
-     * Without normalization in place, e.g., this could happen when removing a sash.
+     * If the sum of all flex-grow proportions were less than 1, the sashes would not fill the entire sash-box space.
+     * Without normalization, this could occur when a sash is removed.
      */
     private normalizeFlexGrow;
     static ɵfac: i0.ɵɵFactoryDeclaration<SciSashDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SciSashDirective, "ng-template[sciSash]", ["sciSash"], { "size": { "alias": "size"; "required": false; }; "minSize": { "alias": "minSize"; "required": false; }; }, {}, 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

@@ -1,10 +1,10 @@
 import { SciSashDirective } from './sash.directive';
-import { Observable } from 'rxjs';
+import { Signal } from '@angular/core';
 /**
  * Allows accessing the sashbox component from sashes.
  */
 export declare abstract class SciSashBoxAccessor {
-    abstract get sashes(): SciSashDirective[];
-    abstract get sashes$(): Observable<SciSashDirective[]>;
-    abstract get direction(): 'column' | 'row';
+    abstract readonly sashes: Signal<readonly SciSashDirective[]>;
+    abstract readonly direction: Signal<'column' | 'row'>;
+    abstract readonly afterFirstRender: Signal<boolean>;
 }

package/sashbox/sashbox.component.d.ts

@@ -1,17 +1,15 @@
-import { EventEmitter, OnDestroy } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
 import { SplitterMoveEvent } from '@scion/components/splitter';
-import { SciSashDirective } from './sash.directive';
 import * as i0 from "@angular/core";
 /**
  * The <sci-sashbox> is like a CSS flexbox container that lays out its content children (sashes) in a row (which is by default)
  * or column arrangement (as specified by the direction property). A splitter is added between each child to allow the user to
  * shrink or stretch the individual sashes.
  *
- * Sashes are modelled as content children inside a <ng-template> decorated with the 'sciSash' directive.
- * A sash can have a fixed size with an explicit unit, or a unitless proportion to distibute remaining space.
+ * Sashes are modelled as <ng-template> decorated with the 'sciSash' directive.
+ * A sash can have a fixed size with an explicit unit, or a unitless proportion to distribute remaining space.
  * A proportional sash has the ability to grow or shrink if necessary.
  *
+ * Sash content is added to a CSS grid container with a single column, stretching the content vertically and horizontally.
  *
  * ### Usage
  *
@@ -56,35 +54,59 @@ import * as i0 from "@angular/core";
  * }
  * ```
  */
-export declare class SciSashboxComponent implements OnDestroy {
-    private _destroy$;
-    private _host;
-    private _zone;
-    sashes$: BehaviorSubject<SciSashDirective[]>;
-    sashing: boolean;
-    maxHeight: number | undefined;
-    maxWidth: number | undefined;
+export declare class SciSashboxComponent {
     /**
      * Specifies if to lay out sashes in a row (which is by default) or column arrangement.
      */
-    direction: 'column' | 'row';
+    readonly direction: import("@angular/core").InputSignal<"column" | "row">;
     /**
-     * Emits when start sashing.
+     * Notifies when start sashing.
      */
-    sashStart: EventEmitter<void>;
+    readonly sashStart: import("@angular/core").OutputEmitterRef<void>;
     /**
-     * Emits the absolute sash sizes (px) when finished sashing.
+     * Emits an array with new sash sizes when sashing ends.
+     *
+     * The array contains the sash sizes in display order.
+     *
+     * TODO [Angular 20] BREAKING CHANGE: Change signature from `number[]` to `{[key: string]: number}` and remove {@link sashEnd2}.
      */
-    sashEnd: EventEmitter<number[]>;
-    onSashStart(): void;
-    onSashEnd(): void;
-    onSash(splitter: HTMLElement, sashIndex: number, moveEvent: SplitterMoveEvent): void;
-    onSashReset(sashIndex: number): void;
-    get isColumnDirection(): boolean;
-    get isRowDirection(): boolean;
-    private get sashes();
-    ngOnDestroy(): void;
+    readonly sashEnd: import("@angular/core").OutputEmitterRef<number[]>;
+    /**
+     * 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}.
+     */
+    readonly sashEnd2: import("@angular/core").OutputEmitterRef<{
+        [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; }; }, { "sashStart": "sashStart"; "sashEnd": "sashEnd"; }, ["setSashes"], 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/splitter/splitter.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Represents a splitter, a visual element that allows the user to control the size of elements next to it.
@@ -41,47 +41,43 @@ import * as i0 from "@angular/core";
  * }
  * ```
  */
-export declare class SciSplitterComponent implements OnInit, OnDestroy {
-    private _zone;
-    private _cd;
-    private _document;
-    private _destroy$;
-    moving: boolean;
-    get isVertical(): boolean;
-    get isHorizontal(): boolean;
+export declare class SciSplitterComponent implements OnInit {
     /**
-     * Controls whether to render a vertical or horizontal splitter.
-     * By default, if not specified, renders a vertical splitter.
+     * Controls whether to render a vertical or horizontal splitter. By default, if not specified, renders a vertical splitter.
      */
-    orientation: 'vertical' | 'horizontal';
+    readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
     /**
-     * Emits when starting to move the splitter.
+     * Notifies when start moving the splitter.
      */
-    start: EventEmitter<void>;
+    readonly start: import("@angular/core").OutputEmitterRef<void>;
     /**
-     * Emits the distance in pixels when the splitter is moved.
-     * The event is emitted outside of the Angular zone.
+     * Notifies when moving the splitter. The event is emitted outside the Angular zone.
      */
-    move: EventEmitter<SplitterMoveEvent>;
+    readonly move: import("@angular/core").OutputEmitterRef<SplitterMoveEvent>;
     /**
-     * Emits when ending to move the splitter.
+     * Notifies when end moving the splitter.
      */
-    end: EventEmitter<void>;
+    readonly end: import("@angular/core").OutputEmitterRef<void>;
     /**
-     * Emits when to reset the splitter position.
+     * Notifies when resetting the spliter position.
      */
-    reset: EventEmitter<void>;
-    get splitterCursor(): string;
-    touchTargetElementRef: ElementRef<HTMLElement>;
-    constructor(_zone: NgZone, _cd: ChangeDetectorRef, _document: Document);
+    readonly reset: import("@angular/core").OutputEmitterRef<void>;
+    private readonly _zone;
+    private readonly _cd;
+    private readonly _document;
+    private readonly _destroyRef;
+    private readonly _touchTarget;
+    protected moving: boolean;
+    protected get isVertical(): boolean;
+    protected get isHorizontal(): boolean;
+    protected get splitterCursor(): string;
     ngOnInit(): void;
     private onReset;
     private onTouchStart;
     private onMouseDown;
     private installMoveListener;
-    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SciSplitterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SciSplitterComponent, "sci-splitter", never, { "orientation": { "alias": "orientation"; "required": false; }; }, { "start": "start"; "move": "move"; "end": "end"; "reset": "reset"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SciSplitterComponent, "sci-splitter", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "start": "start"; "move": "move"; "end": "end"; "reset": "reset"; }, never, never, true, never>;
 }
 export interface EventPosition {
     clientPos: number;

package/throbber/spinner-throbber/spinner-throbber.component.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
 /**
  * Represents a classic spinner throbber with strokes arranged radially. The strokes light up one after the other in clockwise direction
- * and then then fade out again.
+ * and then fade out again.
  *
  * Throbber type: `spinner`
  */

package/throbber/throbber.component.d.ts

@@ -38,7 +38,7 @@ export declare class SciThrobberComponent {
      * - **spinner** (default)
      * Represents a classic spinner throbber with strokes arranged radially. The strokes light up one after the other in clockwise direction and then then fade out again.
      */
-    type: 'ellipsis' | 'ripple' | 'roller' | 'spinner';
+    readonly type: import("@angular/core").InputSignal<"ellipsis" | "ripple" | "roller" | "spinner">;
     static ɵfac: i0.ɵɵFactoryDeclaration<SciThrobberComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SciThrobberComponent, "sci-throbber", never, { "type": { "alias": "type"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SciThrobberComponent, "sci-throbber", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/viewport/native-scrollbar-track-size-provider.service.d.ts

@@ -4,8 +4,8 @@ import * as i0 from "@angular/core";
  * Provides the native scrollbar tracksize.
  */
 export declare class SciNativeScrollbarTrackSizeProvider {
-    private _document;
-    private _zone;
+    private readonly _document;
+    private readonly _zone;
     /**
      * Provides the track size of the native scrollbar, or `null` if the native scrollbars sit on top of the content.
      */

package/viewport/scrollable.directive.d.ts

@@ -11,14 +11,14 @@ import * as i0 from "@angular/core";
  * to hide the pushed out native scrollbars.
  */
 export declare class SciScrollableDirective {
-    private _host;
-    private _renderer;
-    private _nativeScrollbarTrackSizeProvider;
     /**
      * Controls whether to display native scrollbars.
      * Has no effect if the native scrollbar sits on top of the content, e.g. in OS X.
      */
-    displayNativeScrollbar: import("@angular/core").InputSignal<boolean>;
+    readonly displayNativeScrollbar: import("@angular/core").InputSignal<boolean>;
+    private readonly _host;
+    private readonly _renderer;
+    private readonly _nativeScrollbarTrackSizeProvider;
     constructor();
     /**
      * Controls the display of the native scrollbar based on this directive's configuration.

package/viewport/scrollbar/scrollbar.component.d.ts

@@ -24,38 +24,32 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class SciScrollbarComponent {
-    private _host;
-    private _document;
-    private _zone;
-    private _destroyRef;
-    private _lastDragPosition;
-    private _overflow;
-    private _thumbSizeFr;
-    private _thumbPositionFr;
-    private _thumbElement;
-    private _vertical;
-    get vertical(): boolean;
-    get horizontal(): boolean;
-    get scrolling(): boolean;
     /**
-     * Specifies the direction of the scrollbar.
-     *
-     * By default, if not specified, renders a vertical scrollbar.
+     * Specifies the direction of the scrollbar. Defaults to a vertical scrollbar.
      */
-    direction: import("@angular/core").InputSignal<"vscroll" | "hscroll">;
+    readonly direction: import("@angular/core").InputSignal<"vscroll" | "hscroll">;
     /**
      * The viewport to provide scrollbars for.
      */
-    viewport: import("@angular/core").InputSignal<HTMLElement>;
+    readonly viewport: import("@angular/core").InputSignal<HTMLElement>;
+    private readonly _host;
+    private readonly _document;
+    private readonly _zone;
+    private readonly _destroyRef;
+    private readonly _thumbElement;
+    private readonly _vertical;
+    private _lastDragPosition;
+    private _overflow;
+    private _thumbSizeFr;
+    private _thumbPositionFr;
+    protected get vertical(): boolean;
+    protected get horizontal(): boolean;
+    protected get scrolling(): boolean;
     constructor();
     /**
      * Computes the scroll position and updates CSS variables to render the scroll position in the UI.
      */
     private renderScrollPosition;
-    /**
-     * Clears CSS variables used for rendering the scroll position in the UI.
-     */
-    private unsetScrollPosition;
     protected onTouchStart(event: TouchEvent): void;
     protected onTouchMove(event: TouchEvent): void;
     protected onTouchEnd(event: TouchEvent): void;

package/viewport/viewport.component.d.ts

@@ -69,18 +69,18 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class SciViewportComponent {
-    private _viewport;
-    private _viewportClient;
-    private _host;
-    protected nativeScrollbarTrackSizeProvider: SciNativeScrollbarTrackSizeProvider;
     /**
      * Controls if to use the native scrollbar or a scrollbar that sits on top of the viewport. Defaults to `on-top`.
      */
-    scrollbarStyle: import("@angular/core").InputSignal<ScrollbarStyle>;
+    readonly scrollbarStyle: import("@angular/core").InputSignal<ScrollbarStyle>;
     /**
      * Emits when the viewport is scrolled. The event is emitted outside the Angular zone to avoid unnecessary change detection cycles.
      */
-    scroll: import("@angular/core").OutputEmitterRef<Event>;
+    readonly scroll: import("@angular/core").OutputEmitterRef<Event>;
+    private readonly _host;
+    private readonly _viewport;
+    private readonly _viewportClient;
+    protected readonly nativeScrollbarTrackSizeProvider: SciNativeScrollbarTrackSizeProvider;
     constructor();
     focus(): void;
     /**

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

@@ -1,14 +0,0 @@
-import { ElementRef, OnChanges, SimpleChanges } from '@angular/core';
-import { SciSashDirective } from './sash.directive';
-import * as i0 from "@angular/core";
-/**
- * Initializes {SashDirective} with the target {HTMLDivElement}.
- */
-export declare class SciSashInitializerDirective implements OnChanges {
-    private _host;
-    sash: SciSashDirective;
-    constructor(_host: ElementRef<HTMLDivElement>);
-    ngOnChanges(changes: SimpleChanges): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SciSashInitializerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SciSashInitializerDirective, "div[sciSashInitializer].sash", never, { "sash": { "alias": "sciSashInitializer"; "required": true; }; }, {}, never, never, true, never>;
-}