@scion/components 20.0.0 → 21.0.0

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

@@ -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, DestroyRef, ElementRef, HostBinding, inject, input, NgZone, OnInit, output, viewChild, DOCUMENT} from '@angular/core';\nimport {audit, fromEvent, merge, Observable} 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  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SciSplitterComponent implements OnInit {\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 spliter 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  @HostBinding('class.moving')\n  protected moving = false;\n\n  @HostBinding('class.vertical')\n  protected get isVertical(): boolean {\n    return !this.isHorizontal;\n  }\n\n  @HostBinding('class.horizontal')\n  protected get isHorizontal(): boolean {\n    return this.orientation() === 'horizontal';\n  }\n\n  @HostBinding('style.cursor')\n  protected get splitterCursor(): string {\n    return this.isVertical ? 'ew-resize' : 'ns-resize';\n  }\n\n  /* @docs-private */\n  public ngOnInit(): void {\n    const touchTargetElement = this._touchTarget().nativeElement;\n\n    fromEvent(touchTargetElement, 'dblclick')\n      .pipe(takeUntilDestroyed(this._destroyRef))\n      .subscribe(() => this.onReset());\n\n    fromEvent<TouchEvent>(touchTargetElement, 'touchstart')\n      .pipe(takeUntilDestroyed(this._destroyRef))\n      .subscribe((event: TouchEvent) => this.onTouchStart(event));\n\n    fromEvent<MouseEvent>(touchTargetElement, 'mousedown')\n      .pipe(takeUntilDestroyed(this._destroyRef))\n      .subscribe((event: MouseEvent) => this.onMouseDown(event));\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 = 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 = 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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"}
+{"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, DestroyRef, ElementRef, HostBinding, inject, input, NgZone, OnInit, output, viewChild, DOCUMENT} from '@angular/core';\nimport {audit, fromEvent, merge, Observable} 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  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SciSplitterComponent implements OnInit {\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 spliter 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  @HostBinding('class.moving')\n  protected moving = false;\n\n  @HostBinding('class.vertical')\n  protected get isVertical(): boolean {\n    return !this.isHorizontal;\n  }\n\n  @HostBinding('class.horizontal')\n  protected get isHorizontal(): boolean {\n    return this.orientation() === 'horizontal';\n  }\n\n  @HostBinding('style.cursor')\n  protected get splitterCursor(): string {\n    return this.isVertical ? 'ew-resize' : 'ns-resize';\n  }\n\n  /* @docs-private */\n  public ngOnInit(): void {\n    const touchTargetElement = this._touchTarget().nativeElement;\n\n    fromEvent(touchTargetElement, 'dblclick')\n      .pipe(takeUntilDestroyed(this._destroyRef))\n      .subscribe(() => this.onReset());\n\n    fromEvent<TouchEvent>(touchTargetElement, 'touchstart')\n      .pipe(takeUntilDestroyed(this._destroyRef))\n      .subscribe((event: TouchEvent) => this.onTouchStart(event));\n\n    fromEvent<MouseEvent>(touchTargetElement, 'mousedown')\n      .pipe(takeUntilDestroyed(this._destroyRef))\n      .subscribe((event: MouseEvent) => this.onMouseDown(event));\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 = 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 = 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

@@ -16,10 +16,10 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
  * Throbber type: `ellipsis`
  */
 class SciEllipsisThrobberComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciEllipsisThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciEllipsisThrobberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", 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"] }]
         }] });
@@ -39,10 +39,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
  * Throbber type: `ripple`
  */
 class SciRippleThrobberComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciRippleThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciRippleThrobberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", 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"] }]
         }] });
@@ -62,10 +62,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
  * Throbber type: `roller`
  */
 class SciRollerThrobberComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciRollerThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciRollerThrobberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", 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"] }]
         }] });
@@ -86,10 +86,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
  * Throbber type: `spinner`
  */
 class SciSpinnerThrobberComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciSpinnerThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciSpinnerThrobberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", 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"] }]
         }] });
