@scion/components 19.2.1 → 20.0.0

package/sashbox/index.d.ts

@@ -1,5 +1,171 @@
+import * as _angular_core from '@angular/core';
+import { SplitterMoveEvent } from '@scion/components/splitter';
+
 /**
- * Generated bundle index. Do not edit.
+ * 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 <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
+ *
+ * ```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>
+ * ```
+ *
+ * ### Styling
+ *
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To style a specific `sci-sashbox` component, the following CSS variables can be set directly on the component.
+ *
+ * - --sci-sashbox-gap: Sets the gaps (gutters) between sashes.
+ * - --sci-sashbox-splitter-background-color: Sets the background color of the splitter.
+ * - --sci-sashbox-splitter-background-color-hover: Sets the background color of the splitter when hovering it.
+ * - --sci-sashbox-splitter-size: Sets the size of the splitter along the main axis.
+ * - --sci-sashbox-splitter-size-hover: Sets the size of the splitter along the main axis when hovering it.
+ * - --sci-sashbox-splitter-touch-target-size: Sets the touch target size to move the splitter (accessibility).
+ * - --sci-sashbox-splitter-cross-axis-size: Sets the splitter size along the cross axis.
+ * - --sci-sashbox-splitter-border-radius: Sets the border radius of the splitter.
+ * - --sci-sashbox-splitter-opacity-active: Sets the opacity of the splitter while the user moves the splitter.
+ * - --sci-sashbox-splitter-opacity-hover: Sets the opacity of the splitter when hovering it.
+ *
+ * Example:
+ *
+ * ```scss
+ * sci-sashbox {
+ *   --sci-sashbox-splitter-background-color: black;
+ *   --sci-sashbox-splitter-background-color-hover: black;
+ * }
+ * ```
  */
