@seniorsistemas/angular-components 16.12.4 → 16.13.0

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

@@ -12539,6 +12539,72 @@
         ProgressBarColors["Yellow"] = "yellow";
     })(exports.ProgressBarColors || (exports.ProgressBarColors = {}));
 
+    var RatingScaleComponent = /** @class */ (function () {
+        function RatingScaleComponent() {
+            this.disabled = false;
+        }
+        RatingScaleComponent_1 = RatingScaleComponent;
+        RatingScaleComponent.prototype.writeValue = function (value) {
+            if (!this.disabled) {
+                this.value = value;
+            }
+        };
+        RatingScaleComponent.prototype.registerOnChange = function (onChange) {
+            this._onChange = onChange;
+        };
+        RatingScaleComponent.prototype.registerOnTouched = function (onTouched) {
+            this._onTouched = onTouched;
+        };
+        RatingScaleComponent.prototype.onSelect = function (rating) {
+            this.value = rating;
+            if (this._onChange) {
+                this._onChange(this.value);
+            }
+        };
+        var RatingScaleComponent_1;
+        __decorate([
+            core.Input()
+        ], RatingScaleComponent.prototype, "nodes", void 0);
+        __decorate([
+            core.Input()
+        ], RatingScaleComponent.prototype, "startLabel", void 0);
+        __decorate([
+            core.Input()
+        ], RatingScaleComponent.prototype, "endLabel", void 0);
+        __decorate([
+            core.Input()
+        ], RatingScaleComponent.prototype, "disabled", void 0);
+        RatingScaleComponent = RatingScaleComponent_1 = __decorate([
+            core.Component({
+                selector: "s-rating-scale",
+                template: "<div\n    class=\"rating-scale\"\n    [ngClass]=\"{ 'rating-scale--disabled': disabled }\">\n    <div class=\"nodes\">\n        <button\n            *ngFor=\"let node of nodes; index as i\"\n            class=\"node\"\n            [ngClass]=\"{ 'node--selected': value?.id === node.id && !disabled }\"\n            tabindex=\"0\"\n            (click)=\"onSelect(node)\">            \n            <span\n                *ngIf=\"node.icon\"\n                class=\"icon fas\"\n                [ngClass]=\"node.icon\">\n            </span>\n            <span\n                *ngIf=\"node.title\"\n                class=\"label\">\n                {{ node.title }}\n            </span>\n        </button>\n    </div>\n    <div class=\"labels\">\n        <span>{{ startLabel }}</span>\n        <span>{{ endLabel }}</span>\n    </div>\n</div>",
+                providers: [{
+                        provide: forms.NG_VALUE_ACCESSOR,
+                        useExisting: core.forwardRef(function () { return RatingScaleComponent_1; }),
+                        multi: true,
+                    }],
+                styles: [".rating-scale{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.rating-scale .nodes{display:-ms-flexbox;display:flex}.rating-scale .nodes .node{-ms-flex-align:center;align-items:center;background-color:#fff;border-radius:6px;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:center;justify-content:center;margin:0 2px;padding:8px;border:1px solid #7892a1}.rating-scale .nodes .node .icon{color:#6e7280;font-size:1rem}.rating-scale .nodes .node .label{color:#212533;font-size:.875rem;font-weight:400;line-height:150%}.rating-scale .nodes .node .icon,.rating-scale .nodes .node .label{margin:6px}.rating-scale .nodes .node--selected{background-color:#d5e8ec;border-color:#428bca;color:#428bca}.rating-scale .nodes .node:first-child{margin-left:0}.rating-scale .nodes .node:last-child{margin-right:0}.rating-scale .labels{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:12px 0}.rating-scale .labels span{color:#080808;font-family:\"Open Sans\" sans-serif;font-size:.875rem;font-weight:400;line-height:150%}.rating-scale--disabled{opacity:.5}.rating-scale:not(.rating-scale--disabled) .node{cursor:pointer}.rating-scale:not(.rating-scale--disabled) .node:hover{background-color:#dedce5}.rating-scale:not(.rating-scale--disabled) .node:focus{border-width:2px;outline:0}"]
+            })
+        ], RatingScaleComponent);
+        return RatingScaleComponent;
+    }());
+
+    var RatingScaleModule = /** @class */ (function () {
+        function RatingScaleModule() {
+        }
+        RatingScaleModule = __decorate([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    forms.ReactiveFormsModule,
+                ],
+                declarations: [RatingScaleComponent],
+                exports: [RatingScaleComponent],
+            })
+        ], RatingScaleModule);
+        return RatingScaleModule;
+    }());
+
 
     (function (SplitButtonType) {
         SplitButtonType["Primary"] = "primary";
@@ -13022,6 +13088,8 @@
     exports.ProgressBarComponent = ProgressBarComponent;
     exports.ProgressBarModule = ProgressBarModule;
     exports.RadioButtonField = RadioButtonField;
+    exports.RatingScaleComponent = RatingScaleComponent;
+    exports.RatingScaleModule = RatingScaleModule;
     exports.RationButtonOption = RationButtonOption;
     exports.RowTogllerDirective = RowTogllerDirective;
     exports.Section = Section;