@scion/components 13.0.0

package/splitter/splitter.module.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./splitter.component";
+import * as i2 from "@angular/common";
+/**
+ * Provides a splitter, a visual element that allows the user to control the size of elements next to it.
+ *
+ * ### Usage:
+ *
+ * ```html
+ * <sci-splitter (move)="onSplitterMove($event.distance)"></sci-splitter>
+ * ```
+ */
+export declare class SciSplitterModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciSplitterModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SciSplitterModule, [typeof i1.SciSplitterComponent], [typeof i2.CommonModule], [typeof i1.SciSplitterComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SciSplitterModule>;
+}

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

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+/**
+ * Represents a throbber as an ellipsis consisting of three horizontally arranged points that appear one after the other.
+ *
+ * Throbber type: `ellipsis`
+ */
+export declare class SciEllipsisThrobberComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciEllipsisThrobberComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SciEllipsisThrobberComponent, "sci-ellipsis-throbber", never, {}, {}, never, never>;
+}

package/throbber/package.json

@@ -0,0 +1,10 @@
+{
+  "module": "../fesm2015/scion-components-throbber.mjs",
+  "es2020": "../fesm2020/scion-components-throbber.mjs",
+  "esm2020": "../esm2020/throbber/scion-components-throbber.mjs",
+  "fesm2020": "../fesm2020/scion-components-throbber.mjs",
+  "fesm2015": "../fesm2015/scion-components-throbber.mjs",
+  "typings": "scion-components-throbber.d.ts",
+  "sideEffects": false,
+  "name": "@scion/components/throbber"
+}

package/throbber/public_api.d.ts

@@ -0,0 +1,2 @@
+export { SciThrobberModule } from './throbber.module';
+export { SciThrobberComponent } from './throbber.component';

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

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+/**
+ * Represents a throbber with a rippled, centric wave effect, similar to throwing a stone into water.
+ *
+ * Throbber type: `ripple`
+ */
+export declare class SciRippleThrobberComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciRippleThrobberComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SciRippleThrobberComponent, "sci-ripple-throbber", never, {}, {}, never, never>;
+}

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

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+/**
+ * Represents a circular throbber with points rotating around the center of a circle. Points have a delayed acceleration, which leads to an accordion effect.
+ *
+ * Throbber type: `roller`
+ */
+export declare class SciRollerThrobberComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciRollerThrobberComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SciRollerThrobberComponent, "sci-roller-throbber", never, {}, {}, never, never>;
+}

package/throbber/scion-components-throbber.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@scion/components/throbber" />
+export * from './public_api';

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

@@ -0,0 +1,11 @@
+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.
+ *
+ * Throbber type: `spinner`
+ */
+export declare class SciSpinnerThrobberComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciSpinnerThrobberComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SciSpinnerThrobberComponent, "sci-spinner-throbber", never, {}, {}, never, never>;
+}

package/throbber/throbber.component.d.ts

@@ -0,0 +1,43 @@
+import * as i0 from "@angular/core";
+/**
+ * Animated graphical control to indicate the execution of an action.
+ *
+ * Choose between different throbber presentations by setting the `type` property: `ellipsis`, `ripple`, `roller`, `spinner`.
+ *
+ * ### CSS styling:
+ *
+ * You can override the following CSS variables:
+ *
+ * - 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
+ * }
+ * ```
+ */
+export 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.
+     */
+    type: 'ellipsis' | 'ripple' | 'roller' | 'spinner';
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciThrobberComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SciThrobberComponent, "sci-throbber", never, { "type": "type"; }, {}, never, never>;
+}

package/throbber/throbber.module.d.ts