-/// <amd-module name="@scion/components/sashbox" />
-export * from './public_api';
+declare class SciSashboxComponent {
+    /**
+     * Specifies if to lay out sashes in a row (which is by default) or column arrangement.
+     */
+    readonly direction: _angular_core.InputSignal<"column" | "row">;
+    /**
+     * Notifies when start sashing.
+     */
+    readonly sashStart: _angular_core.OutputEmitterRef<void>;
+    /**
+     * 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.
+     */
+    readonly sashEnd: _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;
+    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: _angular_core.ɵɵFactoryDeclaration<SciSashboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SciSashboxComponent, "sci-sashbox", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, { "sashStart": "sashStart"; "sashEnd": "sashEnd"; }, ["_contentChildren"], never, true, never>;
+}
+
+/**
+ * Use this directive to model a sash for {@link SciSashboxComponent}.
+ * The host element of this modelling directive must be a <ng-template> which is used as sash template.
+ *
+ *
+ * ### Usage:
+ *
+ * <sci-sashbox direction="row">
+ *   <!-- fixed size sash -->
+ *   <ng-template sciSash size="200px">
+ *     ...
+ *   </ng-template>
+ *
+ *   <!-- sash which takes the remaining space -->
+ *   <ng-template sciSash>
+ *     ...
+ *   </ng-template>
+ * </sci-sashbox>
+ */
+declare class SciSashDirective {
+    /**
+     * Specifies the sash size, either as fixed size with an explicit unit,
+     * 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.
+     */
+    readonly size: _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.
+     */
+    readonly minSize: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * Specifies an optional key to identify 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.
+     */
+    readonly key: _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: _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 computeFlexProperties;
+    /**
+     * 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 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: _angular_core.ɵɵFactoryDeclaration<SciSashDirective, never>;
+    static ɵdir: _angular_core.ɵɵ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>;
+}
+
+export { SciSashDirective, SciSashboxComponent };

package/splitter/index.d.ts

@@ -1,5 +1,103 @@
+import * as _angular_core from '@angular/core';
+import { OnInit } from '@angular/core';
+
 /**
- * Generated bundle index. Do not edit.
+ * Represents a splitter, a visual element that allows the user to control the size of elements next to it.
+ *
+ * The splitter has a handle that the user can move depending on the orientation of the splitter.
+ *
+ * Note that this control neither does change the size of adjacent elements nor does it (re-)position itself, but emits the distance by
+ * which the user has theoretically moved the splitter. You must subscribe to these events and change your layout accordingly.
+ *
+ * In the toolkit, {@link SciSashboxComponent} uses this splitter to divide a layout into several resizable sections.
+ * Another use case would be a resizable sidebar panel.
+ *
+ * ### Usage
+ *
+ * ```html
+ * <sci-splitter (move)="onSplitterMove($event.distance)"></sci-splitter>
+ * ```
+ *
+ * ### Styling
+ *
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To style a specific `sci-splitter` component, the following CSS variables can be set directly on the component.
+ *
+ * - --sci-splitter-background-color: Sets the background color of the splitter.
+ * - --sci-splitter-background-color-hover: Sets the background color of the splitter when hovering it.
+ * - --sci-splitter-size: Sets the size of the splitter along the main axis.
+ * - --sci-splitter-size-hover: Sets the size of the splitter along the main axis when hovering it.
+ * - --sci-splitter-touch-target-size: Sets the touch target size to move the splitter (accessibility).
+ * - --sci-splitter-cross-axis-size: Sets the splitter size along the cross axis.
+ * - --sci-splitter-border-radius: Sets the border radius of the splitter.
+ * - --sci-splitter-opacity-active: Sets the opacity of the splitter while the user moves the splitter.
+ * - --sci-splitter-opacity-hover: Sets the opacity of the splitter when hovering it.
+ *
+ * Example:
+ *
+ * ```scss
+ * sci-splitter {
+ *   --sci-splitter-background-color: black;
+ *   --sci-splitter-background-color-hover: black;
+ * }
+ * ```
  */
-/// <amd-module name="@scion/components/splitter" />
-export * from './public_api';
+declare class SciSplitterComponent implements OnInit {
+    /**
+     * Controls whether to render a vertical or horizontal splitter. By default, if not specified, renders a vertical splitter.
+     */
+    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
+    /**
+     * Notifies when start moving the splitter.
+     */
+    readonly start: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Notifies when moving the splitter. The event is emitted outside the Angular zone.
+     */
+    readonly move: _angular_core.OutputEmitterRef<SplitterMoveEvent>;
+    /**
+     * Notifies when end moving the splitter.
+     */
+    readonly end: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Notifies when resetting the spliter position.
+     */
+    readonly reset: _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;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SciSplitterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SciSplitterComponent, "sci-splitter", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "start": "start"; "move": "move"; "end": "end"; "reset": "reset"; }, never, never, true, never>;
+}
+interface EventPosition {
+    clientPos: number;
+    pagePos: number;
+    screenPos: number;
+}
+/**
+ * Event that is emitted when moving the splitter.
+ */
+interface SplitterMoveEvent {
+    /**
+     * The distance in pixels by which the user has moved the splitter since the last emission.
+     */
+    distance: number;
+    /**
+     * The position where the mouse or touch event has occurred.
+     */
+    position: EventPosition;
+}
+
+export { SciSplitterComponent };
+export type { EventPosition, SplitterMoveEvent };

package/throbber/index.d.ts

@@ -1,5 +1,47 @@
+import * as i0 from '@angular/core';
+
 /**
- * Generated bundle index. Do not edit.
+ * Animated graphical control to indicate the execution of an action.
+ *
+ * Choose between different throbber presentations by setting the `type` property: `ellipsis`, `ripple`, `roller`, `spinner`.
+ *
+ * ### Styling:
+ *
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To style a specific `sci-throbber` component, the following CSS variables can be set directly on the component.
+ *
+ * - sci-throbber-color:     Sets the color of the throbber (by default, uses `lightgray`).
+ * - sci-throbber-size:      Defines the size of the throbber. Most throbbers are quadratic having the same width and height.
+ *                           For non-quadratic throbbers, the size usually specifies the height (by default, uses `50px`).
+ * - sci-throbber-duration:  Sets the duration of a single animation cycle (by default, uses `1.25s`).
+ *
+ * Example:
+ *
+ * ```css
+ *
+ * sci-throbber {
+ *   --sci-throbber-color: blue;
+ *   --sci-throbber-size: 50px;
+ *   --sci-throbber-duration: 1s
+ * }
+ * ```
  */
