@scion/components 16.1.0 → 17.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_index.scss +99 -1
- package/design/_index.scss +1 -0
- package/design/_theming.scss +244 -0
- package/design/colors/_scion-dark-colors.scss +91 -0
- package/design/colors/_scion-light-colors.scss +91 -0
- package/design/colors/_scion-static-colors.scss +4 -0
- package/design/components/_scion-component-tokens.scss +48 -0
- package/design/themes/_scion-dark-theme.scss +55 -0
- package/design/themes/_scion-light-theme.scss +55 -0
- package/esm2022/dimension/dimension.directive.mjs +6 -7
- package/esm2022/dimension/dimension.module.mjs +6 -7
- package/esm2022/sashbox/element-ref.directive.mjs +6 -7
- package/esm2022/sashbox/sash-initializer.directive.mjs +6 -7
- package/esm2022/sashbox/sash.directive.mjs +6 -7
- package/esm2022/sashbox/sashbox.component.mjs +20 -20
- package/esm2022/sashbox/sashbox.module.mjs +6 -7
- package/esm2022/splitter/splitter.component.mjs +20 -20
- package/esm2022/splitter/splitter.module.mjs +6 -7
- package/esm2022/throbber/ellipsis-throbber/ellipsis-throbber.component.mjs +6 -7
- package/esm2022/throbber/ripple-throbber/ripple-throbber.component.mjs +6 -7
- package/esm2022/throbber/roller-throbber/roller-throbber.component.mjs +6 -7
- package/esm2022/throbber/spinner-throbber/spinner-throbber.component.mjs +6 -7
- package/esm2022/throbber/throbber.component.mjs +9 -9
- package/esm2022/throbber/throbber.module.mjs +6 -7
- package/esm2022/viewport/native-scrollbar-track-size-provider.service.mjs +12 -10
- package/esm2022/viewport/scrollable.directive.mjs +6 -7
- package/esm2022/viewport/scrollbar/scrollbar.component.mjs +12 -12
- package/esm2022/viewport/viewport.component.mjs +13 -13
- package/esm2022/viewport/viewport.module.mjs +6 -7
- package/fesm2022/scion-components-dimension.mjs +8 -8
- package/fesm2022/scion-components-dimension.mjs.map +1 -1
- package/fesm2022/scion-components-sashbox.mjs +34 -33
- package/fesm2022/scion-components-sashbox.mjs.map +1 -1
- package/fesm2022/scion-components-splitter.mjs +22 -21
- package/fesm2022/scion-components-splitter.mjs.map +1 -1
- package/fesm2022/scion-components-throbber.mjs +27 -26
- package/fesm2022/scion-components-throbber.mjs.map +1 -1
- package/fesm2022/scion-components-viewport.mjs +39 -34
- package/fesm2022/scion-components-viewport.mjs.map +1 -1
- package/package.json +10 -4
- package/sashbox/sashbox.component.d.ts +12 -11
- package/splitter/splitter.component.d.ts +12 -11
- package/throbber/throbber.component.d.ts +3 -2
- package/viewport/{_scrollbar.scss → scrollbar/_scrollbar.scss} +3 -4
- package/viewport/scrollbar/scrollbar.component.d.ts +4 -3
- package/viewport/viewport.component.d.ts +6 -5
- /package/viewport/{_index.scss → scrollbar/_index.scss} +0 -0
|
@@ -25,32 +25,33 @@ import { takeUntil, first } from 'rxjs/operators';
|
|
|
25
25
|
* In the toolkit, {@link SciSashboxComponent} uses this splitter to divide a layout into several resizable sections.
|
|
26
26
|
* Another use case would be a resizable sidebar panel.
|
|
27
27
|
*
|
|
28
|
-
* ### Usage
|
|
28
|
+
* ### Usage
|
|
29
29
|
*
|
|
30
30
|
* ```html
|
|
31
31
|
* <sci-splitter (move)="onSplitterMove($event.distance)"></sci-splitter>
|
|
32
32
|
* ```
|
|
33
33
|
*
|
|
34
|
-
* ###
|
|
35
|
-
*
|
|
36
|
-
*
|
|
34
|
+
* ### Styling
|
|
35
|
+
*
|
|
36
|
+
* To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
|
|
37
|
+
* To style a specific `sci-splitter` component, the following CSS variables can be set directly on the component.
|
|
37
38
|
*
|
|
38
|
-
* - --sci-splitter-
|
|
39
|
-
* - --sci-splitter-
|
|
39
|
+
* - --sci-splitter-background-color: Sets the background color of the splitter.
|
|
40
|
+
* - --sci-splitter-background-color-hover: Sets the background color of the splitter when hovering it.
|
|
40
41
|
* - --sci-splitter-size: Sets the size of the splitter along the main axis.
|
|
41
|
-
* - --sci-splitter-
|
|
42
|
+
* - --sci-splitter-size-hover: Sets the size of the splitter along the main axis when hovering it.
|
|
42
43
|
* - --sci-splitter-touch-target-size: Sets the touch target size to move the splitter (accessibility).
|
|
43
44
|
* - --sci-splitter-cross-axis-size: Sets the splitter size along the cross axis.
|
|
44
45
|
* - --sci-splitter-border-radius: Sets the border radius of the splitter.
|
|
45
|
-
* - --sci-splitter-
|
|
46
|
-
* - --sci-splitter-
|
|
46
|
+
* - --sci-splitter-opacity-active: Sets the opacity of the splitter while the user moves the splitter.
|
|
47
|
+
* - --sci-splitter-opacity-hover: Sets the opacity of the splitter when hovering it.
|
|
47
48
|
*
|
|
48
49
|
* Example:
|
|
49
50
|
*
|
|
50
51
|
* ```scss
|
|
51
52
|
* sci-splitter {
|
|
52
|
-
* --sci-splitter-
|
|
53
|
-
* --sci-splitter-
|
|
53
|
+
* --sci-splitter-background-color: black;
|
|
54
|
+
* --sci-splitter-background-color-hover: black;
|
|
54
55
|
* }
|
|
55
56
|
* ```
|
|
56
57
|
*/
|
|
@@ -188,16 +189,16 @@ class SciSplitterComponent {
|
|
|
188
189
|
ngOnDestroy() {
|
|
189
190
|
this._destroy$.next();
|
|
190
191
|
}
|
|
191
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
192
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
192
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciSplitterComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
193
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SciSplitterComponent, isStandalone: true, 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: ["@charset \"UTF-8\";:host{--\\275sci-splitter-background-color: var(--sci-splitter-background-color, var(--sci-splitter-bgcolor, #d2d2d2));--\\275sci-splitter-background-color-hover: var(--sci-splitter-background-color-hover, var(--sci-splitter-bgcolor_hover, var(--\\275sci-splitter-background-color)));--\\275sci-splitter-size: var(--sci-splitter-size, 1px);--\\275sci-splitter-size-hover: var(--sci-splitter-size-hover, var(--sci-splitter-size_hover, 8px));--\\275sci-splitter-touch-target-size: var(--sci-splitter-touch-target-size, 15px);--\\275sci-splitter-cross-axis-size: var(--sci-splitter-cross-axis-size, 100%);--\\275sci-splitter-border-radius: var(--sci-splitter-border-radius, 0);--\\275sci-splitter-opacity-active: var(--sci-splitter-opacity-active, var(--sci-splitter-opacity_active, 1));--\\275sci-splitter-opacity-hover: var(--sci-splitter-opacity-hover, var(--sci-splitter-opacity_hover, .3));display:grid;position:relative;background-color:var(--\\275sci-splitter-background-color);border-radius:var(--\\275sci-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(--\\275sci-splitter-background-color);border-radius:var(--\\275sci-splitter-border-radius);opacity:var(--\\275sci-splitter-opacity-hover);transition-property:width,height;transition-timing-function:ease-in;transition-duration:75ms}:host.vertical{width:var(--\\275sci-splitter-size);height:var(--\\275sci-splitter-cross-axis-size)}:host.vertical>div.touch-target{width:var(--\\275sci-splitter-touch-target-size);height:100%}:host.vertical>div.touch-target>div.handle{width:var(--\\275sci-splitter-size);height:100%}:host.horizontal{height:var(--\\275sci-splitter-size);width:var(--\\275sci-splitter-cross-axis-size)}:host.horizontal>div.touch-target{width:100%;height:var(--\\275sci-splitter-touch-target-size)}:host.horizontal>div.touch-target>div.handle{width:100%;height:var(--\\275sci-splitter-size)}:host>div.touch-target:active>div.handle{opacity:var(--\\275sci-splitter-opacity-active)}:host.vertical.moving>div.touch-target>div.handle,:host.vertical>div.touch-target:hover>div.handle{background-color:var(--\\275sci-splitter-background-color-hover);width:var(--\\275sci-splitter-size-hover)}:host.horizontal.moving>div.touch-target>div.handle,:host.horizontal>div.touch-target:hover>div.handle{background-color:var(--\\275sci-splitter-background-color-hover);height:var(--\\275sci-splitter-size-hover)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
193
194
|
}
|
|
194
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciSplitterComponent, decorators: [{
|
|
195
196
|
type: Component,
|
|
196
|
-
args: [{ selector: 'sci-splitter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div #touch_target class=\"touch-target\">\n <div class=\"handle\"></div>\n</div>\n", styles: ["
|
|
197
|
-
}], ctorParameters:
|
|
197
|
+
args: [{ selector: 'sci-splitter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div #touch_target class=\"touch-target\">\n <div class=\"handle\"></div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--\\275sci-splitter-background-color: var(--sci-splitter-background-color, var(--sci-splitter-bgcolor, #d2d2d2));--\\275sci-splitter-background-color-hover: var(--sci-splitter-background-color-hover, var(--sci-splitter-bgcolor_hover, var(--\\275sci-splitter-background-color)));--\\275sci-splitter-size: var(--sci-splitter-size, 1px);--\\275sci-splitter-size-hover: var(--sci-splitter-size-hover, var(--sci-splitter-size_hover, 8px));--\\275sci-splitter-touch-target-size: var(--sci-splitter-touch-target-size, 15px);--\\275sci-splitter-cross-axis-size: var(--sci-splitter-cross-axis-size, 100%);--\\275sci-splitter-border-radius: var(--sci-splitter-border-radius, 0);--\\275sci-splitter-opacity-active: var(--sci-splitter-opacity-active, var(--sci-splitter-opacity_active, 1));--\\275sci-splitter-opacity-hover: var(--sci-splitter-opacity-hover, var(--sci-splitter-opacity_hover, .3));display:grid;position:relative;background-color:var(--\\275sci-splitter-background-color);border-radius:var(--\\275sci-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(--\\275sci-splitter-background-color);border-radius:var(--\\275sci-splitter-border-radius);opacity:var(--\\275sci-splitter-opacity-hover);transition-property:width,height;transition-timing-function:ease-in;transition-duration:75ms}:host.vertical{width:var(--\\275sci-splitter-size);height:var(--\\275sci-splitter-cross-axis-size)}:host.vertical>div.touch-target{width:var(--\\275sci-splitter-touch-target-size);height:100%}:host.vertical>div.touch-target>div.handle{width:var(--\\275sci-splitter-size);height:100%}:host.horizontal{height:var(--\\275sci-splitter-size);width:var(--\\275sci-splitter-cross-axis-size)}:host.horizontal>div.touch-target{width:100%;height:var(--\\275sci-splitter-touch-target-size)}:host.horizontal>div.touch-target>div.handle{width:100%;height:var(--\\275sci-splitter-size)}:host>div.touch-target:active>div.handle{opacity:var(--\\275sci-splitter-opacity-active)}:host.vertical.moving>div.touch-target>div.handle,:host.vertical>div.touch-target:hover>div.handle{background-color:var(--\\275sci-splitter-background-color-hover);width:var(--\\275sci-splitter-size-hover)}:host.horizontal.moving>div.touch-target>div.handle,:host.horizontal>div.touch-target:hover>div.handle{background-color:var(--\\275sci-splitter-background-color-hover);height:var(--\\275sci-splitter-size-hover)}\n"] }]
|
|
198
|
+
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
198
199
|
type: Inject,
|
|
199
200
|
args: [DOCUMENT]
|
|
200
|
-
}] }]
|
|
201
|
+
}] }], propDecorators: { moving: [{
|
|
201
202
|
type: HostBinding,
|
|
202
203
|
args: ['class.moving']
|
|
203
204
|
}], isVertical: [{
|
|
@@ -243,11 +244,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
|
|
|
243
244
|
* ```
|
|
244
245
|
*/
|
|
245
246
|
class SciSplitterModule {
|
|
246
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
247
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
248
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
247
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
248
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: SciSplitterModule, imports: [SciSplitterComponent], exports: [SciSplitterComponent] }); }
|
|
249
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciSplitterModule }); }
|
|
249
250
|
}
|
|
250
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
251
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciSplitterModule, decorators: [{
|
|
251
252
|
type: NgModule,
|
|
252
253
|
args: [{
|
|
253
254
|
imports: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scion-components-splitter.mjs","sources":["../../../../projects/scion/components/splitter/src/splitter.component.ts","../../../../projects/scion/components/splitter/src/splitter.component.html","../../../../projects/scion/components/splitter/src/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@Component({\n selector: 'sci-splitter',\n templateUrl: './splitter.component.html',\n styleUrls: ['./splitter.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\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 {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 imports: [\n SciSplitterComponent,\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 {SciSplitterModule} from './splitter.module';\nexport {SciSplitterComponent, SplitterMoveEvent, EventPosition} from './splitter.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"scion-components-splitter.mjs","sources":["../../../../projects/scion/components/splitter/src/splitter.component.ts","../../../../projects/scion/components/splitter/src/splitter.component.html","../../../../projects/scion/components/splitter/src/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 * ### 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 standalone: true,\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 {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 imports: [\n SciSplitterComponent,\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 {SciSplitterModule} from './splitter.module';\nexport {SciSplitterComponent, SplitterMoveEvent, 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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"}
|
|
@@ -17,12 +17,12 @@ import { NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
|
|
|
17
17
|
* Throbber type: `ellipsis`
|
|
18
18
|
*/
|
|
19
19
|
class SciEllipsisThrobberComponent {
|
|
20
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
20
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciEllipsisThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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: ["@charset \"UTF-8\";:host{display:inline-flex;justify-content:space-between;font-size:var(--\\275sci-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(--\\275sci-throbber-duration) ease-in-out infinite;background-color:var(--\\275sci-throbber-color)}:host>div.point:nth-child(1){animation-delay:calc(var(--\\275sci-throbber-duration) / -6)}:host>div.point:nth-child(2){animation-delay:calc(var(--\\275sci-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 }); }
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciEllipsisThrobberComponent, decorators: [{
|
|
24
24
|
type: Component,
|
|
25
|
-
args: [{ selector: 'sci-ellipsis-throbber', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n", styles: ["
|
|
25
|
+
args: [{ selector: 'sci-ellipsis-throbber', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"point\"></div>\n<div class=\"point\"></div>\n<div class=\"point\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;justify-content:space-between;font-size:var(--\\275sci-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(--\\275sci-throbber-duration) ease-in-out infinite;background-color:var(--\\275sci-throbber-color)}:host>div.point:nth-child(1){animation-delay:calc(var(--\\275sci-throbber-duration) / -6)}:host>div.point:nth-child(2){animation-delay:calc(var(--\\275sci-throbber-duration) / -12)}@keyframes sci-ellipsis-throbber{0%{transform:scale(0)}40%{transform:scale(1)}80%,to{transform:scale(0)}}\n"] }]
|
|
26
26
|
}] });
|
|
27
27
|
|
|
28
28
|
/*
|
|
@@ -40,12 +40,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
|
|
|
40
40
|
* Throbber type: `ripple`
|
|
41
41
|
*/
|
|
42
42
|
class SciRippleThrobberComponent {
|
|
43
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
44
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
43
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciRippleThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
44
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SciRippleThrobberComponent, isStandalone: true, selector: "sci-ripple-throbber", ngImport: i0, template: "<div class=\"circle\"></div>\n<div class=\"circle\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-size:var(--\\275sci-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(--\\275sci-throbber-color);animation:sci-ripple-throbber var(--\\275sci-throbber-duration) cubic-bezier(0,.2,.8,1) infinite}:host>div.circle:nth-child(1){animation-delay:calc(var(--\\275sci-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 }); }
|
|
45
45
|
}
|
|
46
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciRippleThrobberComponent, decorators: [{
|
|
47
47
|
type: Component,
|
|
48
|
-
args: [{ selector: 'sci-ripple-throbber', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"circle\"></div>\n<div class=\"circle\"></div>\n", styles: ["
|
|
48
|
+
args: [{ selector: 'sci-ripple-throbber', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"circle\"></div>\n<div class=\"circle\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-size:var(--\\275sci-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(--\\275sci-throbber-color);animation:sci-ripple-throbber var(--\\275sci-throbber-duration) cubic-bezier(0,.2,.8,1) infinite}:host>div.circle:nth-child(1){animation-delay:calc(var(--\\275sci-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"] }]
|
|
49
49
|
}] });
|
|
50
50
|
|
|
51
51
|
/*
|
|
@@ -63,12 +63,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
|
|
|
63
63
|
* Throbber type: `roller`
|
|
64
64
|
*/
|
|
65
65
|
class SciRollerThrobberComponent {
|
|
66
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
67
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
66
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciRollerThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
67
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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: ["@charset \"UTF-8\";:host{display:inline-flex;justify-content:center;position:relative;font-size:var(--\\275sci-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(--\\275sci-throbber-color)}:host>div.point:nth-child(1){animation:sci-roller-throbber-1 var(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-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(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-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(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-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(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-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(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-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(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-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(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-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(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-throbber-duration) * -.16)}@keyframes sci-roller-throbber-8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
68
68
|
}
|
|
69
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
69
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciRollerThrobberComponent, decorators: [{
|
|
70
70
|
type: Component,
|
|
71
|
-
args: [{ selector: 'sci-roller-throbber', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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: ["
|
|
71
|
+
args: [{ selector: 'sci-roller-throbber', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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: ["@charset \"UTF-8\";:host{display:inline-flex;justify-content:center;position:relative;font-size:var(--\\275sci-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(--\\275sci-throbber-color)}:host>div.point:nth-child(1){animation:sci-roller-throbber-1 var(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-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(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-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(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-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(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-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(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-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(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-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(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-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(--\\275sci-throbber-duration) cubic-bezier(.5,0,.5,1) infinite;animation-delay:calc(var(--\\275sci-throbber-duration) * -.16)}@keyframes sci-roller-throbber-8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
72
72
|
}] });
|
|
73
73
|
|
|
74
74
|
/*
|
|
@@ -87,12 +87,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
|
|
|
87
87
|
* Throbber type: `spinner`
|
|
88
88
|
*/
|
|
89
89
|
class SciSpinnerThrobberComponent {
|
|
90
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
91
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
90
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciSpinnerThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
91
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", 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: ["@charset \"UTF-8\";:host{display:inline-flex;justify-content:center;position:relative;font-size:var(--\\275sci-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(--\\275sci-throbber-color);animation:sci-spinner-throbber var(--\\275sci-throbber-duration) linear infinite}:host>div.stroke:nth-child(1){transform:rotate(0);animation-delay:calc(var(--\\275sci-throbber-duration) * .0833333333)}:host>div.stroke:nth-child(2){transform:rotate(30deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .1666666667)}:host>div.stroke:nth-child(3){transform:rotate(60deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .25)}:host>div.stroke:nth-child(4){transform:rotate(90deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .3333333333)}:host>div.stroke:nth-child(5){transform:rotate(120deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .4166666667)}:host>div.stroke:nth-child(6){transform:rotate(150deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .5)}:host>div.stroke:nth-child(7){transform:rotate(180deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .5833333333)}:host>div.stroke:nth-child(8){transform:rotate(210deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .6666666667)}:host>div.stroke:nth-child(9){transform:rotate(240deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .75)}:host>div.stroke:nth-child(10){transform:rotate(270deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .8333333333)}:host>div.stroke:nth-child(11){transform:rotate(300deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .9166666667)}:host>div.stroke:nth-child(12){transform:rotate(330deg);animation-delay:calc(var(--\\275sci-throbber-duration) * 1)}@keyframes sci-spinner-throbber{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
92
92
|
}
|
|
93
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
93
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciSpinnerThrobberComponent, decorators: [{
|
|
94
94
|
type: Component,
|
|
95
|
-
args: [{ selector: 'sci-spinner-throbber', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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: ["
|
|
95
|
+
args: [{ selector: 'sci-spinner-throbber', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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: ["@charset \"UTF-8\";:host{display:inline-flex;justify-content:center;position:relative;font-size:var(--\\275sci-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(--\\275sci-throbber-color);animation:sci-spinner-throbber var(--\\275sci-throbber-duration) linear infinite}:host>div.stroke:nth-child(1){transform:rotate(0);animation-delay:calc(var(--\\275sci-throbber-duration) * .0833333333)}:host>div.stroke:nth-child(2){transform:rotate(30deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .1666666667)}:host>div.stroke:nth-child(3){transform:rotate(60deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .25)}:host>div.stroke:nth-child(4){transform:rotate(90deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .3333333333)}:host>div.stroke:nth-child(5){transform:rotate(120deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .4166666667)}:host>div.stroke:nth-child(6){transform:rotate(150deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .5)}:host>div.stroke:nth-child(7){transform:rotate(180deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .5833333333)}:host>div.stroke:nth-child(8){transform:rotate(210deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .6666666667)}:host>div.stroke:nth-child(9){transform:rotate(240deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .75)}:host>div.stroke:nth-child(10){transform:rotate(270deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .8333333333)}:host>div.stroke:nth-child(11){transform:rotate(300deg);animation-delay:calc(var(--\\275sci-throbber-duration) * .9166666667)}:host>div.stroke:nth-child(12){transform:rotate(330deg);animation-delay:calc(var(--\\275sci-throbber-duration) * 1)}@keyframes sci-spinner-throbber{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
96
96
|
}] });
|
|
97
97
|
|
|
98
98
|
/*
|
|
@@ -109,9 +109,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
|
|
|
109
109
|
*
|
|
110
110
|
* Choose between different throbber presentations by setting the `type` property: `ellipsis`, `ripple`, `roller`, `spinner`.
|
|
111
111
|
*
|
|
112
|
-
* ###
|
|
112
|
+
* ### Styling:
|
|
113
113
|
*
|
|
114
|
-
*
|
|
114
|
+
* To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
|
|
115
|
+
* To style a specific `sci-throbber` component, the following CSS variables can be set directly on the component.
|
|
115
116
|
*
|
|
116
117
|
* - sci-throbber-color: Sets the color of the throbber (by default, uses `lightgray`).
|
|
117
118
|
* - sci-throbber-size: Defines the size of the throbber. Most throbbers are quadratic having the same width and height.
|
|
@@ -145,10 +146,10 @@ class SciThrobberComponent {
|
|
|
145
146
|
*/
|
|
146
147
|
this.type = 'spinner';
|
|
147
148
|
}
|
|
148
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
149
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
149
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: SciThrobberComponent, isStandalone: true, 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: ["@charset \"UTF-8\";:host{display:inline-grid;--\\275sci-throbber-color: var(--sci-throbber-color, lightgray);--\\275sci-throbber-size: var(--sci-throbber-size, 50px);--\\275sci-throbber-duration: var(--sci-throbber-duration, 1.25s)}\n"], dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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 }); }
|
|
150
151
|
}
|
|
151
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciThrobberComponent, decorators: [{
|
|
152
153
|
type: Component,
|
|
153
154
|
args: [{ selector: 'sci-throbber', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
154
155
|
NgSwitch,
|
|
@@ -158,7 +159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
|
|
|
158
159
|
SciRippleThrobberComponent,
|
|
159
160
|
SciRollerThrobberComponent,
|
|
160
161
|
SciSpinnerThrobberComponent,
|
|
161
|
-
], 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: ["
|
|
162
|
+
], 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: ["@charset \"UTF-8\";:host{display:inline-grid;--\\275sci-throbber-color: var(--sci-throbber-color, lightgray);--\\275sci-throbber-size: var(--sci-throbber-size, 50px);--\\275sci-throbber-duration: var(--sci-throbber-duration, 1.25s)}\n"] }]
|
|
162
163
|
}], propDecorators: { type: [{
|
|
163
164
|
type: Input
|
|
164
165
|
}] } });
|
|
@@ -176,11 +177,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
|
|
|
176
177
|
* Provides {@link SciThrobberComponent}, an animated graphical control to indicate the execution of an action.
|
|
177
178
|
*/
|
|
178
179
|
class SciThrobberModule {
|
|
179
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
180
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
181
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
180
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciThrobberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
181
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.2", ngImport: i0, type: SciThrobberModule, imports: [SciThrobberComponent], exports: [SciThrobberComponent] }); }
|
|
182
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciThrobberModule }); }
|
|
182
183
|
}
|
|
183
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: SciThrobberModule, decorators: [{
|
|
184
185
|
type: NgModule,
|
|
185
186
|
args: [{
|
|
186
187
|
imports: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scion-components-throbber.mjs","sources":["../../../../projects/scion/components/throbber/src/ellipsis-throbber/ellipsis-throbber.component.ts","../../../../projects/scion/components/throbber/src/ellipsis-throbber/ellipsis-throbber.component.html","../../../../projects/scion/components/throbber/src/ripple-throbber/ripple-throbber.component.ts","../../../../projects/scion/components/throbber/src/ripple-throbber/ripple-throbber.component.html","../../../../projects/scion/components/throbber/src/roller-throbber/roller-throbber.component.ts","../../../../projects/scion/components/throbber/src/roller-throbber/roller-throbber.component.html","../../../../projects/scion/components/throbber/src/spinner-throbber/spinner-throbber.component.ts","../../../../projects/scion/components/throbber/src/spinner-throbber/spinner-throbber.component.html","../../../../projects/scion/components/throbber/src/throbber.component.ts","../../../../projects/scion/components/throbber/src/throbber.component.html","../../../../projects/scion/components/throbber/src/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 standalone: true,\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 standalone: true,\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 standalone: true,\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 standalone: true,\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 {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';\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 * ### 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 standalone: true,\n imports: [\n NgSwitch,\n NgSwitchCase,\n NgSwitchDefault,\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 @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 {SciThrobberComponent} from './throbber.component';\n\n/**\n * Provides {@link SciThrobberComponent}, an animated graphical control to indicate the execution of an action.\n */\n@NgModule({\n imports: [\n SciThrobberComponent,\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":"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"}
|
|
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 standalone: true,\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 standalone: true,\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 standalone: true,\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 standalone: true,\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 {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';\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 standalone: true,\n imports: [\n NgSwitch,\n NgSwitchCase,\n NgSwitchDefault,\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 @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 {SciThrobberComponent} from './throbber.component';\n\n/**\n * Provides {@link SciThrobberComponent}, an animated graphical control to indicate the execution of an action.\n */\n@NgModule({\n imports: [\n SciThrobberComponent,\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":"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"}
|