@@ -142,11 +142,11 @@ 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');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciThrobberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciThrobberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-throbber', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         SciEllipsisThrobberComponent,
@@ -154,7 +154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImpor
                         SciRollerThrobberComponent,
                         SciSpinnerThrobberComponent,
                     ], 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"] }]
-        }] });
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
 
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways

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

@@ -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":"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"}
+{"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":"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"}

package/fesm2022/scion-components-viewport.mjs

@@ -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: "20.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", 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, { alias: 'sciScrollableDisplayNativeScrollbar' });
+    displayNativeScrollbar = input(false, ...(ngDevMode ? [{ debugName: "displayNativeScrollbar", alias: 'sciScrollableDisplayNativeScrollbar' }] : [{ alias: 'sciScrollableDisplayNativeScrollbar' }]));
     _host = inject((ElementRef)).nativeElement;
     _renderer = inject(Renderer2);
     _nativeScrollbarTrackSizeProvider = inject(SciNativeScrollbarTrackSizeProvider);
@@ -174,13 +174,13 @@ 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: "20.0.1", ngImport: i0, type: SciScrollableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.1", 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: "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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciScrollableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciScrollableDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[sciScrollable]' }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { displayNativeScrollbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sciScrollableDisplayNativeScrollbar", required: false }] }] } });
 
 /*
  * Copyright (c) 2018-2019 Swiss Federal Railways
@@ -229,17 +229,17 @@ class SciScrollbarComponent {
     /**
      * Specifies the direction of the scrollbar. Defaults to a vertical scrollbar.
      */
-    direction = input('vscroll');
+    direction = input('vscroll', ...(ngDevMode ? [{ debugName: "direction" }] : []));
     /**
      * The viewport to provide scrollbars for.
      */
-    viewport = input.required();
+    viewport = input.required(...(ngDevMode ? [{ debugName: "viewport" }] : []));
     _host = inject(ElementRef).nativeElement;
     _document = inject(DOCUMENT);
     _zone = inject(NgZone);
     _destroyRef = inject(DestroyRef);
     _thumbElement = viewChild.required('thumb_handle');
-    _vertical = computed(() => this.direction() === 'vscroll');
+    _vertical = computed(() => this.direction() === 'vscroll', ...(ngDevMode ? [{ debugName: "_vertical" }] : []));
     _lastDragPosition = null;
     _overflow = false;
     _thumbSizeFr = 0;
@@ -322,7 +322,7 @@ class SciScrollbarComponent {
         });
     }
     onScrollTrackMouseDown(event, direction) {
-        const signum = (direction === 'up' ? -1 : +1);
+        const signum = (direction === 'up' ? -1 : 1);
         this.scrollWhileMouseDown(this.toViewportPanPx(signum * this.thumbSize), event);
     }
     /**
@@ -406,13 +406,13 @@ class SciScrollbarComponent {
     get trackSize() {
         return this.vertical ? this._host.clientHeight : this._host.clientWidth;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.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": "this.vertical", "class.horizontal": "this.horizontal", "class.scrolling": "this.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: "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": "this.vertical", "class.horizontal": "this.horizontal", "class.scrolling": "this.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciScrollbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciScrollbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-scrollbar', changeDetection: ChangeDetectionStrategy.OnPush, 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: { vertical: [{
+        }], 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 }] }], vertical: [{
                 type: HostBinding,
                 args: ['class.vertical']
             }], horizontal: [{
@@ -541,7 +541,7 @@ 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');
+    scrollbarStyle = input('on-top', ...(ngDevMode ? [{ debugName: "scrollbarStyle" }] : []));
     /**
      * Emits when the viewport is scrolled. The event is emitted outside the Angular zone to avoid unnecessary change detection cycles.
      */
@@ -712,17 +712,17 @@ class SciViewportComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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]" }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SciViewportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SciViewportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-viewport', encapsulation: ViewEncapsulation.ShadowDom, imports: [
                         SciScrollableDirective,
                         SciScrollbarComponent,
                         CdkScrollable,
                     ], 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: { focus: [{
+        }], 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 }] }], focus: [{
                 type: HostListener,
                 args: ['focus']
             }] } });