-/// <amd-module name="@scion/components/throbber" />
-export * from './public_api';
+declare class SciThrobberComponent {
+    /**
+     * Chooses between different throbber presentation. If not set, uses `spinner` type.
+     *
+     * - **ellipsis**
+     * Represents a throbber as an ellipsis consisting of three horizontally arranged points that appear one after the other.
+     * - **ripple**
+     * Represents a throbber with a rippled, centric wave effect, similar to throwing a stone into water.
+     * - **roller**
+     * Represents a circular throbber with points rotating around the center of a circle. Points have a delayed acceleration, which leads to an accordion effect.
+     * - **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.
+     */
+    readonly type: i0.InputSignal<"ellipsis" | "ripple" | "roller" | "spinner">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciThrobberComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SciThrobberComponent, "sci-throbber", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SciThrobberComponent };

package/viewport/index.d.ts

@@ -1,5 +1,318 @@
+import * as i0 from '@angular/core';
+import { Signal, ElementRef } from '@angular/core';
+
 /**
- * Generated bundle index. Do not edit.
+ * Provides the native scrollbar tracksize.
  */
-/// <amd-module name="@scion/components/viewport" />
-export * from './public_api';
+declare class SciNativeScrollbarTrackSizeProvider {
+    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.
+     */
+    trackSize: Signal<NativeScrollbarTrackSize | null>;
+    constructor();
+    /**
+     * Computes the native scrollbar track size.
+     *
+     * @returns native track size, or `null` if the native scrollbars sit on top of the content.
+     */
+    private computeTrackSize;
+    private createNativeScrollbarTrackSizeSignal;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciNativeScrollbarTrackSizeProvider, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SciNativeScrollbarTrackSizeProvider>;
+}
+/**
+ * Represents the native scrollbar track size.
+ */
+interface NativeScrollbarTrackSize {
+    hScrollbarTrackHeight: number;
+    vScrollbarTrackWidth: number;
+}
+
+/**
+ * Represents a viewport with slotted content (`<ng-content>`) used as scrollable content. By default, content is added to a CSS grid layout.
+ *
+ * The viewport component displays scrollbars when its content overflows. Scrollbars are displayed on top of the content, not next to it.
+ * The component uses the native scrollbars of the operating system if they are already sitting on top, or falls back and renders scrollbars on top otherwise.
+ * The viewport remains natively scrollable with the native scrollbars shifted out of the viewport's visible area. Consequently, the viewport keeps supporting
+ * native scrolling features such as touch gestures, scroll speed acceleration, or scrolling near the viewport edges during drag-and-drop operations.
+ *
+ * ```html
+ * <sci-viewport>
+ *   your content
+ * </sci-viewport>
+ * ```
+ *
+ * ## Adding the viewport to a layout
+ *
+ * Typically, you would add the viewport component to a flexible layout, filling the remaining space vertically and horizontally, such as a flexbox container
+ * with the viewport's `flex` CSS property set to either `flex: auto` or `flex: 1 1 0`.
+ *
+ * The viewport is sized according to its content width and height. It grows to absorb any free space, thus overflowing its content only when encountering
+ * a layout constraint. Depending on the layout, different steps may be necessary to prevent the viewport from growing to infinity.
+ *
+ * - If practical, give the viewport a fixed size or a maximum size.
+ * - If you add the viewport to a flexbox layout, make sure that it cannot exceed the available space. Instead, the viewport should fill the remaining space,
+ *   vertically and horizontally. Be aware that, by default, a flex item does not shrink below its minimum content size. To change this, set the viewport's
+ *   `flex-basis` to `0` (instead of `auto`), or use the CSS shorthand property `flex: 1 1 0`. The `flex-basis` defines the default size of a flex item before
+ *   the remaining extra space is distributed. If the viewport does not appear after setting this property, check its parent elements' content sizes.
+ *   As an alternative to setting `flex: 1 1 0`, change the setting to `flex: auto` and hide the overflow in the parent element, as follows: `overflow: hidden`.
+ *   Another approach would be to set the minimum height of all parents to `0`, as follows: `min-height: 0`.
+ *
+ *   For the complete documentation on the flex layout and its features, refer to https://developer.mozilla.org/en-US/docs/Web/CSS/flex.
+ *
+ *
+ * ## Layouting the viewport's slotted content
+ *
+ * By default, the viewport's content is added to a CSS grid container with a single column, filling remaining space vertically and horizontally.
+ * Using the `::part(content)` pseudo element selector, you can configure the grid container or apply a different layout, such as a flex or flow layout.
+ *
+ * #### Example of adding slotted content to a CSS flex container
+ * ```css
+ * sci-viewport::part(content) {
+ *   display: flex;
+ *   flex-direction: column;
+ * }
+ * ```
+ *
+ * #### Example of configuring CSS grid container with two columns
+ * ```css
+ * sci-viewport::part(content) {
+ *   grid-template-columns: 1fr 1fr;
+ *   gap: 1em;
+ * }
+ * ```
+ *
+ * ## Styling
+ *
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To style a specific `sci-viewport` component, the following CSS variables can be set directly on the component.
+ *
+ * - sci-viewport-scrollbar-color:     Sets the color of the scrollbar.
+ *
+ * ```css
+ * sci-viewport {
+ *   --sci-viewport-scrollbar-color: blue;
+ * }
+ * ```
+ */
+declare class SciViewportComponent {
+    /**
+     * Controls if to use the native scrollbar or a scrollbar that sits on top of the viewport. Defaults to `on-top`.
+     */
+    readonly scrollbarStyle: i0.InputSignal<ScrollbarStyle>;
+    /**
+     * Emits when the viewport is scrolled. The event is emitted outside the Angular zone to avoid unnecessary change detection cycles.
+     */
+    readonly scroll: i0.OutputEmitterRef<Event>;
+    private readonly _host;
+    private readonly _viewport;
+    private readonly _viewportClient;
+    protected readonly nativeScrollbarTrackSizeProvider: SciNativeScrollbarTrackSizeProvider;
+    constructor();
+    focus(): void;
+    /**
+     * Returns the number of pixels that the viewport client is scrolled vertically.
+     *
+     * @see Element.scrollTop
+     */
+    get scrollTop(): number;
+    /**
+     * Sets the number of pixels that the viewport client is scrolled vertically.
+     *
+     * @see Element.scrollTop
+     */
+    set scrollTop(scrollTop: number);
+    /**
+     * Returns the number of pixels that the viewport client is scrolled horizontally.
+     *
+     * @see Element.scrollLeft
+     */
+    get scrollLeft(): number;
+    /**
+     * Sets the number of pixels that the viewport client is scrolled horizontally.
+     *
+     * @see Element.scrollLeft
+     */
+    set scrollLeft(scrollLeft: number);
+    /**
+     * Returns the height of the viewport client.
+     *
+     * @see Element.scrollHeight
+     */
+    get scrollHeight(): number;
+    /**
+     * Returns the width of the viewport client.
+     *
+     * @see Element.scrollWidth
+     */
+    get scrollWidth(): number;
+    /**
+     * Returns the viewport {HTMLElement}.
+     */
+    get viewportElement(): HTMLElement;
+    /**
+     * Returns the viewport client {HTMLElement}.
+     */
+    get viewportClientElement(): HTMLElement;
+    /**
+     * Checks if the specified element is scrolled into the viewport.
+     *
+     * @param element - the element to be checked
+     * @param fit - control if the element must fully or partially fit into the viewport
+     * @return `true` if the element is scrolled into the viewport, or `false` otherwise.
+     */
+    isElementInView(element: ElementRef<HTMLElement> | HTMLElement, fit: 'full' | 'partial'): boolean;
+    /**
+     * Scrolls the specified element into the viewport.
+     *
+     * @param element - the element to scroll into the viewport
+     * @param offset - the gap between the element and the viewport
+     */
+    scrollIntoView(element: ElementRef<HTMLElement> | HTMLElement, offset?: number): void;
+    /**
+     * Computes the distance of the element to the viewport's left or top border.
+     *
+     * @return distance of the element to the viewport's left or top border, or `null` if not contained
+     *         in the viewport or the element or any ancestor has the `display` property set to `none`.
+     */
+    computeOffset(element: ElementRef<HTMLElement> | HTMLElement, border: 'left' | 'top'): number | null;
+    /**
+     * Emits when the scroll position changes.
+     */
+    private installScrollEmitter;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciViewportComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SciViewportComponent, "sci-viewport", never, { "scrollbarStyle": { "alias": "scrollbarStyle"; "required": false; "isSignal": true; }; }, { "scroll": "scroll"; }, never, never, true, never>;
+}
+/**
+ * Represents a scrollbar style.
+ */
+type ScrollbarStyle = 'native' | 'on-top' | 'hidden';
+
+/**
+ * Renders a vertical or horizontal scrollbar.
+ *
+ * The scrollbar features the following functionality:
+ * - allows to move the thumb by mouse or touch
+ * - enlarges the thumb if the mouse pointer is near the thumb
+ * - allows paging on mousedown on the scroll track
+ *
+ * ### Styling:
+ *
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To style a specific `sci-scrollbar` component, the following CSS variables can be set directly on the component.
+ *
+ * - sci-scrollbar-color:    Sets the color of the scrollbar.
+ *
+ * Example:
+ *
+ * ```css
+ *
+ * sci-scrollbar {
+ *   --sci-scrollbar-color: blue;
+ * }
+ * ```
+ */
+declare class SciScrollbarComponent {
+    /**
+     * Specifies the direction of the scrollbar. Defaults to a vertical scrollbar.
+     */
+    readonly direction: i0.InputSignal<"vscroll" | "hscroll">;
+    /**
+     * The viewport to provide scrollbars for.
+     */
+    readonly viewport: i0.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;
+    protected onTouchStart(event: TouchEvent): void;
+    protected onTouchMove(event: TouchEvent): void;
+    protected onTouchEnd(event: TouchEvent): void;
+    protected onMouseDown(mousedownEvent: MouseEvent): void;
+    protected onScrollTrackMouseDown(event: MouseEvent, direction: 'up' | 'down'): void;
+    /**
+     * Renders the current scroll position when the viewport is scrolled.
+     */
+    private installScrollPositionRenderer;
+    /**
+     * Projects the given scrollbar scroll pixels into viewport scroll pixels.
+     */
+    private toViewportPanPx;
+    /**
+     * Moves the viewport client by the specified numbers of pixels.
+     */
+    private moveViewportClient;
+    /**
+     * Indicates if the content overflows.
+     */
+    get overflow(): boolean;
+    /**
+     * Scrolls continuously while holding the mouse pressed, or until the mouse leaves the scrolltrack.
+     */
+    private scrollWhileMouseDown;
+    private setCssVariable;
+    private get viewportSize();
+    private get viewportClientSize();
+    private get scrollPosition();
+    private get thumbSize();
+    private get trackSize();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciScrollbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SciScrollbarComponent, "sci-scrollbar", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "viewport": { "alias": "viewport"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Makes the host element natively scrollable and hides native scrollbars by default, unless native scrollbars
+ * already sit on top of the viewport (e.g. in OS X).
+ *
+ * Because there is no cross-browser API to hide scrollbars without losing native scroll support, we set 'overflow'
+ * to 'scroll' but shift the native scrollbars out of the visible viewport area. The shift offset is computed upfront.
+ *
+ * This directive expects its host element to be the only child in document flow in its parent DOM element. It makes the host element
+ * fill up the entire space (width and height set to 100%). The parent element must have its CSS `overflow` property set to `hidden`
+ * to hide the pushed out native scrollbars.
+ */
+declare class SciScrollableDirective {
+    /**
+     * Controls whether to display native scrollbars.
+     * Has no effect if the native scrollbar sits on top of the content, e.g. in OS X.
+     */
+    readonly displayNativeScrollbar: i0.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.
+     */
+    private controlDisplayOfNativeScrollbar;
+    /**
+     * Uses the native scrollbars when content overflows.
+     */
+    private useNativeScrollbars;
+    /**
+     * Shifts the native scrollbars out of the visible viewport area.
+     */
+    private shiftNativeScrollbars;
+    private setStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciScrollableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SciScrollableDirective, "[sciScrollable]", never, { "displayNativeScrollbar": { "alias": "sciScrollableDisplayNativeScrollbar"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SciScrollableDirective, SciScrollbarComponent, SciViewportComponent };
+export type { ScrollbarStyle };

package/dimension/bounding-client-rect.signal.d.ts

@@ -1,23 +0,0 @@
-import { ElementRef, Injector, Signal } from '@angular/core';
-/**
- * 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, a warning is logged, and positioning changed to `relative`.
- */
-export declare function boundingClientRect(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement>>, options?: {
-    injector?: Injector;
-}): Signal<DOMRect>;
-export declare function boundingClientRect(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {
-    injector?: Injector;
-}): Signal<DOMRect | undefined>;