@scion/components 15.0.2 → 16.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/dimension/dimension.directive.d.ts +2 -2
- package/esm2022/dimension/dimension.directive.mjs +84 -0
- package/esm2022/dimension/dimension.module.mjs +39 -0
- package/esm2022/sashbox/element-ref.directive.mjs +28 -0
- package/esm2022/sashbox/sash-initializer.directive.mjs +33 -0
- package/esm2022/sashbox/sash.directive.mjs +145 -0
- package/esm2022/sashbox/sashbox.component.mjs +279 -0
- package/esm2022/sashbox/sashbox.module.mjs +70 -0
- package/esm2022/splitter/splitter.component.mjs +228 -0
- package/esm2022/splitter/splitter.module.mjs +43 -0
- package/esm2022/throbber/ellipsis-throbber/ellipsis-throbber.component.mjs +26 -0
- package/esm2022/throbber/ripple-throbber/ripple-throbber.component.mjs +26 -0
- package/esm2022/throbber/roller-throbber/roller-throbber.component.mjs +26 -0
- package/esm2022/throbber/spinner-throbber/spinner-throbber.component.mjs +27 -0
- package/esm2022/throbber/throbber.component.mjs +68 -0
- package/esm2022/throbber/throbber.module.mjs +49 -0
- package/esm2022/viewport/native-scrollbar-track-size-provider.service.mjs +115 -0
- package/esm2022/viewport/scrollable.directive.mjs +94 -0
- package/esm2022/viewport/scrollbar/scrollbar.component.mjs +323 -0
- package/esm2022/viewport/viewport.component.mjs +282 -0
- package/esm2022/viewport/viewport.module.mjs +51 -0
- package/{fesm2015 → fesm2022}/scion-components-dimension.mjs +12 -7
- package/{fesm2015 → fesm2022}/scion-components-dimension.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/scion-components-sashbox.mjs +47 -42
- package/{fesm2020 → fesm2022}/scion-components-sashbox.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/scion-components-splitter.mjs +22 -17
- package/{fesm2020 → fesm2022}/scion-components-splitter.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/scion-components-throbber.mjs +28 -23
- package/{fesm2015 → fesm2022}/scion-components-throbber.mjs.map +1 -1
- package/{fesm2020 → fesm2022}/scion-components-viewport.mjs +65 -60
- package/{fesm2015 → fesm2022}/scion-components-viewport.mjs.map +1 -1
- package/package.json +27 -43
- package/sashbox/sash-initializer.directive.d.ts +1 -1
- package/sashbox/sash.directive.d.ts +1 -1
- package/sashbox/sashbox.component.d.ts +1 -1
- package/splitter/splitter.component.d.ts +1 -1
- package/throbber/throbber.component.d.ts +1 -1
- package/viewport/scrollable.directive.d.ts +1 -1
- package/viewport/scrollbar/scrollbar.component.d.ts +1 -1
- package/viewport/viewport.component.d.ts +2 -2
- package/esm2020/dimension/dimension.directive.mjs +0 -83
- package/esm2020/dimension/dimension.module.mjs +0 -38
- package/esm2020/sashbox/element-ref.directive.mjs +0 -27
- package/esm2020/sashbox/sash-initializer.directive.mjs +0 -32
- package/esm2020/sashbox/sash.directive.mjs +0 -144
- package/esm2020/sashbox/sashbox.component.mjs +0 -278
- package/esm2020/sashbox/sashbox.module.mjs +0 -69
- package/esm2020/splitter/splitter.component.mjs +0 -227
- package/esm2020/splitter/splitter.module.mjs +0 -42
- package/esm2020/throbber/ellipsis-throbber/ellipsis-throbber.component.mjs +0 -25
- package/esm2020/throbber/ripple-throbber/ripple-throbber.component.mjs +0 -25
- package/esm2020/throbber/roller-throbber/roller-throbber.component.mjs +0 -25
- package/esm2020/throbber/spinner-throbber/spinner-throbber.component.mjs +0 -26
- package/esm2020/throbber/throbber.component.mjs +0 -67
- package/esm2020/throbber/throbber.module.mjs +0 -48
- package/esm2020/viewport/native-scrollbar-track-size-provider.service.mjs +0 -114
- package/esm2020/viewport/scrollable.directive.mjs +0 -93
- package/esm2020/viewport/scrollbar/scrollbar.component.mjs +0 -322
- package/esm2020/viewport/viewport.component.mjs +0 -281
- package/esm2020/viewport/viewport.module.mjs +0 -50
- package/fesm2015/scion-components-sashbox.mjs +0 -554
- package/fesm2015/scion-components-sashbox.mjs.map +0 -1
- package/fesm2015/scion-components-splitter.mjs +0 -284
- package/fesm2015/scion-components-splitter.mjs.map +0 -1
- package/fesm2015/scion-components-throbber.mjs +0 -214
- package/fesm2015/scion-components-viewport.mjs +0 -861
- package/fesm2015/scion-components.mjs +0 -4
- package/fesm2015/scion-components.mjs.map +0 -1
- package/fesm2020/scion-components-dimension.mjs +0 -135
- package/fesm2020/scion-components-dimension.mjs.map +0 -1
- package/fesm2020/scion-components-throbber.mjs.map +0 -1
- package/fesm2020/scion-components-viewport.mjs.map +0 -1
- /package/{esm2020 → esm2022}/dimension/public_api.mjs +0 -0
- /package/{esm2020 → esm2022}/dimension/scion-components-dimension.mjs +0 -0
- /package/{esm2020 → esm2022}/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/sashbox/public_api.mjs +0 -0
- /package/{esm2020 → esm2022}/sashbox/sashbox-accessor.mjs +0 -0
- /package/{esm2020 → esm2022}/sashbox/scion-components-sashbox.mjs +0 -0
- /package/{esm2020 → esm2022}/scion-components.mjs +0 -0
- /package/{esm2020 → esm2022}/splitter/public_api.mjs +0 -0
- /package/{esm2020 → esm2022}/splitter/scion-components-splitter.mjs +0 -0
- /package/{esm2020 → esm2022}/throbber/public_api.mjs +0 -0
- /package/{esm2020 → esm2022}/throbber/scion-components-throbber.mjs +0 -0
- /package/{esm2020 → esm2022}/viewport/public_api.mjs +0 -0
- /package/{esm2020 → esm2022}/viewport/scion-components-viewport.mjs +0 -0
- /package/{fesm2020 → fesm2022}/scion-components.mjs +0 -0
- /package/{fesm2020 → fesm2022}/scion-components.mjs.map +0 -0
|
@@ -18,10 +18,10 @@ import { CommonModule } from '@angular/common';
|
|
|
18
18
|
* Throbber type: `ellipsis`
|
|
19
19
|
*/
|
|
20
20
|
class SciEllipsisThrobberComponent {
|
|
21
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciEllipsisThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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 }); }
|
|
21
23
|
}
|
|
22
|
-
|
|
23
|
-
SciEllipsisThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", 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 });
|
|
24
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciEllipsisThrobberComponent, decorators: [{
|
|
24
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciEllipsisThrobberComponent, decorators: [{
|
|
25
25
|
type: Component,
|
|
26
26
|
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"] }]
|
|
27
27
|
}] });
|
|
@@ -41,10 +41,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
|
|
|
41
41
|
* Throbber type: `ripple`
|
|
42
42
|
*/
|
|
43
43
|
class SciRippleThrobberComponent {
|
|
44
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciRippleThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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 }); }
|
|
44
46
|
}
|
|
45
|
-
|
|
46
|
-
SciRippleThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", 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 });
|
|
47
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciRippleThrobberComponent, decorators: [{
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciRippleThrobberComponent, decorators: [{
|
|
48
48
|
type: Component,
|
|
49
49
|
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"] }]
|
|
50
50
|
}] });
|
|
@@ -64,10 +64,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
|
|
|
64
64
|
* Throbber type: `roller`
|
|
65
65
|
*/
|
|
66
66
|
class SciRollerThrobberComponent {
|
|
67
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciRollerThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
68
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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 }); }
|
|
67
69
|
}
|
|
68
|
-
|
|
69
|
-
SciRollerThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", 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 });
|
|
70
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciRollerThrobberComponent, decorators: [{
|
|
70
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciRollerThrobberComponent, decorators: [{
|
|
71
71
|
type: Component,
|
|
72
72
|
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"] }]
|
|
73
73
|
}] });
|
|
@@ -88,10 +88,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
|
|
|
88
88
|
* Throbber type: `spinner`
|
|
89
89
|
*/
|
|
90
90
|
class SciSpinnerThrobberComponent {
|
|
91
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciSpinnerThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
92
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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 }); }
|
|
91
93
|
}
|
|
92
|
-
|
|
93
|
-
SciSpinnerThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", 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 });
|
|
94
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciSpinnerThrobberComponent, decorators: [{
|
|
94
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciSpinnerThrobberComponent, decorators: [{
|
|
95
95
|
type: Component,
|
|
96
96
|
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"] }]
|
|
97
97
|
}] });
|
|
@@ -146,10 +146,10 @@ class SciThrobberComponent {
|
|
|
146
146
|
*/
|
|
147
147
|
this.type = 'spinner';
|
|
148
148
|
}
|
|
149
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.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 }); }
|
|
149
151
|
}
|
|
150
|
-
|
|
151
|
-
SciThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", 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"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.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 });
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciThrobberComponent, decorators: [{
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciThrobberComponent, decorators: [{
|
|
153
153
|
type: Component,
|
|
154
154
|
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"] }]
|
|
155
155
|
}], propDecorators: { type: [{
|
|
@@ -169,15 +169,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
|
|
|
169
169
|
* Provides {@link SciThrobberComponent}, an animated graphical control to indicate the execution of an action.
|
|
170
170
|
*/
|
|
171
171
|
class SciThrobberModule {
|
|
172
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciThrobberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
173
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: SciThrobberModule, declarations: [SciThrobberComponent,
|
|
174
|
+
SciEllipsisThrobberComponent,
|
|
175
|
+
SciRippleThrobberComponent,
|
|
176
|
+
SciRollerThrobberComponent,
|
|
177
|
+
SciSpinnerThrobberComponent], imports: [CommonModule], exports: [SciThrobberComponent] }); }
|
|
178
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciThrobberModule, imports: [CommonModule] }); }
|
|
172
179
|
}
|
|
173
|
-
|
|
174
|
-
SciThrobberModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: SciThrobberModule, declarations: [SciThrobberComponent,
|
|
175
|
-
SciEllipsisThrobberComponent,
|
|
176
|
-
SciRippleThrobberComponent,
|
|
177
|
-
SciRollerThrobberComponent,
|
|
178
|
-
SciSpinnerThrobberComponent], imports: [CommonModule], exports: [SciThrobberComponent] });
|
|
179
|
-
SciThrobberModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciThrobberModule, imports: [CommonModule] });
|
|
180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciThrobberModule, decorators: [{
|
|
180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciThrobberModule, decorators: [{
|
|
181
181
|
type: NgModule,
|
|
182
182
|
args: [{
|
|
183
183
|
declarations: [
|
|
@@ -205,6 +205,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
|
|
|
205
205
|
*
|
|
206
206
|
* SPDX-License-Identifier: EPL-2.0
|
|
207
207
|
*/
|
|
208
|
+
/*
|
|
209
|
+
* Secondary entrypoint: '@scion/components/throbber'
|
|
210
|
+
*
|
|
211
|
+
* @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md
|
|
212
|
+
*/
|
|
208
213
|
|
|
209
214
|
/**
|
|
210
215
|
* Generated bundle index. Do not edit.
|
|
@@ -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})\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":["i2.SciEllipsisThrobberComponent","i3.SciRippleThrobberComponent","i4.SciRollerThrobberComponent","i5.SciSpinnerThrobberComponent"],"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})\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":["i2.SciEllipsisThrobberComponent","i3.SciRippleThrobberComponent","i4.SciRollerThrobberComponent","i5.SciSpinnerThrobberComponent"],"mappings":"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"}
|
|
@@ -97,10 +97,10 @@ class SciNativeScrollbarTrackSizeProvider {
|
|
|
97
97
|
ngOnDestroy() {
|
|
98
98
|
this._destroy$.next();
|
|
99
99
|
}
|
|
100
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, deps: [{ token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
101
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, providedIn: 'root' }); }
|
|
100
102
|
}
|
|
101
|
-
|
|
102
|
-
SciNativeScrollbarTrackSizeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, providedIn: 'root' });
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, decorators: [{
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, decorators: [{
|
|
104
104
|
type: Injectable,
|
|
105
105
|
args: [{ providedIn: 'root' }]
|
|
106
106
|
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
@@ -152,6 +152,32 @@ function setStyle(element, style) {
|
|
|
152
152
|
* ```
|
|
153
153
|
*/
|
|
154
154
|
class SciScrollbarComponent {
|
|
155
|
+
/**
|
|
156
|
+
* Timeout for debouncing viewport resize events that trigger the scroll position computation.
|
|
157
|
+
*
|
|
158
|
+
* Debouncing is particularly important in the context of Angular animations, since they continuously
|
|
159
|
+
* trigger resize events. Debouncing prevents the scrollbar from flickering, for example, when the user
|
|
160
|
+
* expands a panel that contains a viewport.
|
|
161
|
+
*
|
|
162
|
+
* @internal
|
|
163
|
+
*/
|
|
164
|
+
static { this.VIEWPORT_RESIZE_DEBOUNCE_TIME = 50; }
|
|
165
|
+
get vertical() {
|
|
166
|
+
return this.direction === 'vscroll';
|
|
167
|
+
}
|
|
168
|
+
get horizontal() {
|
|
169
|
+
return this.direction === 'hscroll';
|
|
170
|
+
}
|
|
171
|
+
get scrolling() {
|
|
172
|
+
return this._lastDragPosition !== null;
|
|
173
|
+
}
|
|
174
|
+
/**
|
|
175
|
+
* The viewport to provide scrollbars for.
|
|
176
|
+
*/
|
|
177
|
+
set setViewport(viewport) {
|
|
178
|
+
this._viewport = viewport;
|
|
179
|
+
this._viewportChange$.next();
|
|
180
|
+
}
|
|
155
181
|
constructor(_host, _document, _zone) {
|
|
156
182
|
this._host = _host;
|
|
157
183
|
this._document = _document;
|
|
@@ -184,22 +210,6 @@ class SciScrollbarComponent {
|
|
|
184
210
|
}
|
|
185
211
|
});
|
|
186
212
|
}
|
|
187
|
-
get vertical() {
|
|
188
|
-
return this.direction === 'vscroll';
|
|
189
|
-
}
|
|
190
|
-
get horizontal() {
|
|
191
|
-
return this.direction === 'hscroll';
|
|
192
|
-
}
|
|
193
|
-
get scrolling() {
|
|
194
|
-
return this._lastDragPosition !== null;
|
|
195
|
-
}
|
|
196
|
-
/**
|
|
197
|
-
* The viewport to provide scrollbars for.
|
|
198
|
-
*/
|
|
199
|
-
set setViewport(viewport) {
|
|
200
|
-
this._viewport = viewport;
|
|
201
|
-
this._viewportChange$.next();
|
|
202
|
-
}
|
|
203
213
|
/**
|
|
204
214
|
* Computes the scroll position and updates CSS variables to render the scroll position in the UI.
|
|
205
215
|
*/
|
|
@@ -396,20 +406,10 @@ class SciScrollbarComponent {
|
|
|
396
406
|
ngOnDestroy() {
|
|
397
407
|
this._destroy$.next();
|
|
398
408
|
}
|
|
409
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciScrollbarComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
410
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: { direction: "direction", setViewport: ["viewport", "setViewport"] }, host: { properties: { "class.vertical": "this.vertical", "class.horizontal": "this.horizontal", "class.scrolling": "this.scrolling" } }, viewQueries: [{ propertyName: "thumbElement", first: true, predicate: ["thumb_handle"], descendants: true, static: true }], ngImport: i0, template: "<!-- scrolltrack to move the viewport client upwards (paging) -->\n<div class=\"scrolltrack-start\" (mousedown)=\"onScrollTrackMouseDown($event, 'up')\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n class=\"thumb-handle\"\n [class.vertical]=\"vertical\"\n [class.horizontal]=\"horizontal\"\n (mousedown)=\"onMouseDown($event)\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n (touchcancel)=\"onTouchEnd($event)\">\n <div class=\"thumb\"\n [class.vertical]=\"vertical\"\n [class.horizontal]=\"horizontal\">\n </div>\n</div>\n\n<!-- scrolltrack to move the viewport client downwards (paging) -->\n<div class=\"scrolltrack-end\" (mousedown)=\"onScrollTrackMouseDown($event, 'down')\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;border:2px solid transparent;box-sizing:border-box;--sci-scrollbar-color: rgb(78, 78, 78);--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host>div.scrolltrack-start{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host>div.thumb-handle{flex-basis:20px;display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column}:host>div.thumb-handle.horizontal{flex-direction:row}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack-end{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}:host-context:not(.overflow){display:none}:host-context:hover>div.thumb-handle>div.thumb,:host-context(.scrolling)>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host-context:hover>div.thumb-handle>div.thumb.vertical,:host-context(.scrolling)>div.thumb-handle>div.thumb.vertical{width:100%}:host-context:hover>div.thumb-handle>div.thumb.horizontal,:host-context(.scrolling)>div.thumb-handle>div.thumb.horizontal{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
399
411
|
}
|
|
400
|
-
|
|
401
|
-
* Timeout for debouncing viewport resize events that trigger the scroll position computation.
|
|
402
|
-
*
|
|
403
|
-
* Debouncing is particularly important in the context of Angular animations, since they continuously
|
|
404
|
-
* trigger resize events. Debouncing prevents the scrollbar from flickering, for example, when the user
|
|
405
|
-
* expands a panel that contains a viewport.
|
|
406
|
-
*
|
|
407
|
-
* @internal
|
|
408
|
-
*/
|
|
409
|
-
SciScrollbarComponent.VIEWPORT_RESIZE_DEBOUNCE_TIME = 50;
|
|
410
|
-
SciScrollbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciScrollbarComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
411
|
-
SciScrollbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: { direction: "direction", setViewport: ["viewport", "setViewport"] }, host: { properties: { "class.vertical": "this.vertical", "class.horizontal": "this.horizontal", "class.scrolling": "this.scrolling" } }, viewQueries: [{ propertyName: "thumbElement", first: true, predicate: ["thumb_handle"], descendants: true, static: true }], ngImport: i0, template: "<!-- scrolltrack to move the viewport client upwards (paging) -->\n<div class=\"scrolltrack-start\" (mousedown)=\"onScrollTrackMouseDown($event, 'up')\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n class=\"thumb-handle\"\n [class.vertical]=\"vertical\"\n [class.horizontal]=\"horizontal\"\n (mousedown)=\"onMouseDown($event)\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n (touchcancel)=\"onTouchEnd($event)\">\n <div class=\"thumb\"\n [class.vertical]=\"vertical\"\n [class.horizontal]=\"horizontal\">\n </div>\n</div>\n\n<!-- scrolltrack to move the viewport client downwards (paging) -->\n<div class=\"scrolltrack-end\" (mousedown)=\"onScrollTrackMouseDown($event, 'down')\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;border:2px solid transparent;box-sizing:border-box;--sci-scrollbar-color: rgb(78, 78, 78);--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host>div.scrolltrack-start{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host>div.thumb-handle{flex-basis:20px;display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column}:host>div.thumb-handle.horizontal{flex-direction:row}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack-end{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}:host-context:not(.overflow){display:none}:host-context:hover>div.thumb-handle>div.thumb,:host-context(.scrolling)>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host-context:hover>div.thumb-handle>div.thumb.vertical,:host-context(.scrolling)>div.thumb-handle>div.thumb.vertical{width:100%}:host-context:hover>div.thumb-handle>div.thumb.horizontal,:host-context(.scrolling)>div.thumb-handle>div.thumb.horizontal{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
412
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciScrollbarComponent, decorators: [{
|
|
412
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciScrollbarComponent, decorators: [{
|
|
413
413
|
type: Component,
|
|
414
414
|
args: [{ selector: 'sci-scrollbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- scrolltrack to move the viewport client upwards (paging) -->\n<div class=\"scrolltrack-start\" (mousedown)=\"onScrollTrackMouseDown($event, 'up')\"></div>\n\n<!-- scrollthumb -->\n<div #thumb_handle\n class=\"thumb-handle\"\n [class.vertical]=\"vertical\"\n [class.horizontal]=\"horizontal\"\n (mousedown)=\"onMouseDown($event)\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n (touchcancel)=\"onTouchEnd($event)\">\n <div class=\"thumb\"\n [class.vertical]=\"vertical\"\n [class.horizontal]=\"horizontal\">\n </div>\n</div>\n\n<!-- scrolltrack to move the viewport client downwards (paging) -->\n<div class=\"scrolltrack-end\" (mousedown)=\"onScrollTrackMouseDown($event, 'down')\"></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;border:2px solid transparent;box-sizing:border-box;--sci-scrollbar-color: rgb(78, 78, 78);--\\275sci-scrollbar-thumb-position-fr: 0;--\\275sci-scrollbar-thumb-size-fr: 0}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host>div.scrolltrack-start{flex-grow:var(--\\275sci-scrollbar-thumb-position-fr)}:host>div.thumb-handle{flex-basis:20px;display:flex;flex-grow:var(--\\275sci-scrollbar-thumb-size-fr);align-items:center}:host>div.thumb-handle.vertical{flex-direction:column}:host>div.thumb-handle.horizontal{flex-direction:row}:host>div.thumb-handle>div.thumb{flex:auto;border-radius:4px;background-color:var(--sci-scrollbar-color);opacity:.4;transition-duration:125ms;transition-property:width,height;transition-timing-function:ease-out}:host>div.thumb-handle>div.thumb.vertical{width:60%}:host>div.thumb-handle>div.thumb.horizontal{height:60%}:host>div.scrolltrack-end{flex-grow:calc(1 - (var(--\\275sci-scrollbar-thumb-position-fr) + var(--\\275sci-scrollbar-thumb-size-fr)))}:host-context:not(.overflow){display:none}:host-context:hover>div.thumb-handle>div.thumb,:host-context(.scrolling)>div.thumb-handle>div.thumb{background-color:var(--sci-scrollbar-color);opacity:.75}:host-context:hover>div.thumb-handle>div.thumb.vertical,:host-context(.scrolling)>div.thumb-handle>div.thumb.vertical{width:100%}:host-context:hover>div.thumb-handle>div.thumb.horizontal,:host-context(.scrolling)>div.thumb-handle>div.thumb.horizontal{height:100%}\n"] }]
|
|
415
415
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
@@ -509,10 +509,10 @@ class SciScrollableDirective {
|
|
|
509
509
|
ngOnDestroy() {
|
|
510
510
|
this._destroy$.next();
|
|
511
511
|
}
|
|
512
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciScrollableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SciNativeScrollbarTrackSizeProvider }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
513
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.1", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: { isDisplayNativeScrollbar: ["sciScrollableDisplayNativeScrollbar", "isDisplayNativeScrollbar"] }, usesOnChanges: true, ngImport: i0 }); }
|
|
512
514
|
}
|
|
513
|
-
|
|
514
|
-
SciScrollableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.2", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: { isDisplayNativeScrollbar: ["sciScrollableDisplayNativeScrollbar", "isDisplayNativeScrollbar"] }, usesOnChanges: true, ngImport: i0 });
|
|
515
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciScrollableDirective, decorators: [{
|
|
515
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciScrollableDirective, decorators: [{
|
|
516
516
|
type: Directive,
|
|
517
517
|
args: [{
|
|
518
518
|
selector: '[sciScrollable]',
|
|
@@ -598,17 +598,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
|
|
|
598
598
|
* ```
|
|
599
599
|
*/
|
|
600
600
|
class SciViewportComponent {
|
|
601
|
-
constructor(host, nativeScrollbarTrackSizeProvider) {
|
|
602
|
-
this.host = host;
|
|
603
|
-
this.nativeScrollbarTrackSizeProvider = nativeScrollbarTrackSizeProvider;
|
|
604
|
-
this._scrollbarStyle = 'on-top';
|
|
605
|
-
/**
|
|
606
|
-
* Emits upon a scroll event.
|
|
607
|
-
*
|
|
608
|
-
* You can add [sciDimension] directive to the viewport or viewport client to be notified about layout changes.
|
|
609
|
-
*/
|
|
610
|
-
this.scroll = new EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native
|
|
611
|
-
}
|
|
612
601
|
/** @internal */
|
|
613
602
|
set setViewport(viewport) {
|
|
614
603
|
this._viewportElement = coerceElement(viewport);
|
|
@@ -627,6 +616,17 @@ class SciViewportComponent {
|
|
|
627
616
|
get scrollbarStyle() {
|
|
628
617
|
return this._scrollbarStyle;
|
|
629
618
|
}
|
|
619
|
+
constructor(host, nativeScrollbarTrackSizeProvider) {
|
|
620
|
+
this.host = host;
|
|
621
|
+
this.nativeScrollbarTrackSizeProvider = nativeScrollbarTrackSizeProvider;
|
|
622
|
+
this._scrollbarStyle = 'on-top';
|
|
623
|
+
/**
|
|
624
|
+
* Emits upon a scroll event.
|
|
625
|
+
*
|
|
626
|
+
* You can add [sciDimension] directive to the viewport or viewport client to be notified about layout changes.
|
|
627
|
+
*/
|
|
628
|
+
this.scroll = new EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native
|
|
629
|
+
}
|
|
630
630
|
focus() {
|
|
631
631
|
this._viewportElement?.focus();
|
|
632
632
|
}
|
|
@@ -774,12 +774,12 @@ class SciViewportComponent {
|
|
|
774
774
|
} while (el !== this.host.nativeElement);
|
|
775
775
|
return offset;
|
|
776
776
|
}
|
|
777
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciViewportComponent, deps: [{ token: i0.ElementRef }, { token: SciNativeScrollbarTrackSizeProvider }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
778
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: SciViewportComponent, selector: "sci-viewport", inputs: { scrollbarStyle: "scrollbarStyle" }, outputs: { scroll: "scroll" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "setViewport", first: true, predicate: ["viewport"], descendants: true, static: true }, { propertyName: "setViewportClient", first: true, predicate: ["viewport_client"], descendants: true, static: true }], ngImport: i0, template: "<!-- viewport and viewport client -->\n<div #viewport\n class=\"viewport\"\n tabindex=\"-1\"\n sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle === 'native'\"\n cdkScrollable\n (scroll)=\"onScroll($event)\">\n <div #viewport_client class=\"viewport-client\" part=\"content\">\n <slot></slot>\n </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n<ng-container *ngIf=\"scrollbarStyle === 'on-top' && (nativeScrollbarTrackSizeProvider.trackSize$ | async) !== null\">\n <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\" class=\"e2e-vertical\"></sci-scrollbar>\n <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"></sci-scrollbar>\n</ng-container>\n", styles: [":host{--sci-viewport-scrollbar-color: rgb(78, 78, 78);display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}:host:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out}:host>sci-scrollbar.vertical{top:0;right:0;bottom:0;left:unset;width:12px}:host>sci-scrollbar.horizontal{top:unset;right:0;bottom:0;left:0;height:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }, { kind: "directive", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: ["sciScrollableDisplayNativeScrollbar"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
|
|
777
779
|
}
|
|
778
|
-
|
|
779
|
-
SciViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: SciViewportComponent, selector: "sci-viewport", inputs: { scrollbarStyle: "scrollbarStyle" }, outputs: { scroll: "scroll" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "setViewport", first: true, predicate: ["viewport"], descendants: true, static: true }, { propertyName: "setViewportClient", first: true, predicate: ["viewport_client"], descendants: true, static: true }], ngImport: i0, template: "<!-- viewport and viewport client -->\n<div #viewport\n class=\"viewport\"\n tabindex=\"-1\"\n sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle === 'native'\"\n cdkScrollable\n (scroll)=\"onScroll($event)\">\n <div #viewport_client class=\"viewport-client\" part=\"content\">\n <slot></slot>\n </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n<ng-container *ngIf=\"scrollbarStyle === 'on-top' && (nativeScrollbarTrackSizeProvider.trackSize$ | async) !== null\">\n <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\" class=\"e2e-vertical\"></sci-scrollbar>\n <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"></sci-scrollbar>\n</ng-container>\n", styles: [":host{--sci-viewport-content-grid-template-columns: auto;--sci-viewport-content-grid-template-rows: unset;--sci-viewport-content-grid-auto-columns: unset;--sci-viewport-content-grid-auto-rows: auto;--sci-viewport-content-grid-gap: 0 0;--sci-viewport-scrollbar-color: rgb(78, 78, 78);display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}:host:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid;grid-template-columns:var(--sci-viewport-content-grid-template-columns);grid-template-rows:var(--sci-viewport-content-grid-template-rows);grid-auto-rows:var(--sci-viewport-content-grid-auto-rows);grid-auto-columns:var(--sci-viewport-content-grid-auto-columns);gap:var(--sci-viewport-content-grid-gap)}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out}:host>sci-scrollbar.vertical{top:0;right:0;bottom:0;left:unset;width:12px}:host>sci-scrollbar.horizontal{top:unset;right:0;bottom:0;left:0;height:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }, { kind: "directive", type: SciScrollableDirective, selector: "[sciScrollable]", inputs: ["sciScrollableDisplayNativeScrollbar"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
780
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciViewportComponent, decorators: [{
|
|
780
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciViewportComponent, decorators: [{
|
|
781
781
|
type: Component,
|
|
782
|
-
args: [{ selector: 'sci-viewport', encapsulation: ViewEncapsulation.ShadowDom, template: "<!-- viewport and viewport client -->\n<div #viewport\n class=\"viewport\"\n tabindex=\"-1\"\n sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle === 'native'\"\n cdkScrollable\n (scroll)=\"onScroll($event)\">\n <div #viewport_client class=\"viewport-client\" part=\"content\">\n <slot></slot>\n </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n<ng-container *ngIf=\"scrollbarStyle === 'on-top' && (nativeScrollbarTrackSizeProvider.trackSize$ | async) !== null\">\n <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\" class=\"e2e-vertical\"></sci-scrollbar>\n <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"></sci-scrollbar>\n</ng-container>\n", styles: [":host{--sci-viewport-
|
|
782
|
+
args: [{ selector: 'sci-viewport', encapsulation: ViewEncapsulation.ShadowDom, template: "<!-- viewport and viewport client -->\n<div #viewport\n class=\"viewport\"\n tabindex=\"-1\"\n sciScrollable [sciScrollableDisplayNativeScrollbar]=\"scrollbarStyle === 'native'\"\n cdkScrollable\n (scroll)=\"onScroll($event)\">\n <div #viewport_client class=\"viewport-client\" part=\"content\">\n <slot></slot>\n </div>\n</div>\n\n<!-- render emulated scrollbars which sit on-top -->\n<ng-container *ngIf=\"scrollbarStyle === 'on-top' && (nativeScrollbarTrackSizeProvider.trackSize$ | async) !== null\">\n <sci-scrollbar [direction]=\"'vscroll'\" [viewport]=\"viewport\" class=\"e2e-vertical\"></sci-scrollbar>\n <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\" class=\"e2e-horizontal\"></sci-scrollbar>\n</ng-container>\n", styles: [":host{--sci-viewport-scrollbar-color: rgb(78, 78, 78);display:grid;grid-template-columns:100%;grid-template-rows:100%;position:relative;overflow:hidden;outline:none}:host:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling){opacity:0}:host>div.viewport{display:grid;position:relative;outline:none;-webkit-overflow-scrolling:touch}:host>div.viewport>div.viewport-client{display:grid}:host>sci-scrollbar{--sci-scrollbar-color: var(--sci-viewport-scrollbar-color);position:absolute;transition-duration:1s;transition-property:opacity;transition-timing-function:ease-out}:host>sci-scrollbar.vertical{top:0;right:0;bottom:0;left:unset;width:12px}:host>sci-scrollbar.horizontal{top:unset;right:0;bottom:0;left:0;height:12px}\n"] }]
|
|
783
783
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SciNativeScrollbarTrackSizeProvider }]; }, propDecorators: { setViewport: [{
|
|
784
784
|
type: ViewChild,
|
|
785
785
|
args: ['viewport', { static: true }]
|
|
@@ -808,17 +808,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
|
|
|
808
808
|
* Provides a viewport component with scrollbars that sit on top of the viewport client.
|
|
809
809
|
*/
|
|
810
810
|
class SciViewportModule {
|
|
811
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciViewportModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
812
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: SciViewportModule, declarations: [SciViewportComponent,
|
|
813
|
+
SciScrollbarComponent,
|
|
814
|
+
SciScrollableDirective], imports: [CommonModule,
|
|
815
|
+
ScrollingModule], exports: [SciViewportComponent,
|
|
816
|
+
SciScrollbarComponent,
|
|
817
|
+
SciScrollableDirective] }); }
|
|
818
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciViewportModule, imports: [CommonModule,
|
|
819
|
+
ScrollingModule] }); }
|
|
811
820
|
}
|
|
812
|
-
|
|
813
|
-
SciViewportModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: SciViewportModule, declarations: [SciViewportComponent,
|
|
814
|
-
SciScrollbarComponent,
|
|
815
|
-
SciScrollableDirective], imports: [CommonModule,
|
|
816
|
-
ScrollingModule], exports: [SciViewportComponent,
|
|
817
|
-
SciScrollbarComponent,
|
|
818
|
-
SciScrollableDirective] });
|
|
819
|
-
SciViewportModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciViewportModule, imports: [CommonModule,
|
|
820
|
-
ScrollingModule] });
|
|
821
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciViewportModule, decorators: [{
|
|
821
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SciViewportModule, decorators: [{
|
|
822
822
|
type: NgModule,
|
|
823
823
|
args: [{
|
|
824
824
|
imports: [
|
|
@@ -847,6 +847,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
|
|
|
847
847
|
*
|
|
848
848
|
* SPDX-License-Identifier: EPL-2.0
|
|
849
849
|
*/
|
|
850
|
+
/*
|
|
851
|
+
* Secondary entrypoint: '@scion/components/viewport'
|
|
852
|
+
*
|
|
853
|
+
* @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md
|
|
854
|
+
*/
|
|
850
855
|
|
|
851
856
|
/**
|
|
852
857
|
* Generated bundle index. Do not edit.
|