@seniorsistemas/angular-components 17.18.4 → 17.18.5

package/fesm2015/seniorsistemas-angular-components.js

@@ -8976,6 +8976,7 @@ let TableFrozenPositionDirective = class TableFrozenPositionDirective {
             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";
@@ -8986,6 +8987,7 @@ let TableFrozenPositionDirective = class TableFrozenPositionDirective {
             return;
         }
         unfrozenTable.style.position = "unset";
+        unfrozenTable.style.overflow = 'auto';
     }
     handleWindowResize() {
         this.synchronizeRowHeight();
@@ -18333,6 +18335,7 @@ StepsModule = __decorate([
 let ThumbnailsComponent = class ThumbnailsComponent {
     constructor() {
         this.selectable = true;
+        this.combineCheckboxEvent = true;
         this.selectionChange = new EventEmitter();
         this.itemOpened = new EventEmitter();
         this._selection = [];
@@ -18343,12 +18346,12 @@ let ThumbnailsComponent = class ThumbnailsComponent {
     onItemOpened(item) {
         this.itemOpened.emit(item);
     }
-    onItemSelected(items) {
-        if (items.selected) {
-            this._selection.push(items.item);
+    onItemSelected(item) {
+        if (item.selected) {
+            this._selection.push(item.item);
         }
         else {
-            this._selection.splice(this._selection.findIndex((item) => item === items.item), 1);
+            this._selection.splice(this._selection.findIndex((_item) => _item === item.item), 1);
         }
         this.selectionChange.emit(this._selection);
     }
@@ -18362,6 +18365,9 @@ __decorate([
 __decorate([
     Input()
 ], ThumbnailsComponent.prototype, "selectable", void 0);
+__decorate([
+    Input()
+], ThumbnailsComponent.prototype, "combineCheckboxEvent", void 0);
 __decorate([
     Input()
 ], ThumbnailsComponent.prototype, "selection", null);
@@ -18374,7 +18380,7 @@ __decorate([
 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);
@@ -18383,6 +18389,7 @@ let ThumbnailItemComponent = class ThumbnailItemComponent {
     constructor() {
         this.isCheckable = true;
         this.isChecked = false;
+        this.combineCheckboxEvent = true;
         this.checked = new EventEmitter();
         this.opened = new EventEmitter();
     }
@@ -18393,12 +18400,18 @@ let ThumbnailItemComponent = class ThumbnailItemComponent {
     onClick() {
         this.opened.emit(this.itemData);
     }
+    checkboxClick(event) {
+        if (this.combineCheckboxEvent) {
+            return;
+        }
+        event.stopPropagation();
+    }
     _createFormGroup() {
         this.checkboxFormGroup = new FormGroup({
             checkbox: new FormControl({ checked: this.isChecked }),
         });
         this.checkboxFormGroup.get("checkbox").valueChanges.subscribe((value) => {
-            this.checked.emit({ item: this.itemData, checked: value.checked });
+            this.checked.emit({ item: this.itemData, selected: value.checked });
         });
     }
     _validateItemData() {
@@ -18416,6 +18429,9 @@ __decorate([
 __decorate([
     Input()
 ], ThumbnailItemComponent.prototype, "isChecked", void 0);
+__decorate([
+    Input()
+], ThumbnailItemComponent.prototype, "combineCheckboxEvent", void 0);
 __decorate([
     Output()
 ], ThumbnailItemComponent.prototype, "checked", void 0);
@@ -18425,7 +18441,7 @@ __decorate([
 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);