npm - @scion/components - Versions diffs - 21.1.0 → 22.0.0 - Mend

@scion/components 21.1.0 → 22.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 (11) hide show

package/fesm2022/scion-components-dimension.mjs +11 -8
package/fesm2022/scion-components-dimension.mjs.map +1 -1
package/fesm2022/scion-components-sashbox.mjs +47 -33
package/fesm2022/scion-components-sashbox.mjs.map +1 -1
package/fesm2022/scion-components-splitter.mjs +15 -10
package/fesm2022/scion-components-splitter.mjs.map +1 -1
package/fesm2022/scion-components-throbber.mjs +23 -22
package/fesm2022/scion-components-throbber.mjs.map +1 -1
package/fesm2022/scion-components-viewport.mjs +32 -25
package/fesm2022/scion-components-viewport.mjs.map +1 -1
package/package.json +7 -6

package/fesm2022/scion-components-splitter.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, inject, NgZone, ChangeDetectorRef, DOCUMENT, DestroyRef, viewChild, signal, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, output, inject, NgZone, ChangeDetectorRef, DOCUMENT, DestroyRef, viewChild, signal, computed, effect, untracked, Component } from '@angular/core';
 import { Subscription, fromEvent, merge, audit, Observable } from 'rxjs';
 import { tapFirst } from '@scion/toolkit/operators';
 import { takeUntil, first } from 'rxjs/operators';
