@scion/components 13.0.0

package/fesm2020/scion-components-splitter.mjs

@@ -0,0 +1,284 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, NgZone, Component, ChangeDetectionStrategy, Inject, HostBinding, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { Subject, fromEvent, merge } from 'rxjs';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { tapFirst } from '@scion/toolkit/operators';
+import { takeUntil, first } from 'rxjs/operators';
+
+/*
+ * Copyright (c) 2018-2019 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Represents a splitter, a visual element that allows the user to control the size of elements next to it.
+ *
+ * The splitter has a handle that the user can move depending on the orientation of the splitter.
+ *
+ * Note that this control neither does change the size of adjacent elements nor does it (re-)position itself, but emits the distance by
+ * which the user has theoretically moved the splitter. You must subscribe to these events and change your layout accordingly.
+ *
+ * In the toolkit, {@link SciSashboxComponent} uses this splitter to divide a layout into several resizable sections.
+ * Another use case would be a resizable sidebar panel.
+ *
+ * ### Usage:
+ *
+ * ```html
+ * <sci-splitter (move)="onSplitterMove($event.distance)"></sci-splitter>
+ * ```
+ *
+ * ### Theme override:
+ * The default style of the splitter is made up of shades of gray.
+ * You can control the appearance by overriding the following CSS variables:
+ *
+ * - --sci-splitter-bgcolor: Sets the background color of the splitter.
+ * - --sci-splitter-bgcolor_hover: Sets the background color of the splitter when hovering it.
+ * - --sci-splitter-size: Sets the size of the splitter along the main axis.
+ * - --sci-splitter-size_hover: Sets the size of the splitter along the main axis when hovering it.
+ * - --sci-splitter-touch-target-size: Sets the touch target size to move the splitter (accessibility).
+ * - --sci-splitter-cross-axis-size: Sets the splitter size along the cross axis.
+ * - --sci-splitter-border-radius: Sets the border radius of the splitter.
+ * - --sci-splitter-opacity_active: Sets the opacity of the splitter while the user moves the splitter.
+ * - --sci-splitter-opacity_hover: Sets the opacity of the splitter when hovering it.
+ *
+ * Example:
+ *
+ * ```scss
+ * sci-splitter {
+ *   --sci-splitter-bgcolor: black;
+ *   --sci-splitter-bgcolor_hover: black;
+ * }
+ * ```
+ *
+ * @dynamic ignore 'strictMetadataEmit' errors due to the usage of {@link Document} as ambient type for DI.
+ */
+class SciSplitterComponent {
+    constructor(_zone, _cd, _document) {
+        this._zone = _zone;
+        this._cd = _cd;
+        this._document = _document;
+        this._destroy$ = new Subject();
+        /* @docs-private */
+        this.moving = false;
+        /**
+         * Controls whether to render a vertical or horizontal splitter.
+         * By default, if not specified, renders a vertical splitter.
+         */
+        this.orientation = 'vertical';
+        /**
+         * Emits when starting to move the splitter.
+         */
+        this.start = new EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native
+        /**
+         * Emits the distance in pixels when the splitter is moved.
+         * The event is emitted outside of the Angular zone.
+         */
+        this.move = new EventEmitter();
+        /**
+         * Emits when ending to move the splitter.
+         */
+        this.end = new EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native
+        /**
+         * Emits when to reset the splitter position.
+         */
+        this.reset = new EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native
+    }
+    get isVertical() {
+        return !this.isHorizontal;
+    }
+    get isHorizontal() {
+        return this.orientation === 'horizontal';
+    }
+    /* @docs-private */
+    get splitterCursor() {
+        return this.isVertical ? 'ew-resize' : 'ns-resize';
+    }
+    /* @docs-private */
+    ngOnInit() {
+        fromEvent(this.touchTargetElementRef.nativeElement, 'dblclick')
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => this.onReset());
+        fromEvent(this.touchTargetElementRef.nativeElement, 'touchstart')
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((event) => this.onTouchStart(event));
+        fromEvent(this.touchTargetElementRef.nativeElement, 'mousedown')
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((event) => this.onMouseDown(event));
+    }
+    onReset() {
+        this.reset.emit();
+    }
+    onTouchStart(startEvent) {
+        this.installMoveListener({
+            startEvent: startEvent,
+            moveEventNames: ['touchmove'],
+            endEventNames: ['touchend', 'touchcancel'],
+            eventPositionFn: (touchEvent) => {
+                const touch = touchEvent.touches[0];
+                if (this.isVertical) {
+                    return { screenPos: touch.screenX, clientPos: touch.clientX, pagePos: touch.pageX };
+                }
+                else {
+                    return { screenPos: touch.screenY, clientPos: touch.clientY, pagePos: touch.pageY };
+                }
+            },
+        });
+    }
+    onMouseDown(startEvent) {
+        if (startEvent.button !== 0) {
+            return;
+        }
+        this.installMoveListener({
+            startEvent: startEvent,
+            moveEventNames: ['mousemove', 'sci-mousemove'],
+            endEventNames: ['mouseup', 'sci-mouseup'],
+            eventPositionFn: (mouseEvent) => {
+                if (this.isVertical) {
+                    return { screenPos: mouseEvent.screenX, clientPos: mouseEvent.clientX, pagePos: mouseEvent.pageX };
+                }
+                else {
+                    return { screenPos: mouseEvent.screenY, clientPos: mouseEvent.clientY, pagePos: mouseEvent.pageY };
+                }
+            },
+        });
+    }
+    installMoveListener(config) {
+        const startEvent = config.startEvent;
+        startEvent.preventDefault();
+        this._zone.runOutsideAngular(() => {
+            // install listeners on document level to allow fast dragging the splitter.
+            const moveEvent$ = merge(...config.moveEventNames.map(eventName => fromEvent(this._document, eventName)));
+            const endEvent$ = merge(...config.endEventNames.map(eventName => fromEvent(this._document, eventName)));
+            let lastClientPos = config.eventPositionFn(startEvent).clientPos;
+            // Apply cursor on document level to prevent flickering while moving the splitter
+            const oldDocumentCursor = this._document.body.style.cursor;
+            this._document.body.style.cursor = this.splitterCursor;
+            // Listen for 'move' events until stop moving the splitter
+            moveEvent$
+                .pipe(tapFirst(() => this._zone.run(() => {
+                this.moving = true;
+                this.start.next();
+                this._cd.markForCheck();
+            })), takeUntil(merge(endEvent$, this._destroy$)))
+                .subscribe((moveEvent) => {
+                const eventPos = config.eventPositionFn(moveEvent);
+                const newClientPos = eventPos.clientPos;
+                const distance = newClientPos - lastClientPos;
+                lastClientPos = newClientPos;
+                NgZone.assertNotInAngularZone();
+                this.move.emit({ distance, position: eventPos });
+            });
+            // Listen for 'end' events; call 'stop propagation' to not close overlays
+            endEvent$
+                .pipe(first(), takeUntil(this._destroy$))
+                .subscribe((endEvent) => {
+                endEvent.stopPropagation();
+                this._document.body.style.cursor = oldDocumentCursor;
+                this.moving && this._zone.run(() => {
+                    this.end.next();
+                    this.moving = false;
+                    this._cd.markForCheck();
+                });
+            });
+        });
+    }
+    /* @docs-private */
+    ngOnDestroy() {
+        this._destroy$.next();
+    }
+}
+SciSplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciSplitterComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+SciSplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SciSplitterComponent, selector: "sci-splitter", inputs: { orientation: "orientation" }, outputs: { start: "start", move: "move", end: "end", reset: "reset" }, host: { properties: { "class.moving": "this.moving", "class.vertical": "this.isVertical", "class.horizontal": "this.isHorizontal", "style.cursor": "this.splitterCursor" } }, viewQueries: [{ propertyName: "touchTargetElementRef", first: true, predicate: ["touch_target"], descendants: true, static: true }], ngImport: i0, template: "<div #touch_target class=\"touch-target\">\n  <div class=\"handle\"></div>\n</div>\n", styles: [":host{--sci-splitter-bgcolor: #d2d2d2;--sci-splitter-bgcolor_hover: var(--sci-splitter-bgcolor);--sci-splitter-size: 1px;--sci-splitter-size_hover: 8px;--sci-splitter-touch-target-size: 15px;--sci-splitter-cross-axis-size: 100%;--sci-splitter-border-radius: 0;--sci-splitter-opacity_active: 1;--sci-splitter-opacity_hover: .3;display:grid;position:relative;background-color:var(--sci-splitter-bgcolor);border-radius:var(--sci-splitter-border-radius);place-items:center;align-self:center}:host>div.touch-target{position:absolute;display:grid;place-items:center;pointer-events:auto}:host>div.touch-target>div.handle{position:absolute;background-color:var(--sci-splitter-bgcolor);border-radius:var(--sci-splitter-border-radius);opacity:var(--sci-splitter-opacity_hover);transition-property:width,height;transition-timing-function:ease-in;transition-duration:75ms}:host.vertical{width:var(--sci-splitter-size);height:var(--sci-splitter-cross-axis-size)}:host.vertical>div.touch-target{width:var(--sci-splitter-touch-target-size);height:100%}:host.vertical>div.touch-target>div.handle{width:var(--sci-splitter-size);height:100%}:host.horizontal{height:var(--sci-splitter-size);width:var(--sci-splitter-cross-axis-size)}:host.horizontal>div.touch-target{width:100%;height:var(--sci-splitter-touch-target-size)}:host.horizontal>div.touch-target>div.handle{width:100%;height:var(--sci-splitter-size)}:host>div.touch-target:active>div.handle{opacity:var(--sci-splitter-opacity_active)}:host.vertical.moving>div.touch-target>div.handle,:host.vertical>div.touch-target:hover>div.handle{background-color:var(--sci-splitter-bgcolor_hover);width:var(--sci-splitter-size_hover)}:host.horizontal.moving>div.touch-target>div.handle,:host.horizontal>div.touch-target:hover>div.handle{background-color:var(--sci-splitter-bgcolor_hover);height:var(--sci-splitter-size_hover)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciSplitterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-splitter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #touch_target class=\"touch-target\">\n  <div class=\"handle\"></div>\n</div>\n", styles: [":host{--sci-splitter-bgcolor: #d2d2d2;--sci-splitter-bgcolor_hover: var(--sci-splitter-bgcolor);--sci-splitter-size: 1px;--sci-splitter-size_hover: 8px;--sci-splitter-touch-target-size: 15px;--sci-splitter-cross-axis-size: 100%;--sci-splitter-border-radius: 0;--sci-splitter-opacity_active: 1;--sci-splitter-opacity_hover: .3;display:grid;position:relative;background-color:var(--sci-splitter-bgcolor);border-radius:var(--sci-splitter-border-radius);place-items:center;align-self:center}:host>div.touch-target{position:absolute;display:grid;place-items:center;pointer-events:auto}:host>div.touch-target>div.handle{position:absolute;background-color:var(--sci-splitter-bgcolor);border-radius:var(--sci-splitter-border-radius);opacity:var(--sci-splitter-opacity_hover);transition-property:width,height;transition-timing-function:ease-in;transition-duration:75ms}:host.vertical{width:var(--sci-splitter-size);height:var(--sci-splitter-cross-axis-size)}:host.vertical>div.touch-target{width:var(--sci-splitter-touch-target-size);height:100%}:host.vertical>div.touch-target>div.handle{width:var(--sci-splitter-size);height:100%}:host.horizontal{height:var(--sci-splitter-size);width:var(--sci-splitter-cross-axis-size)}:host.horizontal>div.touch-target{width:100%;height:var(--sci-splitter-touch-target-size)}:host.horizontal>div.touch-target>div.handle{width:100%;height:var(--sci-splitter-size)}:host>div.touch-target:active>div.handle{opacity:var(--sci-splitter-opacity_active)}:host.vertical.moving>div.touch-target>div.handle,:host.vertical>div.touch-target:hover>div.handle{background-color:var(--sci-splitter-bgcolor_hover);width:var(--sci-splitter-size_hover)}:host.horizontal.moving>div.touch-target>div.handle,:host.horizontal>div.touch-target:hover>div.handle{background-color:var(--sci-splitter-bgcolor_hover);height:var(--sci-splitter-size_hover)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { moving: [{
+                type: HostBinding,
+                args: ['class.moving']
+            }], isVertical: [{
+                type: HostBinding,
+                args: ['class.vertical']
+            }], isHorizontal: [{
+                type: HostBinding,
+                args: ['class.horizontal']
+            }], orientation: [{
+                type: Input
+            }], start: [{
+                type: Output
+            }], move: [{
+                type: Output
+            }], end: [{
+                type: Output
+            }], reset: [{
+                type: Output
+            }], splitterCursor: [{
+                type: HostBinding,
+                args: ['style.cursor']
+            }], touchTargetElementRef: [{
+                type: ViewChild,
+                args: ['touch_target', { static: true }]
+            }] } });
+
+/*
+ * Copyright (c) 2018-2019 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Provides a splitter, a visual element that allows the user to control the size of elements next to it.
+ *
+ * ### Usage:
+ *
+ * ```html
+ * <sci-splitter (move)="onSplitterMove($event.distance)"></sci-splitter>
+ * ```
+ */
+class SciSplitterModule {
+}
+SciSplitterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SciSplitterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciSplitterModule, declarations: [SciSplitterComponent], imports: [CommonModule], exports: [SciSplitterComponent] });
+SciSplitterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciSplitterModule, imports: [[
+            CommonModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciSplitterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SciSplitterComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [
+                        SciSplitterComponent,
+                    ],
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2019 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SciSplitterComponent, SciSplitterModule };
+//# sourceMappingURL=scion-components-splitter.mjs.map

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

@@ -0,0 +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/splitter.module.ts","../../../../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, ElementRef, EventEmitter, HostBinding, Inject, Input, NgZone, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';\nimport {fromEvent, merge, Subject} from 'rxjs';\nimport {DOCUMENT} from '@angular/common';\nimport {tapFirst} from '@scion/toolkit/operators';\nimport {first, takeUntil} from 'rxjs/operators';\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 * ### Theme override:\n * The default style of the splitter is made up of shades of gray.\n * You can control the appearance by overriding the following CSS variables:\n *\n * - --sci-splitter-bgcolor: Sets the background color of the splitter.\n * - --sci-splitter-bgcolor_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-bgcolor: black;\n *   --sci-splitter-bgcolor_hover: black;\n * }\n * ```\n *\n * @dynamic ignore 'strictMetadataEmit' errors due to the usage of {@link Document} as ambient type for DI.\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, OnDestroy {\n\n  private _destroy$ = new Subject<void>();\n\n  /* @docs-private */\n  @HostBinding('class.moving')\n  public moving = false;\n\n  @HostBinding('class.vertical')\n  public get isVertical(): boolean {\n    return !this.isHorizontal;\n  }\n\n  @HostBinding('class.horizontal')\n  public get isHorizontal(): boolean {\n    return this.orientation === 'horizontal';\n  }\n\n  /**\n   * Controls whether to render a vertical or horizontal splitter.\n   * By default, if not specified, renders a vertical splitter.\n   */\n  @Input()\n  public orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Emits when starting to move the splitter.\n   */\n  @Output()\n  public start = new EventEmitter<void>(); // eslint-disable-line @angular-eslint/no-output-native\n\n  /**\n   * Emits the distance in pixels when the splitter is moved.\n   * The event is emitted outside of the Angular zone.\n   */\n  @Output()\n  public move = new EventEmitter<SplitterMoveEvent>();\n\n  /**\n   * Emits when ending to move the splitter.\n   */\n  @Output()\n  public end = new EventEmitter<void>(); // eslint-disable-line @angular-eslint/no-output-native\n\n  /**\n   * Emits when to reset the splitter position.\n   */\n  @Output()\n  public reset = new EventEmitter<void>(); // eslint-disable-line @angular-eslint/no-output-native\n\n  /* @docs-private */\n  @HostBinding('style.cursor')\n  public get splitterCursor(): string {\n    return this.isVertical ? 'ew-resize' : 'ns-resize';\n  }\n\n  /* @docs-private */\n  @ViewChild('touch_target', {static: true})\n  public touchTargetElementRef!: ElementRef<HTMLElement>;\n\n  constructor(private _zone: NgZone,\n              private _cd: ChangeDetectorRef,\n              @Inject(DOCUMENT) private _document: Document) {\n  }\n\n  /* @docs-private */\n  public ngOnInit(): void {\n    fromEvent(this.touchTargetElementRef.nativeElement, 'dblclick')\n      .pipe(takeUntil(this._destroy$))\n      .subscribe(() => this.onReset());\n\n    fromEvent<TouchEvent>(this.touchTargetElementRef.nativeElement, 'touchstart')\n      .pipe(takeUntil(this._destroy$))\n      .subscribe((event: TouchEvent) => this.onTouchStart(event));\n\n    fromEvent<MouseEvent>(this.touchTargetElementRef.nativeElement, 'mousedown')\n      .pipe(takeUntil(this._destroy$))\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\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\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.next();\n            this._cd.markForCheck();\n          })),\n          takeUntil(merge(endEvent$, this._destroy$)),\n        )\n        .subscribe((moveEvent: EVENT) => {\n          const eventPos = config.eventPositionFn(moveEvent);\n          const newClientPos = eventPos.clientPos;\n          const distance = newClientPos - lastClientPos;\n          lastClientPos = newClientPos;\n\n          NgZone.assertNotInAngularZone();\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(first(), takeUntil(this._destroy$))\n        .subscribe((endEvent: EVENT) => {\n          endEvent.stopPropagation();\n          this._document.body.style.cursor = oldDocumentCursor;\n          this.moving && this._zone.run(() => {\n            this.end.next();\n            this.moving = false;\n            this._cd.markForCheck();\n          });\n        });\n    });\n  }\n\n  /* @docs-private */\n  public ngOnDestroy(): void {\n    this._destroy$.next();\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","<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\nimport {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {SciSplitterComponent} from './splitter.component';\n\n/**\n * Provides a splitter, a visual element that allows the user to control the size of elements next to it.\n *\n * ### Usage:\n *\n * ```html\n * <sci-splitter (move)=\"onSplitterMove($event.distance)\"></sci-splitter>\n * ```\n */\n@NgModule({\n  declarations: [\n    SciSplitterComponent,\n  ],\n  imports: [\n    CommonModule,\n  ],\n  exports: [\n    SciSplitterComponent,\n  ],\n})\nexport class SciSplitterModule {\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/splitter'\n *\n * @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n */\nexport * from './splitter.component';\nexport * from './splitter.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/scion-components-throbber.mjs

@@ -0,0 +1,216 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+/*
+ * Copyright (c) 2018-2019 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Represents a throbber as an ellipsis consisting of three horizontally arranged points that appear one after the other.
+ *
+ * Throbber type: `ellipsis`
+ */
+class SciEllipsisThrobberComponent {
+}
+SciEllipsisThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciEllipsisThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SciEllipsisThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SciEllipsisThrobberComponent, 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: "13.2.3", 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"] }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2019 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Represents a throbber with a rippled, centric wave effect, similar to throwing a stone into water.
+ *
+ * Throbber type: `ripple`
+ */
+class SciRippleThrobberComponent {
+}
+SciRippleThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciRippleThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SciRippleThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SciRippleThrobberComponent, 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: "13.2.3", 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"] }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2019 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Represents a circular throbber with points rotating around the center of a circle. Points have a delayed acceleration, which leads to an accordion effect.
+ *
+ * Throbber type: `roller`
+ */
+class SciRollerThrobberComponent {
+}
+SciRollerThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciRollerThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SciRollerThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SciRollerThrobberComponent, 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: "13.2.3", 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"] }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2019 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Represents a classic spinner throbber with strokes arranged radially. The strokes light up one after the other in clockwise direction
+ * and then then fade out again.
+ *
+ * Throbber type: `spinner`
+ */
+class SciSpinnerThrobberComponent {
+}
+SciSpinnerThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciSpinnerThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SciSpinnerThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SciSpinnerThrobberComponent, 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: "13.2.3", 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"] }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2019 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Animated graphical control to indicate the execution of an action.
+ *
+ * Choose between different throbber presentations by setting the `type` property: `ellipsis`, `ripple`, `roller`, `spinner`.
+ *
+ * ### CSS styling:
+ *
+ * You can override the following CSS variables:
+ *
+ * - sci-throbber-color:     Sets the color of the throbber (by default, uses `lightgray`).
+ * - sci-throbber-size:      Defines the size of the throbber. Most throbbers are quadratic having the same width and height.
+ *                           For non-quadratic throbbers, the size usually specifies the height (by default, uses `50px`).
+ * - sci-throbber-duration:  Sets the duration of a single animation cycle (by default, uses `1.25s`).
+ *
+ * Example:
+ *
+ * ```css
+ *
+ * sci-throbber {
+ *   --sci-throbber-color: blue;
+ *   --sci-throbber-size: 50px;
+ *   --sci-throbber-duration: 1s
+ * }
+ * ```
+ */
+class SciThrobberComponent {
+    constructor() {
+        /**
+         * Chooses between different throbber presentation. If not set, uses `spinner` type.
+         *
+         * - **ellipsis**
+         * Represents a throbber as an ellipsis consisting of three horizontally arranged points that appear one after the other.
+         * - **ripple**
+         * Represents a throbber with a rippled, centric wave effect, similar to throwing a stone into water.
+         * - **roller**
+         * Represents a circular throbber with points rotating around the center of a circle. Points have a delayed acceleration, which leads to an accordion effect.
+         * - **spinner** (default)
+         * Represents a classic spinner throbber with strokes arranged radially. The strokes light up one after the other in clockwise direction and then then fade out again.
+         */
+        this.type = 'spinner';
+    }
+}
+SciThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SciThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SciThrobberComponent, selector: "sci-throbber", inputs: { type: "type" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <sci-ellipsis-throbber *ngSwitchCase=\"'ellipsis'\"></sci-ellipsis-throbber>\n  <sci-ripple-throbber *ngSwitchCase=\"'ripple'\"></sci-ripple-throbber>\n  <sci-roller-throbber *ngSwitchCase=\"'roller'\"></sci-roller-throbber>\n  <sci-spinner-throbber *ngSwitchCase=\"'spinner'\"></sci-spinner-throbber>\n  <sci-spinner-throbber *ngSwitchDefault></sci-spinner-throbber>\n</ng-container>", styles: [":host{display:inline-grid;--sci-throbber-color: lightgray;--sci-throbber-size: 50px;--sci-throbber-duration: 1.25s}\n"], components: [{ type: SciEllipsisThrobberComponent, selector: "sci-ellipsis-throbber" }, { type: SciRippleThrobberComponent, selector: "sci-ripple-throbber" }, { type: SciRollerThrobberComponent, selector: "sci-roller-throbber" }, { type: SciSpinnerThrobberComponent, selector: "sci-spinner-throbber" }], directives: [{ type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciThrobberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-throbber', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"type\">\n  <sci-ellipsis-throbber *ngSwitchCase=\"'ellipsis'\"></sci-ellipsis-throbber>\n  <sci-ripple-throbber *ngSwitchCase=\"'ripple'\"></sci-ripple-throbber>\n  <sci-roller-throbber *ngSwitchCase=\"'roller'\"></sci-roller-throbber>\n  <sci-spinner-throbber *ngSwitchCase=\"'spinner'\"></sci-spinner-throbber>\n  <sci-spinner-throbber *ngSwitchDefault></sci-spinner-throbber>\n</ng-container>", styles: [":host{display:inline-grid;--sci-throbber-color: lightgray;--sci-throbber-size: 50px;--sci-throbber-duration: 1.25s}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright (c) 2018-2019 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Provides {@link SciThrobberComponent}, an animated graphical control to indicate the execution of an action.
+ */
+class SciThrobberModule {
+}
+SciThrobberModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciThrobberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SciThrobberModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciThrobberModule, declarations: [SciThrobberComponent,
+        SciEllipsisThrobberComponent,
+        SciRippleThrobberComponent,
+        SciRollerThrobberComponent,
+        SciSpinnerThrobberComponent], imports: [CommonModule], exports: [SciThrobberComponent] });
+SciThrobberModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciThrobberModule, imports: [[
+            CommonModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SciThrobberModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SciThrobberComponent,
+                        SciEllipsisThrobberComponent,
+                        SciRippleThrobberComponent,
+                        SciRollerThrobberComponent,
+                        SciSpinnerThrobberComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [
+                        SciThrobberComponent,
+                    ],
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2019 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SciThrobberComponent, SciThrobberModule };
+//# sourceMappingURL=scion-components-throbber.mjs.map

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

@@ -0,0 +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/throbber.module.ts","../../../../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 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';\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 * ### CSS styling:\n *\n * You can override the following CSS variables:\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})\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  @Input()\n  public type: 'ellipsis' | 'ripple' | 'roller' | 'spinner' = 'spinner';\n}\n","<ng-container [ngSwitch]=\"type\">\n  <sci-ellipsis-throbber *ngSwitchCase=\"'ellipsis'\"></sci-ellipsis-throbber>\n  <sci-ripple-throbber *ngSwitchCase=\"'ripple'\"></sci-ripple-throbber>\n  <sci-roller-throbber *ngSwitchCase=\"'roller'\"></sci-roller-throbber>\n  <sci-spinner-throbber *ngSwitchCase=\"'spinner'\"></sci-spinner-throbber>\n  <sci-spinner-throbber *ngSwitchDefault></sci-spinner-throbber>\n</ng-container>","/*\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 {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {SciThrobberComponent} from './throbber.component';\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 * Provides {@link SciThrobberComponent}, an animated graphical control to indicate the execution of an action.\n */\n@NgModule({\n  declarations: [\n    SciThrobberComponent,\n    SciEllipsisThrobberComponent,\n    SciRippleThrobberComponent,\n    SciRollerThrobberComponent,\n    SciSpinnerThrobberComponent,\n  ],\n  imports: [\n    CommonModule,\n  ],\n  exports: [\n    SciThrobberComponent,\n  ],\n})\nexport class SciThrobberModule {\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 {SciThrobberModule} from './throbber.module';\nexport {SciThrobberComponent} from './throbber.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;AAYA;;;;;MAWa,4BAA4B;;yHAA5B,4BAA4B;6GAA5B,4BAA4B,6DCvBzC,yFAGA;2FDoBa,4BAA4B;kBANxC,SAAS;+BACE,uBAAuB,mBAGhB,uBAAuB,CAAC,MAAM;;;AErBjD;;;;;;;;;AAYA;;;;;MAWa,0BAA0B;;uHAA1B,0BAA0B;2GAA1B,0BAA0B,2DCvBvC,8DAEA;2FDqBa,0BAA0B;kBANtC,SAAS;+BACE,qBAAqB,mBAGd,uBAAuB,CAAC,MAAM;;;AErBjD;;;;;;;;;AAYA;;;;;MAWa,0BAA0B;;uHAA1B,0BAA0B;2GAA1B,0BAA0B,2DCvBvC,wOAOyB;2FDgBZ,0BAA0B;kBANtC,SAAS;+BACE,qBAAqB,mBAGd,uBAAuB,CAAC,MAAM;;;AErBjD;;;;;;;;;AAYA;;;;;;MAYa,2BAA2B;;wHAA3B,2BAA2B;4GAA3B,2BAA2B,4DCxBxC,wWAW0B;2FDab,2BAA2B;kBANvC,SAAS;+BACE,sBAAsB,mBAGf,uBAAuB,CAAC,MAAM;;;AEtBjD;;;;;;;;;AAYA;;;;;;;;;;;;;;;;;;;;;;;;;MA+Ba,oBAAoB;IANjC;;;;;;;;;;;;;QAqBS,SAAI,GAAiD,SAAS,CAAC;KACvE;;iHAhBY,oBAAoB;qGAApB,oBAAoB,8EC3CjC,waAMe;2FDqCF,oBAAoB;kBANhC,SAAS;+BACE,cAAc,mBAGP,uBAAuB,CAAC,MAAM;8BAiBxC,IAAI;sBADV,KAAK;;;AEzDR;;;;;;;;;AAkBA;;;MAkBa,iBAAiB;;8GAAjB,iBAAiB;+GAAjB,iBAAiB,iBAb1B,oBAAoB;QACpB,4BAA4B;QAC5B,0BAA0B;QAC1B,0BAA0B;QAC1B,2BAA2B,aAG3B,YAAY,aAGZ,oBAAoB;+GAGX,iBAAiB,YAPnB;YACP,YAAY;SACb;2FAKU,iBAAiB;kBAf7B,QAAQ;mBAAC;oBACR,YAAY,EAAE;wBACZ,oBAAoB;wBACpB,4BAA4B;wBAC5B,0BAA0B;wBAC1B,0BAA0B;wBAC1B,2BAA2B;qBAC5B;oBACD,OAAO,EAAE;wBACP,YAAY;qBACb;oBACD,OAAO,EAAE;wBACP,oBAAoB;qBACrB;iBACF;;;ACnCD;;;;;;;;;;ACAA;;;;;;"}