@seniorsistemas/angular-components 17.17.14 → 17.18.0

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

@@ -19778,6 +19778,183 @@
         return StepsModule;
     }());
 
+    var ThumbnailsComponent = /** @class */ (function () {
+        function ThumbnailsComponent() {
+            this.selectable = true;
+            this.selectionChange = new core.EventEmitter();
+            this.itemOpened = new core.EventEmitter();
+            this._selection = [];
+        }
+        Object.defineProperty(ThumbnailsComponent.prototype, "selection", {
+            set: function (items) {
+                this._selection = __spread(items);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ThumbnailsComponent.prototype.onItemOpened = function (item) {
+            this.itemOpened.emit(item);
+        };
+        ThumbnailsComponent.prototype.onItemSelected = function (items) {
+            if (items.selected) {
+                this._selection.push(items.item);
+            }
+            else {
+                this._selection.splice(this._selection.findIndex(function (item) { return item === items.item; }), 1);
+            }
+            this.selectionChange.emit(this._selection);
+        };
+        ThumbnailsComponent.prototype.isSelected = function (item) {
+            return this._selection.some(function (i) { return i.id === item.id; });
+        };
+        __decorate([
+            core.Input()
+        ], ThumbnailsComponent.prototype, "items", void 0);
+        __decorate([
+            core.Input()
+        ], ThumbnailsComponent.prototype, "selectable", void 0);
+        __decorate([
+            core.Input()
+        ], ThumbnailsComponent.prototype, "selection", null);
+        __decorate([
+            core.Output()
+        ], ThumbnailsComponent.prototype, "selectionChange", void 0);
+        __decorate([
+            core.Output()
+        ], ThumbnailsComponent.prototype, "itemOpened", void 0);
+        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",
+                styles: [".thumbnails{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px}"]
+            })
+        ], ThumbnailsComponent);
+        return ThumbnailsComponent;
+    }());
+
+    var ThumbnailItemComponent = /** @class */ (function () {
+        function ThumbnailItemComponent() {
+            this.isCheckable = true;
+            this.isChecked = false;
+            this.checked = new core.EventEmitter();
+            this.opened = new core.EventEmitter();
+        }
+        ThumbnailItemComponent.prototype.ngOnInit = function () {
+            this._validateItemData();
+            this._createFormGroup();
+        };
+        ThumbnailItemComponent.prototype.onClick = function () {
+            this.opened.emit(this.itemData);
+        };
+        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 });
+            });
+        };
+        ThumbnailItemComponent.prototype._validateItemData = function () {
+            if (isNullOrUndefined(this.itemData)) {
+                throw new Error("itemData is required");
+            }
+        };
+        __decorate([
+            core.Input()
+        ], ThumbnailItemComponent.prototype, "itemData", void 0);
+        __decorate([
+            core.Input()
+        ], ThumbnailItemComponent.prototype, "isCheckable", void 0);
+        __decorate([
+            core.Input()
+        ], ThumbnailItemComponent.prototype, "isChecked", void 0);
+        __decorate([
+            core.Output()
+        ], ThumbnailItemComponent.prototype, "checked", void 0);
+        __decorate([
+            core.Output()
+        ], ThumbnailItemComponent.prototype, "opened", void 0);
+        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",
+                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);
+        return ThumbnailItemComponent;
+    }());
+
+    var ThumbnailItemVideoComponent = /** @class */ (function () {
+        function ThumbnailItemVideoComponent() {
+        }
+        ThumbnailItemVideoComponent.prototype.onMouseEnter = function () {
+            var _a;
+            if ((_a = this.videoPlayer) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+                this.videoPlayer.nativeElement.play();
+            }
+        };
+        ThumbnailItemVideoComponent.prototype.onMouseLeave = function () {
+            var _a;
+            if ((_a = this.videoPlayer) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+                this.videoPlayer.nativeElement.pause();
+                this.videoPlayer.nativeElement.currentTime = 0;
+            }
+        };
+        __decorate([
+            core.Input()
+        ], ThumbnailItemVideoComponent.prototype, "imageUrl", void 0);
+        __decorate([
+            core.Input()
+        ], ThumbnailItemVideoComponent.prototype, "videoUrl", void 0);
+        __decorate([
+            core.ViewChild("videoPlayer")
+        ], ThumbnailItemVideoComponent.prototype, "videoPlayer", void 0);
+        __decorate([
+            core.HostListener("mouseenter")
+        ], ThumbnailItemVideoComponent.prototype, "onMouseEnter", null);
+        __decorate([
+            core.HostListener("mouseleave")
+        ], ThumbnailItemVideoComponent.prototype, "onMouseLeave", null);
+        ThumbnailItemVideoComponent = __decorate([
+            core.Component({
+                selector: "s-thumbnail-item-video",
+                template: "<div class=\"thumbnail-item-video\" [ngClass]=\"{ 'thumbnail-item-video--playable': videoUrl }\">\n    <div\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{'backgroundImage': 'url(' + imageUrl + ')'}\">\n    </div>\n    <div class=\"play-overlay\">\n        <i class=\"icon fas fa-play\"></i>\n        <span class=\"label\">{{ \"platform.angular_components.watch\" | translate }}</span>\n    </div>\n    <video\n        *ngIf=\"videoUrl\"\n        #videoPlayer\n        class=\"thumbnail-video-preview\"\n        [src]=\"videoUrl\"\n        [loop]=\"true\"\n        [muted]=\"true\"\n        preload=\"none\">\n    </video>\n</div>\n",
+                styles: [".thumbnail-item-video{cursor:pointer;height:100px;overflow:hidden;position:relative;width:100px}.thumbnail-item-video .thumbnail-image{background-repeat:no-repeat;background-size:cover;height:100%;width:100%}.thumbnail-item-video .thumbnail-video-preview{height:100%;left:0;width:100%;object-fit:cover;opacity:0;position:absolute;top:0;transition:opacity .3s ease-in-out}.thumbnail-item-video:hover .thumbnail-video-preview{opacity:1}.thumbnail-item-video .play-overlay{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:8px;-ms-flex-pack:center;justify-content:center;left:50%;opacity:1;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .3s ease-in-out;width:100%;z-index:10}.thumbnail-item-video .play-overlay .icon{color:#fff;font-size:24px}.thumbnail-item-video .play-overlay .label{overflow:hidden;padding:0 8px;text-overflow:ellipsis;width:100%}.thumbnail-item-video--playable:hover .play-overlay{opacity:0}"]
+            })
+        ], ThumbnailItemVideoComponent);
+        return ThumbnailItemVideoComponent;
+    }());
+
+    var ThumbnailItemImageComponent = /** @class */ (function () {
+        function ThumbnailItemImageComponent() {
+        }
+        __decorate([
+            core.Input()
+        ], ThumbnailItemImageComponent.prototype, "imageUrl", void 0);
+        ThumbnailItemImageComponent = __decorate([
+            core.Component({
+                selector: "s-thumbnail-item-image",
+                template: "<div class=\"thumbnail-item-image\">\n    <div\n        *ngIf=\"imageUrl; else noImage\"\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{ backgroundImage: 'url(' + imageUrl + ')' }\">\n    </div>\n\n    <ng-template #noImage>\n        <div class=\"content\">\n            <i class=\"icon fas fa-image\"></i>\n            <span class=\"label\">{{ \"platform.angular_components.view\" | translate }}</span>\n        </div>\n    </ng-template>\n</div>\n",
+                styles: [".thumbnail-item-image{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;height:100px;-ms-flex-pack:center;justify-content:center;width:100px}.thumbnail-item-image .thumbnail-image{background-repeat:no-repeat;background-size:cover;height:100%;width:100%}.thumbnail-item-image .content{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:\"Open Sans\",sans-serif;-ms-flex-pack:center;justify-content:center;width:100%}.thumbnail-item-image .content .icon{font-size:24px}.thumbnail-item-image .content .label{font-size:12px;overflow:hidden;padding:0 8px;text-overflow:ellipsis;width:100%}"]
+            })
+        ], ThumbnailItemImageComponent);
+        return ThumbnailItemImageComponent;
+    }());
+
+    var ThumbnailsModule = /** @class */ (function () {
+        function ThumbnailsModule() {
+        }
+        ThumbnailsModule = __decorate([
+            core.NgModule({
+                imports: [common.CommonModule, forms.ReactiveFormsModule, core$1.TranslateModule, CheckboxModule],
+                declarations: [ThumbnailsComponent, ThumbnailItemComponent, ThumbnailItemVideoComponent, ThumbnailItemImageComponent],
+                exports: [ThumbnailsComponent],
+            })
+        ], ThumbnailsModule);
+        return ThumbnailsModule;
+    }());
+
     var TileComponent = /** @class */ (function () {
         function TileComponent() {
             this.id = "s-tile-" + TileComponent_1.nextId++;
@@ -21144,6 +21321,9 @@
     }());
 
     var fallback = {
+        "platform.angular_components.watch": "assistir",
+        "platform.angular_components.view": "visualizar",
+        "platform.angular_components.listen": "ouvir",
         "platform.angular_components.drag_your_photo_or": "Arraste sua foto ou",
         "platform.angular_components.select_a_file": "selecione um arquivo",
         "platform.angular_components.change_photo": "Alterar foto",
@@ -21641,6 +21821,8 @@
     exports.TextField = TextField;
     exports.ThumbnailComponent = ThumbnailComponent;
     exports.ThumbnailModule = ThumbnailModule;
+    exports.ThumbnailsComponent = ThumbnailsComponent;
+    exports.ThumbnailsModule = ThumbnailsModule;
     exports.TieredMenuDirective = TieredMenuDirective;
     exports.TieredMenuModule = TieredMenuModule;
     exports.TileComponent = TileComponent;
@@ -21734,18 +21916,21 @@
     exports.ɵdn = ProgressBarIndeterminateComponent;
     exports.ɵdo = SelectButtonItemComponent;
     exports.ɵdp = SlidePanelService;
-    exports.ɵdq = TimelineItemModule;
-    exports.ɵdr = TimelineIconItemComponent;
-    exports.ɵds = HorizontalTimelineModule;
-    exports.ɵdt = HorizontalTimelineComponent;
-    exports.ɵdu = VerticalTimelineModule;
-    exports.ɵdv = VerticalTimelineComponent;
-    exports.ɵdw = RangeLineComponent;
-    exports.ɵdx = CollapseOptionComponent;
-    exports.ɵdy = CollapsedItemsComponent;
-    exports.ɵdz = VerticalItemsComponent;
+    exports.ɵdq = ThumbnailItemComponent;
+    exports.ɵdr = ThumbnailItemVideoComponent;
+    exports.ɵds = ThumbnailItemImageComponent;
+    exports.ɵdt = TimelineItemModule;
+    exports.ɵdu = TimelineIconItemComponent;
+    exports.ɵdv = HorizontalTimelineModule;
+    exports.ɵdw = HorizontalTimelineComponent;
+    exports.ɵdx = VerticalTimelineModule;
+    exports.ɵdy = VerticalTimelineComponent;
+    exports.ɵdz = RangeLineComponent;
     exports.ɵe = TieredMenuGlobalService;
-    exports.ɵea = ChipItemComponent;
+    exports.ɵea = CollapseOptionComponent;
+    exports.ɵeb = CollapsedItemsComponent;
+    exports.ɵec = VerticalItemsComponent;
+    exports.ɵed = ChipItemComponent;
     exports.ɵf = TieredMenuComponent;
     exports.ɵg = TieredMenuNestedComponent;
     exports.ɵh = TieredMenuItemComponent;