@seniorsistemas/angular-components 16.13.0 → 16.13.1

package/fesm5/seniorsistemas-angular-components.js

@@ -10336,8 +10336,9 @@ var TileComponent = /** @class */ (function () {
         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;
@@ -10374,8 +10375,8 @@ var TileComponent = /** @class */ (function () {
     TileComponent = TileComponent_1 = __decorate([
         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;
@@ -10386,9 +10387,16 @@ var TileModule = /** @class */ (function () {
     }
     TileModule = __decorate([
         NgModule({
-            imports: [CommonModule, TooltipModule$1, ThumbnailModule],
+            imports: [
+                CommonModule,
+                TooltipModule,
+                ThumbnailModule,
+            ],
             declarations: [TileComponent],
-            exports: [TileComponent, ThumbnailModule],
+            exports: [
+                TileComponent,
+                ThumbnailModule,
+            ],
         })
     ], TileModule);
     return TileModule;