@rivet-health/design-system 4.9.2 → 4.10.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/esm2020/lib/load/loading/loading.component.mjs +19 -25
- package/fesm2015/rivet-health-design-system.mjs +19 -25
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +19 -25
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/load/loading/loading.component.d.ts +2 -5
- package/package.json +1 -1
|
@@ -5,38 +5,32 @@ export class LoadingComponent {
|
|
|
5
5
|
constructor() {
|
|
6
6
|
this.size = 40;
|
|
7
7
|
this.variant = 'dark';
|
|
8
|
+
this.strokeWidth = LoadingComponent.STROKE_WIDTH;
|
|
8
9
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
const mx = halfSize + radius * Math.sin(LoadingComponent.ARC_START_RADIANS);
|
|
25
|
-
const my = halfSize - radius * Math.cos(LoadingComponent.ARC_START_RADIANS);
|
|
26
|
-
const ax = halfSize;
|
|
27
|
-
const ay = halfSize;
|
|
28
|
-
const x = halfSize + radius;
|
|
29
|
-
const y = halfSize;
|
|
30
|
-
return `M${mx},${my} A${ax},${ay} 0 0,1 ${x},${y}`;
|
|
10
|
+
getPathData() {
|
|
11
|
+
const size = this.size;
|
|
12
|
+
const halfSize = size / 2;
|
|
13
|
+
const stroke = LoadingComponent.STROKE_WIDTH;
|
|
14
|
+
const halfStroke = stroke / 2;
|
|
15
|
+
const top = halfStroke;
|
|
16
|
+
const right = size - stroke;
|
|
17
|
+
const radius = (size - stroke * 2) / 2;
|
|
18
|
+
const commands = [
|
|
19
|
+
`M${halfSize},${top}`,
|
|
20
|
+
`L${right},${top}`,
|
|
21
|
+
`L${right},${halfSize}`,
|
|
22
|
+
`A ${radius} ${radius},0,1,1,${halfSize} ${top}`,
|
|
23
|
+
];
|
|
24
|
+
return commands.join(' ');
|
|
31
25
|
}
|
|
32
26
|
}
|
|
33
27
|
LoadingComponent.STROKE_WIDTH = 1.5;
|
|
34
28
|
LoadingComponent.ARC_START_RADIANS = (Math.PI * 22.5) / 180;
|
|
35
29
|
LoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
-
LoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoadingComponent, selector: "riv-loading", inputs: { size: "size", variant: "variant" }, ngImport: i0, template: "<svg\n [ngClass]=\"{\n dark: variant === 'dark',\n light: variant === 'light',\n small: size === 16,\n medium: size === 40,\n large: size === 80\n }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n [attr.viewBox]=\"'0 0 ' + size + ' ' + size\"\n fill=\"none\"\n>\n <
|
|
30
|
+
LoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoadingComponent, selector: "riv-loading", inputs: { size: "size", variant: "variant" }, ngImport: i0, template: "<svg\n [ngClass]=\"{\n dark: variant === 'dark',\n light: variant === 'light',\n small: size === 16,\n medium: size === 40,\n large: size === 80\n }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n [attr.viewBox]=\"'0 0 ' + size + ' ' + size\"\n fill=\"none\"\n>\n <path [attr.stroke-width]=\"strokeWidth\" [attr.d]=\"getPathData()\"></path>\n</svg>\n", styles: [":host{display:inline-block;font-size:0;line-height:0}.dark path{stroke:var(--brand)}.light path{stroke:var(--white-90)}@keyframes stroke-small{0%{stroke-dasharray:1 43;stroke-dashoffset:0}50%{stroke-dasharray:43 1}to{stroke-dasharray:1 43;stroke-dashoffset:-44}}.small{animation:1.5s linear stroke-small infinite}@keyframes stroke-medium{0%{stroke-dasharray:1 121;stroke-dashoffset:0}50%{stroke-dasharray:121 1}to{stroke-dasharray:1 121;stroke-dashoffset:-122}}.medium{animation:1.67s linear stroke-medium infinite}@keyframes stroke-large{0%{stroke-dasharray:1 259;stroke-dashoffset:0}50%{stroke-dasharray:259 1}to{stroke-dasharray:1 259;stroke-dashoffset:-260}}.large{animation:2s linear stroke-large infinite}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
37
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingComponent, decorators: [{
|
|
38
32
|
type: Component,
|
|
39
|
-
args: [{ selector: 'riv-loading', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n [ngClass]=\"{\n dark: variant === 'dark',\n light: variant === 'light',\n small: size === 16,\n medium: size === 40,\n large: size === 80\n }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n [attr.viewBox]=\"'0 0 ' + size + ' ' + size\"\n fill=\"none\"\n>\n <
|
|
33
|
+
args: [{ selector: 'riv-loading', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n [ngClass]=\"{\n dark: variant === 'dark',\n light: variant === 'light',\n small: size === 16,\n medium: size === 40,\n large: size === 80\n }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n [attr.viewBox]=\"'0 0 ' + size + ' ' + size\"\n fill=\"none\"\n>\n <path [attr.stroke-width]=\"strokeWidth\" [attr.d]=\"getPathData()\"></path>\n</svg>\n", styles: [":host{display:inline-block;font-size:0;line-height:0}.dark path{stroke:var(--brand)}.light path{stroke:var(--white-90)}@keyframes stroke-small{0%{stroke-dasharray:1 43;stroke-dashoffset:0}50%{stroke-dasharray:43 1}to{stroke-dasharray:1 43;stroke-dashoffset:-44}}.small{animation:1.5s linear stroke-small infinite}@keyframes stroke-medium{0%{stroke-dasharray:1 121;stroke-dashoffset:0}50%{stroke-dasharray:121 1}to{stroke-dasharray:1 121;stroke-dashoffset:-122}}.medium{animation:1.67s linear stroke-medium infinite}@keyframes stroke-large{0%{stroke-dasharray:1 259;stroke-dashoffset:0}50%{stroke-dasharray:259 1}to{stroke-dasharray:1 259;stroke-dashoffset:-260}}.large{animation:2s linear stroke-large infinite}\n"] }]
|
|
40
34
|
}], propDecorators: { size: [{
|
|
41
35
|
type: Input
|
|
42
36
|
}], variant: [{
|
|
@@ -46,4 +40,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
46
40
|
LoadingComponent.Sizes = [16, 40, 80];
|
|
47
41
|
LoadingComponent.Variants = ['light', 'dark'];
|
|
48
42
|
})(LoadingComponent || (LoadingComponent = {}));
|
|
49
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGluZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9sb2FkL2xvYWRpbmcvbG9hZGluZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9sb2FkL2xvYWRpbmcvbG9hZGluZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBUTFFLE1BQU0sT0FBTyxnQkFBZ0I7SUFON0I7UUFXRSxTQUFJLEdBQTBCLEVBQUUsQ0FBQztRQUdqQyxZQUFPLEdBQTZCLE1BQU0sQ0FBQztRQXNCbEMsZ0JBQVcsR0FBRyxnQkFBZ0IsQ0FBQyxZQUFZLENBQUM7S0FDdEQ7SUFyQkMsV0FBVztRQUNULE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUM7UUFDdkIsTUFBTSxRQUFRLEdBQUcsSUFBSSxHQUFHLENBQUMsQ0FBQztRQUUxQixNQUFNLE1BQU0sR0FBRyxnQkFBZ0IsQ0FBQyxZQUFZLENBQUM7UUFDN0MsTUFBTSxVQUFVLEdBQUcsTUFBTSxHQUFHLENBQUMsQ0FBQztRQUU5QixNQUFNLEdBQUcsR0FBRyxVQUFVLENBQUM7UUFDdkIsTUFBTSxLQUFLLEdBQUcsSUFBSSxHQUFHLE1BQU0sQ0FBQztRQUM1QixNQUFNLE1BQU0sR0FBRyxDQUFDLElBQUksR0FBRyxNQUFNLEdBQUcsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBRXZDLE1BQU0sUUFBUSxHQUFHO1lBQ2YsSUFBSSxRQUFRLElBQUksR0FBRyxFQUFFO1lBQ3JCLElBQUksS0FBSyxJQUFJLEdBQUcsRUFBRTtZQUNsQixJQUFJLEtBQUssSUFBSSxRQUFRLEVBQUU7WUFDdkIsS0FBSyxNQUFNLElBQUksTUFBTSxVQUFVLFFBQVEsSUFBSSxHQUFHLEVBQUU7U0FDakQsQ0FBQztRQUNGLE9BQU8sUUFBUSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUM1QixDQUFDOztBQTNCZSw2QkFBWSxHQUFHLEdBQUksQ0FBQTtBQUNuQixrQ0FBaUIsR0FBRyxDQUFDLElBQUksQ0FBQyxFQUFFLEdBQUcsSUFBSSxDQUFDLEdBQUcsR0FBSSxDQUFBOzZHQUZoRCxnQkFBZ0I7aUdBQWhCLGdCQUFnQixpR0NSN0IsbWFBZ0JBOzJGRFJhLGdCQUFnQjtrQkFONUIsU0FBUzsrQkFDRSxhQUFhLG1CQUdOLHVCQUF1QixDQUFDLE1BQU07OEJBTy9DLElBQUk7c0JBREgsS0FBSztnQkFJTixPQUFPO3NCQUROLEtBQUs7O0FBMEJSLFdBQWlCLGdCQUFnQjtJQUNsQixzQkFBSyxHQUFHLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQVUsQ0FBQztJQUc5Qix5QkFBUSxHQUFHLENBQUMsT0FBTyxFQUFFLE1BQU0sQ0FBVSxDQUFDO0FBRXJELENBQUMsRUFOZ0IsZ0JBQWdCLEtBQWhCLGdCQUFnQixRQU1oQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3Jpdi1sb2FkaW5nJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2xvYWRpbmcuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9sb2FkaW5nLmNvbXBvbmVudC5jc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIExvYWRpbmdDb21wb25lbnQge1xuICBzdGF0aWMgcmVhZG9ubHkgU1RST0tFX1dJRFRIID0gMS41O1xuICBzdGF0aWMgcmVhZG9ubHkgQVJDX1NUQVJUX1JBRElBTlMgPSAoTWF0aC5QSSAqIDIyLjUpIC8gMTgwO1xuXG4gIEBJbnB1dCgpXG4gIHNpemU6IExvYWRpbmdDb21wb25lbnQuU2l6ZSA9IDQwO1xuXG4gIEBJbnB1dCgpXG4gIHZhcmlhbnQ6IExvYWRpbmdDb21wb25lbnQuVmFyaWFudCA9ICdkYXJrJztcblxuICBnZXRQYXRoRGF0YSgpIHtcbiAgICBjb25zdCBzaXplID0gdGhpcy5zaXplO1xuICAgIGNvbnN0IGhhbGZTaXplID0gc2l6ZSAvIDI7XG5cbiAgICBjb25zdCBzdHJva2UgPSBMb2FkaW5nQ29tcG9uZW50LlNUUk9LRV9XSURUSDtcbiAgICBjb25zdCBoYWxmU3Ryb2tlID0gc3Ryb2tlIC8gMjtcblxuICAgIGNvbnN0IHRvcCA9IGhhbGZTdHJva2U7XG4gICAgY29uc3QgcmlnaHQgPSBzaXplIC0gc3Ryb2tlO1xuICAgIGNvbnN0IHJhZGl1cyA9IChzaXplIC0gc3Ryb2tlICogMikgLyAyO1xuXG4gICAgY29uc3QgY29tbWFuZHMgPSBbXG4gICAgICBgTSR7aGFsZlNpemV9LCR7dG9wfWAsXG4gICAgICBgTCR7cmlnaHR9LCR7dG9wfWAsXG4gICAgICBgTCR7cmlnaHR9LCR7aGFsZlNpemV9YCxcbiAgICAgIGBBICR7cmFkaXVzfSAke3JhZGl1c30sMCwxLDEsJHtoYWxmU2l6ZX0gJHt0b3B9YCxcbiAgICBdO1xuICAgIHJldHVybiBjb21tYW5kcy5qb2luKCcgJyk7XG4gIH1cblxuICByZWFkb25seSBzdHJva2VXaWR0aCA9IExvYWRpbmdDb21wb25lbnQuU1RST0tFX1dJRFRIO1xufVxuXG5leHBvcnQgbmFtZXNwYWNlIExvYWRpbmdDb21wb25lbnQge1xuICBleHBvcnQgY29uc3QgU2l6ZXMgPSBbMTYsIDQwLCA4MF0gYXMgY29uc3Q7XG4gIGV4cG9ydCB0eXBlIFNpemUgPSAodHlwZW9mIExvYWRpbmdDb21wb25lbnQuU2l6ZXMpW251bWJlcl07XG5cbiAgZXhwb3J0IGNvbnN0IFZhcmlhbnRzID0gWydsaWdodCcsICdkYXJrJ10gYXMgY29uc3Q7XG4gIGV4cG9ydCB0eXBlIFZhcmlhbnQgPSAodHlwZW9mIExvYWRpbmdDb21wb25lbnQuVmFyaWFudHMpW251bWJlcl07XG59XG4iLCI8c3ZnXG4gIFtuZ0NsYXNzXT1cIntcbiAgICBkYXJrOiB2YXJpYW50ID09PSAnZGFyaycsXG4gICAgbGlnaHQ6IHZhcmlhbnQgPT09ICdsaWdodCcsXG4gICAgc21hbGw6IHNpemUgPT09IDE2LFxuICAgIG1lZGl1bTogc2l6ZSA9PT0gNDAsXG4gICAgbGFyZ2U6IHNpemUgPT09IDgwXG4gIH1cIlxuICB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCJcbiAgW2F0dHIud2lkdGhdPVwic2l6ZVwiXG4gIFthdHRyLmhlaWdodF09XCJzaXplXCJcbiAgW2F0dHIudmlld0JveF09XCInMCAwICcgKyBzaXplICsgJyAnICsgc2l6ZVwiXG4gIGZpbGw9XCJub25lXCJcbj5cbiAgPHBhdGggW2F0dHIuc3Ryb2tlLXdpZHRoXT1cInN0cm9rZVdpZHRoXCIgW2F0dHIuZF09XCJnZXRQYXRoRGF0YSgpXCI+PC9wYXRoPlxuPC9zdmc+XG4iXX0=
|
|
@@ -1014,38 +1014,32 @@ class LoadingComponent {
|
|
|
1014
1014
|
constructor() {
|
|
1015
1015
|
this.size = 40;
|
|
1016
1016
|
this.variant = 'dark';
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
const my = halfSize - radius * Math.cos(LoadingComponent.ARC_START_RADIANS);
|
|
1035
|
-
const ax = halfSize;
|
|
1036
|
-
const ay = halfSize;
|
|
1037
|
-
const x = halfSize + radius;
|
|
1038
|
-
const y = halfSize;
|
|
1039
|
-
return `M${mx},${my} A${ax},${ay} 0 0,1 ${x},${y}`;
|
|
1017
|
+
this.strokeWidth = LoadingComponent.STROKE_WIDTH;
|
|
1018
|
+
}
|
|
1019
|
+
getPathData() {
|
|
1020
|
+
const size = this.size;
|
|
1021
|
+
const halfSize = size / 2;
|
|
1022
|
+
const stroke = LoadingComponent.STROKE_WIDTH;
|
|
1023
|
+
const halfStroke = stroke / 2;
|
|
1024
|
+
const top = halfStroke;
|
|
1025
|
+
const right = size - stroke;
|
|
1026
|
+
const radius = (size - stroke * 2) / 2;
|
|
1027
|
+
const commands = [
|
|
1028
|
+
`M${halfSize},${top}`,
|
|
1029
|
+
`L${right},${top}`,
|
|
1030
|
+
`L${right},${halfSize}`,
|
|
1031
|
+
`A ${radius} ${radius},0,1,1,${halfSize} ${top}`,
|
|
1032
|
+
];
|
|
1033
|
+
return commands.join(' ');
|
|
1040
1034
|
}
|
|
1041
1035
|
}
|
|
1042
1036
|
LoadingComponent.STROKE_WIDTH = 1.5;
|
|
1043
1037
|
LoadingComponent.ARC_START_RADIANS = (Math.PI * 22.5) / 180;
|
|
1044
1038
|
LoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1045
|
-
LoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoadingComponent, selector: "riv-loading", inputs: { size: "size", variant: "variant" }, ngImport: i0, template: "<svg\n [ngClass]=\"{\n dark: variant === 'dark',\n light: variant === 'light',\n small: size === 16,\n medium: size === 40,\n large: size === 80\n }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n [attr.viewBox]=\"'0 0 ' + size + ' ' + size\"\n fill=\"none\"\n>\n <
|
|
1039
|
+
LoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoadingComponent, selector: "riv-loading", inputs: { size: "size", variant: "variant" }, ngImport: i0, template: "<svg\n [ngClass]=\"{\n dark: variant === 'dark',\n light: variant === 'light',\n small: size === 16,\n medium: size === 40,\n large: size === 80\n }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n [attr.viewBox]=\"'0 0 ' + size + ' ' + size\"\n fill=\"none\"\n>\n <path [attr.stroke-width]=\"strokeWidth\" [attr.d]=\"getPathData()\"></path>\n</svg>\n", styles: [":host{display:inline-block;font-size:0;line-height:0}.dark path{stroke:var(--brand)}.light path{stroke:var(--white-90)}@keyframes stroke-small{0%{stroke-dasharray:1 43;stroke-dashoffset:0}50%{stroke-dasharray:43 1}to{stroke-dasharray:1 43;stroke-dashoffset:-44}}.small{animation:1.5s linear stroke-small infinite}@keyframes stroke-medium{0%{stroke-dasharray:1 121;stroke-dashoffset:0}50%{stroke-dasharray:121 1}to{stroke-dasharray:1 121;stroke-dashoffset:-122}}.medium{animation:1.67s linear stroke-medium infinite}@keyframes stroke-large{0%{stroke-dasharray:1 259;stroke-dashoffset:0}50%{stroke-dasharray:259 1}to{stroke-dasharray:1 259;stroke-dashoffset:-260}}.large{animation:2s linear stroke-large infinite}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1046
1040
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingComponent, decorators: [{
|
|
1047
1041
|
type: Component,
|
|
1048
|
-
args: [{ selector: 'riv-loading', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n [ngClass]=\"{\n dark: variant === 'dark',\n light: variant === 'light',\n small: size === 16,\n medium: size === 40,\n large: size === 80\n }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n [attr.viewBox]=\"'0 0 ' + size + ' ' + size\"\n fill=\"none\"\n>\n <
|
|
1042
|
+
args: [{ selector: 'riv-loading', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n [ngClass]=\"{\n dark: variant === 'dark',\n light: variant === 'light',\n small: size === 16,\n medium: size === 40,\n large: size === 80\n }\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n [attr.viewBox]=\"'0 0 ' + size + ' ' + size\"\n fill=\"none\"\n>\n <path [attr.stroke-width]=\"strokeWidth\" [attr.d]=\"getPathData()\"></path>\n</svg>\n", styles: [":host{display:inline-block;font-size:0;line-height:0}.dark path{stroke:var(--brand)}.light path{stroke:var(--white-90)}@keyframes stroke-small{0%{stroke-dasharray:1 43;stroke-dashoffset:0}50%{stroke-dasharray:43 1}to{stroke-dasharray:1 43;stroke-dashoffset:-44}}.small{animation:1.5s linear stroke-small infinite}@keyframes stroke-medium{0%{stroke-dasharray:1 121;stroke-dashoffset:0}50%{stroke-dasharray:121 1}to{stroke-dasharray:1 121;stroke-dashoffset:-122}}.medium{animation:1.67s linear stroke-medium infinite}@keyframes stroke-large{0%{stroke-dasharray:1 259;stroke-dashoffset:0}50%{stroke-dasharray:259 1}to{stroke-dasharray:1 259;stroke-dashoffset:-260}}.large{animation:2s linear stroke-large infinite}\n"] }]
|
|
1049
1043
|
}], propDecorators: { size: [{
|
|
1050
1044
|
type: Input
|
|
1051
1045
|
}], variant: [{
|