@@ -59,7 +59,8 @@ class SciSplitterComponent {
     /**
      * Controls whether to render a vertical or horizontal splitter. By default, if not specified, renders a vertical splitter.
      */
-    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     /**
      * Notifies when start moving the splitter.
      */
@@ -81,10 +82,14 @@ class SciSplitterComponent {
     _document = inject(DOCUMENT);
     _destroyRef = inject(DestroyRef);
     _touchTarget = viewChild.required('touch_target');
-    moving = signal(false, ...(ngDevMode ? [{ debugName: "moving" }] : []));
-    isHorizontal = computed(() => this.orientation() === 'horizontal', ...(ngDevMode ? [{ debugName: "isHorizontal" }] : []));
-    isVertical = computed(() => !this.isHorizontal(), ...(ngDevMode ? [{ debugName: "isVertical" }] : []));
-    splitterCursor = computed(() => this.isVertical() ? 'ew-resize' : 'ns-resize', ...(ngDevMode ? [{ debugName: "splitterCursor" }] : []));
+    moving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moving" }] : /* istanbul ignore next */ []));
+    isHorizontal = computed(() => this.orientation() === 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHorizontal" }] : /* istanbul ignore next */ []));
+    isVertical = computed(() => !this.isHorizontal(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
+    splitterCursor = computed(() => this.isVertical() ? 'ew-resize' : 'ns-resize', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "splitterCursor" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(onCleanup => {
             const touchTargetElement = this._touchTarget().nativeElement;
@@ -176,17 +181,17 @@ class SciSplitterComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: SciSplitterComponent, isStandalone: true, selector: "sci-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { start: "start", move: "move", end: "end", reset: "reset" }, host: { properties: { "class.moving": "moving()", "class.horizontal": "isHorizontal()", "class.vertical": "isVertical()", "style.cursor": "splitterCursor()" } }, viewQueries: [{ propertyName: "_touchTarget", first: true, predicate: ["touch_target"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #touch_target class=\"touch-target\">\n  <div class=\"handle\"></div>\n</div>\n", styles: [":host{display:grid;position:relative;background-color:var(--sci-splitter-background-color);border-radius:var(--sci-splitter-border-radius);place-items:center;align-self:center}:host>div.touch-target{position:absolute;display:grid;place-items:center;pointer-events:auto}:host>div.touch-target>div.handle{position:absolute;background-color:var(--sci-splitter-background-color);border-radius:var(--sci-splitter-border-radius);opacity:var(--sci-splitter-opacity-hover);transition-property:width,height;transition-timing-function:ease-in;transition-duration:75ms}:host.vertical{width:var(--sci-splitter-size);height:var(--sci-splitter-cross-axis-size)}:host.vertical>div.touch-target{width:var(--sci-splitter-touch-target-size);height:100%}:host.vertical>div.touch-target>div.handle{width:var(--sci-splitter-size);height:100%}:host.horizontal{height:var(--sci-splitter-size);width:var(--sci-splitter-cross-axis-size)}:host.horizontal>div.touch-target{width:100%;height:var(--sci-splitter-touch-target-size)}:host.horizontal>div.touch-target>div.handle{width:100%;height:var(--sci-splitter-size)}:host>div.touch-target:active>div.handle{opacity:var(--sci-splitter-opacity-active)}:host.vertical.moving>div.touch-target>div.handle,:host.vertical>div.touch-target:hover>div.handle{background-color:var(--sci-splitter-background-color-hover);width:var(--sci-splitter-size-hover)}:host.horizontal.moving>div.touch-target>div.handle,:host.horizontal>div.touch-target:hover>div.handle{background-color:var(--sci-splitter-background-color-hover);height:var(--sci-splitter-size-hover)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: SciSplitterComponent, isStandalone: true, selector: "sci-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { start: "start", move: "move", end: "end", reset: "reset" }, host: { properties: { "class.moving": "moving()", "class.horizontal": "isHorizontal()", "class.vertical": "isVertical()", "style.cursor": "splitterCursor()" } }, viewQueries: [{ propertyName: "_touchTarget", first: true, predicate: ["touch_target"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #touch_target class=\"touch-target\">\n  <div class=\"handle\"></div>\n</div>\n", styles: [":host{display:grid;position:relative;background-color:var(--sci-splitter-background-color);border-radius:var(--sci-splitter-border-radius);place-items:center;align-self:center}:host>div.touch-target{position:absolute;display:grid;place-items:center;pointer-events:auto}:host>div.touch-target>div.handle{position:absolute;background-color:var(--sci-splitter-background-color);border-radius:var(--sci-splitter-border-radius);opacity:var(--sci-splitter-opacity-hover);transition-property:width,height;transition-timing-function:ease-in;transition-duration:75ms}:host.vertical{width:var(--sci-splitter-size);height:var(--sci-splitter-cross-axis-size)}:host.vertical>div.touch-target{width:var(--sci-splitter-touch-target-size);height:100%}:host.vertical>div.touch-target>div.handle{width:var(--sci-splitter-size);height:100%}:host.horizontal{height:var(--sci-splitter-size);width:var(--sci-splitter-cross-axis-size)}:host.horizontal>div.touch-target{width:100%;height:var(--sci-splitter-touch-target-size)}:host.horizontal>div.touch-target>div.handle{width:100%;height:var(--sci-splitter-size)}:host>div.touch-target:active>div.handle{opacity:var(--sci-splitter-opacity-active)}:host.vertical.moving>div.touch-target>div.handle,:host.vertical>div.touch-target:hover>div.handle{background-color:var(--sci-splitter-background-color-hover);width:var(--sci-splitter-size-hover)}:host.horizontal.moving>div.touch-target>div.handle,:host.horizontal>div.touch-target:hover>div.handle{background-color:var(--sci-splitter-background-color-hover);height:var(--sci-splitter-size-hover)}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciSplitterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciSplitterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-splitter', host: {
                         '[class.moving]': 'moving()',
                         '[class.horizontal]': 'isHorizontal()',
                         '[class.vertical]': 'isVertical()',
                         '[style.cursor]': 'splitterCursor()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #touch_target class=\"touch-target\">\n  <div class=\"handle\"></div>\n</div>\n", styles: [":host{display:grid;position:relative;background-color:var(--sci-splitter-background-color);border-radius:var(--sci-splitter-border-radius);place-items:center;align-self:center}:host>div.touch-target{position:absolute;display:grid;place-items:center;pointer-events:auto}:host>div.touch-target>div.handle{position:absolute;background-color:var(--sci-splitter-background-color);border-radius:var(--sci-splitter-border-radius);opacity:var(--sci-splitter-opacity-hover);transition-property:width,height;transition-timing-function:ease-in;transition-duration:75ms}:host.vertical{width:var(--sci-splitter-size);height:var(--sci-splitter-cross-axis-size)}:host.vertical>div.touch-target{width:var(--sci-splitter-touch-target-size);height:100%}:host.vertical>div.touch-target>div.handle{width:var(--sci-splitter-size);height:100%}:host.horizontal{height:var(--sci-splitter-size);width:var(--sci-splitter-cross-axis-size)}:host.horizontal>div.touch-target{width:100%;height:var(--sci-splitter-touch-target-size)}:host.horizontal>div.touch-target>div.handle{width:100%;height:var(--sci-splitter-size)}:host>div.touch-target:active>div.handle{opacity:var(--sci-splitter-opacity-active)}:host.vertical.moving>div.touch-target>div.handle,:host.vertical>div.touch-target:hover>div.handle{background-color:var(--sci-splitter-background-color-hover);width:var(--sci-splitter-size-hover)}:host.horizontal.moving>div.touch-target>div.handle,:host.horizontal>div.touch-target:hover>div.handle{background-color:var(--sci-splitter-background-color-hover);height:var(--sci-splitter-size-hover)}\n"] }]
+                    }, template: "<div #touch_target class=\"touch-target\">\n  <div class=\"handle\"></div>\n</div>\n", styles: [":host{display:grid;position:relative;background-color:var(--sci-splitter-background-color);border-radius:var(--sci-splitter-border-radius);place-items:center;align-self:center}:host>div.touch-target{position:absolute;display:grid;place-items:center;pointer-events:auto}:host>div.touch-target>div.handle{position:absolute;background-color:var(--sci-splitter-background-color);border-radius:var(--sci-splitter-border-radius);opacity:var(--sci-splitter-opacity-hover);transition-property:width,height;transition-timing-function:ease-in;transition-duration:75ms}:host.vertical{width:var(--sci-splitter-size);height:var(--sci-splitter-cross-axis-size)}:host.vertical>div.touch-target{width:var(--sci-splitter-touch-target-size);height:100%}:host.vertical>div.touch-target>div.handle{width:var(--sci-splitter-size);height:100%}:host.horizontal{height:var(--sci-splitter-size);width:var(--sci-splitter-cross-axis-size)}:host.horizontal>div.touch-target{width:100%;height:var(--sci-splitter-touch-target-size)}:host.horizontal>div.touch-target>div.handle{width:100%;height:var(--sci-splitter-size)}:host>div.touch-target:active>div.handle{opacity:var(--sci-splitter-opacity-active)}:host.vertical.moving>div.touch-target>div.handle,:host.vertical>div.touch-target:hover>div.handle{background-color:var(--sci-splitter-background-color-hover);width:var(--sci-splitter-size-hover)}:host.horizontal.moving>div.touch-target>div.handle,:host.horizontal>div.touch-target:hover>div.handle{background-color:var(--sci-splitter-background-color-hover);height:var(--sci-splitter-size-hover)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], start: [{ type: i0.Output, args: ["start"] }], move: [{ type: i0.Output, args: ["move"] }], end: [{ type: i0.Output, args: ["end"] }], reset: [{ type: i0.Output, args: ["reset"] }], _touchTarget: [{ type: i0.ViewChild, args: ['touch_target', { isSignal: true }] }] } });
 /**
  * Emits when the next animation frame is executed.

package/fesm2022/scion-components-splitter.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scion-components-splitter.mjs","sources":["../../../../projects/scion/components/splitter/src/splitter.component.ts","../../../../projects/scion/components/splitter/src/splitter.component.html","../../../../projects/scion/components/splitter/src/public_api.ts","../../../../projects/scion/components/splitter/src/scion-components-splitter.ts"],"sourcesContent":["/\n Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, DestroyRef, DOCUMENT, effect, ElementRef, inject, input, NgZone, output, signal, untracked, viewChild} from '@angular/core';\nimport {audit, fromEvent, merge, Observable, Subscription} from 'rxjs';\nimport {tapFirst} from '@scion/toolkit/operators';\nimport {first, takeUntil} from 'rxjs/operators';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\n\n/\n Represents a splitter, a visual element that allows the user to control the size of elements next to it.\n \n The splitter has a handle that the user can move depending on the orientation of the splitter.\n \n Note that this control neither does change the size of adjacent elements nor does it (re-)position itself, but emits the distance by\n * which the user has theoretically moved the splitter. You must subscribe to these events and change your layout accordingly.\n \n In the toolkit, {@link SciSashboxComponent} uses this splitter to divide a layout into several resizable sections.\n * Another use case would be a resizable sidebar panel.\n \n ### Usage\n \n ```html\n * <sci-splitter (move)=\"onSplitterMove($event.distance)\"></sci-splitter>\n * ```\n \n ### Styling\n \n To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.\n * To style a specific `sci-splitter` component, the following CSS variables can be set directly on the component.\n \n - --sci-splitter-background-color: Sets the background color of the splitter.\n * - --sci-splitter-background-color-hover: Sets the background color of the splitter when hovering it.\n * - --sci-splitter-size: Sets the size of the splitter along the main axis.\n * - --sci-splitter-size-hover: Sets the size of the splitter along the main axis when hovering it.\n * - --sci-splitter-touch-target-size: Sets the touch target size to move the splitter (accessibility).\n * - --sci-splitter-cross-axis-size: Sets the splitter size along the cross axis.\n * - --sci-splitter-border-radius: Sets the border radius of the splitter.\n * - --sci-splitter-opacity-active: Sets the opacity of the splitter while the user moves the splitter.\n * - --sci-splitter-opacity-hover: Sets the opacity of the splitter when hovering it.\n \n Example:\n \n ```scss\n * sci-splitter {\n * --sci-splitter-background-color: black;\n * --sci-splitter-background-color-hover: black;\n * }\n * ```\n /\n@Component({\n selector: 'sci-splitter',\n templateUrl: './splitter.component.html',\n styleUrls: ['./splitter.component.scss'],\n host: {\n '[class.moving]': 'moving()',\n '[class.horizontal]': 'isHorizontal()',\n '[class.vertical]': 'isVertical()',\n '[style.cursor]': 'splitterCursor()',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SciSplitterComponent {\n\n /\n Controls whether to render a vertical or horizontal splitter. By default, if not specified, renders a vertical splitter.\n /\n public readonly orientation = input<'vertical' \| 'horizontal'>('vertical');\n\n /\n Notifies when start moving the splitter.\n /\n public readonly start = output<void>(); // eslint-disable-line @angular-eslint/no-output-native\n\n /\n Notifies when moving the splitter. The event is emitted outside the Angular zone.\n /\n public readonly move = output<SplitterMoveEvent>();\n\n /\n Notifies when end moving the splitter.\n /\n public readonly end = output<void>();\n\n /\n Notifies when resetting the splitter position.\n /\n public readonly reset = output<void>(); // eslint-disable-line @angular-eslint/no-output-native\n\n private readonly _zone = inject(NgZone);\n private readonly _cd = inject(ChangeDetectorRef);\n private readonly _document = inject(DOCUMENT);\n private readonly _destroyRef = inject(DestroyRef);\n private readonly _touchTarget = viewChild.required<ElementRef<HTMLElement>>('touch_target');\n\n protected readonly moving = signal(false);\n protected readonly isHorizontal = computed(() => this.orientation() === 'horizontal');\n protected readonly isVertical = computed(() => !this.isHorizontal());\n protected readonly splitterCursor = computed(() => this.isVertical() ? 'ew-resize' : 'ns-resize');\n\n constructor() {\n effect(onCleanup => {\n const touchTargetElement = this._touchTarget().nativeElement;\n const subscription = new Subscription();\n\n untracked(() => {\n subscription.add(fromEvent(touchTargetElement, 'dblclick').subscribe(() => this.onReset()));\n subscription.add(fromEvent<TouchEvent>(touchTargetElement, 'touchstart').subscribe((event: TouchEvent) => this.onTouchStart(event)));\n subscription.add(fromEvent<MouseEvent>(touchTargetElement, 'mousedown').subscribe((event: MouseEvent) => this.onMouseDown(event)));\n });\n\n onCleanup(() => subscription.unsubscribe());\n });\n }\n\n private onReset(): void {\n this.reset.emit();\n }\n\n private onTouchStart(startEvent: TouchEvent): void {\n this.installMoveListener({\n startEvent: startEvent,\n moveEventNames: ['touchmove'],\n endEventNames: ['touchend', 'touchcancel'],\n eventPositionFn: (touchEvent: TouchEvent): EventPosition => {\n const touch: Touch = touchEvent.touches[0]!;\n if (this.isVertical()) {\n return {screenPos: touch.screenX, clientPos: touch.clientX, pagePos: touch.pageX};\n }\n else {\n return {screenPos: touch.screenY, clientPos: touch.clientY, pagePos: touch.pageY};\n }\n },\n });\n }\n\n private onMouseDown(startEvent: MouseEvent): void {\n if (startEvent.button !== 0) {\n return;\n }\n\n this.installMoveListener({\n startEvent: startEvent,\n moveEventNames: ['mousemove', 'sci-mousemove'],\n endEventNames: ['mouseup', 'sci-mouseup'],\n eventPositionFn: (mouseEvent: MouseEvent): EventPosition => {\n if (this.isVertical()) {\n return {screenPos: mouseEvent.screenX, clientPos: mouseEvent.clientX, pagePos: mouseEvent.pageX};\n }\n else {\n return {screenPos: mouseEvent.screenY, clientPos: mouseEvent.clientY, pagePos: mouseEvent.pageY};\n }\n },\n });\n }\n\n private installMoveListener<EVENT extends Event>(config: {startEvent: EVENT; moveEventNames: string[]; endEventNames: string[]; eventPositionFn: (event: EVENT) => EventPosition}): void {\n const startEvent = config.startEvent;\n\n startEvent.preventDefault();\n\n this._zone.runOutsideAngular(() => {\n // install listeners on document level to allow fast dragging the splitter.\n const moveEvent$ = merge(...config.moveEventNames.map(eventName => fromEvent<EVENT>(this._document, eventName)));\n const endEvent$ = merge(...config.endEventNames.map(eventName => fromEvent<EVENT>(this._document, eventName)));\n let lastClientPos = config.eventPositionFn(startEvent).clientPos;\n\n // Apply cursor on document level to prevent flickering while moving the splitter\n const oldDocumentCursor = this._document.body.style.cursor;\n this._document.body.style.cursor = this.splitterCursor();\n\n // Listen for 'move' events until stop moving the splitter\n moveEvent$\n .pipe(\n tapFirst(() => this._zone.run(() => {\n this.moving.set(true);\n this.start.emit();\n this._cd.markForCheck();\n })),\n // Throttle emission to a single event per animation frame.\n audit(() => nextAnimationFrame$()),\n takeUntilDestroyed(this._destroyRef),\n takeUntil(endEvent$),\n )\n .subscribe((moveEvent: EVENT) => {\n NgZone.assertNotInAngularZone();\n\n const eventPos = config.eventPositionFn(moveEvent);\n const newClientPos = eventPos.clientPos;\n const distance = newClientPos - lastClientPos;\n lastClientPos = newClientPos;\n\n this.move.emit({distance, position: eventPos});\n });\n\n // Listen for 'end' events; call 'stop propagation' to not close overlays\n endEvent$\n .pipe(\n first(),\n takeUntilDestroyed(this._destroyRef),\n )\n .subscribe((endEvent: EVENT) => {\n endEvent.stopPropagation();\n this._document.body.style.cursor = oldDocumentCursor;\n this.moving() && this._zone.run(() => {\n this.end.emit();\n this.moving.set(false);\n this._cd.markForCheck();\n });\n });\n });\n }\n}\n\nexport interface EventPosition {\n clientPos: number;\n pagePos: number;\n screenPos: number;\n}\n\n/\n Event that is emitted when moving the splitter.\n /\nexport interface SplitterMoveEvent {\n /\n The distance in pixels by which the user has moved the splitter since the last emission.\n /\n distance: number;\n /\n The position where the mouse or touch event has occurred.\n /\n position: EventPosition;\n}\n\n/\n Emits when the next animation frame is executed.\n \n Unlike using `timer(0, animationFrameScheduler)`, this observable emits within the zone where it is subscribed.\n \n Note that the RxJS `animationFrameScheduler` may not necessarily execute in the current execution context, such as inside or outside Angular.\n * The scheduler always executes tasks in the zone where it was first used in the application.\n /\nfunction nextAnimationFrame$(): Observable<void> {\n return new Observable<void>(observer => {\n const animationFrame = requestAnimationFrame(() => observer.next());\n return () => cancelAnimationFrame(animationFrame);\n });\n}\n","<div #touch_target class=\"touch-target\">\n <div class=\"handle\"></div>\n</div>\n","/\n * Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\n/\n * Secondary entrypoint: '@scion/components/splitter'\n \n @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n /\nexport {SciSplitterComponent, type SplitterMoveEvent, type EventPosition} from './splitter.component';\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"scion-components-splitter.mjs","sources":["../../../../projects/scion/components/splitter/src/splitter.component.ts","../../../../projects/scion/components/splitter/src/splitter.component.html","../../../../projects/scion/components/splitter/src/public_api.ts","../../../../projects/scion/components/splitter/src/scion-components-splitter.ts"],"sourcesContent":["/\n Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {ChangeDetectorRef, Component, computed, DestroyRef, DOCUMENT, effect, ElementRef, inject, input, NgZone, output, signal, untracked, viewChild} from '@angular/core';\nimport {audit, fromEvent, merge, Observable, Subscription} from 'rxjs';\nimport {tapFirst} from '@scion/toolkit/operators';\nimport {first, takeUntil} from 'rxjs/operators';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\n\n/\n Represents a splitter, a visual element that allows the user to control the size of elements next to it.\n \n The splitter has a handle that the user can move depending on the orientation of the splitter.\n \n Note that this control neither does change the size of adjacent elements nor does it (re-)position itself, but emits the distance by\n * which the user has theoretically moved the splitter. You must subscribe to these events and change your layout accordingly.\n \n In the toolkit, {@link SciSashboxComponent} uses this splitter to divide a layout into several resizable sections.\n * Another use case would be a resizable sidebar panel.\n \n ### Usage\n \n ```html\n * <sci-splitter (move)=\"onSplitterMove($event.distance)\"></sci-splitter>\n * ```\n \n ### Styling\n \n To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.\n * To style a specific `sci-splitter` component, the following CSS variables can be set directly on the component.\n \n - --sci-splitter-background-color: Sets the background color of the splitter.\n * - --sci-splitter-background-color-hover: Sets the background color of the splitter when hovering it.\n * - --sci-splitter-size: Sets the size of the splitter along the main axis.\n * - --sci-splitter-size-hover: Sets the size of the splitter along the main axis when hovering it.\n * - --sci-splitter-touch-target-size: Sets the touch target size to move the splitter (accessibility).\n * - --sci-splitter-cross-axis-size: Sets the splitter size along the cross axis.\n * - --sci-splitter-border-radius: Sets the border radius of the splitter.\n * - --sci-splitter-opacity-active: Sets the opacity of the splitter while the user moves the splitter.\n * - --sci-splitter-opacity-hover: Sets the opacity of the splitter when hovering it.\n \n Example:\n \n ```scss\n * sci-splitter {\n * --sci-splitter-background-color: black;\n * --sci-splitter-background-color-hover: black;\n * }\n * ```\n /\n@Component({\n selector: 'sci-splitter',\n templateUrl: './splitter.component.html',\n styleUrls: ['./splitter.component.scss'],\n host: {\n '[class.moving]': 'moving()',\n '[class.horizontal]': 'isHorizontal()',\n '[class.vertical]': 'isVertical()',\n '[style.cursor]': 'splitterCursor()',\n },\n})\nexport class SciSplitterComponent {\n\n /\n Controls whether to render a vertical or horizontal splitter. By default, if not specified, renders a vertical splitter.\n /\n public readonly orientation = input<'vertical' \| 'horizontal'>('vertical');\n\n /\n Notifies when start moving the splitter.\n /\n public readonly start = output<void>(); // eslint-disable-line @angular-eslint/no-output-native\n\n /\n Notifies when moving the splitter. The event is emitted outside the Angular zone.\n /\n public readonly move = output<SplitterMoveEvent>();\n\n /\n Notifies when end moving the splitter.\n /\n public readonly end = output<void>();\n\n /\n Notifies when resetting the splitter position.\n /\n public readonly reset = output<void>(); // eslint-disable-line @angular-eslint/no-output-native\n\n private readonly _zone = inject(NgZone);\n private readonly _cd = inject(ChangeDetectorRef);\n private readonly _document = inject(DOCUMENT);\n private readonly _destroyRef = inject(DestroyRef);\n private readonly _touchTarget = viewChild.required<ElementRef<HTMLElement>>('touch_target');\n\n protected readonly moving = signal(false);\n protected readonly isHorizontal = computed(() => this.orientation() === 'horizontal');\n protected readonly isVertical = computed(() => !this.isHorizontal());\n protected readonly splitterCursor = computed(() => this.isVertical() ? 'ew-resize' : 'ns-resize');\n\n constructor() {\n effect(onCleanup => {\n const touchTargetElement = this._touchTarget().nativeElement;\n const subscription = new Subscription();\n\n untracked(() => {\n subscription.add(fromEvent(touchTargetElement, 'dblclick').subscribe(() => this.onReset()));\n subscription.add(fromEvent<TouchEvent>(touchTargetElement, 'touchstart').subscribe((event: TouchEvent) => this.onTouchStart(event)));\n subscription.add(fromEvent<MouseEvent>(touchTargetElement, 'mousedown').subscribe((event: MouseEvent) => this.onMouseDown(event)));\n });\n\n onCleanup(() => subscription.unsubscribe());\n });\n }\n\n private onReset(): void {\n this.reset.emit();\n }\n\n private onTouchStart(startEvent: TouchEvent): void {\n this.installMoveListener({\n startEvent: startEvent,\n moveEventNames: ['touchmove'],\n endEventNames: ['touchend', 'touchcancel'],\n eventPositionFn: (touchEvent: TouchEvent): EventPosition => {\n const touch: Touch = touchEvent.touches[0]!;\n if (this.isVertical()) {\n return {screenPos: touch.screenX, clientPos: touch.clientX, pagePos: touch.pageX};\n }\n else {\n return {screenPos: touch.screenY, clientPos: touch.clientY, pagePos: touch.pageY};\n }\n },\n });\n }\n\n private onMouseDown(startEvent: MouseEvent): void {\n if (startEvent.button !== 0) {\n return;\n }\n\n this.installMoveListener({\n startEvent: startEvent,\n moveEventNames: ['mousemove', 'sci-mousemove'],\n endEventNames: ['mouseup', 'sci-mouseup'],\n eventPositionFn: (mouseEvent: MouseEvent): EventPosition => {\n if (this.isVertical()) {\n return {screenPos: mouseEvent.screenX, clientPos: mouseEvent.clientX, pagePos: mouseEvent.pageX};\n }\n else {\n return {screenPos: mouseEvent.screenY, clientPos: mouseEvent.clientY, pagePos: mouseEvent.pageY};\n }\n },\n });\n }\n\n private installMoveListener<EVENT extends Event>(config: {startEvent: EVENT; moveEventNames: string[]; endEventNames: string[]; eventPositionFn: (event: EVENT) => EventPosition}): void {\n const startEvent = config.startEvent;\n\n startEvent.preventDefault();\n\n this._zone.runOutsideAngular(() => {\n // install listeners on document level to allow fast dragging the splitter.\n const moveEvent$ = merge(...config.moveEventNames.map(eventName => fromEvent<EVENT>(this._document, eventName)));\n const endEvent$ = merge(...config.endEventNames.map(eventName => fromEvent<EVENT>(this._document, eventName)));\n let lastClientPos = config.eventPositionFn(startEvent).clientPos;\n\n // Apply cursor on document level to prevent flickering while moving the splitter\n const oldDocumentCursor = this._document.body.style.cursor;\n this._document.body.style.cursor = this.splitterCursor();\n\n // Listen for 'move' events until stop moving the splitter\n moveEvent$\n .pipe(\n tapFirst(() => this._zone.run(() => {\n this.moving.set(true);\n this.start.emit();\n this._cd.markForCheck();\n })),\n // Throttle emission to a single event per animation frame.\n audit(() => nextAnimationFrame$()),\n takeUntilDestroyed(this._destroyRef),\n takeUntil(endEvent$),\n )\n .subscribe((moveEvent: EVENT) => {\n NgZone.assertNotInAngularZone();\n\n const eventPos = config.eventPositionFn(moveEvent);\n const newClientPos = eventPos.clientPos;\n const distance = newClientPos - lastClientPos;\n lastClientPos = newClientPos;\n\n this.move.emit({distance, position: eventPos});\n });\n\n // Listen for 'end' events; call 'stop propagation' to not close overlays\n endEvent$\n .pipe(\n first(),\n takeUntilDestroyed(this._destroyRef),\n )\n .subscribe((endEvent: EVENT) => {\n endEvent.stopPropagation();\n this._document.body.style.cursor = oldDocumentCursor;\n this.moving() && this._zone.run(() => {\n this.end.emit();\n this.moving.set(false);\n this._cd.markForCheck();\n });\n });\n });\n }\n}\n\nexport interface EventPosition {\n clientPos: number;\n pagePos: number;\n screenPos: number;\n}\n\n/\n Event that is emitted when moving the splitter.\n /\nexport interface SplitterMoveEvent {\n /\n The distance in pixels by which the user has moved the splitter since the last emission.\n /\n distance: number;\n /\n The position where the mouse or touch event has occurred.\n /\n position: EventPosition;\n}\n\n/\n Emits when the next animation frame is executed.\n \n Unlike using `timer(0, animationFrameScheduler)`, this observable emits within the zone where it is subscribed.\n \n Note that the RxJS `animationFrameScheduler` may not necessarily execute in the current execution context, such as inside or outside Angular.\n * The scheduler always executes tasks in the zone where it was first used in the application.\n /\nfunction nextAnimationFrame$(): Observable<void> {\n return new Observable<void>(observer => {\n const animationFrame = requestAnimationFrame(() => observer.next());\n return () => cancelAnimationFrame(animationFrame);\n });\n}\n","<div #touch_target class=\"touch-target\">\n <div class=\"handle\"></div>\n</div>\n","/\n * Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\n/\n * Secondary entrypoint: '@scion/components/splitter'\n \n @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n /\nexport {SciSplitterComponent, type SplitterMoveEvent, type EventPosition} from './splitter.component';\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/scion-components-throbber.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { Component, input } from '@angular/core';
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways
@@ -16,12 +16,12 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
  * Throbber type: `ellipsis`
  */
 class SciEllipsisThrobberComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciEllipsisThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: SciEllipsisThrobberComponent, isStandalone: true, selector: "sci-ellipsis-throbber", ngImport: i0, template: "<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n", styles: [":host{display:inline-flex;justify-content:space-between;font-size:var(--sci-throbber-size);width:1em;box-sizing:border-box}:host>div.point{flex:none;border-radius:50%;width:.3em;height:.3em;animation:sci-ellipsis-throbber var(--sci-throbber-duration) ease-in-out infinite;background-color:var(--sci-throbber-color)}:host>div.point:nth-child(1){animation-delay:calc(var(--sci-throbber-duration) / -6)}:host>div.point:nth-child(2){animation-delay:calc(var(--sci-throbber-duration) / -12)}@keyframes sci-ellipsis-throbber{0%{transform:scale(0)}40%{transform:scale(1)}80%,to{transform:scale(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciEllipsisThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SciEllipsisThrobberComponent, isStandalone: true, selector: "sci-ellipsis-throbber", ngImport: i0, template: "<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n", styles: [":host{display:inline-flex;justify-content:space-between;font-size:var(--sci-throbber-size);width:1em;box-sizing:border-box}:host>div.point{flex:none;border-radius:50%;width:.3em;height:.3em;animation:sci-ellipsis-throbber var(--sci-throbber-duration) ease-in-out infinite;background-color:var(--sci-throbber-color)}:host>div.point:nth-child(1){animation-delay:calc(var(--sci-throbber-duration) / -6)}:host>div.point:nth-child(2){animation-delay:calc(var(--sci-throbber-duration) / -12)}@keyframes sci-ellipsis-throbber{0%{transform:scale(0)}40%{transform:scale(1)}80%,to{transform:scale(0)}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciEllipsisThrobberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciEllipsisThrobberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sci-ellipsis-throbber', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n", styles: [":host{display:inline-flex;justify-content:space-between;font-size:var(--sci-throbber-size);width:1em;box-sizing:border-box}:host>div.point{flex:none;border-radius:50%;width:.3em;height:.3em;animation:sci-ellipsis-throbber var(--sci-throbber-duration) ease-in-out infinite;background-color:var(--sci-throbber-color)}:host>div.point:nth-child(1){animation-delay:calc(var(--sci-throbber-duration) / -6)}:host>div.point:nth-child(2){animation-delay:calc(var(--sci-throbber-duration) / -12)}@keyframes sci-ellipsis-throbber{0%{transform:scale(0)}40%{transform:scale(1)}80%,to{transform:scale(0)}}\n"] }]
+            args: [{ selector: 'sci-ellipsis-throbber', template: "<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n", styles: [":host{display:inline-flex;justify-content:space-between;font-size:var(--sci-throbber-size);width:1em;box-sizing:border-box}:host>div.point{flex:none;border-radius:50%;width:.3em;height:.3em;animation:sci-ellipsis-throbber var(--sci-throbber-duration) ease-in-out infinite;background-color:var(--sci-throbber-color)}:host>div.point:nth-child(1){animation-delay:calc(var(--sci-throbber-duration) / -6)}:host>div.point:nth-child(2){animation-delay:calc(var(--sci-throbber-duration) / -12)}@keyframes sci-ellipsis-throbber{0%{transform:scale(0)}40%{transform:scale(1)}80%,to{transform:scale(0)}}\n"] }]
         }] });
 /*
@@ -39,12 +39,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
  * Throbber type: `ripple`
  */
 class SciRippleThrobberComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciRippleThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: SciRippleThrobberComponent, isStandalone: true, selector: "sci-ripple-throbber", ngImport: i0, template: "<div class=\"circle\"></div>\n<div class=\"circle\"></div>\n", styles: [":host{display:inline-block;position:relative;font-size:var(--sci-throbber-size);width:1em;height:1em;box-sizing:border-box}:host>div.circle{position:absolute;width:1em;height:1em;border-radius:50%;border:0 solid var(--sci-throbber-color);animation:sci-ripple-throbber var(--sci-throbber-duration) cubic-bezier(0,.2,.8,1) infinite}:host>div.circle:nth-child(1){animation-delay:calc(var(--sci-throbber-duration) / -2)}@keyframes sci-ripple-throbber{0%{transform:scale(0);opacity:0;border-width:0}25%{opacity:1;border-width:.1em}50%{opacity:.75}to{transform:scale(1);opacity:0;border-width:.05em}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciRippleThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SciRippleThrobberComponent, isStandalone: true, selector: "sci-ripple-throbber", ngImport: i0, template: "<div class=\"circle\"></div>\n<div class=\"circle\"></div>\n", styles: [":host{display:inline-block;position:relative;font-size:var(--sci-throbber-size);width:1em;height:1em;box-sizing:border-box}:host>div.circle{position:absolute;width:1em;height:1em;border-radius:50%;border:0 solid var(--sci-throbber-color);animation:sci-ripple-throbber var(--sci-throbber-duration) cubic-bezier(0,.2,.8,1) infinite}:host>div.circle:nth-child(1){animation-delay:calc(var(--sci-throbber-duration) / -2)}@keyframes sci-ripple-throbber{0%{transform:scale(0);opacity:0;border-width:0}25%{opacity:1;border-width:.1em}50%{opacity:.75}to{transform:scale(1);opacity:0;border-width:.05em}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciRippleThrobberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciRippleThrobberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sci-ripple-throbber', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"circle\"></div>\n<div class=\"circle\"></div>\n", styles: [":host{display:inline-block;position:relative;font-size:var(--sci-throbber-size);width:1em;height:1em;box-sizing:border-box}:host>div.circle{position:absolute;width:1em;height:1em;border-radius:50%;border:0 solid var(--sci-throbber-color);animation:sci-ripple-throbber var(--sci-throbber-duration) cubic-bezier(0,.2,.8,1) infinite}:host>div.circle:nth-child(1){animation-delay:calc(var(--sci-throbber-duration) / -2)}@keyframes sci-ripple-throbber{0%{transform:scale(0);opacity:0;border-width:0}25%{opacity:1;border-width:.1em}50%{opacity:.75}to{transform:scale(1);opacity:0;border-width:.05em}}\n"] }]
+            args: [{ selector: 'sci-ripple-throbber', template: "<div class=\"circle\"></div>\n<div class=\"circle\"></div>\n", styles: [":host{display:inline-block;position:relative;font-size:var(--sci-throbber-size);width:1em;height:1em;box-sizing:border-box}:host>div.circle{position:absolute;width:1em;height:1em;border-radius:50%;border:0 solid var(--sci-throbber-color);animation:sci-ripple-throbber var(--sci-throbber-duration) cubic-bezier(0,.2,.8,1) infinite}:host>div.circle:nth-child(1){animation-delay:calc(var(--sci-throbber-duration) / -2)}@keyframes sci-ripple-throbber{0%{transform:scale(0);opacity:0;border-width:0}25%{opacity:1;border-width:.1em}50%{opacity:.75}to{transform:scale(1);opacity:0;border-width:.05em}}\n"] }]
         }] });
 /*
@@ -62,12 +62,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
  * Throbber type: `roller`
  */
 class SciRollerThrobberComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciRollerThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: SciRollerThrobberComponent, isStandalone: true, selector: "sci-roller-throbber", ngImport: i0, template: "<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>", styles: [":host{display:inline-flex;justify-content:center;position:relative;font-size:var(--sci-throbber-size);width:1em;height:1em;box-sizing:border-box}:host>div.point{flex:none;position:absolute;transform-origin:.05em .5em;width:.1em;height:.1em;border-radius:50%;background-color:var(--sci-throbber-color)}:host>div.point:nth-child(1){animation:sci-roller-throbber-1 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.02)}@keyframes sci-roller-throbber-1{0%{transform:rotate(-105deg)}to{transform:rotate(255deg)}}:host>div.point:nth-child(2){animation:sci-roller-throbber-2 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.04)}@keyframes sci-roller-throbber-2{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host>div.point:nth-child(3){animation:sci-roller-throbber-3 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.06)}@keyframes sci-roller-throbber-3{0%{transform:rotate(-75deg)}to{transform:rotate(285deg)}}:host>div.point:nth-child(4){animation:sci-roller-throbber-4 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.08)}@keyframes sci-roller-throbber-4{0%{transform:rotate(-60deg)}to{transform:rotate(300deg)}}:host>div.point:nth-child(5){animation:sci-roller-throbber-5 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.1)}@keyframes sci-roller-throbber-5{0%{transform:rotate(-45deg)}to{transform:rotate(315deg)}}:host>div.point:nth-child(6){animation:sci-roller-throbber-6 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.12)}@keyframes sci-roller-throbber-6{0%{transform:rotate(-30deg)}to{transform:rotate(330deg)}}:host>div.point:nth-child(7){animation:sci-roller-throbber-7 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.14)}@keyframes sci-roller-throbber-7{0%{transform:rotate(-15deg)}to{transform:rotate(345deg)}}:host>div.point:nth-child(8){animation:sci-roller-throbber-8 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.16)}@keyframes sci-roller-throbber-8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciRollerThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SciRollerThrobberComponent, isStandalone: true, selector: "sci-roller-throbber", ngImport: i0, template: "<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>", styles: [":host{display:inline-flex;justify-content:center;position:relative;font-size:var(--sci-throbber-size);width:1em;height:1em;box-sizing:border-box}:host>div.point{flex:none;position:absolute;transform-origin:.05em .5em;width:.1em;height:.1em;border-radius:50%;background-color:var(--sci-throbber-color)}:host>div.point:nth-child(1){animation:sci-roller-throbber-1 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.02)}@keyframes sci-roller-throbber-1{0%{transform:rotate(-105deg)}to{transform:rotate(255deg)}}:host>div.point:nth-child(2){animation:sci-roller-throbber-2 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.04)}@keyframes sci-roller-throbber-2{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host>div.point:nth-child(3){animation:sci-roller-throbber-3 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.06)}@keyframes sci-roller-throbber-3{0%{transform:rotate(-75deg)}to{transform:rotate(285deg)}}:host>div.point:nth-child(4){animation:sci-roller-throbber-4 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.08)}@keyframes sci-roller-throbber-4{0%{transform:rotate(-60deg)}to{transform:rotate(300deg)}}:host>div.point:nth-child(5){animation:sci-roller-throbber-5 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.1)}@keyframes sci-roller-throbber-5{0%{transform:rotate(-45deg)}to{transform:rotate(315deg)}}:host>div.point:nth-child(6){animation:sci-roller-throbber-6 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.12)}@keyframes sci-roller-throbber-6{0%{transform:rotate(-30deg)}to{transform:rotate(330deg)}}:host>div.point:nth-child(7){animation:sci-roller-throbber-7 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.14)}@keyframes sci-roller-throbber-7{0%{transform:rotate(-15deg)}to{transform:rotate(345deg)}}:host>div.point:nth-child(8){animation:sci-roller-throbber-8 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.16)}@keyframes sci-roller-throbber-8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciRollerThrobberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciRollerThrobberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sci-roller-throbber', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>", styles: [":host{display:inline-flex;justify-content:center;position:relative;font-size:var(--sci-throbber-size);width:1em;height:1em;box-sizing:border-box}:host>div.point{flex:none;position:absolute;transform-origin:.05em .5em;width:.1em;height:.1em;border-radius:50%;background-color:var(--sci-throbber-color)}:host>div.point:nth-child(1){animation:sci-roller-throbber-1 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.02)}@keyframes sci-roller-throbber-1{0%{transform:rotate(-105deg)}to{transform:rotate(255deg)}}:host>div.point:nth-child(2){animation:sci-roller-throbber-2 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.04)}@keyframes sci-roller-throbber-2{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host>div.point:nth-child(3){animation:sci-roller-throbber-3 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.06)}@keyframes sci-roller-throbber-3{0%{transform:rotate(-75deg)}to{transform:rotate(285deg)}}:host>div.point:nth-child(4){animation:sci-roller-throbber-4 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.08)}@keyframes sci-roller-throbber-4{0%{transform:rotate(-60deg)}to{transform:rotate(300deg)}}:host>div.point:nth-child(5){animation:sci-roller-throbber-5 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.1)}@keyframes sci-roller-throbber-5{0%{transform:rotate(-45deg)}to{transform:rotate(315deg)}}:host>div.point:nth-child(6){animation:sci-roller-throbber-6 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.12)}@keyframes sci-roller-throbber-6{0%{transform:rotate(-30deg)}to{transform:rotate(330deg)}}:host>div.point:nth-child(7){animation:sci-roller-throbber-7 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.14)}@keyframes sci-roller-throbber-7{0%{transform:rotate(-15deg)}to{transform:rotate(345deg)}}:host>div.point:nth-child(8){animation:sci-roller-throbber-8 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.16)}@keyframes sci-roller-throbber-8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'sci-roller-throbber', template: "<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>", styles: [":host{display:inline-flex;justify-content:center;position:relative;font-size:var(--sci-throbber-size);width:1em;height:1em;box-sizing:border-box}:host>div.point{flex:none;position:absolute;transform-origin:.05em .5em;width:.1em;height:.1em;border-radius:50%;background-color:var(--sci-throbber-color)}:host>div.point:nth-child(1){animation:sci-roller-throbber-1 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.02)}@keyframes sci-roller-throbber-1{0%{transform:rotate(-105deg)}to{transform:rotate(255deg)}}:host>div.point:nth-child(2){animation:sci-roller-throbber-2 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.04)}@keyframes sci-roller-throbber-2{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host>div.point:nth-child(3){animation:sci-roller-throbber-3 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.06)}@keyframes sci-roller-throbber-3{0%{transform:rotate(-75deg)}to{transform:rotate(285deg)}}:host>div.point:nth-child(4){animation:sci-roller-throbber-4 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.08)}@keyframes sci-roller-throbber-4{0%{transform:rotate(-60deg)}to{transform:rotate(300deg)}}:host>div.point:nth-child(5){animation:sci-roller-throbber-5 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.1)}@keyframes sci-roller-throbber-5{0%{transform:rotate(-45deg)}to{transform:rotate(315deg)}}:host>div.point:nth-child(6){animation:sci-roller-throbber-6 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.12)}@keyframes sci-roller-throbber-6{0%{transform:rotate(-30deg)}to{transform:rotate(330deg)}}:host>div.point:nth-child(7){animation:sci-roller-throbber-7 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.14)}@keyframes sci-roller-throbber-7{0%{transform:rotate(-15deg)}to{transform:rotate(345deg)}}:host>div.point:nth-child(8){animation:sci-roller-throbber-8 var(--sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--sci-throbber-duration) * -.16)}@keyframes sci-roller-throbber-8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }] });
 /*
@@ -86,12 +86,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
  * Throbber type: `spinner`
  */
 class SciSpinnerThrobberComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciSpinnerThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: SciSpinnerThrobberComponent, isStandalone: true, selector: "sci-spinner-throbber", ngImport: i0, template: "<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>", styles: [":host{display:inline-flex;justify-content:center;position:relative;font-size:var(--sci-throbber-size);width:1em;height:1em;box-sizing:border-box}:host>div.stroke{flex:none;position:absolute;transform-origin:.0375em .5em;width:.075em;height:.25em;opacity:0;border-radius:20%;background-color:var(--sci-throbber-color);animation:sci-spinner-throbber var(--sci-throbber-duration) linear infinite}:host>div.stroke:nth-child(1){transform:rotate(0);animation-delay:calc(var(--sci-throbber-duration) * .0833333333)}:host>div.stroke:nth-child(2){transform:rotate(30deg);animation-delay:calc(var(--sci-throbber-duration) * .1666666667)}:host>div.stroke:nth-child(3){transform:rotate(60deg);animation-delay:calc(var(--sci-throbber-duration) * .25)}:host>div.stroke:nth-child(4){transform:rotate(90deg);animation-delay:calc(var(--sci-throbber-duration) * .3333333333)}:host>div.stroke:nth-child(5){transform:rotate(120deg);animation-delay:calc(var(--sci-throbber-duration) * .4166666667)}:host>div.stroke:nth-child(6){transform:rotate(150deg);animation-delay:calc(var(--sci-throbber-duration) * .5)}:host>div.stroke:nth-child(7){transform:rotate(180deg);animation-delay:calc(var(--sci-throbber-duration) * .5833333333)}:host>div.stroke:nth-child(8){transform:rotate(210deg);animation-delay:calc(var(--sci-throbber-duration) * .6666666667)}:host>div.stroke:nth-child(9){transform:rotate(240deg);animation-delay:calc(var(--sci-throbber-duration) * .75)}:host>div.stroke:nth-child(10){transform:rotate(270deg);animation-delay:calc(var(--sci-throbber-duration) * .8333333333)}:host>div.stroke:nth-child(11){transform:rotate(300deg);animation-delay:calc(var(--sci-throbber-duration) * .9166666667)}:host>div.stroke:nth-child(12){transform:rotate(330deg);animation-delay:calc(var(--sci-throbber-duration) * 1)}@keyframes sci-spinner-throbber{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciSpinnerThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SciSpinnerThrobberComponent, isStandalone: true, selector: "sci-spinner-throbber", ngImport: i0, template: "<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>", styles: [":host{display:inline-flex;justify-content:center;position:relative;font-size:var(--sci-throbber-size);width:1em;height:1em;box-sizing:border-box}:host>div.stroke{flex:none;position:absolute;transform-origin:.0375em .5em;width:.075em;height:.25em;opacity:0;border-radius:20%;background-color:var(--sci-throbber-color);animation:sci-spinner-throbber var(--sci-throbber-duration) linear infinite}:host>div.stroke:nth-child(1){transform:rotate(0);animation-delay:calc(var(--sci-throbber-duration) * .0833333333)}:host>div.stroke:nth-child(2){transform:rotate(30deg);animation-delay:calc(var(--sci-throbber-duration) * .1666666667)}:host>div.stroke:nth-child(3){transform:rotate(60deg);animation-delay:calc(var(--sci-throbber-duration) * .25)}:host>div.stroke:nth-child(4){transform:rotate(90deg);animation-delay:calc(var(--sci-throbber-duration) * .3333333333)}:host>div.stroke:nth-child(5){transform:rotate(120deg);animation-delay:calc(var(--sci-throbber-duration) * .4166666667)}:host>div.stroke:nth-child(6){transform:rotate(150deg);animation-delay:calc(var(--sci-throbber-duration) * .5)}:host>div.stroke:nth-child(7){transform:rotate(180deg);animation-delay:calc(var(--sci-throbber-duration) * .5833333333)}:host>div.stroke:nth-child(8){transform:rotate(210deg);animation-delay:calc(var(--sci-throbber-duration) * .6666666667)}:host>div.stroke:nth-child(9){transform:rotate(240deg);animation-delay:calc(var(--sci-throbber-duration) * .75)}:host>div.stroke:nth-child(10){transform:rotate(270deg);animation-delay:calc(var(--sci-throbber-duration) * .8333333333)}:host>div.stroke:nth-child(11){transform:rotate(300deg);animation-delay:calc(var(--sci-throbber-duration) * .9166666667)}:host>div.stroke:nth-child(12){transform:rotate(330deg);animation-delay:calc(var(--sci-throbber-duration) * 1)}@keyframes sci-spinner-throbber{0%{opacity:1}to{opacity:0}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciSpinnerThrobberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciSpinnerThrobberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sci-spinner-throbber', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>", styles: [":host{display:inline-flex;justify-content:center;position:relative;font-size:var(--sci-throbber-size);width:1em;height:1em;box-sizing:border-box}:host>div.stroke{flex:none;position:absolute;transform-origin:.0375em .5em;width:.075em;height:.25em;opacity:0;border-radius:20%;background-color:var(--sci-throbber-color);animation:sci-spinner-throbber var(--sci-throbber-duration) linear infinite}:host>div.stroke:nth-child(1){transform:rotate(0);animation-delay:calc(var(--sci-throbber-duration) * .0833333333)}:host>div.stroke:nth-child(2){transform:rotate(30deg);animation-delay:calc(var(--sci-throbber-duration) * .1666666667)}:host>div.stroke:nth-child(3){transform:rotate(60deg);animation-delay:calc(var(--sci-throbber-duration) * .25)}:host>div.stroke:nth-child(4){transform:rotate(90deg);animation-delay:calc(var(--sci-throbber-duration) * .3333333333)}:host>div.stroke:nth-child(5){transform:rotate(120deg);animation-delay:calc(var(--sci-throbber-duration) * .4166666667)}:host>div.stroke:nth-child(6){transform:rotate(150deg);animation-delay:calc(var(--sci-throbber-duration) * .5)}:host>div.stroke:nth-child(7){transform:rotate(180deg);animation-delay:calc(var(--sci-throbber-duration) * .5833333333)}:host>div.stroke:nth-child(8){transform:rotate(210deg);animation-delay:calc(var(--sci-throbber-duration) * .6666666667)}:host>div.stroke:nth-child(9){transform:rotate(240deg);animation-delay:calc(var(--sci-throbber-duration) * .75)}:host>div.stroke:nth-child(10){transform:rotate(270deg);animation-delay:calc(var(--sci-throbber-duration) * .8333333333)}:host>div.stroke:nth-child(11){transform:rotate(300deg);animation-delay:calc(var(--sci-throbber-duration) * .9166666667)}:host>div.stroke:nth-child(12){transform:rotate(330deg);animation-delay:calc(var(--sci-throbber-duration) * 1)}@keyframes sci-spinner-throbber{0%{opacity:1}to{opacity:0}}\n"] }]
+            args: [{ selector: 'sci-spinner-throbber', template: "<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>", styles: [":host{display:inline-flex;justify-content:center;position:relative;font-size:var(--sci-throbber-size);width:1em;height:1em;box-sizing:border-box}:host>div.stroke{flex:none;position:absolute;transform-origin:.0375em .5em;width:.075em;height:.25em;opacity:0;border-radius:20%;background-color:var(--sci-throbber-color);animation:sci-spinner-throbber var(--sci-throbber-duration) linear infinite}:host>div.stroke:nth-child(1){transform:rotate(0);animation-delay:calc(var(--sci-throbber-duration) * .0833333333)}:host>div.stroke:nth-child(2){transform:rotate(30deg);animation-delay:calc(var(--sci-throbber-duration) * .1666666667)}:host>div.stroke:nth-child(3){transform:rotate(60deg);animation-delay:calc(var(--sci-throbber-duration) * .25)}:host>div.stroke:nth-child(4){transform:rotate(90deg);animation-delay:calc(var(--sci-throbber-duration) * .3333333333)}:host>div.stroke:nth-child(5){transform:rotate(120deg);animation-delay:calc(var(--sci-throbber-duration) * .4166666667)}:host>div.stroke:nth-child(6){transform:rotate(150deg);animation-delay:calc(var(--sci-throbber-duration) * .5)}:host>div.stroke:nth-child(7){transform:rotate(180deg);animation-delay:calc(var(--sci-throbber-duration) * .5833333333)}:host>div.stroke:nth-child(8){transform:rotate(210deg);animation-delay:calc(var(--sci-throbber-duration) * .6666666667)}:host>div.stroke:nth-child(9){transform:rotate(240deg);animation-delay:calc(var(--sci-throbber-duration) * .75)}:host>div.stroke:nth-child(10){transform:rotate(270deg);animation-delay:calc(var(--sci-throbber-duration) * .8333333333)}:host>div.stroke:nth-child(11){transform:rotate(300deg);animation-delay:calc(var(--sci-throbber-duration) * .9166666667)}:host>div.stroke:nth-child(12){transform:rotate(330deg);animation-delay:calc(var(--sci-throbber-duration) * 1)}@keyframes sci-spinner-throbber{0%{opacity:1}to{opacity:0}}\n"] }]
         }] });
 /*
@@ -142,13 +142,14 @@ 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 = input('spinner', ...(ngDevMode ? [{ debugName: "type" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: SciThrobberComponent, isStandalone: true, selector: "sci-throbber", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (type()) {\n  @case ('ellipsis') {\n    <sci-ellipsis-throbber/>\n  }\n  @case ('ripple') {\n    <sci-ripple-throbber/>\n  }\n  @case ('roller') {\n    <sci-roller-throbber/>\n  }\n  @case ('spinner') {\n    <sci-spinner-throbber/>\n  }\n  @default {\n    <sci-spinner-throbber/>\n  }\n}\n", styles: [":host{display:inline-grid}\n"], dependencies: [{ kind: "component", type: SciEllipsisThrobberComponent, selector: "sci-ellipsis-throbber" }, { kind: "component", type: SciRippleThrobberComponent, selector: "sci-ripple-throbber" }, { kind: "component", type: SciRollerThrobberComponent, selector: "sci-roller-throbber" }, { kind: "component", type: SciSpinnerThrobberComponent, selector: "sci-spinner-throbber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    type = input('spinner', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SciThrobberComponent, isStandalone: true, selector: "sci-throbber", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (type()) {\n  @case ('ellipsis') {\n    <sci-ellipsis-throbber/>\n  }\n  @case ('ripple') {\n    <sci-ripple-throbber/>\n  }\n  @case ('roller') {\n    <sci-roller-throbber/>\n  }\n  @case ('spinner') {\n    <sci-spinner-throbber/>\n  }\n  @default {\n    <sci-spinner-throbber/>\n  }\n}\n", styles: [":host{display:inline-grid}\n"], dependencies: [{ kind: "component", type: SciEllipsisThrobberComponent, selector: "sci-ellipsis-throbber" }, { kind: "component", type: SciRippleThrobberComponent, selector: "sci-ripple-throbber" }, { kind: "component", type: SciRollerThrobberComponent, selector: "sci-roller-throbber" }, { kind: "component", type: SciSpinnerThrobberComponent, selector: "sci-spinner-throbber" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciThrobberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciThrobberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sci-throbber', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'sci-throbber', imports: [
                         SciEllipsisThrobberComponent,
                         SciRippleThrobberComponent,
                         SciRollerThrobberComponent,

package/fesm2022/scion-components-throbber.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scion-components-throbber.mjs","sources":["../../../../projects/scion/components/throbber/src/ellipsis-throbber/ellipsis-throbber.component.ts","../../../../projects/scion/components/throbber/src/ellipsis-throbber/ellipsis-throbber.component.html","../../../../projects/scion/components/throbber/src/ripple-throbber/ripple-throbber.component.ts","../../../../projects/scion/components/throbber/src/ripple-throbber/ripple-throbber.component.html","../../../../projects/scion/components/throbber/src/roller-throbber/roller-throbber.component.ts","../../../../projects/scion/components/throbber/src/roller-throbber/roller-throbber.component.html","../../../../projects/scion/components/throbber/src/spinner-throbber/spinner-throbber.component.ts","../../../../projects/scion/components/throbber/src/spinner-throbber/spinner-throbber.component.html","../../../../projects/scion/components/throbber/src/throbber.component.ts","../../../../projects/scion/components/throbber/src/throbber.component.html","../../../../projects/scion/components/throbber/src/public_api.ts","../../../../projects/scion/components/throbber/src/scion-components-throbber.ts"],"sourcesContent":["/\n Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {ChangeDetectionStrategy, Component} from '@angular/core';\n\n/\n Represents a throbber as an ellipsis consisting of three horizontally arranged points that appear one after the other.\n \n Throbber type: `ellipsis`\n /\n@Component({\n selector: 'sci-ellipsis-throbber',\n templateUrl: './ellipsis-throbber.component.html',\n styleUrls: ['./ellipsis-throbber.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SciEllipsisThrobberComponent {\n}\n","<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n","/\n * Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {ChangeDetectionStrategy, Component} from '@angular/core';\n\n/\n Represents a throbber with a rippled, centric wave effect, similar to throwing a stone into water.\n \n Throbber type: `ripple`\n /\n@Component({\n selector: 'sci-ripple-throbber',\n templateUrl: './ripple-throbber.component.html',\n styleUrls: ['./ripple-throbber.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SciRippleThrobberComponent {\n}\n","<div class=\"circle\"></div>\n<div class=\"circle\"></div>\n","/\n * Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {ChangeDetectionStrategy, Component} from '@angular/core';\n\n/\n Represents a circular throbber with points rotating around the center of a circle. Points have a delayed acceleration, which leads to an accordion effect.\n \n Throbber type: `roller`\n /\n@Component({\n selector: 'sci-roller-throbber',\n templateUrl: './roller-throbber.component.html',\n styleUrls: ['./roller-throbber.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SciRollerThrobberComponent {\n}\n","<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>","/\n * Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {ChangeDetectionStrategy, Component} from '@angular/core';\n\n/\n Represents a classic spinner throbber with strokes arranged radially. The strokes light up one after the other in clockwise direction\n * and then fade out again.\n \n Throbber type: `spinner`\n /\n@Component({\n selector: 'sci-spinner-throbber',\n templateUrl: './spinner-throbber.component.html',\n styleUrls: ['./spinner-throbber.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SciSpinnerThrobberComponent {\n}\n","<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>","/\n * Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {ChangeDetectionStrategy, Component, input} from '@angular/core';\nimport {SciEllipsisThrobberComponent} from './ellipsis-throbber/ellipsis-throbber.component';\nimport {SciRippleThrobberComponent} from './ripple-throbber/ripple-throbber.component';\nimport {SciRollerThrobberComponent} from './roller-throbber/roller-throbber.component';\nimport {SciSpinnerThrobberComponent} from './spinner-throbber/spinner-throbber.component';\n\n/\n Animated graphical control to indicate the execution of an action.\n \n Choose between different throbber presentations by setting the `type` property: `ellipsis`, `ripple`, `roller`, `spinner`.\n \n ### Styling:\n \n To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.\n * To style a specific `sci-throbber` component, the following CSS variables can be set directly on the component.\n \n - sci-throbber-color: Sets the color of the throbber (by default, uses `lightgray`).\n * - sci-throbber-size: Defines the size of the throbber. Most throbbers are quadratic having the same width and height.\n * For non-quadratic throbbers, the size usually specifies the height (by default, uses `50px`).\n * - sci-throbber-duration: Sets the duration of a single animation cycle (by default, uses `1.25s`).\n \n Example:\n \n ```css\n \n sci-throbber {\n * --sci-throbber-color: blue;\n * --sci-throbber-size: 50px;\n * --sci-throbber-duration: 1s\n * }\n * ```\n /\n@Component({\n selector: 'sci-throbber',\n templateUrl: './throbber.component.html',\n styleUrls: ['./throbber.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n SciEllipsisThrobberComponent,\n SciRippleThrobberComponent,\n SciRollerThrobberComponent,\n SciSpinnerThrobberComponent,\n ],\n})\nexport class SciThrobberComponent {\n\n /\n Chooses between different throbber presentation. If not set, uses `spinner` type.\n \n - ellipsis\n * Represents a throbber as an ellipsis consisting of three horizontally arranged points that appear one after the other.\n * - ripple\n * Represents a throbber with a rippled, centric wave effect, similar to throwing a stone into water.\n * - roller\n * Represents a circular throbber with points rotating around the center of a circle. Points have a delayed acceleration, which leads to an accordion effect.\n * - spinner (default)\n * 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.\n /\n public readonly type = input<'ellipsis' \| 'ripple' \| 'roller' \| 'spinner'>('spinner');\n}\n","@switch (type()) {\n @case ('ellipsis') {\n <sci-ellipsis-throbber/>\n }\n @case ('ripple') {\n <sci-ripple-throbber/>\n }\n @case ('roller') {\n <sci-roller-throbber/>\n }\n @case ('spinner') {\n <sci-spinner-throbber/>\n }\n @default {\n <sci-spinner-throbber/>\n }\n}\n","/\n * Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\n/\n * Secondary entrypoint: '@scion/components/throbber'\n \n @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n /\nexport {SciThrobberComponent} from './throbber.component';\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;AAAA;;;;;;;;AAQG;AAIH;;;;AAIG;MAOU,4BAA4B,CAAA;uGAA5B,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA5B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,iFCvBzC,yFAGA,EAAA,MAAA,EAAA,CAAA,mlBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDoBa,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBANxC,SAAS;+BACE,uBAAuB,EAAA,eAAA,EAGhB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,yFAAA,EAAA,MAAA,EAAA,CAAA,mlBAAA,CAAA,EAAA;;;AErBjD;;;;;;;;AAQG;AAIH;;;;AAIG;MAOU,0BAA0B,CAAA;uGAA1B,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA1B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,+ECvBvC,8DAEA,EAAA,MAAA,EAAA,CAAA,slBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDqBa,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBANtC,SAAS;+BACE,qBAAqB,EAAA,eAAA,EAGd,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,8DAAA,EAAA,MAAA,EAAA,CAAA,slBAAA,CAAA,EAAA;;;AErBjD;;;;;;;;AAQG;AAIH;;;;AAIG;MAOU,0BAA0B,CAAA;uGAA1B,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA1B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,+ECvBvC,wOAOyB,EAAA,MAAA,EAAA,CAAA,o6EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDgBZ,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBANtC,SAAS;+BACE,qBAAqB,EAAA,eAAA,EAGd,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,wOAAA,EAAA,MAAA,EAAA,CAAA,o6EAAA,CAAA,EAAA;;;AErBjD;;;;;;;;AAQG;AAIH;;;;;AAKG;MAOU,2BAA2B,CAAA;uGAA3B,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA3B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,2BAA2B,gFCxBxC,wWAW0B,EAAA,MAAA,EAAA,CAAA,g0DAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDab,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBANvC,SAAS;+BACE,sBAAsB,EAAA,eAAA,EAGf,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,wWAAA,EAAA,MAAA,EAAA,CAAA,g0DAAA,CAAA,EAAA;;;AEtBjD;;;;;;;;AAQG;AAQH;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;MAaU,oBAAoB,CAAA;AAE/B;;;;;;;;;;;AAWG;AACa,IAAA,IAAI,GAAG,KAAK,CAA+C,SAAS,gDAAC;uGAd1E,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtDjC,2SAiBA,EAAA,MAAA,EAAA,CAAA,8BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED+BI,4BAA4B,kEAC5B,0BAA0B,EAAA,QAAA,EAAA,qBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC1B,0BAA0B,EAAA,QAAA,EAAA,qBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC1B,2BAA2B,EAAA,QAAA,EAAA,sBAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAGlB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAZhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,eAAA,EAGP,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACP,4BAA4B;wBAC5B,0BAA0B;wBAC1B,0BAA0B;wBAC1B,2BAA2B;AAC5B,qBAAA,EAAA,QAAA,EAAA,2SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,CAAA,EAAA;;;AEpDH;;;;;;;;AAQG;AAEH;;;;AAIG;;ACdH;;AAEG;;;;"}
1	+ {"version":3,"file":"scion-components-throbber.mjs","sources":["../../../../projects/scion/components/throbber/src/ellipsis-throbber/ellipsis-throbber.component.ts","../../../../projects/scion/components/throbber/src/ellipsis-throbber/ellipsis-throbber.component.html","../../../../projects/scion/components/throbber/src/ripple-throbber/ripple-throbber.component.ts","../../../../projects/scion/components/throbber/src/ripple-throbber/ripple-throbber.component.html","../../../../projects/scion/components/throbber/src/roller-throbber/roller-throbber.component.ts","../../../../projects/scion/components/throbber/src/roller-throbber/roller-throbber.component.html","../../../../projects/scion/components/throbber/src/spinner-throbber/spinner-throbber.component.ts","../../../../projects/scion/components/throbber/src/spinner-throbber/spinner-throbber.component.html","../../../../projects/scion/components/throbber/src/throbber.component.ts","../../../../projects/scion/components/throbber/src/throbber.component.html","../../../../projects/scion/components/throbber/src/public_api.ts","../../../../projects/scion/components/throbber/src/scion-components-throbber.ts"],"sourcesContent":["/\n Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {Component} from '@angular/core';\n\n/\n Represents a throbber as an ellipsis consisting of three horizontally arranged points that appear one after the other.\n \n Throbber type: `ellipsis`\n /\n@Component({\n selector: 'sci-ellipsis-throbber',\n templateUrl: './ellipsis-throbber.component.html',\n styleUrls: ['./ellipsis-throbber.component.scss'],\n})\nexport class SciEllipsisThrobberComponent {\n}\n","<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n","/\n * Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {Component} from '@angular/core';\n\n/\n Represents a throbber with a rippled, centric wave effect, similar to throwing a stone into water.\n \n Throbber type: `ripple`\n /\n@Component({\n selector: 'sci-ripple-throbber',\n templateUrl: './ripple-throbber.component.html',\n styleUrls: ['./ripple-throbber.component.scss'],\n})\nexport class SciRippleThrobberComponent {\n}\n","<div class=\"circle\"></div>\n<div class=\"circle\"></div>\n","/\n * Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {Component} from '@angular/core';\n\n/\n Represents a circular throbber with points rotating around the center of a circle. Points have a delayed acceleration, which leads to an accordion effect.\n \n Throbber type: `roller`\n /\n@Component({\n selector: 'sci-roller-throbber',\n templateUrl: './roller-throbber.component.html',\n styleUrls: ['./roller-throbber.component.scss'],\n})\nexport class SciRollerThrobberComponent {\n}\n","<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>","/\n * Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {Component} from '@angular/core';\n\n/\n Represents a classic spinner throbber with strokes arranged radially. The strokes light up one after the other in clockwise direction\n * and then fade out again.\n \n Throbber type: `spinner`\n /\n@Component({\n selector: 'sci-spinner-throbber',\n templateUrl: './spinner-throbber.component.html',\n styleUrls: ['./spinner-throbber.component.scss'],\n})\nexport class SciSpinnerThrobberComponent {\n}\n","<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>\n<div class=\"stroke\"></div>","/\n * Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {Component, input} from '@angular/core';\nimport {SciEllipsisThrobberComponent} from './ellipsis-throbber/ellipsis-throbber.component';\nimport {SciRippleThrobberComponent} from './ripple-throbber/ripple-throbber.component';\nimport {SciRollerThrobberComponent} from './roller-throbber/roller-throbber.component';\nimport {SciSpinnerThrobberComponent} from './spinner-throbber/spinner-throbber.component';\n\n/\n Animated graphical control to indicate the execution of an action.\n \n Choose between different throbber presentations by setting the `type` property: `ellipsis`, `ripple`, `roller`, `spinner`.\n \n ### Styling:\n \n To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.\n * To style a specific `sci-throbber` component, the following CSS variables can be set directly on the component.\n \n - sci-throbber-color: Sets the color of the throbber (by default, uses `lightgray`).\n * - sci-throbber-size: Defines the size of the throbber. Most throbbers are quadratic having the same width and height.\n * For non-quadratic throbbers, the size usually specifies the height (by default, uses `50px`).\n * - sci-throbber-duration: Sets the duration of a single animation cycle (by default, uses `1.25s`).\n \n Example:\n \n ```css\n \n sci-throbber {\n * --sci-throbber-color: blue;\n * --sci-throbber-size: 50px;\n * --sci-throbber-duration: 1s\n * }\n * ```\n /\n@Component({\n selector: 'sci-throbber',\n templateUrl: './throbber.component.html',\n styleUrls: ['./throbber.component.scss'],\n imports: [\n SciEllipsisThrobberComponent,\n SciRippleThrobberComponent,\n SciRollerThrobberComponent,\n SciSpinnerThrobberComponent,\n ],\n})\nexport class SciThrobberComponent {\n\n /\n Chooses between different throbber presentation. If not set, uses `spinner` type.\n \n - ellipsis\n * Represents a throbber as an ellipsis consisting of three horizontally arranged points that appear one after the other.\n * - ripple\n * Represents a throbber with a rippled, centric wave effect, similar to throwing a stone into water.\n * - roller\n * Represents a circular throbber with points rotating around the center of a circle. Points have a delayed acceleration, which leads to an accordion effect.\n * - spinner (default)\n * 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.\n /\n public readonly type = input<'ellipsis' \| 'ripple' \| 'roller' \| 'spinner'>('spinner');\n}\n","@switch (type()) {\n @case ('ellipsis') {\n <sci-ellipsis-throbber/>\n }\n @case ('ripple') {\n <sci-ripple-throbber/>\n }\n @case ('roller') {\n <sci-roller-throbber/>\n }\n @case ('spinner') {\n <sci-spinner-throbber/>\n }\n @default {\n <sci-spinner-throbber/>\n }\n}\n","/\n * Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\n/\n * Secondary entrypoint: '@scion/components/throbber'\n \n @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n /\nexport {SciThrobberComponent} from './throbber.component';\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/scion-components-viewport.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, NgZone, Injectable, input, ElementRef, Renderer2, effect, untracked, Directive, DestroyRef, viewChild, signal, computed, ChangeDetectionStrategy, Component, output, ViewEncapsulation } from '@angular/core';
+import { inject, DOCUMENT, NgZone, Injectable, input, ElementRef, Renderer2, effect, untracked, Directive, DestroyRef, viewChild, signal, computed, Component, output, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
 import { fromEvent, merge, mergeWith, timer, of } from 'rxjs';
 import { debounceTime, startWith, map, distinctUntilChanged, first, withLatestFrom, takeWhile, takeUntil, switchMap } from 'rxjs/operators';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -77,10 +77,10 @@ class SciNativeScrollbarTrackSizeProvider {
         map(() => this.computeTrackSize()), distinctUntilChanged((t1, t2) => t1?.hScrollbarTrackHeight === t2?.hScrollbarTrackHeight && t1?.vScrollbarTrackWidth === t2?.vScrollbarTrackWidth));
         return toSignal(trackSize$, { initialValue: null });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -121,7 +121,7 @@ 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.
      */
