@scion/components 14.0.2 → 15.0.1
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 +1 -1
- package/esm2020/dimension/dimension.directive.mjs +3 -3
- package/esm2020/dimension/dimension.module.mjs +4 -4
- package/esm2020/sashbox/element-ref.directive.mjs +3 -3
- package/esm2020/sashbox/sash-initializer.directive.mjs +3 -3
- package/esm2020/sashbox/sash.directive.mjs +3 -3
- package/esm2020/sashbox/sashbox.component.mjs +3 -3
- package/esm2020/sashbox/sashbox.module.mjs +4 -4
- package/esm2020/splitter/splitter.component.mjs +4 -4
- package/esm2020/splitter/splitter.module.mjs +4 -4
- package/esm2020/throbber/ellipsis-throbber/ellipsis-throbber.component.mjs +3 -3
- package/esm2020/throbber/ripple-throbber/ripple-throbber.component.mjs +3 -3
- package/esm2020/throbber/roller-throbber/roller-throbber.component.mjs +3 -3
- package/esm2020/throbber/spinner-throbber/spinner-throbber.component.mjs +3 -3
- package/esm2020/throbber/throbber.component.mjs +3 -3
- package/esm2020/throbber/throbber.module.mjs +4 -4
- package/esm2020/viewport/native-scrollbar-track-size-provider.service.mjs +4 -4
- package/esm2020/viewport/scrollable.directive.mjs +3 -3
- package/esm2020/viewport/scrollbar/scrollbar.component.mjs +4 -4
- package/esm2020/viewport/viewport.component.mjs +51 -25
- package/esm2020/viewport/viewport.module.mjs +4 -4
- package/fesm2015/scion-components-dimension.mjs +7 -7
- package/fesm2015/scion-components-sashbox.mjs +16 -16
- package/fesm2015/scion-components-splitter.mjs +7 -7
- package/fesm2015/scion-components-splitter.mjs.map +1 -1
- package/fesm2015/scion-components-throbber.mjs +19 -19
- package/fesm2015/scion-components-viewport.mjs +63 -37
- package/fesm2015/scion-components-viewport.mjs.map +1 -1
- package/fesm2020/scion-components-dimension.mjs +7 -7
- package/fesm2020/scion-components-sashbox.mjs +16 -16
- package/fesm2020/scion-components-splitter.mjs +7 -7
- package/fesm2020/scion-components-splitter.mjs.map +1 -1
- package/fesm2020/scion-components-throbber.mjs +19 -19
- package/fesm2020/scion-components-viewport.mjs +63 -37
- package/fesm2020/scion-components-viewport.mjs.map +1 -1
- package/package.json +5 -5
- package/sashbox/element-ref.directive.d.ts +1 -1
- 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/ellipsis-throbber/ellipsis-throbber.component.d.ts +1 -1
- package/throbber/ripple-throbber/ripple-throbber.component.d.ts +1 -1
- package/throbber/roller-throbber/roller-throbber.component.d.ts +1 -1
- package/throbber/spinner-throbber/spinner-throbber.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 +5 -7
|
@@ -19,9 +19,9 @@ import { CommonModule } from '@angular/common';
|
|
|
19
19
|
*/
|
|
20
20
|
class SciEllipsisThrobberComponent {
|
|
21
21
|
}
|
|
22
|
-
SciEllipsisThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
23
|
-
SciEllipsisThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
24
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
22
|
+
SciEllipsisThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciEllipsisThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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: [{
|
|
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
|
}] });
|
|
@@ -42,9 +42,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
42
42
|
*/
|
|
43
43
|
class SciRippleThrobberComponent {
|
|
44
44
|
}
|
|
45
|
-
SciRippleThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
46
|
-
SciRippleThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
47
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
45
|
+
SciRippleThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciRippleThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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: [{
|
|
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
|
}] });
|
|
@@ -65,9 +65,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
65
65
|
*/
|
|
66
66
|
class SciRollerThrobberComponent {
|
|
67
67
|
}
|
|
68
|
-
SciRollerThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
69
|
-
SciRollerThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
70
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
68
|
+
SciRollerThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciRollerThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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: [{
|
|
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
|
}] });
|
|
@@ -89,9 +89,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
89
89
|
*/
|
|
90
90
|
class SciSpinnerThrobberComponent {
|
|
91
91
|
}
|
|
92
|
-
SciSpinnerThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
93
|
-
SciSpinnerThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
94
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
92
|
+
SciSpinnerThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciSpinnerThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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: [{
|
|
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
|
}] });
|
|
@@ -147,9 +147,9 @@ class SciThrobberComponent {
|
|
|
147
147
|
this.type = 'spinner';
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
|
-
SciThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
151
|
-
SciThrobberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
150
|
+
SciThrobberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciThrobberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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: [{
|
|
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: [{
|
|
@@ -170,14 +170,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
170
170
|
*/
|
|
171
171
|
class SciThrobberModule {
|
|
172
172
|
}
|
|
173
|
-
SciThrobberModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
174
|
-
SciThrobberModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
173
|
+
SciThrobberModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciThrobberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
174
|
+
SciThrobberModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: SciThrobberModule, declarations: [SciThrobberComponent,
|
|
175
175
|
SciEllipsisThrobberComponent,
|
|
176
176
|
SciRippleThrobberComponent,
|
|
177
177
|
SciRollerThrobberComponent,
|
|
178
178
|
SciSpinnerThrobberComponent], imports: [CommonModule], exports: [SciThrobberComponent] });
|
|
179
|
-
SciThrobberModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
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: [{
|
|
181
181
|
type: NgModule,
|
|
182
182
|
args: [{
|
|
183
183
|
declarations: [
|
|
@@ -98,9 +98,9 @@ class SciNativeScrollbarTrackSizeProvider {
|
|
|
98
98
|
this._destroy$.next();
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
|
-
SciNativeScrollbarTrackSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
102
|
-
SciNativeScrollbarTrackSizeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
101
|
+
SciNativeScrollbarTrackSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciNativeScrollbarTrackSizeProvider, deps: [{ token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
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: [{
|
|
104
104
|
type: Injectable,
|
|
105
105
|
args: [{ providedIn: 'root' }]
|
|
106
106
|
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
@@ -407,9 +407,9 @@ class SciScrollbarComponent {
|
|
|
407
407
|
* @internal
|
|
408
408
|
*/
|
|
409
409
|
SciScrollbarComponent.VIEWPORT_RESIZE_DEBOUNCE_TIME = 50;
|
|
410
|
-
SciScrollbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
411
|
-
SciScrollbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
412
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
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: [{
|
|
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: [{
|
|
@@ -510,9 +510,9 @@ class SciScrollableDirective {
|
|
|
510
510
|
this._destroy$.next();
|
|
511
511
|
}
|
|
512
512
|
}
|
|
513
|
-
SciScrollableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
514
|
-
SciScrollableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
515
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
513
|
+
SciScrollableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciScrollableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SciNativeScrollbarTrackSizeProvider }], target: i0.ɵɵFactoryTarget.Directive });
|
|
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: [{
|
|
516
516
|
type: Directive,
|
|
517
517
|
args: [{
|
|
518
518
|
selector: '[sciScrollable]',
|
|
@@ -698,25 +698,35 @@ class SciViewportComponent {
|
|
|
698
698
|
*
|
|
699
699
|
* @param element - the element to be checked
|
|
700
700
|
* @param fit - control if the element must fully or partially fit into the viewport
|
|
701
|
-
*
|
|
702
|
-
* @throws if the element is not contained in the viewport's slotted content.
|
|
701
|
+
* @return `true` if the element is scrolled into the viewport, or `false` otherwise.
|
|
703
702
|
*/
|
|
704
703
|
isElementInView(element, fit) {
|
|
705
|
-
const elLeft = this.computeOffset(element, 'left');
|
|
706
|
-
const elRight = elLeft + coerceElement(element).offsetWidth;
|
|
707
704
|
const elTop = this.computeOffset(element, 'top');
|
|
705
|
+
if (elTop === null) {
|
|
706
|
+
return false;
|
|
707
|
+
}
|
|
708
|
+
const elLeft = this.computeOffset(element, 'left');
|
|
709
|
+
if (elLeft === null) {
|
|
710
|
+
return false;
|
|
711
|
+
}
|
|
712
|
+
// Consider elements as scrolled into view when there is no viewport overflow.
|
|
713
|
+
// The calculation of whether an element is scrolled into view may be wrong by a few pixels if the viewport contains elements with decimal sizes.
|
|
714
|
+
// This can happen because `offsetLeft` and `offsetTop` operate on an integer (not a decimal), losing precision that can accumulate.
|
|
715
|
+
// To avoid incorrect calculation when there is no viewport overflow, we consider all contained elements as scrolled into the view.
|
|
716
|
+
if (this._viewportElement.scrollWidth <= this._viewportElement.clientWidth && this._viewportElement.scrollHeight <= this._viewportElement.clientHeight) {
|
|
717
|
+
return true;
|
|
718
|
+
}
|
|
708
719
|
const elBottom = elTop + coerceElement(element).offsetHeight;
|
|
709
|
-
const
|
|
710
|
-
const vpRight = vpLeft + this._viewportElement.clientWidth;
|
|
720
|
+
const elRight = elLeft + coerceElement(element).offsetWidth;
|
|
711
721
|
const vpTop = this._viewportElement.scrollTop;
|
|
722
|
+
const vpLeft = this._viewportElement.scrollLeft;
|
|
712
723
|
const vpBottom = vpTop + this._viewportElement.clientHeight;
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
throw Error('Unsupported fit strategy');
|
|
724
|
+
const vpRight = vpLeft + this._viewportElement.clientWidth;
|
|
725
|
+
if (fit === 'full') {
|
|
726
|
+
return (elTop >= vpTop && elBottom <= vpBottom) && (elLeft >= vpLeft && elRight <= vpRight);
|
|
727
|
+
}
|
|
728
|
+
else {
|
|
729
|
+
return (elBottom >= vpTop && elTop <= vpBottom) && (elRight >= vpLeft && elLeft <= vpRight);
|
|
720
730
|
}
|
|
721
731
|
}
|
|
722
732
|
/**
|
|
@@ -724,34 +734,50 @@ class SciViewportComponent {
|
|
|
724
734
|
*
|
|
725
735
|
* @param element - the element to scroll into the viewport
|
|
726
736
|
* @param offset - the gap between the element and the viewport
|
|
727
|
-
*
|
|
728
|
-
* @throws if the element is not contained in the viewport's slotted content.
|
|
729
737
|
*/
|
|
730
738
|
scrollIntoView(element, offset = 50) {
|
|
731
|
-
|
|
732
|
-
|
|
739
|
+
const top = this.computeOffset(element, 'top');
|
|
740
|
+
if (top === null) {
|
|
741
|
+
return;
|
|
742
|
+
}
|
|
743
|
+
const left = this.computeOffset(element, 'left');
|
|
744
|
+
if (left === null) {
|
|
745
|
+
return;
|
|
746
|
+
}
|
|
747
|
+
this._viewportElement.scrollTop = top - offset;
|
|
748
|
+
this._viewportElement.scrollLeft = left - offset;
|
|
733
749
|
}
|
|
734
750
|
/**
|
|
735
751
|
* Computes the distance of the element to the viewport's left or top border.
|
|
736
752
|
*
|
|
737
|
-
* @
|
|
753
|
+
* @return distance of the element to the viewport's left or top border, or `null` if not contained
|
|
754
|
+
* in the viewport or the element or any ancestor has the `display` property set to `none`.
|
|
738
755
|
*/
|
|
739
756
|
computeOffset(element, border) {
|
|
740
757
|
let offset = 0;
|
|
741
758
|
let el = coerceElement(element);
|
|
742
759
|
do {
|
|
743
760
|
offset += (border === 'left' ? el.offsetLeft : el.offsetTop);
|
|
744
|
-
|
|
745
|
-
if (
|
|
746
|
-
|
|
761
|
+
const offsetParent = el.offsetParent;
|
|
762
|
+
if (offsetParent === null) {
|
|
763
|
+
// `offsetParent` is `null` in the following situations:
|
|
764
|
+
// - The element or any ancestor has the `display` property set to `none`
|
|
765
|
+
// - The element has the position property set to fixed (Firefox returns <body>).
|
|
766
|
+
// - The element is <body> or <html>.
|
|
767
|
+
// See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent.
|
|
768
|
+
return null;
|
|
769
|
+
}
|
|
770
|
+
if (!(offsetParent instanceof HTMLElement)) {
|
|
771
|
+
return null;
|
|
747
772
|
}
|
|
773
|
+
el = offsetParent;
|
|
748
774
|
} while (el !== this.host.nativeElement);
|
|
749
775
|
return offset;
|
|
750
776
|
}
|
|
751
777
|
}
|
|
752
|
-
SciViewportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
753
|
-
SciViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
754
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
778
|
+
SciViewportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciViewportComponent, deps: [{ token: i0.ElementRef }, { token: SciNativeScrollbarTrackSizeProvider }], target: i0.ɵɵFactoryTarget.Component });
|
|
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\"></sci-scrollbar>\n <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\"></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: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: [{
|
|
755
781
|
type: Component,
|
|
756
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\"></sci-scrollbar>\n <sci-scrollbar [direction]=\"'hscroll'\" [viewport]=\"viewport\"></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: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"] }]
|
|
757
783
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SciNativeScrollbarTrackSizeProvider }]; }, propDecorators: { setViewport: [{
|
|
@@ -783,16 +809,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
783
809
|
*/
|
|
784
810
|
class SciViewportModule {
|
|
785
811
|
}
|
|
786
|
-
SciViewportModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
787
|
-
SciViewportModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
812
|
+
SciViewportModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciViewportModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
813
|
+
SciViewportModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: SciViewportModule, declarations: [SciViewportComponent,
|
|
788
814
|
SciScrollbarComponent,
|
|
789
815
|
SciScrollableDirective], imports: [CommonModule,
|
|
790
816
|
ScrollingModule], exports: [SciViewportComponent,
|
|
791
817
|
SciScrollbarComponent,
|
|
792
818
|
SciScrollableDirective] });
|
|
793
|
-
SciViewportModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
819
|
+
SciViewportModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciViewportModule, imports: [CommonModule,
|
|
794
820
|
ScrollingModule] });
|
|
795
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
821
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciViewportModule, decorators: [{
|
|
796
822
|
type: NgModule,
|
|
797
823
|
args: [{
|
|
798
824
|
imports: [
|