@scion/components 19.2.1 → 20.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/design/themes/_scion-dark-theme.scss +3 -1
  2. package/design/themes/_scion-light-theme.scss +3 -1
  3. package/dimension/index.d.ts +79 -3
  4. package/fesm2022/scion-components-dimension.mjs +5 -38
  5. package/fesm2022/scion-components-dimension.mjs.map +1 -1
  6. package/fesm2022/scion-components-sashbox.mjs +18 -85
  7. package/fesm2022/scion-components-sashbox.mjs.map +1 -1
  8. package/fesm2022/scion-components-splitter.mjs +6 -44
  9. package/fesm2022/scion-components-splitter.mjs.map +1 -1
  10. package/fesm2022/scion-components-throbber.mjs +17 -48
  11. package/fesm2022/scion-components-throbber.mjs.map +1 -1
  12. package/fesm2022/scion-components-viewport.mjs +16 -57
  13. package/fesm2022/scion-components-viewport.mjs.map +1 -1
  14. package/index.d.ts +2 -5
  15. package/package.json +6 -5
  16. package/sashbox/index.d.ts +169 -3
  17. package/splitter/index.d.ts +101 -3
  18. package/throbber/index.d.ts +45 -3
  19. package/viewport/index.d.ts +316 -3
  20. package/dimension/bounding-client-rect.signal.d.ts +0 -23
  21. package/dimension/dimension.d.ts +0 -10
  22. package/dimension/dimension.directive.d.ts +0 -25
  23. package/dimension/dimension.module.d.ts +0 -14
  24. package/dimension/dimension.signal.d.ts +0 -19
  25. package/dimension/public_api.d.ts +0 -5
  26. package/public-api.d.ts +0 -4
  27. package/sashbox/element-ref.directive.d.ts +0 -9
  28. package/sashbox/public_api.d.ts +0 -3
  29. package/sashbox/sash/sash.component.d.ts +0 -31
  30. package/sashbox/sash.directive.d.ts +0 -70
  31. package/sashbox/sashbox-accessor.d.ts +0 -10
  32. package/sashbox/sashbox.component.d.ts +0 -110
  33. package/sashbox/sashbox.module.d.ts +0 -31
  34. package/splitter/public_api.d.ts +0 -2
  35. package/splitter/splitter.component.d.ts +0 -99
  36. package/splitter/splitter.module.d.ts +0 -18
  37. package/throbber/ellipsis-throbber/ellipsis-throbber.component.d.ts +0 -10
  38. package/throbber/public_api.d.ts +0 -2
  39. package/throbber/ripple-throbber/ripple-throbber.component.d.ts +0 -10
  40. package/throbber/roller-throbber/roller-throbber.component.d.ts +0 -10
  41. package/throbber/spinner-throbber/spinner-throbber.component.d.ts +0 -11
  42. package/throbber/throbber.component.d.ts +0 -44
  43. package/throbber/throbber.module.d.ts +0 -12
  44. package/viewport/native-scrollbar-track-size-provider.service.d.ts +0 -30
  45. package/viewport/public_api.d.ts +0 -4
  46. package/viewport/scrollable.directive.d.ts +0 -38
  47. package/viewport/scrollbar/scrollbar.component.d.ts +0 -86
  48. package/viewport/viewport.component.d.ts +0 -162
  49. package/viewport/viewport.module.d.ts +0 -14