-    displayNativeScrollbar = input(false, ...(ngDevMode ? [{ debugName: "displayNativeScrollbar", alias: 'sciScrollableDisplayNativeScrollbar' }] : [{ alias: 'sciScrollableDisplayNativeScrollbar' }]));
+    displayNativeScrollbar = input(false, { ...(ngDevMode ? { debugName: "displayNativeScrollbar" } : /* istanbul ignore next */ {}), alias: 'sciScrollableDisplayNativeScrollbar' });
     _host = inject((ElementRef)).nativeElement;
     _renderer = inject(Renderer2);
     _nativeScrollbarTrackSizeProvider = inject(SciNativeScrollbarTrackSizeProvider);
@@ -174,10 +174,10 @@ class SciScrollableDirective {
     setStyle(element, style) {
         Object.keys(style).forEach(key => this._renderer.setStyle(element, key, style[key]));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciScrollableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: SciScrollableDirective, isStandalone: true, selector: "[sciScrollable]", inputs: { displayNativeScrollbar: { classPropertyName: "displayNativeScrollbar", publicName: "sciScrollableDisplayNativeScrollbar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciScrollableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: SciScrollableDirective, isStandalone: true, selector: "[sciScrollable]", inputs: { displayNativeScrollbar: { classPropertyName: "displayNativeScrollbar", publicName: "sciScrollableDisplayNativeScrollbar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciScrollableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciScrollableDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[sciScrollable]' }]
         }], ctorParameters: () => [], propDecorators: { displayNativeScrollbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sciScrollableDisplayNativeScrollbar", required: false }] }] } });
@@ -229,20 +229,26 @@ class SciScrollbarComponent {
     /**
      * Specifies the direction of the scrollbar. Defaults to a vertical scrollbar.
      */
-    direction = input('vscroll', ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    direction = input('vscroll', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
     /**
      * The viewport to provide scrollbars for.
      */
-    viewport = input.required(...(ngDevMode ? [{ debugName: "viewport" }] : []));
+    viewport = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
     _host = inject(ElementRef).nativeElement;
     _document = inject(DOCUMENT);
     _zone = inject(NgZone);
     _destroyRef = inject(DestroyRef);
     _thumbElement = viewChild.required('thumb_handle');
-    _lastDragPosition = signal(null, ...(ngDevMode ? [{ debugName: "_lastDragPosition" }] : []));
-    vertical = computed(() => this.direction() === 'vscroll', ...(ngDevMode ? [{ debugName: "vertical" }] : []));
-    horizontal = computed(() => !this.vertical(), ...(ngDevMode ? [{ debugName: "horizontal" }] : []));
-    scrolling = computed(() => this._lastDragPosition() !== null, ...(ngDevMode ? [{ debugName: "scrolling" }] : []));
+    _lastDragPosition = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_lastDragPosition" }] : /* istanbul ignore next */ []));
+    vertical = computed(() => this.direction() === 'vscroll', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
+    horizontal = computed(() => !this.vertical(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "horizontal" }] : /* istanbul ignore next */ []));
+    scrolling = computed(() => this._lastDragPosition() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrolling" }] : /* istanbul ignore next */ []));
     _overflow = false;
     _thumbSizeFr = 0;
     _thumbPositionFr = 0;
@@ -399,16 +405,16 @@ class SciScrollbarComponent {
     get trackSize() {
         return this.vertical() ? this._host.clientHeight : this._host.clientWidth;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: SciScrollbarComponent, isStandalone: true, selector: "sci-scrollbar", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, viewport: { classPropertyName: "viewport", publicName: "viewport", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.vertical": "vertical()", "class.horizontal": "horizontal()", "class.class.scrolling": "scrolling()" } }, viewQueries: [{ propertyName: "_thumbElement", first: true, predicate: ["thumb_handle"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- scrolltrack to move the viewport client upwards (paging) -->\n<div class=\"scrolltrack-start\" (mousedown)=\"onScrollTrackMouseDown($event, 'up')\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical()\"\n     [class.horizontal]=\"horizontal()\"\n     (mousedown)=\"onMouseDown($event)\"\n     (touchstart)=\"onTouchStart($event)\"\n     (touchmove)=\"onTouchMove($event)\"\n     (touchend)=\"onTouchEnd($event)\"\n     (touchcancel)=\"onTouchEnd($event)\">\n  <div class=\"thumb\"\n       [class.vertical]=\"vertical()\"\n       [class.horizontal]=\"horizontal()\">\n  </div>\n</div>\n\n<!-- scrolltrack to move the viewport client downwards (paging) -->\n<div class=\"scrolltrack-end\" (mousedown)=\"onScrollTrackMouseDown($event, 'down')\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;border:2px solid transparent;box-sizing:border-box;--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host>div.scrolltrack-start{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host>div.thumb-handle{flex-basis:20px;display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column}:host>div.thumb-handle.horizontal{flex-direction:row}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack-end{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}:host-context:not(.overflow){display:none}:host-context:hover>div.thumb-handle>div.thumb,:host-context(.scrolling)>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host-context:hover>div.thumb-handle>div.thumb.vertical,:host-context(.scrolling)>div.thumb-handle>div.thumb.vertical{width:100%}:host-context:hover>div.thumb-handle>div.thumb.horizontal,:host-context(.scrolling)>div.thumb-handle>div.thumb.horizontal{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: SciScrollbarComponent, isStandalone: true, selector: "sci-scrollbar", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, viewport: { classPropertyName: "viewport", publicName: "viewport", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.vertical": "vertical()", "class.horizontal": "horizontal()", "class.scrolling": "scrolling()" } }, viewQueries: [{ propertyName: "_thumbElement", first: true, predicate: ["thumb_handle"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- scrolltrack to move the viewport client upwards (paging) -->\n<div class=\"scrolltrack-start\" (mousedown)=\"onScrollTrackMouseDown($event, 'up')\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical()\"\n     [class.horizontal]=\"horizontal()\"\n     (mousedown)=\"onMouseDown($event)\"\n     (touchstart)=\"onTouchStart($event)\"\n     (touchmove)=\"onTouchMove($event)\"\n     (touchend)=\"onTouchEnd($event)\"\n     (touchcancel)=\"onTouchEnd($event)\">\n  <div class=\"thumb\"\n       [class.vertical]=\"vertical()\"\n       [class.horizontal]=\"horizontal()\">\n  </div>\n</div>\n\n<!-- scrolltrack to move the viewport client downwards (paging) -->\n<div class=\"scrolltrack-end\" (mousedown)=\"onScrollTrackMouseDown($event, 'down')\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;border:2px solid transparent;box-sizing:border-box;--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host>div.scrolltrack-start{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host>div.thumb-handle{flex-basis:20px;display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column}:host>div.thumb-handle.horizontal{flex-direction:row}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack-end{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}:host-context(:not(.overflow)){display:none}:host-context(:hover)>div.thumb-handle>div.thumb,:host-context(.scrolling)>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host-context(:hover)>div.thumb-handle>div.thumb.vertical,:host-context(.scrolling)>div.thumb-handle>div.thumb.vertical{width:100%}:host-context(:hover)>div.thumb-handle>div.thumb.horizontal,:host-context(.scrolling)>div.thumb-handle>div.thumb.horizontal{height:100%}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciScrollbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciScrollbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sci-scrollbar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'sci-scrollbar', host: {
                         '[class.vertical]': 'vertical()',
                         '[class.horizontal]': 'horizontal()',
-                        '[class.class.scrolling]': 'scrolling()',
-                    }, template: "<!-- scrolltrack to move the viewport client upwards (paging) -->\n<div class=\"scrolltrack-start\" (mousedown)=\"onScrollTrackMouseDown($event, 'up')\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical()\"\n     [class.horizontal]=\"horizontal()\"\n     (mousedown)=\"onMouseDown($event)\"\n     (touchstart)=\"onTouchStart($event)\"\n     (touchmove)=\"onTouchMove($event)\"\n     (touchend)=\"onTouchEnd($event)\"\n     (touchcancel)=\"onTouchEnd($event)\">\n  <div class=\"thumb\"\n       [class.vertical]=\"vertical()\"\n       [class.horizontal]=\"horizontal()\">\n  </div>\n</div>\n\n<!-- scrolltrack to move the viewport client downwards (paging) -->\n<div class=\"scrolltrack-end\" (mousedown)=\"onScrollTrackMouseDown($event, 'down')\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;border:2px solid transparent;box-sizing:border-box;--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host>div.scrolltrack-start{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host>div.thumb-handle{flex-basis:20px;display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column}:host>div.thumb-handle.horizontal{flex-direction:row}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack-end{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}:host-context:not(.overflow){display:none}:host-context:hover>div.thumb-handle>div.thumb,:host-context(.scrolling)>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host-context:hover>div.thumb-handle>div.thumb.vertical,:host-context(.scrolling)>div.thumb-handle>div.thumb.vertical{width:100%}:host-context:hover>div.thumb-handle>div.thumb.horizontal,:host-context(.scrolling)>div.thumb-handle>div.thumb.horizontal{height:100%}\n"] }]
+                        '[class.scrolling]': 'scrolling()',
+                    }, template: "<!-- scrolltrack to move the viewport client upwards (paging) -->\n<div class=\"scrolltrack-start\" (mousedown)=\"onScrollTrackMouseDown($event, 'up')\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n     class=\"thumb-handle\"\n     [class.vertical]=\"vertical()\"\n     [class.horizontal]=\"horizontal()\"\n     (mousedown)=\"onMouseDown($event)\"\n     (touchstart)=\"onTouchStart($event)\"\n     (touchmove)=\"onTouchMove($event)\"\n     (touchend)=\"onTouchEnd($event)\"\n     (touchcancel)=\"onTouchEnd($event)\">\n  <div class=\"thumb\"\n       [class.vertical]=\"vertical()\"\n       [class.horizontal]=\"horizontal()\">\n  </div>\n</div>\n\n<!-- scrolltrack to move the viewport client downwards (paging) -->\n<div class=\"scrolltrack-end\" (mousedown)=\"onScrollTrackMouseDown($event, 'down')\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;border:2px solid transparent;box-sizing:border-box;--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host>div.scrolltrack-start{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host>div.thumb-handle{flex-basis:20px;display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column}:host>div.thumb-handle.horizontal{flex-direction:row}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack-end{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}:host-context(:not(.overflow)){display:none}:host-context(:hover)>div.thumb-handle>div.thumb,:host-context(.scrolling)>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host-context(:hover)>div.thumb-handle>div.thumb.vertical,:host-context(.scrolling)>div.thumb-handle>div.thumb.vertical{width:100%}:host-context(:hover)>div.thumb-handle>div.thumb.horizontal,:host-context(.scrolling)>div.thumb-handle>div.thumb.horizontal{height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], viewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewport", required: true }] }], _thumbElement: [{ type: i0.ViewChild, args: ['thumb_handle', { isSignal: true }] }] } });
 /**
  * Emits whenever the viewport scrolls.
@@ -529,7 +535,8 @@ class SciViewportComponent {
     /**
      * Controls if to use the native scrollbar or a scrollbar that sits on top of the viewport. Defaults to `on-top`.
      */
