@seniorsistemas/angular-components 17.18.4 → 17.18.5

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

@@ -9709,6 +9709,7 @@
                 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";
@@ -9719,6 +9720,7 @@
                 return;
             }
             unfrozenTable.style.position = "unset";
+            unfrozenTable.style.overflow = 'auto';
         };
         TableFrozenPositionDirective.prototype.handleWindowResize = function () {
             this.synchronizeRowHeight();
@@ -19775,6 +19777,7 @@
     var ThumbnailsComponent = /** @class */ (function () {
         function ThumbnailsComponent() {
             this.selectable = true;
+            this.combineCheckboxEvent = true;
             this.selectionChange = new core.EventEmitter();
             this.itemOpened = new core.EventEmitter();
             this._selection = [];
@@ -19789,12 +19792,12 @@
         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);
         };
@@ -19807,6 +19810,9 @@
         __decorate([
             core.Input()
         ], ThumbnailsComponent.prototype, "selectable", void 0);
+        __decorate([
+            core.Input()
+        ], ThumbnailsComponent.prototype, "combineCheckboxEvent", void 0);
         __decorate([
             core.Input()
         ], ThumbnailsComponent.prototype, "selection", null);
@@ -19819,7 +19825,7 @@
         ThumbnailsComponent = __decorate([
             core.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);
@@ -19830,6 +19836,7 @@
         function ThumbnailItemComponent() {
             this.isCheckable = true;
             this.isChecked = false;
+            this.combineCheckboxEvent = true;
             this.checked = new core.EventEmitter();
             this.opened = new core.EventEmitter();
         }
@@ -19840,13 +19847,19 @@
         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 forms.FormGroup({
                 checkbox: new forms.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 () {
@@ -19863,6 +19876,9 @@
         __decorate([
             core.Input()
         ], ThumbnailItemComponent.prototype, "isChecked", void 0);
+        __decorate([
+            core.Input()
+        ], ThumbnailItemComponent.prototype, "combineCheckboxEvent", void 0);
         __decorate([
             core.Output()
         ], ThumbnailItemComponent.prototype, "checked", void 0);
@@ -19872,7 +19888,7 @@
         ThumbnailItemComponent = __decorate([
             core.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);