@scion/components 14.0.1 → 15.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 +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 +32 -38
- 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 +45 -50
- 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 +44 -50
- 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 +11 -5
|
@@ -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]',
|
|
@@ -611,7 +611,7 @@ class SciViewportComponent {
|
|
|
611
611
|
}
|
|
612
612
|
/** @internal */
|
|
613
613
|
set setViewport(viewport) {
|
|
614
|
-
this.
|
|
614
|
+
this._viewportElement = coerceElement(viewport);
|
|
615
615
|
}
|
|
616
616
|
/** @internal */
|
|
617
617
|
set setViewportClient(viewportClient) {
|
|
@@ -628,7 +628,7 @@ class SciViewportComponent {
|
|
|
628
628
|
return this._scrollbarStyle;
|
|
629
629
|
}
|
|
630
630
|
focus() {
|
|
631
|
-
this.
|
|
631
|
+
this._viewportElement?.focus();
|
|
632
632
|
}
|
|
633
633
|
onScroll(event) {
|
|
634
634
|
this.scroll.emit(event);
|
|
@@ -639,7 +639,7 @@ class SciViewportComponent {
|
|
|
639
639
|
* @see Element.scrollTop
|
|
640
640
|
*/
|
|
641
641
|
get scrollTop() {
|
|
642
|
-
return this.
|
|
642
|
+
return this._viewportElement.scrollTop;
|
|
643
643
|
}
|
|
644
644
|
/**
|
|
645
645
|
* Sets the number of pixels that the viewport client is scrolled vertically.
|
|
@@ -647,7 +647,7 @@ class SciViewportComponent {
|
|
|
647
647
|
* @see Element.scrollTop
|
|
648
648
|
*/
|
|
649
649
|
set scrollTop(scrollTop) {
|
|
650
|
-
this.
|
|
650
|
+
this._viewportElement.scrollTop = scrollTop;
|
|
651
651
|
}
|
|
652
652
|
/**
|
|
653
653
|
* Returns the number of pixels that the viewport client is scrolled horizontally.
|
|
@@ -655,7 +655,7 @@ class SciViewportComponent {
|
|
|
655
655
|
* @see Element.scrollLeft
|
|
656
656
|
*/
|
|
657
657
|
get scrollLeft() {
|
|
658
|
-
return this.
|
|
658
|
+
return this._viewportElement.scrollLeft;
|
|
659
659
|
}
|
|
660
660
|
/**
|
|
661
661
|
* Sets the number of pixels that the viewport client is scrolled horizontally.
|
|
@@ -663,7 +663,7 @@ class SciViewportComponent {
|
|
|
663
663
|
* @see Element.scrollLeft
|
|
664
664
|
*/
|
|
665
665
|
set scrollLeft(scrollLeft) {
|
|
666
|
-
this.
|
|
666
|
+
this._viewportElement.scrollLeft = scrollLeft;
|
|
667
667
|
}
|
|
668
668
|
/**
|
|
669
669
|
* Returns the height of the viewport client.
|
|
@@ -671,7 +671,7 @@ class SciViewportComponent {
|
|
|
671
671
|
* @see Element.scrollHeight
|
|
672
672
|
*/
|
|
673
673
|
get scrollHeight() {
|
|
674
|
-
return this.
|
|
674
|
+
return this._viewportElement.scrollHeight;
|
|
675
675
|
}
|
|
676
676
|
/**
|
|
677
677
|
* Returns the width of the viewport client.
|
|
@@ -679,13 +679,13 @@ class SciViewportComponent {
|
|
|
679
679
|
* @see Element.scrollWidth
|
|
680
680
|
*/
|
|
681
681
|
get scrollWidth() {
|
|
682
|
-
return this.
|
|
682
|
+
return this._viewportElement.scrollWidth;
|
|
683
683
|
}
|
|
684
684
|
/**
|
|
685
685
|
* Returns the viewport {HTMLElement}.
|
|
686
686
|
*/
|
|
687
687
|
get viewportElement() {
|
|
688
|
-
return this.
|
|
688
|
+
return this._viewportElement;
|
|
689
689
|
}
|
|
690
690
|
/**
|
|
691
691
|
* Returns the viewport client {HTMLElement}.
|
|
@@ -698,16 +698,18 @@ 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
703
|
*/
|
|
702
704
|
isElementInView(element, fit) {
|
|
703
705
|
const elLeft = this.computeOffset(element, 'left');
|
|
704
|
-
const elRight = elLeft + element.offsetWidth;
|
|
706
|
+
const elRight = elLeft + coerceElement(element).offsetWidth;
|
|
705
707
|
const elTop = this.computeOffset(element, 'top');
|
|
706
|
-
const elBottom = elTop + element.offsetHeight;
|
|
707
|
-
const vpLeft = this.
|
|
708
|
-
const vpRight = vpLeft + this.
|
|
709
|
-
const vpTop = this.
|
|
710
|
-
const vpBottom = vpTop + this.
|
|
708
|
+
const elBottom = elTop + coerceElement(element).offsetHeight;
|
|
709
|
+
const vpLeft = this._viewportElement.scrollLeft;
|
|
710
|
+
const vpRight = vpLeft + this._viewportElement.clientWidth;
|
|
711
|
+
const vpTop = this._viewportElement.scrollTop;
|
|
712
|
+
const vpBottom = vpTop + this._viewportElement.clientHeight;
|
|
711
713
|
switch (fit) {
|
|
712
714
|
case 'full':
|
|
713
715
|
return (elLeft >= vpLeft && elRight <= vpRight) && (elTop >= vpTop && elBottom <= vpBottom);
|
|
@@ -722,30 +724,34 @@ class SciViewportComponent {
|
|
|
722
724
|
*
|
|
723
725
|
* @param element - the element to scroll into the viewport
|
|
724
726
|
* @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.
|
|
725
729
|
*/
|
|
726
730
|
scrollIntoView(element, offset = 50) {
|
|
727
|
-
this.
|
|
728
|
-
this.
|
|
731
|
+
this._viewportElement.scrollTop = this.computeOffset(element, 'top') - offset;
|
|
732
|
+
this._viewportElement.scrollLeft = this.computeOffset(element, 'left') - offset;
|
|
729
733
|
}
|
|
730
734
|
/**
|
|
731
735
|
* Computes the distance of the element to the viewport's left or top border.
|
|
736
|
+
*
|
|
737
|
+
* @throws if the element is not contained in the viewport's slotted content.
|
|
732
738
|
*/
|
|
733
739
|
computeOffset(element, border) {
|
|
734
|
-
if (!isChildOf(element, this._viewport)) {
|
|
735
|
-
throw Error('element not a child of the viewport');
|
|
736
|
-
}
|
|
737
740
|
let offset = 0;
|
|
738
|
-
let el = element;
|
|
741
|
+
let el = coerceElement(element);
|
|
739
742
|
do {
|
|
740
743
|
offset += (border === 'left' ? el.offsetLeft : el.offsetTop);
|
|
741
744
|
el = el.offsetParent;
|
|
742
|
-
|
|
745
|
+
if (el === null) {
|
|
746
|
+
throw Error(`[ElementNotContainedError] Element not contained in the viewport's slotted content`);
|
|
747
|
+
}
|
|
748
|
+
} while (el !== this.host.nativeElement);
|
|
743
749
|
return offset;
|
|
744
750
|
}
|
|
745
751
|
}
|
|
746
|
-
SciViewportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
747
|
-
SciViewportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
748
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
752
|
+
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 });
|
|
753
|
+
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 });
|
|
754
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciViewportComponent, decorators: [{
|
|
749
755
|
type: Component,
|
|
750
756
|
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"] }]
|
|
751
757
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SciNativeScrollbarTrackSizeProvider }]; }, propDecorators: { setViewport: [{
|
|
@@ -762,18 +768,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
762
768
|
type: HostListener,
|
|
763
769
|
args: ['focus']
|
|
764
770
|
}] } });
|
|
765
|
-
/**
|
|
766
|
-
* Returns 'true' if the given element is a child element of the parent element.
|
|
767
|
-
*/
|
|
768
|
-
function isChildOf(element, parent) {
|
|
769
|
-
while (element.parentElement !== null) {
|
|
770
|
-
element = element.parentElement;
|
|
771
|
-
if (element === parent) {
|
|
772
|
-
return true;
|
|
773
|
-
}
|
|
774
|
-
}
|
|
775
|
-
return false;
|
|
776
|
-
}
|
|
777
771
|
|
|
778
772
|
/*
|
|
779
773
|
* Copyright (c) 2018-2019 Swiss Federal Railways
|
|
@@ -789,16 +783,16 @@ function isChildOf(element, parent) {
|
|
|
789
783
|
*/
|
|
790
784
|
class SciViewportModule {
|
|
791
785
|
}
|
|
792
|
-
SciViewportModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
793
|
-
SciViewportModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
786
|
+
SciViewportModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciViewportModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
787
|
+
SciViewportModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: SciViewportModule, declarations: [SciViewportComponent,
|
|
794
788
|
SciScrollbarComponent,
|
|
795
789
|
SciScrollableDirective], imports: [CommonModule,
|
|
796
790
|
ScrollingModule], exports: [SciViewportComponent,
|
|
797
791
|
SciScrollbarComponent,
|
|
798
792
|
SciScrollableDirective] });
|
|
799
|
-
SciViewportModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
793
|
+
SciViewportModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciViewportModule, imports: [CommonModule,
|
|
800
794
|
ScrollingModule] });
|
|
801
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
795
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: SciViewportModule, decorators: [{
|
|
802
796
|
type: NgModule,
|
|
803
797
|
args: [{
|
|
804
798
|
imports: [
|