@@ -1,10 +0,0 @@
1
- /**
2
- * Represents the dimension of an element.
3
- */
4
- export interface SciDimension {
5
- offsetWidth: number;
6
- offsetHeight: number;
7
- clientWidth: number;
8
- clientHeight: number;
9
- element: HTMLElement;
10
- }
@@ -1,25 +0,0 @@
1
- import { SciDimension } from './dimension';
2
- import * as i0 from "@angular/core";
3
- /**
4
- * Observes the size of the host element.
5
- *
6
- * ---
7
- * Usage:
8
- *
9
- * ```html
10
- * <div sciDimension (sciDimensionChange)="onDimensionChange($event)"></div>
11
- * ```
12
- */
13
- export declare class SciDimensionDirective {
14
- /**
15
- * Controls if to output outside the Angular zone. Defaults to `false`.
16
- */
17
- readonly emitOutsideAngular: import("@angular/core").InputSignal<boolean>;
18
- /**
19
- * Outputs the size of the element.
20
- */
21
- readonly dimensionChange: import("@angular/core").OutputEmitterRef<SciDimension>;
22
- constructor();
23
- static ɵfac: i0.ɵɵFactoryDeclaration<SciDimensionDirective, never>;
24
- static ɵdir: i0.ɵɵDirectiveDeclaration<SciDimensionDirective, "[sciDimension]", never, { "emitOutsideAngular": { "alias": "emitOutsideAngular"; "required": false; "isSignal": true; }; }, { "dimensionChange": "sciDimensionChange"; }, never, never, true, never>;
25
- }
@@ -1,14 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- import * as i1 from "./dimension.directive";
3
- /**
4
- * Provides a directive for observing changes to the size of the host element.
5
- *
6
- * @deprecated since version 19.0.0; Import standalone directive instead; API will be removed in a future release.
7
- *
8
- * @see fromDimension$
9
- */
10
- export declare class SciDimensionModule {
11
- static ɵfac: i0.ɵɵFactoryDeclaration<SciDimensionModule, never>;
12
- static ɵmod: i0.ɵɵNgModuleDeclaration<SciDimensionModule, never, [typeof i1.SciDimensionDirective], [typeof i1.SciDimensionDirective]>;
13
- static ɵinj: i0.ɵɵInjectorDeclaration<SciDimensionModule>;
14
- }
@@ -1,19 +0,0 @@
1
- import { ElementRef, Injector, Signal } from '@angular/core';
2
- import { SciDimension } from './dimension';
3
- /**
4
- * Creates a signal observing the size of an element.
5
- *
6
- * The element can be passed as a signal, enabling observation of view children in the component constructor.
7
- *
8
- * The signal subscribes to the native {@link ResizeObserver} to monitor element size changes. Destroying the injection context will unsubscribe the observer.
9
- *
10
- * Usage:
11
- * - Must be called within an injection context or an injector provided. Destroying the injector will unsubscribe the signal.
12
- * - Must not be called within a reactive context to avoid repeated subscriptions.
13
- */
14
- export declare function dimension(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement>>, options?: {
15
- injector?: Injector;
16
- }): Signal<SciDimension>;
17
- export declare function dimension(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {
18
- injector?: Injector;
19
- }): Signal<SciDimension | undefined>;
@@ -1,5 +0,0 @@
1
- export { SciDimensionModule } from './dimension.module';
2
- export { SciDimensionDirective } from './dimension.directive';
3
- export { dimension } from './dimension.signal';
4
- export { boundingClientRect } from './bounding-client-rect.signal';
5
- export { type SciDimension } from './dimension';
package/public-api.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /**
2
- * Primary entry point for all public APIs of this package.
3
- */
4
- export {} from '';
@@ -1,9 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- /**
3
- * Provides access to the native {@link HTMLElement} of the host.
4
- */
5
- export declare class SciElementRefDirective {
6
- readonly host: HTMLElement;
7
- static ɵfac: i0.ɵɵFactoryDeclaration<SciElementRefDirective, never>;
8
- static ɵdir: i0.ɵɵDirectiveDeclaration<SciElementRefDirective, "[sciElementRef]", ["sciElementRef"], {}, {}, never, never, true, never>;
9
- }
@@ -1,3 +0,0 @@
1
- export { SciSashboxModule } from './sashbox.module';
2
- export { SciSashboxComponent } from './sashbox.component';
3
- export { SciSashDirective } from './sash.directive';
@@ -1,31 +0,0 @@
1
- import { Signal } from '@angular/core';
2
- import { SciSashDirective } from '../sash.directive';
3
- import * as i0 from "@angular/core";
4
- /**
5
- * Represents a {@link SciSashDirective} in the DOM, displaying the specified sash template.
6
- */
7
- export declare class SashComponent {
8
- /**
9
- * Specifies the sash representing this component.
10
- */
11
- readonly sash: import("@angular/core").InputSignal<SciSashDirective>;
12
- private readonly _host;
13
- private readonly _cd;
14
- private readonly _sashBoxAccessor;
15
- protected readonly animationState: import("@angular/core").WritableSignal<"enter" | "leave" | null>;
16
- constructor();
17
- /**
18
- * Starts the leave animation, returning a signal to track animation completion.
19
- */
20
- startLeaveAnimation(): Signal<void>;
21
- /**
22
- * Notifies when ending the animation.
23
- */
24
- protected onAnimationEnd(): void;
25
- /**
26
- * Gets the size of this sash in pixel.
27
- */
28
- get size(): number;
29
- static ɵfac: i0.ɵɵFactoryDeclaration<SashComponent, never>;
30
- static ɵcmp: i0.ɵɵComponentDeclaration<SashComponent, "sci-sash", never, { "sash": { "alias": "sash"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
31
- }
@@ -1,70 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- /**
3
- * Use this directive to model a sash for {@link SciSashboxComponent}.
4
- * The host element of this modelling directive must be a <ng-template> which is used as sash template.
5
- *
6
- *
7
- * ### Usage:
8
- *
9
- * <sci-sashbox direction="row">
10
- * <!-- fixed size sash -->
11
- * <ng-template sciSash size="200px">
12
- * ...
13
- * </ng-template>
14
- *
15
- * <!-- sash which takes the remaining space -->
16
- * <ng-template sciSash>
17
- * ...
18
- * </ng-template>
19
- * </sci-sashbox>
20
- */
21
- export declare class SciSashDirective {
22
- /**
23
- * Specifies the sash size, either as fixed size with an explicit unit,
24
- * or as a unitless proportion to distribute remaining space. A proportional
25
- * sash has the ability to grow or shrink if necessary, and must be >= 1.
26
- *
27
- * If not set, remaining space is distributed equally.
28
- */
29
- readonly size: import("@angular/core").InputSignalWithTransform<string | number, string | number | null | undefined>;
30
- /**
31
- * Specifies the minimal sash size in pixel or percent.
32
- * The min-size prevents the user from shrinking the sash below this minimal size.
33
- *
34
- * If the unit is omitted, the value is interpreted as a pixel value.
35
- */
36
- readonly minSize: import("@angular/core").InputSignal<string | number | undefined>;
37
- /**
38
- * Specifies an optional key to identify this sash.
39
- *
40
- * The key is used as the property key in the object emitted by {@link SciSashboxComponent.sashEnd2} to associate the size of this sash.
41
- */
42
- readonly key: import("@angular/core").InputSignal<string | undefined>;
43
- /**
44
- * Controls whether to animate the entering and leaving of this sash, only if fixed-sized. Defaults to `false`.
45
- *
46
- * Enabling animation will mimic the behavior of a side panel that slides in or out.
47
- *
48
- * Note: Animates only sashes added or removed after the initial rendering.
49
- */
50
- readonly animate: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
51
- private readonly _sashBoxAccessor;
52
- private readonly _component;
53
- /**
54
- * Flex properties computed based on the configured {@link size}. Properties are updated when moving this sash.
55
- */
56
- private readonly _flexProperties;
57
- /**
58
- * Computes the flex properties to lay out this sash in the sashbox's flex layout based on the configured {@link size}.
59
- */
60
- private computeFlexProperties;
61
- /**
62
- * Normalizes the 'flex-grow' of the passed {@link FlexProperties} to ensure that the sum of the 'flex-grow' proportions of all sashes is 1.
63
- *
64
- * If the sum of all flex-grow proportions were less than 1, the sashes would not fill the entire sash-box space.
65
- * Without normalization, this could occur when a sash is removed.
66
- */
67
- private normalizeFlexGrow;
68
- static ɵfac: i0.ɵɵFactoryDeclaration<SciSashDirective, never>;
69
- 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>;
70
- }
@@ -1,10 +0,0 @@
1
- import { SciSashDirective } from './sash.directive';
2
- import { Signal } from '@angular/core';
3
- /**
4
- * Allows accessing the sashbox component from sashes.
5
- */
6
- export declare abstract class SciSashBoxAccessor {
7
- abstract readonly sashes: Signal<readonly SciSashDirective[]>;
8
- abstract readonly direction: Signal<'column' | 'row'>;
9
- abstract readonly afterFirstRender: Signal<boolean>;
10
- }
@@ -1,110 +0,0 @@
1
- import { SplitterMoveEvent } from '@scion/components/splitter';
2
- import * as i0 from "@angular/core";
3
- /**
4
- * The <sci-sashbox> is like a CSS flexbox container that lays out its content children (sashes) in a row (which is by default)
5
- * or column arrangement (as specified by the direction property). A splitter is added between each child to allow the user to
6
- * shrink or stretch the individual sashes.
7
- *
8
- * Sashes are modelled as <ng-template> decorated with the 'sciSash' directive.
9
- * A sash can have a fixed size with an explicit unit, or a unitless proportion to distribute remaining space.
10
- * A proportional sash has the ability to grow or shrink if necessary.
11
- *
12
- * Sash content is added to a CSS grid container with a single column, stretching the content vertically and horizontally.
13
- *
14
- * ### Usage
15
- *
16
- * ```html
17
- * <sci-sashbox direction="row">
18
- * <ng-template sciSash size="1">
19
- * ...
20
- * </ng-template>
21
- *
22
- * <ng-template sciSash size="2">
23
- * ...
24
- * </ng-template>
25
- *
26
- * <ng-template sciSash size="1">
27
- * ...
28
- * </ng-template>
29
- * </sci-sashbox>
30
- * ```
31
- *
32
- * ### Styling
33
- *
34
- * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
35
- * To style a specific `sci-sashbox` component, the following CSS variables can be set directly on the component.
36
- *
37
- * - --sci-sashbox-gap: Sets the gaps (gutters) between sashes.
38
- * - --sci-sashbox-splitter-background-color: Sets the background color of the splitter.
39
- * - --sci-sashbox-splitter-background-color-hover: Sets the background color of the splitter when hovering it.
40
- * - --sci-sashbox-splitter-size: Sets the size of the splitter along the main axis.
41
- * - --sci-sashbox-splitter-size-hover: Sets the size of the splitter along the main axis when hovering it.
42
- * - --sci-sashbox-splitter-touch-target-size: Sets the touch target size to move the splitter (accessibility).
43
- * - --sci-sashbox-splitter-cross-axis-size: Sets the splitter size along the cross axis.
44
- * - --sci-sashbox-splitter-border-radius: Sets the border radius of the splitter.
45
- * - --sci-sashbox-splitter-opacity-active: Sets the opacity of the splitter while the user moves the splitter.
46
- * - --sci-sashbox-splitter-opacity-hover: Sets the opacity of the splitter when hovering it.
47
- *
48
- * Example:
49
- *
50
- * ```scss
51
- * sci-sashbox {
52
- * --sci-sashbox-splitter-background-color: black;
53
- * --sci-sashbox-splitter-background-color-hover: black;
54
- * }
55
- * ```
56
- */
57
- export declare class SciSashboxComponent {
58
- /**
59
- * Specifies if to lay out sashes in a row (which is by default) or column arrangement.
60
- */
61
- readonly direction: import("@angular/core").InputSignal<"column" | "row">;
62
- /**
63
- * Notifies when start sashing.
64
- */
65
- readonly sashStart: import("@angular/core").OutputEmitterRef<void>;
66
- /**
67
- * Emits an array with new sash sizes when sashing ends.
68
- *
69
- * The array contains the sash sizes in display order.
70
- *
71
- * TODO [Angular 20] BREAKING CHANGE: Change signature from `number[]` to `{[key: string]: number}` and remove {@link sashEnd2}.
72
- */
73
- readonly sashEnd: import("@angular/core").OutputEmitterRef<number[]>;
74
- /**
75
- * Emits an object with new sash sizes when sashing ends.
76
- *
77
- * Each sash size is associated with its {@link SciSashDirective.key} or its display position (zero-based) if not set.
78
- *
79
- * Note: This output will be renamed to `sashEnd` in version 20, changing the signature of {@link sashEnd} from `number[]` to `{[key: string]: number}`.
80
- *
81
- * TODO [Angular 20] BREAKING CHANGE: Replace with {@link sashEnd}.
82
- */
83
- readonly sashEnd2: import("@angular/core").OutputEmitterRef<{
84
- [key: string]: number;
85
- }>;
86
- private readonly _host;
87
- private readonly _contentChildren;
88
- protected sashing: boolean;
89
- protected maxHeight: number | undefined;
90
- protected maxWidth: number | undefined;
91
- constructor();
92
- protected onSashStart(): void;
93
- protected onSashEnd(): void;
94
- protected onSash(splitter: HTMLElement, sashIndex: number, moveEvent: SplitterMoveEvent): void;
95
- protected onSashReset(sashIndex: number): void;
96
- private toPixel;
97
- /**
98
- * Detects when rendered this component for the first time.
99
- */
100
- private detectFirstRendering;
101
- /**
102
- * Mirrors the provided signal. If animated sashes are being removed, delays emission until the animation completes,
103
- * effectively removing the element after the animation.
104
- *
105
- * Delayed removal is required for CDK Portals to not remove displayed content immediately.
106
- */
107
- private computeSashes;
108
- static ɵfac: i0.ɵɵFactoryDeclaration<SciSashboxComponent, never>;
109
- 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>;
110
- }
@@ -1,31 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- import * as i1 from "./sashbox.component";
3
- import * as i2 from "./sash.directive";
4
- /**
5
- * Provides a sashbox component that lays out its children in a row or column arrangement and places a splitter between each child.
6
- *
7
- * ### Usage:
8
- *
9
- * ```html
10
- * <sci-sashbox direction="row">
11
- * <ng-template sciSash size="1">
12
- * ...
13
- * </ng-template>
14
- *
15
- * <ng-template sciSash size="2">
16
- * ...
17
- * </ng-template>
18
- *
19
- * <ng-template sciSash size="1">
20
- * ...
21
- * </ng-template>
22
- * </sci-sashbox>
23
- * ```
24
- *
25
- * @deprecated since version 19.0.0; Import standalone component and directive instead; API will be removed in a future release.
26
- */
27
- export declare class SciSashboxModule {
28
- static ɵfac: i0.ɵɵFactoryDeclaration<SciSashboxModule, never>;
29
- static ɵmod: i0.ɵɵNgModuleDeclaration<SciSashboxModule, never, [typeof i1.SciSashboxComponent, typeof i2.SciSashDirective], [typeof i1.SciSashboxComponent, typeof i2.SciSashDirective]>;
30
- static ɵinj: i0.ɵɵInjectorDeclaration<SciSashboxModule>;
31
- }
@@ -1,2 +0,0 @@
1
- export { SciSplitterModule } from './splitter.module';
2
- export { SciSplitterComponent, type SplitterMoveEvent, type EventPosition } from './splitter.component';
@@ -1,99 +0,0 @@
1
- import { OnInit } from '@angular/core';
2
- import * as i0 from "@angular/core";
3
- /**
4
- * Represents a splitter, a visual element that allows the user to control the size of elements next to it.
5
- *
6
- * The splitter has a handle that the user can move depending on the orientation of the splitter.
7
- *
8
- * Note that this control neither does change the size of adjacent elements nor does it (re-)position itself, but emits the distance by
9
- * which the user has theoretically moved the splitter. You must subscribe to these events and change your layout accordingly.
10
- *
11
- * In the toolkit, {@link SciSashboxComponent} uses this splitter to divide a layout into several resizable sections.
12
- * Another use case would be a resizable sidebar panel.
13
- *
14
- * ### Usage
15
- *
16
- * ```html
17
- * <sci-splitter (move)="onSplitterMove($event.distance)"></sci-splitter>
18
- * ```
19
- *
20
- * ### Styling
21
- *
22
- * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
23
- * To style a specific `sci-splitter` component, the following CSS variables can be set directly on the component.
24
- *
25
- * - --sci-splitter-background-color: Sets the background color of the splitter.
26
- * - --sci-splitter-background-color-hover: Sets the background color of the splitter when hovering it.
27
- * - --sci-splitter-size: Sets the size of the splitter along the main axis.
28
- * - --sci-splitter-size-hover: Sets the size of the splitter along the main axis when hovering it.
29
- * - --sci-splitter-touch-target-size: Sets the touch target size to move the splitter (accessibility).
30
- * - --sci-splitter-cross-axis-size: Sets the splitter size along the cross axis.
31
- * - --sci-splitter-border-radius: Sets the border radius of the splitter.
32
- * - --sci-splitter-opacity-active: Sets the opacity of the splitter while the user moves the splitter.
33
- * - --sci-splitter-opacity-hover: Sets the opacity of the splitter when hovering it.
34
- *
35
- * Example:
36
- *
37
- * ```scss
38
- * sci-splitter {
39
- * --sci-splitter-background-color: black;
40
- * --sci-splitter-background-color-hover: black;
41
- * }
42
- * ```
43
- */
44
- export declare class SciSplitterComponent implements OnInit {
45
- /**
46
- * Controls whether to render a vertical or horizontal splitter. By default, if not specified, renders a vertical splitter.
47
- */
48
- readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
49
- /**
50
- * Notifies when start moving the splitter.
51
- */
52
- readonly start: import("@angular/core").OutputEmitterRef<void>;
53
- /**
54
- * Notifies when moving the splitter. The event is emitted outside the Angular zone.
55
- */
56
- readonly move: import("@angular/core").OutputEmitterRef<SplitterMoveEvent>;
57
- /**
58
- * Notifies when end moving the splitter.
59
- */
60
- readonly end: import("@angular/core").OutputEmitterRef<void>;
61
- /**
62
- * Notifies when resetting the spliter position.
63
- */
64
- readonly reset: import("@angular/core").OutputEmitterRef<void>;
65
- private readonly _zone;
66
- private readonly _cd;
67
- private readonly _document;
68
- private readonly _destroyRef;
69
- private readonly _touchTarget;
70
- protected moving: boolean;
71
- protected get isVertical(): boolean;
72
- protected get isHorizontal(): boolean;
73
- protected get splitterCursor(): string;
74
- ngOnInit(): void;
75
- private onReset;
76
- private onTouchStart;
77
- private onMouseDown;
78
- private installMoveListener;
79
- static ɵfac: i0.ɵɵFactoryDeclaration<SciSplitterComponent, never>;
80
- 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>;
81
- }
82
- export interface EventPosition {
83
- clientPos: number;
84
- pagePos: number;
85
- screenPos: number;
86
- }
87
- /**
88
- * Event that is emitted when moving the splitter.
89
- */
90
- export interface SplitterMoveEvent {
91
- /**
92
- * The distance in pixels by which the user has moved the splitter since the last emission.
93
- */
94
- distance: number;
95
- /**
96
- * The position where the mouse or touch event has occurred.
97
- */
98
- position: EventPosition;
99
- }
@@ -1,18 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- import * as i1 from "./splitter.component";
3
- /**
4
- * Provides a splitter, a visual element that allows the user to control the size of elements next to it.
5
- *
6
- * ### Usage:
7
- *
8
- * ```html
9
- * <sci-splitter (move)="onSplitterMove($event.distance)"></sci-splitter>
10
- * ```
11
- *
12
- * @deprecated since version 19.0.0; Import standalone component; API will be removed in a future release.
13
- */
14
- export declare class SciSplitterModule {
15
- static ɵfac: i0.ɵɵFactoryDeclaration<SciSplitterModule, never>;
16
- static ɵmod: i0.ɵɵNgModuleDeclaration<SciSplitterModule, never, [typeof i1.SciSplitterComponent], [typeof i1.SciSplitterComponent]>;
17
- static ɵinj: i0.ɵɵInjectorDeclaration<SciSplitterModule>;
18
- }
@@ -1,10 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- /**
3
- * Represents a throbber as an ellipsis consisting of three horizontally arranged points that appear one after the other.
4
- *
5
- * Throbber type: `ellipsis`
6
- */
7
- export declare class SciEllipsisThrobberComponent {
8
- static ɵfac: i0.ɵɵFactoryDeclaration<SciEllipsisThrobberComponent, never>;
9
- static ɵcmp: i0.ɵɵComponentDeclaration<SciEllipsisThrobberComponent, "sci-ellipsis-throbber", never, {}, {}, never, never, true, never>;
10
- }
@@ -1,2 +0,0 @@
1
- export { SciThrobberModule } from './throbber.module';
2
- export { SciThrobberComponent } from './throbber.component';
@@ -1,10 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- /**
3
- * Represents a throbber with a rippled, centric wave effect, similar to throwing a stone into water.
4
- *
5
- * Throbber type: `ripple`
6
- */
7
- export declare class SciRippleThrobberComponent {
8
- static ɵfac: i0.ɵɵFactoryDeclaration<SciRippleThrobberComponent, never>;
9
- static ɵcmp: i0.ɵɵComponentDeclaration<SciRippleThrobberComponent, "sci-ripple-throbber", never, {}, {}, never, never, true, never>;
10
- }
@@ -1,10 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- /**
3
- * Represents a circular throbber with points rotating around the center of a circle. Points have a delayed acceleration, which leads to an accordion effect.
4
- *
5
- * Throbber type: `roller`
6
- */
7
- export declare class SciRollerThrobberComponent {
8
- static ɵfac: i0.ɵɵFactoryDeclaration<SciRollerThrobberComponent, never>;
9
- static ɵcmp: i0.ɵɵComponentDeclaration<SciRollerThrobberComponent, "sci-roller-throbber", never, {}, {}, never, never, true, never>;
10
- }
@@ -1,11 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- /**
3
- * Represents a classic spinner throbber with strokes arranged radially. The strokes light up one after the other in clockwise direction
4
- * and then fade out again.
5
- *
6
- * Throbber type: `spinner`
7
- */
8
- export declare class SciSpinnerThrobberComponent {
9
- static ɵfac: i0.ɵɵFactoryDeclaration<SciSpinnerThrobberComponent, never>;
10
- static ɵcmp: i0.ɵɵComponentDeclaration<SciSpinnerThrobberComponent, "sci-spinner-throbber", never, {}, {}, never, never, true, never>;
11
- }
@@ -1,44 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- /**
3
- * Animated graphical control to indicate the execution of an action.
4
- *
5
- * Choose between different throbber presentations by setting the `type` property: `ellipsis`, `ripple`, `roller`, `spinner`.
6
- *
7
- * ### Styling:
8
- *
9
- * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
10
- * To style a specific `sci-throbber` component, the following CSS variables can be set directly on the component.
11
- *
12
- * - sci-throbber-color: Sets the color of the throbber (by default, uses `lightgray`).
13
- * - sci-throbber-size: Defines the size of the throbber. Most throbbers are quadratic having the same width and height.
14
- * For non-quadratic throbbers, the size usually specifies the height (by default, uses `50px`).
15
- * - sci-throbber-duration: Sets the duration of a single animation cycle (by default, uses `1.25s`).
16
- *
17
- * Example:
18
- *
19
- * ```css
20
- *
21
- * sci-throbber {
22
- * --sci-throbber-color: blue;
23
- * --sci-throbber-size: 50px;
24
- * --sci-throbber-duration: 1s
25
- * }
26
- * ```
27
- */
28
- export declare class SciThrobberComponent {
29
- /**
30
- * Chooses between different throbber presentation. If not set, uses `spinner` type.
31
- *
32
- * - **ellipsis**
33
- * Represents a throbber as an ellipsis consisting of three horizontally arranged points that appear one after the other.
34
- * - **ripple**
35
- * Represents a throbber with a rippled, centric wave effect, similar to throwing a stone into water.
36
- * - **roller**
37
- * Represents a circular throbber with points rotating around the center of a circle. Points have a delayed acceleration, which leads to an accordion effect.
38
- * - **spinner** (default)
39
- * 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.
40
- */
41
- readonly type: import("@angular/core").InputSignal<"ellipsis" | "ripple" | "roller" | "spinner">;
42
- static ɵfac: i0.ɵɵFactoryDeclaration<SciThrobberComponent, never>;
43
- static ɵcmp: i0.ɵɵComponentDeclaration<SciThrobberComponent, "sci-throbber", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
44
- }
@@ -1,12 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- import * as i1 from "./throbber.component";
3
- /**
4
- * Provides {@link SciThrobberComponent}, an animated graphical control to indicate the execution of an action.
5
- *
6
- * @deprecated since version 19.0.0; Import standalone component instead; API will be removed in a future release.
7
- */
8
- export declare class SciThrobberModule {
9
- static ɵfac: i0.ɵɵFactoryDeclaration<SciThrobberModule, never>;
10
- static ɵmod: i0.ɵɵNgModuleDeclaration<SciThrobberModule, never, [typeof i1.SciThrobberComponent], [typeof i1.SciThrobberComponent]>;
11
- static ɵinj: i0.ɵɵInjectorDeclaration<SciThrobberModule>;
12
- }
@@ -1,30 +0,0 @@
1
- import { Signal } from '@angular/core';
2
- import * as i0 from "@angular/core";
3
- /**
4
- * Provides the native scrollbar tracksize.
5
- */
6
- export declare class SciNativeScrollbarTrackSizeProvider {
7
- private readonly _document;
8
- private readonly _zone;
9
- /**
10
- * Provides the track size of the native scrollbar, or `null` if the native scrollbars sit on top of the content.
11
- */
12
- trackSize: Signal<NativeScrollbarTrackSize | null>;
13
- constructor();
14
- /**
15
- * Computes the native scrollbar track size.
16
- *
17
- * @returns native track size, or `null` if the native scrollbars sit on top of the content.
18
- */
19
- private computeTrackSize;
20
- private createNativeScrollbarTrackSizeSignal;
21
- static ɵfac: i0.ɵɵFactoryDeclaration<SciNativeScrollbarTrackSizeProvider, never>;
22
- static ɵprov: i0.ɵɵInjectableDeclaration<SciNativeScrollbarTrackSizeProvider>;
23
- }
24
- /**
25
- * Represents the native scrollbar track size.
26
- */
27
- export interface NativeScrollbarTrackSize {
28
- hScrollbarTrackHeight: number;
29
- vScrollbarTrackWidth: number;
30
- }
@@ -1,4 +0,0 @@
1
- export { SciViewportModule } from './viewport.module';
2
- export { SciViewportComponent, type ScrollbarStyle } from './viewport.component';
3
- export { SciScrollbarComponent } from './scrollbar/scrollbar.component';
4
- export { SciScrollableDirective } from './scrollable.directive';