@@ -0,0 +1,15 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./throbber.component";
+import * as i2 from "./ellipsis-throbber/ellipsis-throbber.component";
+import * as i3 from "./ripple-throbber/ripple-throbber.component";
+import * as i4 from "./roller-throbber/roller-throbber.component";
+import * as i5 from "./spinner-throbber/spinner-throbber.component";
+import * as i6 from "@angular/common";
+/**
+ * Provides {@link SciThrobberComponent}, an animated graphical control to indicate the execution of an action.
+ */
+export declare class SciThrobberModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciThrobberModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SciThrobberModule, [typeof i1.SciThrobberComponent, typeof i2.SciEllipsisThrobberComponent, typeof i3.SciRippleThrobberComponent, typeof i4.SciRollerThrobberComponent, typeof i5.SciSpinnerThrobberComponent], [typeof i6.CommonModule], [typeof i1.SciThrobberComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SciThrobberModule>;
+}

package/viewport/_index.scss

@@ -0,0 +1 @@
+@forward './scrollbar' as scrollbar-* show scrollbar-position, scrollbar-hide-when-inactive;

package/viewport/_scrollbar.scss

@@ -0,0 +1,44 @@
+/**
+ * Positions scrollbars absolutely relative to the bounding box of the nearest positioned parent.
+ *
+ * Invoke from within the 'sci-scrollbar' selector.
+ */
+@mixin position($theme: ()) {
+  $scrollbar-size: map-get($theme, scrollbar-size);
+  $scrollbar-size: 12px !default;
+
+  position: absolute;
+  transition-duration: 1s;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+
+  &.vertical {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: unset;
+    width: $scrollbar-size;
+  }
+
+  &.horizontal {
+    top: unset;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: $scrollbar-size;
+  }
+}
+
+/**
+ * Hides emulated scrollbars if all the following conditions are met:
+ * - host element not hovered (mouse navigation)
+ * - host element not active (touch navigation)
+ * - not scrolling (ensures the scrollbar to be visible even if dragging the thumb outside of the host element, :active pseudo-class not working in IE and Firefox)
+ *
+ * Invoke from within the viewport selector.
+ */
+@mixin hide-when-inactive($theme: ()) {
+  &:not(:hover):not(:active) sci-scrollbar:not(.scrolling) {
+    opacity: 0; // do not use 'display' nor 'visibility' property to fade the scrollbar
+  }
+}

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

