@seniorsistemas/angular-components 16.3.10 → 16.4.0

package/bundles/seniorsistemas-angular-components.umd.js

@@ -10570,6 +10570,67 @@
         return CodeEditorModule;
     }());
 
+    var ProgressBarComponent = /** @class */ (function () {
+        function ProgressBarComponent() {
+            this.showValue = true;
+        }
+        ProgressBarComponent.prototype.ngOnInit = function () {
+            this.validateValues();
+        };
+        ProgressBarComponent.prototype.validateValues = function () {
+            if (this.value < 0 || this.value > 100) {
+                throw new Error("Invalid value for value");
+            }
+            if (this.targetValue < 0 || this.targetValue > 100) {
+                throw new Error("Invalid value for targetValue");
+            }
+        };
+        __decorate([
+            core.Input()
+        ], ProgressBarComponent.prototype, "value", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarComponent.prototype, "targetValue", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarComponent.prototype, "targetLabel", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarComponent.prototype, "activeColor", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarComponent.prototype, "showValue", void 0);
+        ProgressBarComponent = __decorate([
+            core.Component({
+                selector: "s-progressbar",
+                template: "<div class=\"progress-bar\">\n   <div class=\"progress-bar-all\">\n      <div\n         class=\"progress-bar-active\"\n         [ngClass]=\"{\n            'progress-bar-active--blue' : activeColor == 'blue',\n            'progress-bar-active--green': activeColor == 'green',\n            'progress-bar-active--red': activeColor == 'red',\n            'progress-bar-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",
+                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%;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);
+        return ProgressBarComponent;
+    }());
+
+    var ProgressBarModule = /** @class */ (function () {
+        function ProgressBarModule() {
+        }
+        ProgressBarModule = __decorate([
+            core.NgModule({
+                imports: [common.CommonModule],
+                declarations: [ProgressBarComponent],
+                exports: [ProgressBarComponent],
+            })
+        ], ProgressBarModule);
+        return ProgressBarModule;
+    }());
+
+
+    (function (ProgressBarColors) {
+        ProgressBarColors["Blue"] = "blue";
+        ProgressBarColors["Green"] = "green";
+        ProgressBarColors["Red"] = "red";
+        ProgressBarColors["Yellow"] = "yellow";
+    })(exports.ProgressBarColors || (exports.ProgressBarColors = {}));
+
     exports.AngularComponentsModule = AngularComponentsModule;
     exports.AutocompleteField = AutocompleteField;
     exports.BaseFieldComponent = BaseFieldComponent;
@@ -10658,6 +10719,8 @@
     exports.ProductHeaderModule = ProductHeaderModule;
     exports.ProfilePicturePickerComponent = ProfilePicturePickerComponent;
     exports.ProfilePicturePickerModule = ProfilePicturePickerModule;
+    exports.ProgressBarComponent = ProgressBarComponent;
+    exports.ProgressBarModule = ProgressBarModule;
     exports.RadioButtonField = RadioButtonField;
     exports.RationButtonOption = RationButtonOption;
     exports.RowTogllerDirective = RowTogllerDirective;