@seniorsistemas/angular-components 17.18.4 → 17.18.5

package/fesm5/seniorsistemas-angular-components.js

@@ -9564,6 +9564,7 @@ var TableFrozenPositionDirective = /** @class */ (function () {
             console.warn("Unable to find frozen element from table. Is the table configured with frozen template?");
             return;
         }
+        frozenTable.style.width = 'min-content';
         frozenTable.style.order = "1";
         frozenTable.style.borderRight = "none";
         frozenTable.style.borderLeft = "1px solid #dddddd";
@@ -9574,6 +9575,7 @@ var TableFrozenPositionDirective = /** @class */ (function () {
             return;
         }
         unfrozenTable.style.position = "unset";
+        unfrozenTable.style.overflow = 'auto';
     };
     TableFrozenPositionDirective.prototype.handleWindowResize = function () {
         this.synchronizeRowHeight();
@@ -19630,6 +19632,7 @@ var StepsModule = /** @class */ (function () {
 var ThumbnailsComponent = /** @class */ (function () {
     function ThumbnailsComponent() {
         this.selectable = true;
+        this.combineCheckboxEvent = true;
         this.selectionChange = new EventEmitter();
         this.itemOpened = new EventEmitter();
         this._selection = [];
@@ -19644,12 +19647,12 @@ var ThumbnailsComponent = /** @class */ (function () {
     ThumbnailsComponent.prototype.onItemOpened = function (item) {
         this.itemOpened.emit(item);
     };
-    ThumbnailsComponent.prototype.onItemSelected = function (items) {
-        if (items.selected) {
-            this._selection.push(items.item);
+    ThumbnailsComponent.prototype.onItemSelected = function (item) {
+        if (item.selected) {
+            this._selection.push(item.item);
         }
         else {
-            this._selection.splice(this._selection.findIndex(function (item) { return item === items.item; }), 1);
+            this._selection.splice(this._selection.findIndex(function (_item) { return _item === item.item; }), 1);
         }
         this.selectionChange.emit(this._selection);
     };
@@ -19662,6 +19665,9 @@ var ThumbnailsComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], ThumbnailsComponent.prototype, "selectable", void 0);
+    __decorate([
+        Input()
+    ], ThumbnailsComponent.prototype, "combineCheckboxEvent", void 0);
     __decorate([
         Input()
     ], ThumbnailsComponent.prototype, "selection", null);
@@ -19674,7 +19680,7 @@ var ThumbnailsComponent = /** @class */ (function () {
     ThumbnailsComponent = __decorate([
         Component({
             selector: "s-thumbnails",
-            template: "<div class=\"thumbnails\">\n    <s-thumbnail-item\n        *ngFor=\"let item of items\"\n        [itemData]=\"item\"\n        [isCheckable]=\"selectable\"\n        [isChecked]=\"isSelected(item)\"\n        (checked)=\"onItemSelected($event)\"\n        (opened)=\"onItemOpened($event)\">\n    </s-thumbnail-item>\n</div>\n",
+            template: "<div class=\"thumbnails\">\n    <s-thumbnail-item\n        *ngFor=\"let item of items\"\n        [combineCheckboxEvent]=\"combineCheckboxEvent\"\n        [itemData]=\"item\"\n        [isCheckable]=\"selectable\"\n        [isChecked]=\"isSelected(item)\"\n        (checked)=\"onItemSelected($event)\"\n        (opened)=\"onItemOpened($event)\">\n    </s-thumbnail-item>\n</div>\n",
             styles: [".thumbnails{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px}"]
         })
     ], ThumbnailsComponent);
@@ -19685,6 +19691,7 @@ var ThumbnailItemComponent = /** @class */ (function () {
     function ThumbnailItemComponent() {
         this.isCheckable = true;
         this.isChecked = false;
+        this.combineCheckboxEvent = true;
         this.checked = new EventEmitter();
         this.opened = new EventEmitter();
     }
@@ -19695,13 +19702,19 @@ var ThumbnailItemComponent = /** @class */ (function () {
     ThumbnailItemComponent.prototype.onClick = function () {
         this.opened.emit(this.itemData);
     };
+    ThumbnailItemComponent.prototype.checkboxClick = function (event) {
+        if (this.combineCheckboxEvent) {
+            return;
+        }
+        event.stopPropagation();
+    };
     ThumbnailItemComponent.prototype._createFormGroup = function () {
         var _this = this;
         this.checkboxFormGroup = new FormGroup({
             checkbox: new FormControl({ checked: this.isChecked }),
         });
         this.checkboxFormGroup.get("checkbox").valueChanges.subscribe(function (value) {
-            _this.checked.emit({ item: _this.itemData, checked: value.checked });
+            _this.checked.emit({ item: _this.itemData, selected: value.checked });
         });
     };
     ThumbnailItemComponent.prototype._validateItemData = function () {
@@ -19718,6 +19731,9 @@ var ThumbnailItemComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], ThumbnailItemComponent.prototype, "isChecked", void 0);
+    __decorate([
+        Input()
+    ], ThumbnailItemComponent.prototype, "combineCheckboxEvent", void 0);
     __decorate([
         Output()
     ], ThumbnailItemComponent.prototype, "checked", void 0);
@@ -19727,7 +19743,7 @@ var ThumbnailItemComponent = /** @class */ (function () {
     ThumbnailItemComponent = __decorate([
         Component({
             selector: "s-thumbnail-item",
-            template: "<button *ngIf=\"itemData\" class=\"thumbnail-item\" (click)=\"onClick()\">\n    <div class=\"thumbnail-item-content\">\n        <div class=\"content\">\n            <ng-container *ngIf=\"itemData.type === 'video'\">\n                <s-thumbnail-item-video\n                    [imageUrl]=\"itemData.imageUrl\"\n                    [videoUrl]=\"itemData.videoUrl\">\n                </s-thumbnail-item-video>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'image'\">\n                <s-thumbnail-item-image [imageUrl]=\"itemData.imageUrl\"></s-thumbnail-item-image>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'audio'\">\n                <i class=\"icon fas fa-volume-down\"></i>\n                <span class=\"label\">{{ \"platform.angular_components.listen\" | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'file'\">\n                <i class=\"icon fas fa-file-alt\"></i>\n                <span class=\"label\">{{ \"platform.angular_components.view\" | translate }}</span>\n            </ng-container>\n        </div>\n        <form *ngIf=\"isCheckable\" [formGroup]=\"checkboxFormGroup\" class=\"checkbox\">\n            <s-checkbox [data]=\"{ label: '' }\" formControlName=\"checkbox\"> </s-checkbox>\n        </form>\n    </div>\n    <span class=\"file-name-label\">{{ itemData.fileName }}</span>\n</button>\n",
+            template: "<button *ngIf=\"itemData\" class=\"thumbnail-item\" (click)=\"onClick()\">\n    <div class=\"thumbnail-item-content\">\n        <div class=\"content\">\n            <ng-container *ngIf=\"itemData.type === 'video'\">\n                <s-thumbnail-item-video\n                    [imageUrl]=\"itemData.imageUrl\"\n                    [videoUrl]=\"itemData.videoUrl\">\n                </s-thumbnail-item-video>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'image'\">\n                <s-thumbnail-item-image [imageUrl]=\"itemData.imageUrl\"></s-thumbnail-item-image>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'audio'\">\n                <i class=\"icon fas fa-volume-down\"></i>\n                <span class=\"label\">{{ \"platform.angular_components.listen\" | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'file'\">\n                <i class=\"icon fas fa-file-alt\"></i>\n                <span class=\"label\">{{ \"platform.angular_components.view\" | translate }}</span>\n            </ng-container>\n        </div>\n        <form *ngIf=\"isCheckable\" [formGroup]=\"checkboxFormGroup\" class=\"checkbox\">\n            <s-checkbox [data]=\"{ label: '' }\" formControlName=\"checkbox\" (click)=\"checkboxClick($event)\"></s-checkbox>\n        </form>\n    </div>\n    <span class=\"file-name-label\">{{ itemData.fileName }}</span>\n</button>\n",
             styles: [".thumbnail-item{-ms-flex-align:center;align-items:center;background:0 0;border:none;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;overflow:hidden;width:100px}.thumbnail-item-content{-ms-flex-align:center;align-items:center;background-image:linear-gradient(to top right,#5288b6,#00c89a);border-radius:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100px;-ms-flex-pack:center;justify-content:center;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%;overflow:hidden}.thumbnail-item-content .checkbox{position:absolute;right:8px;top:8px}.thumbnail-item-content .content{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:4px;overflow:hidden;width:100%}.thumbnail-item-content .content .icon{font-size:24px}.thumbnail-item-content .content .label{font-size:12px;width:100%;padding:0 8px;overflow:hidden;text-overflow:ellipsis}.thumbnail-item:hover{transform:scale(1.05);transition:.2s ease-in-out}.thumbnail-item .file-name-label{color:#525966;font-family:\"Open Sans\",sans-serif;font-size:12px;overflow:hidden;text-align:center;text-overflow:ellipsis;text-wrap:nowrap;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}"]
         })
     ], ThumbnailItemComponent);