@@ -0,0 +1,42 @@
+import { NgZone, OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * Provides the native scrollbar tracksize.
+ *
+ * @dynamic ignore 'strictMetadataEmit' errors due to the usage of {@link Document} as ambient type for DI.
+ */
+export declare class SciNativeScrollbarTrackSizeProvider implements OnDestroy {
+    private _document;
+    private _zone;
+    private readonly _trackSize$;
+    private readonly _destroy$;
+    constructor(_document: Document, _zone: NgZone);
+    /**
+     * Returns an {Observable} which emits the native scrollbar track size, if any, or else `null`.
+     *
+     * Upon subscription, it emits the track size immediately, and then continuously emits when the track size changes.
+     */
+    get trackSize$(): Observable<NativeScrollbarTrackSize | null>;
+    /**
+     * Returns the native scrollbar track size, if any, or else `null`.
+     */
+    get trackSize(): NativeScrollbarTrackSize | null;
+    /**
+     * 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 installNativeScrollbarTrackSizeListener;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciNativeScrollbarTrackSizeProvider, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SciNativeScrollbarTrackSizeProvider>;
+}
+/**
+ * Represents the native scrollbar track size.
+ */
+export interface NativeScrollbarTrackSize {
+    hScrollbarTrackHeight: number;
+    vScrollbarTrackWidth: number;
+}

package/viewport/package.json

@@ -0,0 +1,10 @@
+{
+  "module": "../fesm2015/scion-components-viewport.mjs",
+  "es2020": "../fesm2020/scion-components-viewport.mjs",
+  "esm2020": "../esm2020/viewport/scion-components-viewport.mjs",
+  "fesm2020": "../fesm2020/scion-components-viewport.mjs",
+  "fesm2015": "../fesm2015/scion-components-viewport.mjs",
+  "typings": "scion-components-viewport.d.ts",
+  "sideEffects": false,
+  "name": "@scion/components/viewport"
+}

package/viewport/public_api.d.ts

@@ -0,0 +1,5 @@
+export { SciViewportModule } from './viewport.module';
+export * from './viewport.component';
+export * from './scrollable.directive';
+export * from './scrollbar/scrollbar.component';
+export * from './native-scrollbar-track-size-provider.service';

package/viewport/scion-components-viewport.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@scion/components/viewport" />
+export * from './public_api';

package/viewport/scrollable.directive.d.ts

@@ -0,0 +1,39 @@
+import { ElementRef, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
+import { SciNativeScrollbarTrackSizeProvider } from './native-scrollbar-track-size-provider.service';
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ */
+export declare class SciScrollableDirective implements OnChanges, OnDestroy {
+    private _host;
+    private _renderer;
+    private _destroy$;
+    private _inputChange$;
+    /**
+     * Controls whether to display native scrollbars.
+     * Has no effect if the native scrollbar sits on top of the content, e.g. in OS X.
+     */
+    isDisplayNativeScrollbar: boolean;
+    constructor(_host: ElementRef<HTMLDivElement>, _renderer: Renderer2, nativeScrollbarTrackSizeProvider: SciNativeScrollbarTrackSizeProvider);
+    /**
+     * Uses the native scrollbars when content overflows.
+     */
+    private useNativeScrollbars;
+    /**
+     * Shifts the native scrollbars out of the visible viewport area.
+     */
+    private shiftNativeScrollbars;
+    private setStyle;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciScrollableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SciScrollableDirective, "[sciScrollable]", never, { "isDisplayNativeScrollbar": "sciScrollableDisplayNativeScrollbar"; }, {}, never>;
+}

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

@@ -0,0 +1,106 @@
+import { ElementRef, NgZone, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * 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
+ *
+ * ### CSS styling:
+ *
+ * You can override the following CSS variables:
+ *
+ * - sci-scrollbar-color:    Sets the color of the scrollbar (by default, uses `rgb(78, 78, 78)`).
+ *
+ * Example:
+ *
+ * ```css
+ *
+ * sci-scrollbar {
+ *   --sci-scrollbar-color: blue;
+ * }
+ * ```
+ */
+export declare class SciScrollbarComponent implements OnDestroy {
+    private _host;
+    private _document;
+    private _zone;
+    private _destroy$;
+    private _viewport;
+    private _viewportChange$;
+    private _lastDragPosition;
+    private _overflow;
+    private _thumbSizeFr;
+    private _thumbPositionFr;
+    thumbElement: ElementRef<HTMLDivElement>;
+    get vertical(): boolean;
+    get horizontal(): boolean;
+    get scrolling(): boolean;
+    /**
+     * Specifies the direction of the scrollbar.
+     *
+     * By default, if not specified, renders a vertical scrollbar.
+     */
+    direction: 'vscroll' | 'hscroll';
+    /**
+     * The viewport to provide scrollbars for.
+     */
+    set setViewport(viewport: HTMLElement);
+    constructor(_host: ElementRef<HTMLElement>, _document: any, _zone: NgZone);
+    /**
+     * 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;
+    onTouchStart(event: TouchEvent): void;
+    onTouchMove(event: TouchEvent): void;
+    onTouchEnd(event: TouchEvent): void;
+    onMouseDown(mousedownEvent: MouseEvent): void;
+    onScrollTrackMouseDown(event: MouseEvent, direction: 'up' | 'down'): void;
+    /**
+     * 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;
+    /**
+     * Emits whenever the viewport scrolls.
+     */
+    private viewportScrollChange$;
+    /**
+     * Emits on subscription, and then each time the size of the viewport changes.
+     */
+    private viewportDimensionChange$;
+    /**
+     * Emits on subscription, and then each time the size or style property of the viewport client changes.
+     */
+    private viewportClientDimensionChange$;
+    /**
+     * Emits the children of the passed element, and then each time child elements are added or removed.
+     */
+    private children$;
+    private setCssVariable;
+    private get viewportSize();
+    private get viewportClientSize();
+    private get scrollPosition();
+    private get thumbSize();
+    private get trackSize();
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciScrollbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SciScrollbarComponent, "sci-scrollbar", never, { "direction": "direction"; "setViewport": "viewport"; }, {}, never, never>;
+}

package/viewport/viewport.component.d.ts

@@ -0,0 +1,160 @@
+import { ElementRef, EventEmitter } from '@angular/core';
+import { SciNativeScrollbarTrackSizeProvider } from './native-scrollbar-track-size-provider.service';
+import * as i0 from "@angular/core";
+/**
+ * Represents a viewport with the `<ng-content>` used as scrollable content. 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 content
+ *
+ * `NgContent` is added to a CSS grid container with, by default, a single column, filling remaining space vertically and horizontally.
+ *
+ * You can override the following CSS variables to control the grid:
+ *
+ * - sci-viewport-content-grid-template-columns:   Defines the columns and their track sizes (by default, single column with track size auto)
+ * - sci-viewport-content-grid-template-rows:      Defines the rows and their track sizes (by default, single row with track size auto)
+ * - sci-viewport-content-grid-auto-columns:       Defines the track size of not explicitly declared columns.
+ * - sci-viewport-content-grid-auto-rows:          Defines the track size of not explicitly declared rows.
+ * - sci-viewport-content-grid-gap:                Sets the gaps (gutters) between rows and columns.
+ *
+ * Example of how to control the CSS grid:
+ *
+ * ```css
+ * sci-viewport {
+ *   --sci-viewport-content-grid-auto-rows: min-content;
+ *   --sci-viewport-content-grid-gap: .5em; // specifies the row and column gap
+ * }
+ * ```
+ *
+ * ## Styling of scrollbars
+ *
+ * You can override the following CSS variables to control the appearance of the scrollbar:
+ *
+ * - sci-viewport-scrollbar-color:     Sets the color of the scrollbar (by default, uses `rgb(78, 78, 78)`).
+ *
+ * ```css
+ * sci-viewport {
+ *   --sci-viewport-scrollbar-color: blue;
+ * }
+ * ```
+ */
+export declare class SciViewportComponent {
+    host: ElementRef<HTMLElement>;
+    nativeScrollbarTrackSizeProvider: SciNativeScrollbarTrackSizeProvider;
+    private _viewport;
+    private _viewportClient;
+    private _scrollbarStyle;
+    tabindex: number;
+    /**
+     * Controls whether to use native scrollbars or, which is by default, emulated scrollbars that sit on top of the viewport client.
+     * In the latter, the viewport client remains natively scrollable.
+     */
+    set scrollbarStyle(scrollbarStyle: ScrollbarStyle);
+    get scrollbarStyle(): ScrollbarStyle;
+    /**
+     * Emits upon a scroll event.
+     *
+     * You can add [sciDimension] directive to the viewport or viewport client to be notified about layout changes.
+     */
+    scroll: EventEmitter<Event>;
+    constructor(host: ElementRef<HTMLElement>, nativeScrollbarTrackSizeProvider: SciNativeScrollbarTrackSizeProvider);
+    focus(): void;
+    onScroll(event: Event): 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
+     */
+    isElementInView(element: 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: HTMLElement, offset?: number): void;
+    /**
+     * Computes the distance of the element to the viewport's left or top border.
+     */
+    computeOffset(element: HTMLElement, border: 'left' | 'top'): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciViewportComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SciViewportComponent, "sci-viewport", never, { "scrollbarStyle": "scrollbarStyle"; }, { "scroll": "scroll"; }, never, ["*"]>;
+}
+/**
+ * Represents a scrollbar style.
+ */
+export declare type ScrollbarStyle = 'native' | 'on-top' | 'hidden';

package/viewport/viewport.module.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./viewport.component";
+import * as i2 from "./scrollbar/scrollbar.component";
+import * as i3 from "./scrollable.directive";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/cdk/scrolling";
+/**
+ * Provides a viewport component with scrollbars that sit on top of the viewport client.
+ */
+export declare class SciViewportModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciViewportModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SciViewportModule, [typeof i1.SciViewportComponent, typeof i2.SciScrollbarComponent, typeof i3.SciScrollableDirective], [typeof i4.CommonModule, typeof i5.ScrollingModule], [typeof i1.SciViewportComponent, typeof i2.SciScrollbarComponent, typeof i3.SciScrollableDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SciViewportModule>;
+}