@seniorsistemas/angular-components 16.12.4 → 16.13.1

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

@@ -10482,8 +10482,9 @@
             configurable: true
         });
         TileComponent.prototype.onKeyDown = function (event) {
-            if (!this.disabled && [13, 32].includes(event.keyCode))
+            if (!this.disabled && [13, 32].includes(event.keyCode)) {
                 this.onClick.emit();
+            }
         };
         var TileComponent_1;
         TileComponent.nextId = 0;
@@ -10520,8 +10521,8 @@
         TileComponent = TileComponent_1 = __decorate([
             core.Component({
                 selector: "s-tile",
-                template: "<div [id]=\"id\" class=\"container\" [attr.tabindex]=\"disabled ? undefined : tabIndex\" [attr.aria-label]=\"label\"\n    [attr.aria-disabled]=\"disabled\" role=\"button\" [ngClass]=\"{'disabled': disabled}\" (click)=\"!disabled && onClick.emit($event)\">\n    <div class=\"thumbnail-container\" *ngIf=\"imageSource || iconClass\">\n        <s-thumbnail [id]=\"id + '-thumbnail'\" *ngIf=\"imageSource\" [imageSource]=\"imageSource\" [imageAlt]=\"imageAlt || label\"\n            size=\"small\" [isTile]=\"true\"></s-thumbnail>\n\n        <span [id]=\"id + '-icon'\" *ngIf=\"!imageSource && iconClass\" [class]=\"'icon ' + iconClass\" aria-hidden=\"true\"></span>\n    </div>\n    <div class=\"first-letter-container\" *ngIf=\"!iconClass && !imageSource\">\n        <div class=\"first-letter-span\">\n            <span>{{initialLetter}}</span>\n        </div>\n    </div>\n\n    <div class=\"info-container\">\n        <span [id]=\"id + '-label'\" class=\"label\" [pTooltip]=\"label\" tooltipPosition=\"top\" showDelay=\"500\">{{label}}</span>\n        <span [id]=\"id + '-description'\" class=\"description\" [pTooltip]=\"description\" tooltipPosition=\"top\" showDelay=\"500\">{{description}}</span>\n    </div>\n</div>\n",
-                styles: [":host{display:block}.container{position:relative;background-color:#fff;border:1px solid #ddd;padding:15px;-ms-flex-align:center;align-items:center;cursor:pointer;min-height:80px;overflow:hidden;display:-ms-flexbox;display:flex;transition:background-color .2s ease-out,border-color .2s ease-out}.container:focus:not(.disabled),.container:hover:not(.disabled){background-color:rgba(221,221,221,.2);outline:0}.container.disabled{opacity:.5;filter:Alpha(Opacity=50);background-image:none}.container.disabled,.container.disabled *{cursor:text!important}.thumbnail-container+.info-container{margin-left:15px}.info-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;overflow:hidden}.info-container span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.label{color:#428bca;font-size:12pt}.description{color:#999}.icon{color:#428bca;font-size:40px}.first-letter-container{position:relative;float:left;margin-right:10px;text-align:center}.first-letter-container .first-letter-span{margin:0 auto 5px;font-size:22px;line-height:1.8em;width:40px;height:40px;border-radius:100%;background-color:#428bca;color:#fff}"]
+                template: "<div\n    [id]=\"id\"\n    class=\"tile\"\n    [attr.tabindex]=\"disabled ? undefined : tabIndex\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-disabled]=\"disabled\"\n    role=\"button\"\n    [ngClass]=\"{'tile--disabled': disabled}\"\n    (click)=\"!disabled && onClick.emit($event)\">\n    <div\n        *ngIf=\"imageSource || iconClass\"\n        class=\"thumbnail\">\n        <s-thumbnail\n            *ngIf=\"imageSource\"    \n            [id]=\"id + '-thumbnail'\"\n            [imageSource]=\"imageSource\"\n            [imageAlt]=\"imageAlt || label\"\n            size=\"small\"\n            [isTile]=\"true\">\n        </s-thumbnail>\n        <span\n            *ngIf=\"!imageSource && iconClass\"    \n            [id]=\"id + '-icon'\"\n            [class]=\"'icon ' + iconClass\"\n            aria-hidden=\"true\">\n        </span>\n    </div>\n    <div\n        *ngIf=\"!iconClass && !imageSource\"\n        class=\"first-letter-container\">\n        <div class=\"first-letter\">\n            <span>{{ initialLetter }}</span>\n        </div>\n    </div>\n\n    <div class=\"info\">\n        <span\n            [id]=\"id + '-title'\"\n            class=\"title\"\n            [sTooltip]=\"label\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\">\n            {{ label }}\n        </span>\n        <span\n            [id]=\"id + '-description'\"\n            class=\"description\"\n            [sTooltip]=\"description\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\">\n            {{ description }}\n        </span>\n    </div>\n</div>\n",
+                styles: [".tile{-ms-flex-align:center;align-items:center;background-color:#fff;border:1px solid #c1c1cc;cursor:pointer;display:-ms-flexbox;display:flex;min-height:80px;overflow:hidden;padding:15px;position:relative;transition:background-color .2s ease-out,border-color .2s ease-out}.tile--disabled{opacity:.5;filter:Alpha(Opacity=50);background-image:none}.tile--disabled,.tile--disabled *{cursor:text!important}.tile:focus:not(.tile--disabled),.tile:hover:not(.tile--disabled){background-color:#eeebf2;outline:0}.tile .thumbnail{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:15px}.tile .thumbnail .icon{color:#428bca;font-size:2.5rem}.tile .info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;overflow:hidden}.tile .info .description,.tile .info .title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile .info .title{color:#428bca;font-size:1.25rem}.tile .info .description{color:#6e7280;font-size:.875rem}.tile .first-letter-container{float:left;margin-right:10px;position:relative;text-align:center}.tile .first-letter-container .first-letter{background-color:#428bca;border-radius:50%;color:#fff;font-size:1.375rem;height:40px;line-height:1.8em;margin:0 auto 5px;width:40px}"]
             })
         ], TileComponent);
         return TileComponent;
@@ -10532,9 +10533,16 @@
         }
         TileModule = __decorate([
             core.NgModule({
-                imports: [common.CommonModule, tooltip.TooltipModule, ThumbnailModule],
+                imports: [
+                    common.CommonModule,
+                    TooltipModule,
+                    ThumbnailModule,
+                ],
                 declarations: [TileComponent],
-                exports: [TileComponent, ThumbnailModule],
+                exports: [
+                    TileComponent,
+                    ThumbnailModule,
+                ],
             })
         ], TileModule);
         return TileModule;
@@ -12539,6 +12547,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 +13096,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;