-    scrollbarStyle = input('on-top', ...(ngDevMode ? [{ debugName: "scrollbarStyle" }] : []));
+    scrollbarStyle = input('on-top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollbarStyle" }] : /* istanbul ignore next */ []));
     /**
      * Emits when the viewport is scrolled. The event is emitted outside the Angular zone to avoid unnecessary change detection cycles.
      */
@@ -700,16 +707,16 @@ class SciViewportComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: SciViewportComponent, isStandalone: true, selector: "sci-viewport", inputs: { scrollbarStyle: { classPropertyName: "scrollbarStyle", publicName: "scrollbarStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scroll: "scroll" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "_viewportClient", first: true, predicate: ["viewport_client"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle() === 'native'\"\n     cdkScrollable>\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n@if (scrollbarStyle() === 'on-top' && nativeScrollbarTrackSizeProvider.trackSize() !== null) {\n  <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\" class=\"e2e-vertical\"/>\n  <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"/>\n}\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}:host:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out}:host>sci-scrollbar.vertical{top:0;right:0;bottom:0;left:unset;width:12px}:host>sci-scrollbar.horizontal{top:unset;right:0;bottom:0;left:0;height:12px}\n"], dependencies: [{ kind: "directive", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: ["sciScrollableDisplayNativeScrollbar"] }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SciViewportComponent, isStandalone: true, selector: "sci-viewport", inputs: { scrollbarStyle: { classPropertyName: "scrollbarStyle", publicName: "scrollbarStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scroll: "scroll" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "_viewportClient", first: true, predicate: ["viewport_client"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle() === 'native'\"\n     cdkScrollable>\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n@if (scrollbarStyle() === 'on-top' && nativeScrollbarTrackSizeProvider.trackSize() !== null) {\n  <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\" class=\"e2e-vertical\"/>\n  <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"/>\n}\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}:host:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out}:host>sci-scrollbar.vertical{top:0;right:0;bottom:0;left:unset;width:12px}:host>sci-scrollbar.horizontal{top:unset;right:0;bottom:0;left:0;height:12px}\n"], dependencies: [{ kind: "directive", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: ["sciScrollableDisplayNativeScrollbar"] }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciViewportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SciViewportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-viewport', encapsulation: ViewEncapsulation.ShadowDom, imports: [
                         SciScrollableDirective,
                         SciScrollbarComponent,
                         CdkScrollable,
-                    ], host: {
+                    ], changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '(focus)': 'focus()',
                     }, template: "<!-- viewport and viewport client -->\n<div #viewport\n     class=\"viewport\"\n     tabindex=\"-1\"\n     sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle() === 'native'\"\n     cdkScrollable>\n  <div #viewport_client class=\"viewport-client\" part=\"content\">\n    <slot></slot>\n  </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n@if (scrollbarStyle() === 'on-top' && nativeScrollbarTrackSizeProvider.trackSize() !== null) {\n  <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\" class=\"e2e-vertical\"/>\n  <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"/>\n}\n", styles: [":host{display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}:host:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out}:host>sci-scrollbar.vertical{top:0;right:0;bottom:0;left:unset;width:12px}:host>sci-scrollbar.horizontal{top:unset;right:0;bottom:0;left:0;height:12px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { scrollbarStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarStyle", required: false }] }], scroll: [{ type: i0.Output, args: ["scroll"] }], _viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], _viewportClient: [{ type: i0.ViewChild, args: ['viewport_client', { isSignal: true }] }] } });