@seniorsistemas/angular-components 17.5.0 → 17.5.1

package/fesm5/seniorsistemas-angular-components.js

@@ -6215,6 +6215,11 @@ var ProgressBarMode;
 
 var ProgressBarComponent = /** @class */ (function () {
     function ProgressBarComponent() {
+        this.numberFormatOptions = {
+            style: "decimal",
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 2,
+        };
         this.showValue = true;
         this.mode = ProgressBarMode.Determinate;
     }
@@ -6235,6 +6240,9 @@ var ProgressBarComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], ProgressBarComponent.prototype, "value", void 0);
+    __decorate([
+        Input()
+    ], ProgressBarComponent.prototype, "numberFormatOptions", void 0);
     __decorate([
         Input()
     ], ProgressBarComponent.prototype, "targetValue", void 0);
@@ -6256,7 +6264,7 @@ var ProgressBarComponent = /** @class */ (function () {
     ProgressBarComponent = __decorate([
         Component({
             selector: "s-progressbar",
-            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>",
+            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>",
             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}"]
         })
     ], ProgressBarComponent);
@@ -6264,11 +6272,24 @@ var ProgressBarComponent = /** @class */ (function () {
 }());
 
 var ProgressBarDeterminateComponent = /** @class */ (function () {
-    function ProgressBarDeterminateComponent() {
+    function ProgressBarDeterminateComponent(localeService) {
+        this.localeService = localeService;
         this.showValue = true;
     }
     ProgressBarDeterminateComponent.prototype.ngOnInit = function () {
         this.validateValues();
+        this.onGetLocale();
+    };
+    ProgressBarDeterminateComponent.prototype.onGetLocale = function () {
+        var _this = this;
+        this.localeService.getLocale().subscribe({
+            next: function (locale) {
+                _this.numberFormat = new Intl.NumberFormat(locale !== null && locale !== void 0 ? locale : "pt-BR", _this.numberFormatOptions);
+            },
+            error: function () {
+                _this.numberFormat = new Intl.NumberFormat("pt-BR", _this.numberFormatOptions);
+            },
+        });
     };
     ProgressBarDeterminateComponent.prototype.validateValues = function () {
         if (this.value < 0 || this.value > 100) {
@@ -6278,9 +6299,15 @@ var ProgressBarDeterminateComponent = /** @class */ (function () {
             throw new Error("Invalid value for targetValue");
         }
     };
+    ProgressBarDeterminateComponent.ctorParameters = function () { return [
+        { type: LocaleService }
+    ]; };
     __decorate([
         Input()
     ], ProgressBarDeterminateComponent.prototype, "value", void 0);
+    __decorate([
+        Input()
+    ], ProgressBarDeterminateComponent.prototype, "numberFormatOptions", void 0);
     __decorate([
         Input()
     ], ProgressBarDeterminateComponent.prototype, "targetValue", void 0);
@@ -6296,7 +6323,7 @@ var ProgressBarDeterminateComponent = /** @class */ (function () {
     ProgressBarDeterminateComponent = __decorate([
         Component({
             selector: "s-progressbar-determinate",
-            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 ",
+            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",
             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}"]
         })
     ], ProgressBarDeterminateComponent);
@@ -6315,7 +6342,7 @@ var ProgressBarIndeterminateComponent = /** @class */ (function () {
     ProgressBarIndeterminateComponent = __decorate([
         Component({
             selector: "s-progressbar-indeterminate",
-            template: "<!-- progressbar-indeterminate.component.html -->\n<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",
+            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",
             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%)}}"]
         })
     ], ProgressBarIndeterminateComponent);