@seniorsistemas/angular-components 17.5.0 → 17.5.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/bundles/seniorsistemas-angular-components.umd.js +31 -4
- package/bundles/seniorsistemas-angular-components.umd.js.map +1 -1
- package/bundles/seniorsistemas-angular-components.umd.min.js +1 -1
- package/bundles/seniorsistemas-angular-components.umd.min.js.map +1 -1
- package/components/progressbar/components/progressbar-determinate/progressbar-determinate.component.d.ts +6 -0
- package/components/progressbar/progressbar.component.d.ts +2 -0
- package/esm2015/components/progressbar/components/progressbar-determinate/progressbar-determinate.component.js +22 -3
- package/esm2015/components/progressbar/components/progressbar-indeterminate/progressbar-indeterminate.component.js +2 -2
- package/esm2015/components/progressbar/progressbar.component.js +10 -2
- package/esm5/components/progressbar/components/progressbar-determinate/progressbar-determinate.component.js +23 -3
- package/esm5/components/progressbar/components/progressbar-indeterminate/progressbar-indeterminate.component.js +2 -2
- package/esm5/components/progressbar/progressbar.component.js +10 -2
- package/fesm2015/seniorsistemas-angular-components.js +30 -4
- package/fesm2015/seniorsistemas-angular-components.js.map +1 -1
- package/fesm5/seniorsistemas-angular-components.js +31 -4
- package/fesm5/seniorsistemas-angular-components.js.map +1 -1
- package/package.json +1 -1
- package/seniorsistemas-angular-components.metadata.json +1 -1
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { OnInit } from "@angular/core";
|
|
2
2
|
import { ProgressBarColors } from "../../models";
|
|
3
|
+
import { LocaleService } from "../../../locale/locale.service";
|
|
3
4
|
export declare class ProgressBarDeterminateComponent implements OnInit {
|
|
5
|
+
private readonly localeService;
|
|
4
6
|
value: number;
|
|
7
|
+
numberFormatOptions: Intl.NumberFormatOptions;
|
|
5
8
|
targetValue: number;
|
|
6
9
|
targetLabel: string;
|
|
7
10
|
activeColor: ProgressBarColors;
|
|
8
11
|
showValue: boolean;
|
|
12
|
+
numberFormat: Intl.NumberFormat;
|
|
13
|
+
constructor(localeService: LocaleService);
|
|
9
14
|
ngOnInit(): void;
|
|
15
|
+
private onGetLocale;
|
|
10
16
|
private validateValues;
|
|
11
17
|
}
|
|
@@ -2,12 +2,14 @@ import { OnInit } from "@angular/core";
|
|
|
2
2
|
import { ProgressBarColors, ProgressBarMode } from "./models";
|
|
3
3
|
export declare class ProgressBarComponent implements OnInit {
|
|
4
4
|
value: number;
|
|
5
|
+
numberFormatOptions: Intl.NumberFormatOptions;
|
|
5
6
|
targetValue: number;
|
|
6
7
|
label: string;
|
|
7
8
|
targetLabel: string;
|
|
8
9
|
activeColor: ProgressBarColors;
|
|
9
10
|
showValue: boolean;
|
|
10
11
|
mode: ProgressBarMode;
|
|
12
|
+
constructor();
|
|
11
13
|
ngOnInit(): void;
|
|
12
14
|
private validateInputs;
|
|
13
15
|
}
|
|
@@ -1,11 +1,24 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { Component, Input } from "@angular/core";
|
|
3
|
+
import { LocaleService } from "../../../locale/locale.service";
|
|
3
4
|
let ProgressBarDeterminateComponent = class ProgressBarDeterminateComponent {
|
|
4
|
-
constructor() {
|
|
5
|
+
constructor(localeService) {
|
|
6
|
+
this.localeService = localeService;
|
|
5
7
|
this.showValue = true;
|
|
6
8
|
}
|
|
7
9
|
ngOnInit() {
|
|
8
10
|
this.validateValues();
|
|
11
|
+
this.onGetLocale();
|
|
12
|
+
}
|
|
13
|
+
onGetLocale() {
|
|
14
|
+
this.localeService.getLocale().subscribe({
|
|
15
|
+
next: (locale) => {
|
|
16
|
+
this.numberFormat = new Intl.NumberFormat(locale !== null && locale !== void 0 ? locale : "pt-BR", this.numberFormatOptions);
|
|
17
|
+
},
|
|
18
|
+
error: () => {
|
|
19
|
+
this.numberFormat = new Intl.NumberFormat("pt-BR", this.numberFormatOptions);
|
|
20
|
+
},
|
|
21
|
+
});
|
|
9
22
|
}
|
|
10
23
|
validateValues() {
|
|
11
24
|
if (this.value < 0 || this.value > 100) {
|
|
@@ -16,9 +29,15 @@ let ProgressBarDeterminateComponent = class ProgressBarDeterminateComponent {
|
|
|
16
29
|
}
|
|
17
30
|
}
|
|
18
31
|
};
|
|
32
|
+
ProgressBarDeterminateComponent.ctorParameters = () => [
|
|
33
|
+
{ type: LocaleService }
|
|
34
|
+
];
|
|
19
35
|
__decorate([
|
|
20
36
|
Input()
|
|
21
37
|
], ProgressBarDeterminateComponent.prototype, "value", void 0);
|
|
38
|
+
__decorate([
|
|
39
|
+
Input()
|
|
40
|
+
], ProgressBarDeterminateComponent.prototype, "numberFormatOptions", void 0);
|
|
22
41
|
__decorate([
|
|
23
42
|
Input()
|
|
24
43
|
], ProgressBarDeterminateComponent.prototype, "targetValue", void 0);
|
|
@@ -34,9 +53,9 @@ __decorate([
|
|
|
34
53
|
ProgressBarDeterminateComponent = __decorate([
|
|
35
54
|
Component({
|
|
36
55
|
selector: "s-progressbar-determinate",
|
|
37
|
-
template: "<div class=\"progressbar-determinate\">\n <div class=\"progressbar-container\">\n <div\n class=\"progressbar-active\"\n [ngClass]=\"{\n 'progressbar-active--blue' : activeColor === 'blue',\n 'progressbar-active--green': activeColor === 'green',\n 'progressbar-active--red': activeColor === 'red',\n 'progressbar-active--yellow': activeColor === 'yellow'\n }\"\n [ngStyle]=\"{ 'width': value + '%' }\">\n {{ showValue && value ? value + '%' : '' }}\n </div>\n </div>\n <div\n *ngIf=\"targetValue\"\n class=\"target\"\n [ngStyle]=\"{\n 'left': targetValue <= 50 ? targetValue + '%' : 'unset',\n 'right': targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n 'align-items': targetValue > 50 ? 'flex-end' : 'flex-start'\n }\">\n <span class=\"target-line\"></span>\n <span class=\"target-label\">\n {{ targetLabel || value + '%' }}\n </span>\n </div>\n </div>\n
|
|
56
|
+
template: "<div class=\"progressbar-determinate\">\n <div class=\"progressbar-container\">\n <div\n class=\"progressbar-active\"\n [ngClass]=\"{\n 'progressbar-active--blue' : activeColor === 'blue',\n 'progressbar-active--green': activeColor === 'green',\n 'progressbar-active--red': activeColor === 'red',\n 'progressbar-active--yellow': activeColor === 'yellow'\n }\"\n [ngStyle]=\"{ 'width': value + '%' }\">\n\n {{ showValue && value ? numberFormat.format(value) + '%' : '' }}\n </div>\n </div>\n <div\n *ngIf=\"targetValue\"\n class=\"target\"\n [ngStyle]=\"{\n 'left': targetValue <= 50 ? targetValue + '%' : 'unset',\n 'right': targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n 'align-items': targetValue > 50 ? 'flex-end' : 'flex-start'\n }\">\n <span class=\"target-line\"></span>\n <span class=\"target-label\">\n {{ targetLabel || numberFormat.format(value) + '%' }}\n </span>\n </div>\n </div>\n",
|
|
38
57
|
styles: [".progressbar-determinate{position:relative}.progressbar-determinate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progressbar-determinate .progressbar-container .progressbar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progressbar-determinate .progressbar-container .progressbar-active--blue{background-color:#428bca}.progressbar-determinate .progressbar-container .progressbar-active--green{background-color:#0c9348}.progressbar-determinate .progressbar-container .progressbar-active--red{background-color:#c13018}.progressbar-determinate .progressbar-container .progressbar-active--yellow{background-color:#fcbf10;color:#212533}.progressbar-determinate .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progressbar-determinate .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progressbar-determinate .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
|
|
39
58
|
})
|
|
40
59
|
], ProgressBarDeterminateComponent);
|
|
41
60
|
export { ProgressBarDeterminateComponent };
|
|
42
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
61
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3NiYXItZGV0ZXJtaW5hdGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNlbmlvcnNpc3RlbWFzL2FuZ3VsYXItY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvcHJvZ3Jlc3NiYXIvY29tcG9uZW50cy9wcm9ncmVzc2Jhci1kZXRlcm1pbmF0ZS9wcm9ncmVzc2Jhci1kZXRlcm1pbmF0ZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBR3pELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQU8vRCxJQUFhLCtCQUErQixHQUE1QyxNQUFhLCtCQUErQjtJQXFCeEMsWUFBNkIsYUFBNEI7UUFBNUIsa0JBQWEsR0FBYixhQUFhLENBQWU7UUFKbEQsY0FBUyxHQUFHLElBQUksQ0FBQztJQUlvQyxDQUFDO0lBRXRELFFBQVE7UUFDWCxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7UUFFdEIsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3ZCLENBQUM7SUFFTyxXQUFXO1FBQ2YsSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTLEVBQUUsQ0FBQyxTQUFTLENBQUM7WUFDckMsSUFBSSxFQUFFLENBQUMsTUFBTSxFQUFFLEVBQUU7Z0JBQ2IsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxhQUFOLE1BQU0sY0FBTixNQUFNLEdBQUksT0FBTyxFQUFFLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO1lBQzNGLENBQUM7WUFDRCxLQUFLLEVBQUUsR0FBRyxFQUFFO2dCQUNSLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsbUJBQW1CLENBQUMsQ0FBQztZQUNqRixDQUFDO1NBQ0osQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVPLGNBQWM7UUFDbEIsSUFBSSxJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsSUFBSSxJQUFJLENBQUMsS0FBSyxHQUFHLEdBQUcsRUFBRTtZQUNwQyxNQUFNLElBQUksS0FBSyxDQUFDLHlCQUF5QixDQUFDLENBQUM7U0FDOUM7UUFDRCxJQUFJLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxJQUFJLElBQUksQ0FBQyxXQUFXLEdBQUcsR0FBRyxFQUFFO1lBQ2hELE1BQU0sSUFBSSxLQUFLLENBQUMsK0JBQStCLENBQUMsQ0FBQztTQUNwRDtJQUNMLENBQUM7Q0FDSixDQUFBOztZQTNCK0MsYUFBYTs7QUFuQnpEO0lBREMsS0FBSyxFQUFFOzhEQUNhO0FBR3JCO0lBREMsS0FBSyxFQUFFOzRFQUM2QztBQUdyRDtJQURDLEtBQUssRUFBRTtvRUFDbUI7QUFHM0I7SUFEQyxLQUFLLEVBQUU7b0VBQ21CO0FBRzNCO0lBREMsS0FBSyxFQUFFO29FQUM4QjtBQUd0QztJQURDLEtBQUssRUFBRTtrRUFDZ0I7QUFqQmYsK0JBQStCO0lBTDNDLFNBQVMsQ0FBQztRQUNQLFFBQVEsRUFBRSwyQkFBMkI7UUFDckMsdWxDQUF1RDs7S0FFMUQsQ0FBQztHQUNXLCtCQUErQixDQWdEM0M7U0FoRFksK0JBQStCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuaW1wb3J0IHsgUHJvZ3Jlc3NCYXJDb2xvcnMgfSBmcm9tIFwiLi4vLi4vbW9kZWxzXCI7XG5pbXBvcnQgeyBMb2NhbGVTZXJ2aWNlIH0gZnJvbSBcIi4uLy4uLy4uL2xvY2FsZS9sb2NhbGUuc2VydmljZVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogXCJzLXByb2dyZXNzYmFyLWRldGVybWluYXRlXCIsXG4gICAgdGVtcGxhdGVVcmw6IFwiLi9wcm9ncmVzc2Jhci1kZXRlcm1pbmF0ZS5jb21wb25lbnQuaHRtbFwiLFxuICAgIHN0eWxlVXJsczogW1wiLi9wcm9ncmVzc2Jhci1kZXRlcm1pbmF0ZS5jb21wb25lbnQuc2Nzc1wiXSxcbn0pXG5leHBvcnQgY2xhc3MgUHJvZ3Jlc3NCYXJEZXRlcm1pbmF0ZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgdmFsdWU6IG51bWJlcjtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIG51bWJlckZvcm1hdE9wdGlvbnM6IEludGwuTnVtYmVyRm9ybWF0T3B0aW9ucztcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHRhcmdldFZhbHVlOiBudW1iZXI7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyB0YXJnZXRMYWJlbDogc3RyaW5nO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgYWN0aXZlQ29sb3I6IFByb2dyZXNzQmFyQ29sb3JzO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc2hvd1ZhbHVlID0gdHJ1ZTtcblxuICAgIG51bWJlckZvcm1hdDogSW50bC5OdW1iZXJGb3JtYXQ7XG5cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlYWRvbmx5IGxvY2FsZVNlcnZpY2U6IExvY2FsZVNlcnZpY2UpIHt9XG5cbiAgICBwdWJsaWMgbmdPbkluaXQoKSB7XG4gICAgICAgIHRoaXMudmFsaWRhdGVWYWx1ZXMoKTtcblxuICAgICAgICB0aGlzLm9uR2V0TG9jYWxlKCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBvbkdldExvY2FsZSgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5sb2NhbGVTZXJ2aWNlLmdldExvY2FsZSgpLnN1YnNjcmliZSh7XG4gICAgICAgICAgICBuZXh0OiAobG9jYWxlKSA9PiB7XG4gICAgICAgICAgICAgICAgdGhpcy5udW1iZXJGb3JtYXQgPSBuZXcgSW50bC5OdW1iZXJGb3JtYXQobG9jYWxlID8/IFwicHQtQlJcIiwgdGhpcy5udW1iZXJGb3JtYXRPcHRpb25zKTtcbiAgICAgICAgICAgIH0sXG4gICAgICAgICAgICBlcnJvcjogKCkgPT4ge1xuICAgICAgICAgICAgICAgIHRoaXMubnVtYmVyRm9ybWF0ID0gbmV3IEludGwuTnVtYmVyRm9ybWF0KFwicHQtQlJcIiwgdGhpcy5udW1iZXJGb3JtYXRPcHRpb25zKTtcbiAgICAgICAgICAgIH0sXG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIHByaXZhdGUgdmFsaWRhdGVWYWx1ZXMoKTogdm9pZCB7XG4gICAgICAgIGlmICh0aGlzLnZhbHVlIDwgMCB8fCB0aGlzLnZhbHVlID4gMTAwKSB7XG4gICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoXCJJbnZhbGlkIHZhbHVlIGZvciB2YWx1ZVwiKTtcbiAgICAgICAgfVxuICAgICAgICBpZiAodGhpcy50YXJnZXRWYWx1ZSA8IDAgfHwgdGhpcy50YXJnZXRWYWx1ZSA+IDEwMCkge1xuICAgICAgICAgICAgdGhyb3cgbmV3IEVycm9yKFwiSW52YWxpZCB2YWx1ZSBmb3IgdGFyZ2V0VmFsdWVcIik7XG4gICAgICAgIH1cbiAgICB9XG59XG4iXX0=
|
|
@@ -11,9 +11,9 @@ __decorate([
|
|
|
11
11
|
ProgressBarIndeterminateComponent = __decorate([
|
|
12
12
|
Component({
|
|
13
13
|
selector: "s-progressbar-indeterminate",
|
|
14
|
-
template: "
|
|
14
|
+
template: "<div class=\"progressbar-indeterminate\">\n <div class=\"progressbar-container\">\n <div class=\"indeterminate-bar\" [ngClass]=\"{\n 'indeterminate-bar--blue': activeColor === 'blue',\n 'indeterminate-bar--green': activeColor === 'green',\n 'indeterminate-bar--red': activeColor === 'red',\n 'indeterminate-bar--yellow': activeColor === 'yellow'\n }\"></div>\n </div>\n\n <span *ngIf=\"label\" class=\"progressbar-label\">{{ label }}</span>\n</div>\n",
|
|
15
15
|
styles: [".progressbar-indeterminate{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.progressbar-indeterminate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;margin:8px 0;overflow:hidden;width:100%}.progressbar-indeterminate .indeterminate-bar{animation:5s infinite indeterminate-progress;background-color:#428bca;height:100%;width:40%}.progressbar-indeterminate .indeterminate-bar--blue{background-color:#428bca}.progressbar-indeterminate .indeterminate-bar--green{background-color:#0c9348}.progressbar-indeterminate .indeterminate-bar--red{background-color:#c13018}.progressbar-indeterminate .indeterminate-bar--yellow{background-color:#fcbf10}.progressbar-indeterminate .progressbar-label{font-family:\"Open Sans\" sans-serif;font-size:12px;line-height:150%;color:#212533}@keyframes indeterminate-progress{0%{transform:translateX(-250%)}100%{transform:translateX(250%)}}"]
|
|
16
16
|
})
|
|
17
17
|
], ProgressBarIndeterminateComponent);
|
|
18
18
|
export { ProgressBarIndeterminateComponent };
|
|
19
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
19
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3NiYXItaW5kZXRlcm1pbmF0ZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Ac2VuaW9yc2lzdGVtYXMvYW5ndWxhci1jb21wb25lbnRzLyIsInNvdXJjZXMiOlsiY29tcG9uZW50cy9wcm9ncmVzc2Jhci9jb21wb25lbnRzL3Byb2dyZXNzYmFyLWluZGV0ZXJtaW5hdGUvcHJvZ3Jlc3NiYXItaW5kZXRlcm1pbmF0ZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBU2pELElBQWEsaUNBQWlDLEdBQTlDLE1BQWEsaUNBQWlDO0NBTTdDLENBQUE7QUFKRztJQURDLEtBQUssRUFBRTtzRUFDOEI7QUFHdEM7SUFEQyxLQUFLLEVBQUU7Z0VBQ2E7QUFMWixpQ0FBaUM7SUFMN0MsU0FBUyxDQUFDO1FBQ1AsUUFBUSxFQUFFLDZCQUE2QjtRQUN2QyxpaEJBQXlEOztLQUU1RCxDQUFDO0dBQ1csaUNBQWlDLENBTTdDO1NBTlksaUNBQWlDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbmltcG9ydCB7IFByb2dyZXNzQmFyQ29sb3JzIH0gZnJvbSBcIi4uLy4uL21vZGVsc1wiO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogXCJzLXByb2dyZXNzYmFyLWluZGV0ZXJtaW5hdGVcIixcbiAgICB0ZW1wbGF0ZVVybDogXCIuL3Byb2dyZXNzYmFyLWluZGV0ZXJtaW5hdGUuY29tcG9uZW50Lmh0bWxcIixcbiAgICBzdHlsZVVybHM6IFtcIi4vcHJvZ3Jlc3NiYXItaW5kZXRlcm1pbmF0ZS5jb21wb25lbnQuc2Nzc1wiXSxcbn0pXG5leHBvcnQgY2xhc3MgUHJvZ3Jlc3NCYXJJbmRldGVybWluYXRlQ29tcG9uZW50IHtcbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBhY3RpdmVDb2xvcjogUHJvZ3Jlc3NCYXJDb2xvcnM7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBsYWJlbDogc3RyaW5nO1xufVxuIl19
|
|
@@ -3,6 +3,11 @@ import { Component, Input } from "@angular/core";
|
|
|
3
3
|
import { ProgressBarMode } from "./models";
|
|
4
4
|
let ProgressBarComponent = class ProgressBarComponent {
|
|
5
5
|
constructor() {
|
|
6
|
+
this.numberFormatOptions = {
|
|
7
|
+
style: "decimal",
|
|
8
|
+
minimumFractionDigits: 0,
|
|
9
|
+
maximumFractionDigits: 2,
|
|
10
|
+
};
|
|
6
11
|
this.showValue = true;
|
|
7
12
|
this.mode = ProgressBarMode.Determinate;
|
|
8
13
|
}
|
|
@@ -24,6 +29,9 @@ let ProgressBarComponent = class ProgressBarComponent {
|
|
|
24
29
|
__decorate([
|
|
25
30
|
Input()
|
|
26
31
|
], ProgressBarComponent.prototype, "value", void 0);
|
|
32
|
+
__decorate([
|
|
33
|
+
Input()
|
|
34
|
+
], ProgressBarComponent.prototype, "numberFormatOptions", void 0);
|
|
27
35
|
__decorate([
|
|
28
36
|
Input()
|
|
29
37
|
], ProgressBarComponent.prototype, "targetValue", void 0);
|
|
@@ -45,9 +53,9 @@ __decorate([
|
|
|
45
53
|
ProgressBarComponent = __decorate([
|
|
46
54
|
Component({
|
|
47
55
|
selector: "s-progressbar",
|
|
48
|
-
template: "<ng-container *ngIf=\"mode === 'determinate'; then pbDeterminateTemplate else pbIndeterminateTemplate\"></ng-container>\n\n<ng-template #pbDeterminateTemplate>\n <s-progressbar-determinate\n [value]=\"value\"\n [targetValue]=\"targetValue\"\n [targetLabel]=\"targetLabel\"\n [activeColor]=\"activeColor\"\n [showValue]=\"showValue\">\n </s-progressbar-determinate>\n</ng-template>\n\n<ng-template #pbIndeterminateTemplate>\n <s-progressbar-indeterminate\n [activeColor]=\"activeColor\"\n [label]=\"label\">\n </s-progressbar-indeterminate>\n</ng-template>",
|
|
56
|
+
template: "<ng-container *ngIf=\"mode === 'determinate'; then pbDeterminateTemplate else pbIndeterminateTemplate\"></ng-container>\n\n<ng-template #pbDeterminateTemplate>\n <s-progressbar-determinate\n [value]=\"value\"\n [numberFormatOptions]=\"numberFormatOptions\"\n [targetValue]=\"targetValue\"\n [targetLabel]=\"targetLabel\"\n [activeColor]=\"activeColor\"\n [showValue]=\"showValue\">\n </s-progressbar-determinate>\n</ng-template>\n\n<ng-template #pbIndeterminateTemplate>\n <s-progressbar-indeterminate\n [activeColor]=\"activeColor\"\n [label]=\"label\">\n </s-progressbar-indeterminate>\n</ng-template>",
|
|
49
57
|
styles: [".progress-bar{position:relative}.progress-bar .progress-bar-all{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progress-bar .progress-bar-all .progress-bar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progress-bar .progress-bar-all .progress-bar-active--blue{background-color:#428bca}.progress-bar .progress-bar-all .progress-bar-active--green{background-color:#0c9348}.progress-bar .progress-bar-all .progress-bar-active--red{background-color:#c13018}.progress-bar .progress-bar-all .progress-bar-active--yellow{background-color:#fcbf10}.progress-bar .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progress-bar .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progress-bar .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
|
|
50
58
|
})
|
|
51
59
|
], ProgressBarComponent);
|
|
52
60
|
export { ProgressBarComponent };
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
61
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3NiYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNlbmlvcnNpc3RlbWFzL2FuZ3VsYXItY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvcHJvZ3Jlc3NiYXIvcHJvZ3Jlc3NiYXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUV6RCxPQUFPLEVBQXFCLGVBQWUsRUFBRSxNQUFNLFVBQVUsQ0FBQztBQU85RCxJQUFhLG9CQUFvQixHQUFqQyxNQUFhLG9CQUFvQjtJQTZCN0I7UUF4Qk8sd0JBQW1CLEdBQTZCO1lBQ25ELEtBQUssRUFBRSxTQUFTO1lBQ2hCLHFCQUFxQixFQUFFLENBQUM7WUFDeEIscUJBQXFCLEVBQUUsQ0FBQztTQUMzQixDQUFDO1FBZUssY0FBUyxHQUFHLElBQUksQ0FBQztRQUdqQixTQUFJLEdBQUcsZUFBZSxDQUFDLFdBQVcsQ0FBQztJQUUzQixDQUFDO0lBRVQsUUFBUTtRQUNYLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztJQUMxQixDQUFDO0lBRU8sY0FBYztRQUNsQixJQUFJLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxJQUFJLElBQUksQ0FBQyxLQUFLLEdBQUcsR0FBRyxFQUFFO1lBQ3BDLE1BQU0sSUFBSSxLQUFLLENBQUMseUJBQXlCLENBQUMsQ0FBQztTQUM5QztRQUVELElBQUksSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLElBQUksSUFBSSxDQUFDLFdBQVcsR0FBRyxHQUFHLEVBQUU7WUFDaEQsTUFBTSxJQUFJLEtBQUssQ0FBQywrQkFBK0IsQ0FBQyxDQUFDO1NBQ3BEO1FBRUQsSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLGVBQWUsQ0FBQyxhQUFhLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxXQUFXLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxFQUFFO1lBQ3JHLE1BQU0sSUFBSSxLQUFLLENBQUMscUdBQXFHLENBQUMsQ0FBQztTQUMxSDtJQUNMLENBQUM7Q0FDSixDQUFBO0FBOUNHO0lBREMsS0FBSyxFQUFFO21EQUNhO0FBR3JCO0lBREMsS0FBSyxFQUFFO2lFQUtOO0FBR0Y7SUFEQyxLQUFLLEVBQUU7eURBQ21CO0FBRzNCO0lBREMsS0FBSyxFQUFFO21EQUNhO0FBR3JCO0lBREMsS0FBSyxFQUFFO3lEQUNtQjtBQUczQjtJQURDLEtBQUssRUFBRTt5REFDOEI7QUFHdEM7SUFEQyxLQUFLLEVBQUU7dURBQ2dCO0FBR3hCO0lBREMsS0FBSyxFQUFFO2tEQUNrQztBQTNCakMsb0JBQW9CO0lBTGhDLFNBQVMsQ0FBQztRQUNQLFFBQVEsRUFBRSxlQUFlO1FBQ3pCLHVwQkFBMkM7O0tBRTlDLENBQUM7R0FDVyxvQkFBb0IsQ0FnRGhDO1NBaERZLG9CQUFvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbmltcG9ydCB7IFByb2dyZXNzQmFyQ29sb3JzLCBQcm9ncmVzc0Jhck1vZGUgfSBmcm9tIFwiLi9tb2RlbHNcIjtcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6IFwicy1wcm9ncmVzc2JhclwiLFxuICAgIHRlbXBsYXRlVXJsOiBcIi4vcHJvZ3Jlc3NiYXIuY29tcG9uZW50Lmh0bWxcIixcbiAgICBzdHlsZVVybHM6IFtcIi4vcHJvZ3Jlc3NiYXIuY29tcG9uZW50LnNjc3NcIl0sXG59KVxuZXhwb3J0IGNsYXNzIFByb2dyZXNzQmFyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyB2YWx1ZTogbnVtYmVyO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgbnVtYmVyRm9ybWF0T3B0aW9uczogSW50bC5OdW1iZXJGb3JtYXRPcHRpb25zID0ge1xuICAgICAgICBzdHlsZTogXCJkZWNpbWFsXCIsXG4gICAgICAgIG1pbmltdW1GcmFjdGlvbkRpZ2l0czogMCxcbiAgICAgICAgbWF4aW11bUZyYWN0aW9uRGlnaXRzOiAyLFxuICAgIH07XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyB0YXJnZXRWYWx1ZTogbnVtYmVyO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgbGFiZWw6IHN0cmluZztcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHRhcmdldExhYmVsOiBzdHJpbmc7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBhY3RpdmVDb2xvcjogUHJvZ3Jlc3NCYXJDb2xvcnM7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzaG93VmFsdWUgPSB0cnVlO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgbW9kZSA9IFByb2dyZXNzQmFyTW9kZS5EZXRlcm1pbmF0ZTtcblxuICAgIGNvbnN0cnVjdG9yKCkge31cblxuICAgIHB1YmxpYyBuZ09uSW5pdCgpIHtcbiAgICAgICAgdGhpcy52YWxpZGF0ZUlucHV0cygpO1xuICAgIH1cblxuICAgIHByaXZhdGUgdmFsaWRhdGVJbnB1dHMoKTogdm9pZCB7XG4gICAgICAgIGlmICh0aGlzLnZhbHVlIDwgMCB8fCB0aGlzLnZhbHVlID4gMTAwKSB7XG4gICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoXCJJbnZhbGlkIHZhbHVlIGZvciB2YWx1ZVwiKTtcbiAgICAgICAgfVxuXG4gICAgICAgIGlmICh0aGlzLnRhcmdldFZhbHVlIDwgMCB8fCB0aGlzLnRhcmdldFZhbHVlID4gMTAwKSB7XG4gICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoXCJJbnZhbGlkIHZhbHVlIGZvciB0YXJnZXRWYWx1ZVwiKTtcbiAgICAgICAgfVxuXG4gICAgICAgIGlmICh0aGlzLm1vZGUgPT09IFByb2dyZXNzQmFyTW9kZS5JbmRldGVybWluYXRlICYmICh0aGlzLnZhbHVlIHx8IHRoaXMudGFyZ2V0VmFsdWUgfHwgdGhpcy50YXJnZXRMYWJlbCkpIHtcbiAgICAgICAgICAgIHRocm93IG5ldyBFcnJvcihcIldoZW4gdGhlIG1vZGUgaXMgaW5kZXRlcm1pbmF0ZSwgdGhlIHZhbHVlLCB0YXJnZXRWYWx1ZSBhbmQgdGFyZ2V0TGFiZWwgcGFyYW1ldGVycyBhcmUgbm90IGV4cGVjdGVkLlwiKTtcbiAgICAgICAgfVxuICAgIH1cbn1cbiJdfQ==
|
|
@@ -1,11 +1,25 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { Component, Input } from "@angular/core";
|
|
3
|
+
import { LocaleService } from "../../../locale/locale.service";
|
|
3
4
|
var ProgressBarDeterminateComponent = /** @class */ (function () {
|
|
4
|
-
function ProgressBarDeterminateComponent() {
|
|
5
|
+
function ProgressBarDeterminateComponent(localeService) {
|
|
6
|
+
this.localeService = localeService;
|
|
5
7
|
this.showValue = true;
|
|
6
8
|
}
|
|
7
9
|
ProgressBarDeterminateComponent.prototype.ngOnInit = function () {
|
|
8
10
|
this.validateValues();
|
|
11
|
+
this.onGetLocale();
|
|
12
|
+
};
|
|
13
|
+
ProgressBarDeterminateComponent.prototype.onGetLocale = function () {
|
|
14
|
+
var _this = this;
|
|
15
|
+
this.localeService.getLocale().subscribe({
|
|
16
|
+
next: function (locale) {
|
|
17
|
+
_this.numberFormat = new Intl.NumberFormat(locale !== null && locale !== void 0 ? locale : "pt-BR", _this.numberFormatOptions);
|
|
18
|
+
},
|
|
19
|
+
error: function () {
|
|
20
|
+
_this.numberFormat = new Intl.NumberFormat("pt-BR", _this.numberFormatOptions);
|
|
21
|
+
},
|
|
22
|
+
});
|
|
9
23
|
};
|
|
10
24
|
ProgressBarDeterminateComponent.prototype.validateValues = function () {
|
|
11
25
|
if (this.value < 0 || this.value > 100) {
|
|
@@ -15,9 +29,15 @@ var ProgressBarDeterminateComponent = /** @class */ (function () {
|
|
|
15
29
|
throw new Error("Invalid value for targetValue");
|
|
16
30
|
}
|
|
17
31
|
};
|
|
32
|
+
ProgressBarDeterminateComponent.ctorParameters = function () { return [
|
|
33
|
+
{ type: LocaleService }
|
|
34
|
+
]; };
|
|
18
35
|
__decorate([
|
|
19
36
|
Input()
|
|
20
37
|
], ProgressBarDeterminateComponent.prototype, "value", void 0);
|
|
38
|
+
__decorate([
|
|
39
|
+
Input()
|
|
40
|
+
], ProgressBarDeterminateComponent.prototype, "numberFormatOptions", void 0);
|
|
21
41
|
__decorate([
|
|
22
42
|
Input()
|
|
23
43
|
], ProgressBarDeterminateComponent.prototype, "targetValue", void 0);
|
|
@@ -33,11 +53,11 @@ var ProgressBarDeterminateComponent = /** @class */ (function () {
|
|
|
33
53
|
ProgressBarDeterminateComponent = __decorate([
|
|
34
54
|
Component({
|
|
35
55
|
selector: "s-progressbar-determinate",
|
|
36
|
-
template: "<div class=\"progressbar-determinate\">\n <div class=\"progressbar-container\">\n <div\n class=\"progressbar-active\"\n [ngClass]=\"{\n 'progressbar-active--blue' : activeColor === 'blue',\n 'progressbar-active--green': activeColor === 'green',\n 'progressbar-active--red': activeColor === 'red',\n 'progressbar-active--yellow': activeColor === 'yellow'\n }\"\n [ngStyle]=\"{ 'width': value + '%' }\">\n {{ showValue && value ? value + '%' : '' }}\n </div>\n </div>\n <div\n *ngIf=\"targetValue\"\n class=\"target\"\n [ngStyle]=\"{\n 'left': targetValue <= 50 ? targetValue + '%' : 'unset',\n 'right': targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n 'align-items': targetValue > 50 ? 'flex-end' : 'flex-start'\n }\">\n <span class=\"target-line\"></span>\n <span class=\"target-label\">\n {{ targetLabel || value + '%' }}\n </span>\n </div>\n </div>\n
|
|
56
|
+
template: "<div class=\"progressbar-determinate\">\n <div class=\"progressbar-container\">\n <div\n class=\"progressbar-active\"\n [ngClass]=\"{\n 'progressbar-active--blue' : activeColor === 'blue',\n 'progressbar-active--green': activeColor === 'green',\n 'progressbar-active--red': activeColor === 'red',\n 'progressbar-active--yellow': activeColor === 'yellow'\n }\"\n [ngStyle]=\"{ 'width': value + '%' }\">\n\n {{ showValue && value ? numberFormat.format(value) + '%' : '' }}\n </div>\n </div>\n <div\n *ngIf=\"targetValue\"\n class=\"target\"\n [ngStyle]=\"{\n 'left': targetValue <= 50 ? targetValue + '%' : 'unset',\n 'right': targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n 'align-items': targetValue > 50 ? 'flex-end' : 'flex-start'\n }\">\n <span class=\"target-line\"></span>\n <span class=\"target-label\">\n {{ targetLabel || numberFormat.format(value) + '%' }}\n </span>\n </div>\n </div>\n",
|
|
37
57
|
styles: [".progressbar-determinate{position:relative}.progressbar-determinate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progressbar-determinate .progressbar-container .progressbar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progressbar-determinate .progressbar-container .progressbar-active--blue{background-color:#428bca}.progressbar-determinate .progressbar-container .progressbar-active--green{background-color:#0c9348}.progressbar-determinate .progressbar-container .progressbar-active--red{background-color:#c13018}.progressbar-determinate .progressbar-container .progressbar-active--yellow{background-color:#fcbf10;color:#212533}.progressbar-determinate .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progressbar-determinate .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progressbar-determinate .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
|
|
38
58
|
})
|
|
39
59
|
], ProgressBarDeterminateComponent);
|
|
40
60
|
return ProgressBarDeterminateComponent;
|
|
41
61
|
}());
|
|
42
62
|
export { ProgressBarDeterminateComponent };
|
|
43
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
63
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3NiYXItZGV0ZXJtaW5hdGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNlbmlvcnNpc3RlbWFzL2FuZ3VsYXItY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvcHJvZ3Jlc3NiYXIvY29tcG9uZW50cy9wcm9ncmVzc2Jhci1kZXRlcm1pbmF0ZS9wcm9ncmVzc2Jhci1kZXRlcm1pbmF0ZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBR3pELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQU8vRDtJQXFCSSx5Q0FBNkIsYUFBNEI7UUFBNUIsa0JBQWEsR0FBYixhQUFhLENBQWU7UUFKbEQsY0FBUyxHQUFHLElBQUksQ0FBQztJQUlvQyxDQUFDO0lBRXRELGtEQUFRLEdBQWY7UUFDSSxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7UUFFdEIsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3ZCLENBQUM7SUFFTyxxREFBVyxHQUFuQjtRQUFBLGlCQVNDO1FBUkcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTLEVBQUUsQ0FBQyxTQUFTLENBQUM7WUFDckMsSUFBSSxFQUFFLFVBQUMsTUFBTTtnQkFDVCxLQUFJLENBQUMsWUFBWSxHQUFHLElBQUksSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLGFBQU4sTUFBTSxjQUFOLE1BQU0sR0FBSSxPQUFPLEVBQUUsS0FBSSxDQUFDLG1CQUFtQixDQUFDLENBQUM7WUFDM0YsQ0FBQztZQUNELEtBQUssRUFBRTtnQkFDSCxLQUFJLENBQUMsWUFBWSxHQUFHLElBQUksSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLEVBQUUsS0FBSSxDQUFDLG1CQUFtQixDQUFDLENBQUM7WUFDakYsQ0FBQztTQUNKLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFTyx3REFBYyxHQUF0QjtRQUNJLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxHQUFHLEVBQUU7WUFDcEMsTUFBTSxJQUFJLEtBQUssQ0FBQyx5QkFBeUIsQ0FBQyxDQUFDO1NBQzlDO1FBQ0QsSUFBSSxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsSUFBSSxJQUFJLENBQUMsV0FBVyxHQUFHLEdBQUcsRUFBRTtZQUNoRCxNQUFNLElBQUksS0FBSyxDQUFDLCtCQUErQixDQUFDLENBQUM7U0FDcEQ7SUFDTCxDQUFDOztnQkExQjJDLGFBQWE7O0lBbkJ6RDtRQURDLEtBQUssRUFBRTtrRUFDYTtJQUdyQjtRQURDLEtBQUssRUFBRTtnRkFDNkM7SUFHckQ7UUFEQyxLQUFLLEVBQUU7d0VBQ21CO0lBRzNCO1FBREMsS0FBSyxFQUFFO3dFQUNtQjtJQUczQjtRQURDLEtBQUssRUFBRTt3RUFDOEI7SUFHdEM7UUFEQyxLQUFLLEVBQUU7c0VBQ2dCO0lBakJmLCtCQUErQjtRQUwzQyxTQUFTLENBQUM7WUFDUCxRQUFRLEVBQUUsMkJBQTJCO1lBQ3JDLHVsQ0FBdUQ7O1NBRTFELENBQUM7T0FDVywrQkFBK0IsQ0FnRDNDO0lBQUQsc0NBQUM7Q0FBQSxBQWhERCxJQWdEQztTQWhEWSwrQkFBK0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5pbXBvcnQgeyBQcm9ncmVzc0JhckNvbG9ycyB9IGZyb20gXCIuLi8uLi9tb2RlbHNcIjtcbmltcG9ydCB7IExvY2FsZVNlcnZpY2UgfSBmcm9tIFwiLi4vLi4vLi4vbG9jYWxlL2xvY2FsZS5zZXJ2aWNlXCI7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiBcInMtcHJvZ3Jlc3NiYXItZGV0ZXJtaW5hdGVcIixcbiAgICB0ZW1wbGF0ZVVybDogXCIuL3Byb2dyZXNzYmFyLWRldGVybWluYXRlLmNvbXBvbmVudC5odG1sXCIsXG4gICAgc3R5bGVVcmxzOiBbXCIuL3Byb2dyZXNzYmFyLWRldGVybWluYXRlLmNvbXBvbmVudC5zY3NzXCJdLFxufSlcbmV4cG9ydCBjbGFzcyBQcm9ncmVzc0JhckRldGVybWluYXRlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyB2YWx1ZTogbnVtYmVyO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgbnVtYmVyRm9ybWF0T3B0aW9uczogSW50bC5OdW1iZXJGb3JtYXRPcHRpb25zO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgdGFyZ2V0VmFsdWU6IG51bWJlcjtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHRhcmdldExhYmVsOiBzdHJpbmc7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBhY3RpdmVDb2xvcjogUHJvZ3Jlc3NCYXJDb2xvcnM7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzaG93VmFsdWUgPSB0cnVlO1xuXG4gICAgbnVtYmVyRm9ybWF0OiBJbnRsLk51bWJlckZvcm1hdDtcblxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVhZG9ubHkgbG9jYWxlU2VydmljZTogTG9jYWxlU2VydmljZSkge31cblxuICAgIHB1YmxpYyBuZ09uSW5pdCgpIHtcbiAgICAgICAgdGhpcy52YWxpZGF0ZVZhbHVlcygpO1xuXG4gICAgICAgIHRoaXMub25HZXRMb2NhbGUoKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIG9uR2V0TG9jYWxlKCk6IHZvaWQge1xuICAgICAgICB0aGlzLmxvY2FsZVNlcnZpY2UuZ2V0TG9jYWxlKCkuc3Vic2NyaWJlKHtcbiAgICAgICAgICAgIG5leHQ6IChsb2NhbGUpID0+IHtcbiAgICAgICAgICAgICAgICB0aGlzLm51bWJlckZvcm1hdCA9IG5ldyBJbnRsLk51bWJlckZvcm1hdChsb2NhbGUgPz8gXCJwdC1CUlwiLCB0aGlzLm51bWJlckZvcm1hdE9wdGlvbnMpO1xuICAgICAgICAgICAgfSxcbiAgICAgICAgICAgIGVycm9yOiAoKSA9PiB7XG4gICAgICAgICAgICAgICAgdGhpcy5udW1iZXJGb3JtYXQgPSBuZXcgSW50bC5OdW1iZXJGb3JtYXQoXCJwdC1CUlwiLCB0aGlzLm51bWJlckZvcm1hdE9wdGlvbnMpO1xuICAgICAgICAgICAgfSxcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSB2YWxpZGF0ZVZhbHVlcygpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMudmFsdWUgPCAwIHx8IHRoaXMudmFsdWUgPiAxMDApIHtcbiAgICAgICAgICAgIHRocm93IG5ldyBFcnJvcihcIkludmFsaWQgdmFsdWUgZm9yIHZhbHVlXCIpO1xuICAgICAgICB9XG4gICAgICAgIGlmICh0aGlzLnRhcmdldFZhbHVlIDwgMCB8fCB0aGlzLnRhcmdldFZhbHVlID4gMTAwKSB7XG4gICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoXCJJbnZhbGlkIHZhbHVlIGZvciB0YXJnZXRWYWx1ZVwiKTtcbiAgICAgICAgfVxuICAgIH1cbn1cbiJdfQ==
|
|
@@ -12,11 +12,11 @@ var ProgressBarIndeterminateComponent = /** @class */ (function () {
|
|
|
12
12
|
ProgressBarIndeterminateComponent = __decorate([
|
|
13
13
|
Component({
|
|
14
14
|
selector: "s-progressbar-indeterminate",
|
|
15
|
-
template: "
|
|
15
|
+
template: "<div class=\"progressbar-indeterminate\">\n <div class=\"progressbar-container\">\n <div class=\"indeterminate-bar\" [ngClass]=\"{\n 'indeterminate-bar--blue': activeColor === 'blue',\n 'indeterminate-bar--green': activeColor === 'green',\n 'indeterminate-bar--red': activeColor === 'red',\n 'indeterminate-bar--yellow': activeColor === 'yellow'\n }\"></div>\n </div>\n\n <span *ngIf=\"label\" class=\"progressbar-label\">{{ label }}</span>\n</div>\n",
|
|
16
16
|
styles: [".progressbar-indeterminate{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.progressbar-indeterminate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;margin:8px 0;overflow:hidden;width:100%}.progressbar-indeterminate .indeterminate-bar{animation:5s infinite indeterminate-progress;background-color:#428bca;height:100%;width:40%}.progressbar-indeterminate .indeterminate-bar--blue{background-color:#428bca}.progressbar-indeterminate .indeterminate-bar--green{background-color:#0c9348}.progressbar-indeterminate .indeterminate-bar--red{background-color:#c13018}.progressbar-indeterminate .indeterminate-bar--yellow{background-color:#fcbf10}.progressbar-indeterminate .progressbar-label{font-family:\"Open Sans\" sans-serif;font-size:12px;line-height:150%;color:#212533}@keyframes indeterminate-progress{0%{transform:translateX(-250%)}100%{transform:translateX(250%)}}"]
|
|
17
17
|
})
|
|
18
18
|
], ProgressBarIndeterminateComponent);
|
|
19
19
|
return ProgressBarIndeterminateComponent;
|
|
20
20
|
}());
|
|
21
21
|
export { ProgressBarIndeterminateComponent };
|
|
22
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
22
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3NiYXItaW5kZXRlcm1pbmF0ZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Ac2VuaW9yc2lzdGVtYXMvYW5ndWxhci1jb21wb25lbnRzLyIsInNvdXJjZXMiOlsiY29tcG9uZW50cy9wcm9ncmVzc2Jhci9jb21wb25lbnRzL3Byb2dyZXNzYmFyLWluZGV0ZXJtaW5hdGUvcHJvZ3Jlc3NiYXItaW5kZXRlcm1pbmF0ZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBU2pEO0lBQUE7SUFNQSxDQUFDO0lBSkc7UUFEQyxLQUFLLEVBQUU7MEVBQzhCO0lBR3RDO1FBREMsS0FBSyxFQUFFO29FQUNhO0lBTFosaUNBQWlDO1FBTDdDLFNBQVMsQ0FBQztZQUNQLFFBQVEsRUFBRSw2QkFBNkI7WUFDdkMsaWhCQUF5RDs7U0FFNUQsQ0FBQztPQUNXLGlDQUFpQyxDQU03QztJQUFELHdDQUFDO0NBQUEsQUFORCxJQU1DO1NBTlksaUNBQWlDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbmltcG9ydCB7IFByb2dyZXNzQmFyQ29sb3JzIH0gZnJvbSBcIi4uLy4uL21vZGVsc1wiO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogXCJzLXByb2dyZXNzYmFyLWluZGV0ZXJtaW5hdGVcIixcbiAgICB0ZW1wbGF0ZVVybDogXCIuL3Byb2dyZXNzYmFyLWluZGV0ZXJtaW5hdGUuY29tcG9uZW50Lmh0bWxcIixcbiAgICBzdHlsZVVybHM6IFtcIi4vcHJvZ3Jlc3NiYXItaW5kZXRlcm1pbmF0ZS5jb21wb25lbnQuc2Nzc1wiXSxcbn0pXG5leHBvcnQgY2xhc3MgUHJvZ3Jlc3NCYXJJbmRldGVybWluYXRlQ29tcG9uZW50IHtcbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBhY3RpdmVDb2xvcjogUHJvZ3Jlc3NCYXJDb2xvcnM7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBsYWJlbDogc3RyaW5nO1xufVxuIl19
|
|
@@ -3,6 +3,11 @@ import { Component, Input } from "@angular/core";
|
|
|
3
3
|
import { ProgressBarMode } from "./models";
|
|
4
4
|
var ProgressBarComponent = /** @class */ (function () {
|
|
5
5
|
function ProgressBarComponent() {
|
|
6
|
+
this.numberFormatOptions = {
|
|
7
|
+
style: "decimal",
|
|
8
|
+
minimumFractionDigits: 0,
|
|
9
|
+
maximumFractionDigits: 2,
|
|
10
|
+
};
|
|
6
11
|
this.showValue = true;
|
|
7
12
|
this.mode = ProgressBarMode.Determinate;
|
|
8
13
|
}
|
|
@@ -23,6 +28,9 @@ var ProgressBarComponent = /** @class */ (function () {
|
|
|
23
28
|
__decorate([
|
|
24
29
|
Input()
|
|
25
30
|
], ProgressBarComponent.prototype, "value", void 0);
|
|
31
|
+
__decorate([
|
|
32
|
+
Input()
|
|
33
|
+
], ProgressBarComponent.prototype, "numberFormatOptions", void 0);
|
|
26
34
|
__decorate([
|
|
27
35
|
Input()
|
|
28
36
|
], ProgressBarComponent.prototype, "targetValue", void 0);
|
|
@@ -44,11 +52,11 @@ var ProgressBarComponent = /** @class */ (function () {
|
|
|
44
52
|
ProgressBarComponent = __decorate([
|
|
45
53
|
Component({
|
|
46
54
|
selector: "s-progressbar",
|
|
47
|
-
template: "<ng-container *ngIf=\"mode === 'determinate'; then pbDeterminateTemplate else pbIndeterminateTemplate\"></ng-container>\n\n<ng-template #pbDeterminateTemplate>\n <s-progressbar-determinate\n [value]=\"value\"\n [targetValue]=\"targetValue\"\n [targetLabel]=\"targetLabel\"\n [activeColor]=\"activeColor\"\n [showValue]=\"showValue\">\n </s-progressbar-determinate>\n</ng-template>\n\n<ng-template #pbIndeterminateTemplate>\n <s-progressbar-indeterminate\n [activeColor]=\"activeColor\"\n [label]=\"label\">\n </s-progressbar-indeterminate>\n</ng-template>",
|
|
55
|
+
template: "<ng-container *ngIf=\"mode === 'determinate'; then pbDeterminateTemplate else pbIndeterminateTemplate\"></ng-container>\n\n<ng-template #pbDeterminateTemplate>\n <s-progressbar-determinate\n [value]=\"value\"\n [numberFormatOptions]=\"numberFormatOptions\"\n [targetValue]=\"targetValue\"\n [targetLabel]=\"targetLabel\"\n [activeColor]=\"activeColor\"\n [showValue]=\"showValue\">\n </s-progressbar-determinate>\n</ng-template>\n\n<ng-template #pbIndeterminateTemplate>\n <s-progressbar-indeterminate\n [activeColor]=\"activeColor\"\n [label]=\"label\">\n </s-progressbar-indeterminate>\n</ng-template>",
|
|
48
56
|
styles: [".progress-bar{position:relative}.progress-bar .progress-bar-all{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progress-bar .progress-bar-all .progress-bar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progress-bar .progress-bar-all .progress-bar-active--blue{background-color:#428bca}.progress-bar .progress-bar-all .progress-bar-active--green{background-color:#0c9348}.progress-bar .progress-bar-all .progress-bar-active--red{background-color:#c13018}.progress-bar .progress-bar-all .progress-bar-active--yellow{background-color:#fcbf10}.progress-bar .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progress-bar .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progress-bar .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
|
|
49
57
|
})
|
|
50
58
|
], ProgressBarComponent);
|
|
51
59
|
return ProgressBarComponent;
|
|
52
60
|
}());
|
|
53
61
|
export { ProgressBarComponent };
|
|
54
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
62
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3NiYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNlbmlvcnNpc3RlbWFzL2FuZ3VsYXItY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvcHJvZ3Jlc3NiYXIvcHJvZ3Jlc3NiYXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUV6RCxPQUFPLEVBQXFCLGVBQWUsRUFBRSxNQUFNLFVBQVUsQ0FBQztBQU85RDtJQTZCSTtRQXhCTyx3QkFBbUIsR0FBNkI7WUFDbkQsS0FBSyxFQUFFLFNBQVM7WUFDaEIscUJBQXFCLEVBQUUsQ0FBQztZQUN4QixxQkFBcUIsRUFBRSxDQUFDO1NBQzNCLENBQUM7UUFlSyxjQUFTLEdBQUcsSUFBSSxDQUFDO1FBR2pCLFNBQUksR0FBRyxlQUFlLENBQUMsV0FBVyxDQUFDO0lBRTNCLENBQUM7SUFFVCx1Q0FBUSxHQUFmO1FBQ0ksSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFTyw2Q0FBYyxHQUF0QjtRQUNJLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxHQUFHLEVBQUU7WUFDcEMsTUFBTSxJQUFJLEtBQUssQ0FBQyx5QkFBeUIsQ0FBQyxDQUFDO1NBQzlDO1FBRUQsSUFBSSxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsSUFBSSxJQUFJLENBQUMsV0FBVyxHQUFHLEdBQUcsRUFBRTtZQUNoRCxNQUFNLElBQUksS0FBSyxDQUFDLCtCQUErQixDQUFDLENBQUM7U0FDcEQ7UUFFRCxJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssZUFBZSxDQUFDLGFBQWEsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLFdBQVcsSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLEVBQUU7WUFDckcsTUFBTSxJQUFJLEtBQUssQ0FBQyxxR0FBcUcsQ0FBQyxDQUFDO1NBQzFIO0lBQ0wsQ0FBQztJQTdDRDtRQURDLEtBQUssRUFBRTt1REFDYTtJQUdyQjtRQURDLEtBQUssRUFBRTtxRUFLTjtJQUdGO1FBREMsS0FBSyxFQUFFOzZEQUNtQjtJQUczQjtRQURDLEtBQUssRUFBRTt1REFDYTtJQUdyQjtRQURDLEtBQUssRUFBRTs2REFDbUI7SUFHM0I7UUFEQyxLQUFLLEVBQUU7NkRBQzhCO0lBR3RDO1FBREMsS0FBSyxFQUFFOzJEQUNnQjtJQUd4QjtRQURDLEtBQUssRUFBRTtzREFDa0M7SUEzQmpDLG9CQUFvQjtRQUxoQyxTQUFTLENBQUM7WUFDUCxRQUFRLEVBQUUsZUFBZTtZQUN6Qix1cEJBQTJDOztTQUU5QyxDQUFDO09BQ1csb0JBQW9CLENBZ0RoQztJQUFELDJCQUFDO0NBQUEsQUFoREQsSUFnREM7U0FoRFksb0JBQW9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuaW1wb3J0IHsgUHJvZ3Jlc3NCYXJDb2xvcnMsIFByb2dyZXNzQmFyTW9kZSB9IGZyb20gXCIuL21vZGVsc1wiO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogXCJzLXByb2dyZXNzYmFyXCIsXG4gICAgdGVtcGxhdGVVcmw6IFwiLi9wcm9ncmVzc2Jhci5jb21wb25lbnQuaHRtbFwiLFxuICAgIHN0eWxlVXJsczogW1wiLi9wcm9ncmVzc2Jhci5jb21wb25lbnQuc2Nzc1wiXSxcbn0pXG5leHBvcnQgY2xhc3MgUHJvZ3Jlc3NCYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHZhbHVlOiBudW1iZXI7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBudW1iZXJGb3JtYXRPcHRpb25zOiBJbnRsLk51bWJlckZvcm1hdE9wdGlvbnMgPSB7XG4gICAgICAgIHN0eWxlOiBcImRlY2ltYWxcIixcbiAgICAgICAgbWluaW11bUZyYWN0aW9uRGlnaXRzOiAwLFxuICAgICAgICBtYXhpbXVtRnJhY3Rpb25EaWdpdHM6IDIsXG4gICAgfTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHRhcmdldFZhbHVlOiBudW1iZXI7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBsYWJlbDogc3RyaW5nO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgdGFyZ2V0TGFiZWw6IHN0cmluZztcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGFjdGl2ZUNvbG9yOiBQcm9ncmVzc0JhckNvbG9ycztcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNob3dWYWx1ZSA9IHRydWU7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBtb2RlID0gUHJvZ3Jlc3NCYXJNb2RlLkRldGVybWluYXRlO1xuXG4gICAgY29uc3RydWN0b3IoKSB7fVxuXG4gICAgcHVibGljIG5nT25Jbml0KCkge1xuICAgICAgICB0aGlzLnZhbGlkYXRlSW5wdXRzKCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSB2YWxpZGF0ZUlucHV0cygpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMudmFsdWUgPCAwIHx8IHRoaXMudmFsdWUgPiAxMDApIHtcbiAgICAgICAgICAgIHRocm93IG5ldyBFcnJvcihcIkludmFsaWQgdmFsdWUgZm9yIHZhbHVlXCIpO1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKHRoaXMudGFyZ2V0VmFsdWUgPCAwIHx8IHRoaXMudGFyZ2V0VmFsdWUgPiAxMDApIHtcbiAgICAgICAgICAgIHRocm93IG5ldyBFcnJvcihcIkludmFsaWQgdmFsdWUgZm9yIHRhcmdldFZhbHVlXCIpO1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKHRoaXMubW9kZSA9PT0gUHJvZ3Jlc3NCYXJNb2RlLkluZGV0ZXJtaW5hdGUgJiYgKHRoaXMudmFsdWUgfHwgdGhpcy50YXJnZXRWYWx1ZSB8fCB0aGlzLnRhcmdldExhYmVsKSkge1xuICAgICAgICAgICAgdGhyb3cgbmV3IEVycm9yKFwiV2hlbiB0aGUgbW9kZSBpcyBpbmRldGVybWluYXRlLCB0aGUgdmFsdWUsIHRhcmdldFZhbHVlIGFuZCB0YXJnZXRMYWJlbCBwYXJhbWV0ZXJzIGFyZSBub3QgZXhwZWN0ZWQuXCIpO1xuICAgICAgICB9XG4gICAgfVxufVxuIl19
|
|
@@ -5826,6 +5826,11 @@ var ProgressBarMode;
|
|
|
5826
5826
|
|
|
5827
5827
|
let ProgressBarComponent = class ProgressBarComponent {
|
|
5828
5828
|
constructor() {
|
|
5829
|
+
this.numberFormatOptions = {
|
|
5830
|
+
style: "decimal",
|
|
5831
|
+
minimumFractionDigits: 0,
|
|
5832
|
+
maximumFractionDigits: 2,
|
|
5833
|
+
};
|
|
5829
5834
|
this.showValue = true;
|
|
5830
5835
|
this.mode = ProgressBarMode.Determinate;
|
|
5831
5836
|
}
|
|
@@ -5847,6 +5852,9 @@ let ProgressBarComponent = class ProgressBarComponent {
|
|
|
5847
5852
|
__decorate([
|
|
5848
5853
|
Input()
|
|
5849
5854
|
], ProgressBarComponent.prototype, "value", void 0);
|
|
5855
|
+
__decorate([
|
|
5856
|
+
Input()
|
|
5857
|
+
], ProgressBarComponent.prototype, "numberFormatOptions", void 0);
|
|
5850
5858
|
__decorate([
|
|
5851
5859
|
Input()
|
|
5852
5860
|
], ProgressBarComponent.prototype, "targetValue", void 0);
|
|
@@ -5868,17 +5876,29 @@ __decorate([
|
|
|
5868
5876
|
ProgressBarComponent = __decorate([
|
|
5869
5877
|
Component({
|
|
5870
5878
|
selector: "s-progressbar",
|
|
5871
|
-
template: "<ng-container *ngIf=\"mode === 'determinate'; then pbDeterminateTemplate else pbIndeterminateTemplate\"></ng-container>\n\n<ng-template #pbDeterminateTemplate>\n <s-progressbar-determinate\n [value]=\"value\"\n [targetValue]=\"targetValue\"\n [targetLabel]=\"targetLabel\"\n [activeColor]=\"activeColor\"\n [showValue]=\"showValue\">\n </s-progressbar-determinate>\n</ng-template>\n\n<ng-template #pbIndeterminateTemplate>\n <s-progressbar-indeterminate\n [activeColor]=\"activeColor\"\n [label]=\"label\">\n </s-progressbar-indeterminate>\n</ng-template>",
|
|
5879
|
+
template: "<ng-container *ngIf=\"mode === 'determinate'; then pbDeterminateTemplate else pbIndeterminateTemplate\"></ng-container>\n\n<ng-template #pbDeterminateTemplate>\n <s-progressbar-determinate\n [value]=\"value\"\n [numberFormatOptions]=\"numberFormatOptions\"\n [targetValue]=\"targetValue\"\n [targetLabel]=\"targetLabel\"\n [activeColor]=\"activeColor\"\n [showValue]=\"showValue\">\n </s-progressbar-determinate>\n</ng-template>\n\n<ng-template #pbIndeterminateTemplate>\n <s-progressbar-indeterminate\n [activeColor]=\"activeColor\"\n [label]=\"label\">\n </s-progressbar-indeterminate>\n</ng-template>",
|
|
5872
5880
|
styles: [".progress-bar{position:relative}.progress-bar .progress-bar-all{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progress-bar .progress-bar-all .progress-bar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progress-bar .progress-bar-all .progress-bar-active--blue{background-color:#428bca}.progress-bar .progress-bar-all .progress-bar-active--green{background-color:#0c9348}.progress-bar .progress-bar-all .progress-bar-active--red{background-color:#c13018}.progress-bar .progress-bar-all .progress-bar-active--yellow{background-color:#fcbf10}.progress-bar .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progress-bar .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progress-bar .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
|
|
5873
5881
|
})
|
|
5874
5882
|
], ProgressBarComponent);
|
|
5875
5883
|
|
|
5876
5884
|
let ProgressBarDeterminateComponent = class ProgressBarDeterminateComponent {
|
|
5877
|
-
constructor() {
|
|
5885
|
+
constructor(localeService) {
|
|
5886
|
+
this.localeService = localeService;
|
|
5878
5887
|
this.showValue = true;
|
|
5879
5888
|
}
|
|
5880
5889
|
ngOnInit() {
|
|
5881
5890
|
this.validateValues();
|
|
5891
|
+
this.onGetLocale();
|
|
5892
|
+
}
|
|
5893
|
+
onGetLocale() {
|
|
5894
|
+
this.localeService.getLocale().subscribe({
|
|
5895
|
+
next: (locale) => {
|
|
5896
|
+
this.numberFormat = new Intl.NumberFormat(locale !== null && locale !== void 0 ? locale : "pt-BR", this.numberFormatOptions);
|
|
5897
|
+
},
|
|
5898
|
+
error: () => {
|
|
5899
|
+
this.numberFormat = new Intl.NumberFormat("pt-BR", this.numberFormatOptions);
|
|
5900
|
+
},
|
|
5901
|
+
});
|
|
5882
5902
|
}
|
|
5883
5903
|
validateValues() {
|
|
5884
5904
|
if (this.value < 0 || this.value > 100) {
|
|
@@ -5889,9 +5909,15 @@ let ProgressBarDeterminateComponent = class ProgressBarDeterminateComponent {
|
|
|
5889
5909
|
}
|
|
5890
5910
|
}
|
|
5891
5911
|
};
|
|
5912
|
+
ProgressBarDeterminateComponent.ctorParameters = () => [
|
|
5913
|
+
{ type: LocaleService }
|
|
5914
|
+
];
|
|
5892
5915
|
__decorate([
|
|
5893
5916
|
Input()
|
|
5894
5917
|
], ProgressBarDeterminateComponent.prototype, "value", void 0);
|
|
5918
|
+
__decorate([
|
|
5919
|
+
Input()
|
|
5920
|
+
], ProgressBarDeterminateComponent.prototype, "numberFormatOptions", void 0);
|
|
5895
5921
|
__decorate([
|
|
5896
5922
|
Input()
|
|
5897
5923
|
], ProgressBarDeterminateComponent.prototype, "targetValue", void 0);
|
|
@@ -5907,7 +5933,7 @@ __decorate([
|
|
|
5907
5933
|
ProgressBarDeterminateComponent = __decorate([
|
|
5908
5934
|
Component({
|
|
5909
5935
|
selector: "s-progressbar-determinate",
|
|
5910
|
-
template: "<div class=\"progressbar-determinate\">\n <div class=\"progressbar-container\">\n <div\n class=\"progressbar-active\"\n [ngClass]=\"{\n 'progressbar-active--blue' : activeColor === 'blue',\n 'progressbar-active--green': activeColor === 'green',\n 'progressbar-active--red': activeColor === 'red',\n 'progressbar-active--yellow': activeColor === 'yellow'\n }\"\n [ngStyle]=\"{ 'width': value + '%' }\">\n {{ showValue && value ? value + '%' : '' }}\n </div>\n </div>\n <div\n *ngIf=\"targetValue\"\n class=\"target\"\n [ngStyle]=\"{\n 'left': targetValue <= 50 ? targetValue + '%' : 'unset',\n 'right': targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n 'align-items': targetValue > 50 ? 'flex-end' : 'flex-start'\n }\">\n <span class=\"target-line\"></span>\n <span class=\"target-label\">\n {{ targetLabel || value + '%' }}\n </span>\n </div>\n </div>\n
|
|
5936
|
+
template: "<div class=\"progressbar-determinate\">\n <div class=\"progressbar-container\">\n <div\n class=\"progressbar-active\"\n [ngClass]=\"{\n 'progressbar-active--blue' : activeColor === 'blue',\n 'progressbar-active--green': activeColor === 'green',\n 'progressbar-active--red': activeColor === 'red',\n 'progressbar-active--yellow': activeColor === 'yellow'\n }\"\n [ngStyle]=\"{ 'width': value + '%' }\">\n\n {{ showValue && value ? numberFormat.format(value) + '%' : '' }}\n </div>\n </div>\n <div\n *ngIf=\"targetValue\"\n class=\"target\"\n [ngStyle]=\"{\n 'left': targetValue <= 50 ? targetValue + '%' : 'unset',\n 'right': targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n 'align-items': targetValue > 50 ? 'flex-end' : 'flex-start'\n }\">\n <span class=\"target-line\"></span>\n <span class=\"target-label\">\n {{ targetLabel || numberFormat.format(value) + '%' }}\n </span>\n </div>\n </div>\n",
|
|
5911
5937
|
styles: [".progressbar-determinate{position:relative}.progressbar-determinate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progressbar-determinate .progressbar-container .progressbar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progressbar-determinate .progressbar-container .progressbar-active--blue{background-color:#428bca}.progressbar-determinate .progressbar-container .progressbar-active--green{background-color:#0c9348}.progressbar-determinate .progressbar-container .progressbar-active--red{background-color:#c13018}.progressbar-determinate .progressbar-container .progressbar-active--yellow{background-color:#fcbf10;color:#212533}.progressbar-determinate .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progressbar-determinate .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progressbar-determinate .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
|
|
5912
5938
|
})
|
|
5913
5939
|
], ProgressBarDeterminateComponent);
|
|
@@ -5923,7 +5949,7 @@ __decorate([
|
|
|
5923
5949
|
ProgressBarIndeterminateComponent = __decorate([
|
|
5924
5950
|
Component({
|
|
5925
5951
|
selector: "s-progressbar-indeterminate",
|
|
5926
|
-
template: "
|
|
5952
|
+
template: "<div class=\"progressbar-indeterminate\">\n <div class=\"progressbar-container\">\n <div class=\"indeterminate-bar\" [ngClass]=\"{\n 'indeterminate-bar--blue': activeColor === 'blue',\n 'indeterminate-bar--green': activeColor === 'green',\n 'indeterminate-bar--red': activeColor === 'red',\n 'indeterminate-bar--yellow': activeColor === 'yellow'\n }\"></div>\n </div>\n\n <span *ngIf=\"label\" class=\"progressbar-label\">{{ label }}</span>\n</div>\n",
|
|
5927
5953
|
styles: [".progressbar-indeterminate{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.progressbar-indeterminate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;margin:8px 0;overflow:hidden;width:100%}.progressbar-indeterminate .indeterminate-bar{animation:5s infinite indeterminate-progress;background-color:#428bca;height:100%;width:40%}.progressbar-indeterminate .indeterminate-bar--blue{background-color:#428bca}.progressbar-indeterminate .indeterminate-bar--green{background-color:#0c9348}.progressbar-indeterminate .indeterminate-bar--red{background-color:#c13018}.progressbar-indeterminate .indeterminate-bar--yellow{background-color:#fcbf10}.progressbar-indeterminate .progressbar-label{font-family:\"Open Sans\" sans-serif;font-size:12px;line-height:150%;color:#212533}@keyframes indeterminate-progress{0%{transform:translateX(-250%)}100%{transform:translateX(250%)}}"]
|
|
5928
5954
|
})
|
|
5929
5955
|
], ProgressBarIndeterminateComponent);
|