@seniorsistemas/angular-components 17.17.13 → 17.18.0

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

@@ -532,6 +532,8 @@
         return TooltipComponent;
     }());
 
+    var isNullOrUndefined = function (value) { return value === null || value === undefined; };
+
     var DEFAULT_TIMER = 300;
     var DebounceUtils = /** @class */ (function () {
         function DebounceUtils() {
@@ -606,8 +608,9 @@
             this.visible = true;
             this.mobileBehavior = MobileBehavior.Pressing;
             this.componentRef = null;
+            this.existFocusedInputRefTooltip = false;
             this.boundOnWindowMouseMoveFunction = this.onWindowMouseMove.bind(this);
-            this.debounceCreateTooltipFunction = this.debounceUtils.debounceLeading(function () { return _this.createTootip(); });
+            this.debounceCreateTooltipFunction = this.debounceUtils.debounceLeading(function () { return _this._createTooltip(true, true); });
         }
         TooltipDirective.prototype.ngOnInit = function () {
             this.validatePosition();
@@ -628,7 +631,7 @@
                 left: Math.min(elementRect.left, toolTipRect.left),
                 bottom: Math.max(elementRect.bottom, toolTipRect.bottom),
             };
-            if (this.isMousePositionOutsideOfElement(event.clientX, event.clientY, totalElementArea)) {
+            if (this.isMousePositionOutsideOfElement(event.clientX, event.clientY, totalElementArea) && !this.existFocusedInputRefTooltip) {
                 this.destroy();
             }
         };
@@ -643,15 +646,17 @@
             if (this.focusedInputRef) {
                 var inputFocus = this.focusedInputRef;
                 var icon_1 = this.getIconFromFocusedInput();
-                this.renderer.listen(this.focusedInputRef, "focus", function () {
+                this.renderer.listen(inputFocus, "focus", function () {
                     if (icon_1) {
-                        _this.createTootipByFocus(icon_1);
+                        _this.existFocusedInputRefTooltip = true;
+                        _this._createTooltip(false, false);
                     }
                 });
                 this.renderer.listen(inputFocus, "blur", function () {
                     if (icon_1) {
                         _this.removeTooltip(icon_1);
                         _this.destroy();
+                        _this.existFocusedInputRefTooltip = false;
                     }
                 });
             }
@@ -682,7 +687,7 @@
         };
         TooltipDirective.prototype.onFocus = function () {
             if (this.tooltipEvent === TooltipEvent.Focus) {
-                this.createTootip();
+                this._createTooltip(true, true);
             }
         };
         TooltipDirective.prototype.onBlur = function () {
@@ -696,14 +701,18 @@
             }
         };
         TooltipDirective.prototype.onMouseLeave = function () {
-            if (this.tooltipEvent === TooltipEvent.Hover) {
+            if (this.tooltipEvent === TooltipEvent.Hover && !this.existFocusedInputRefTooltip) {
                 this.destroy();
             }
         };
         TooltipDirective.prototype.onTouchStart = function () {
+            var _this = this;
             if (this.tooltipEvent === TooltipEvent.Hover) {
                 window.clearTimeout(this.touchTimeout);
-                this.touchTimeout = window.setTimeout(this.createTootip.bind(this), this.mobileBehavior === MobileBehavior.Pressing ? this.showDelay : 0);
+                var _delay = this.mobileBehavior === MobileBehavior.Pressing ? this.showDelay : 0;
+                this.touchTimeout = window.setTimeout(function () {
+                    _this._createTooltip(true, true);
+                }, _delay);
             }
         };
         TooltipDirective.prototype.onTouchEnd = function () {
@@ -721,43 +730,37 @@
                 throw new Error("Tooltip " + this.position + " position is unexpected");
             }
         };
-        TooltipDirective.prototype.createTootip = function () {
-            var _a;
-            if (this.componentRef === null && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length)) {
-                var domElem = this.getDomElement();
-                document.body.appendChild(domElem);
-                this.setTooltipComponentProperties();
-                this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);
-                this.tooltipDivElement = domElem.querySelector(".tooltip");
-                if (this.displayTime) {
-                    window.setTimeout(this.destroy.bind(this), this.displayTime);
-                }
-            }
-        };
         TooltipDirective.prototype.getDomElement = function () {
             var componentFactory = this.componentFactoryResolver.resolveComponentFactory(TooltipComponent);
             this.componentRef = componentFactory.create(this.injector);
             this.appRef.attachView(this.componentRef.hostView);
             return this.componentRef.hostView.rootNodes[0];
         };
-        /**
-         * Cria um tooltip para o icone do input em focus.
-         *
-         * @param icon O ícone do input em focus.
-         */
-        TooltipDirective.prototype.createTootipByFocus = function (icon) {
+        TooltipDirective.prototype._createTooltip = function (useShowDelay, autoDestroy) {
             var _this = this;
+            if (useShowDelay === void 0) { useShowDelay = false; }
+            if (autoDestroy === void 0) { autoDestroy = true; }
             var _a;
-            if (this.componentRef === null && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length)) {
-                var domElem = this.getDomElement();
-                var tooltip_1 = domElem.querySelector(".tooltip");
-                icon.appendChild(tooltip_1);
-                this.setTooltipComponentProperties();
-                this.setTooltipPositionProperty(icon);
-                setTimeout(function () { return tooltip_1.classList.add("tooltip--visible"); }, 0);
-                this.renderer.listen(window, "scroll", function () {
-                    _this.setTooltipPositionProperty(icon);
-                });
+            var hasText = ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.length) > 0;
+            var hasComponentRef = this.componentRef !== null;
+            if (!hasText || hasComponentRef) {
+                return;
+            }
+            var domElement = this.getDomElement();
+            document.body.appendChild(domElement);
+            this.tooltipDivElement = domElement.querySelector(".tooltip");
+            this.setTooltipComponentProperties();
+            var _showDelay = useShowDelay ? this.showDelay : 0;
+            setTimeout(function () {
+                _this.showTooltip();
+            }, _showDelay);
+            this.renderer.listen(window, "scroll", function () {
+                _this.setTooltipPositionProperty();
+            });
+            if (autoDestroy && this.displayTime) {
+                setTimeout(function () {
+                    _this.destroy();
+                }, this.displayTime);
             }
         };
         TooltipDirective.prototype.showTooltip = function () {
@@ -767,11 +770,14 @@
                 window.addEventListener("mousemove", this.boundOnWindowMouseMoveFunction);
             }
         };
-        TooltipDirective.prototype.setTooltipPositionProperty = function (element) {
+        TooltipDirective.prototype.setTooltipPositionProperty = function () {
             var e_1, _a;
+            if (!this.componentRef) {
+                return;
+            }
             var margin = 20;
             var anchorSize = 5;
-            var domElem = element || this.componentRef.hostView.rootNodes[0].querySelector("#tooltip");
+            var domElem = this.componentRef.hostView.rootNodes[0].querySelector("#tooltip");
             var _b = domElem.getBoundingClientRect(), height = _b.height, width = _b.width;
             var _c = this.elementRef.nativeElement.getBoundingClientRect(), left = _c.left, right = _c.right, top = _c.top, bottom = _c.bottom;
             var positions = [
@@ -831,7 +837,7 @@
             }
         };
         TooltipDirective.prototype.destroy = function () {
-            if (this.componentRef !== null) {
+            if (!isNullOrUndefined(this.componentRef)) {
                 window.clearTimeout(this.showTimeout);
                 this.appRef.detachView(this.componentRef.hostView);
                 this.componentRef.destroy();
@@ -5390,8 +5396,6 @@
             .replace(/\byy\b/, "YYYY"); // year (four digits)
     };
 
-    var isNullOrUndefined = function (value) { return value === null || value === undefined; };
-
     var CountryPhonePickerComponent = /** @class */ (function () {
         function CountryPhonePickerComponent(_countryPhonePickerService, _translate, _eRef, platformId) {
             var _this = this;
@@ -5786,7 +5790,7 @@
     var Field = /** @class */ (function () {
         function Field(config) {
             var _this = this;
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             if ((_a = config.footer) === null || _a === void 0 ? void 0 : _a.help) {
                 config.footer.help = __assign({ visible: function () { return true; } }, (_b = config.footer) === null || _b === void 0 ? void 0 : _b.help);
             }
@@ -5813,6 +5817,7 @@
             this.CustomFieldClass = config.CustomFieldClass;
             this.CustomFieldComponentClass = config.CustomFieldComponentClass;
             this.displayTimeInfoSign = (_e = config.displayTimeInfoSign) !== null && _e !== void 0 ? _e : 5000;
+            this.useInfoSignFocusedInputRef = (_f = config.useInfoSignFocusedInputRef) !== null && _f !== void 0 ? _f : true;
         }
         return Field;
     }());
@@ -7844,6 +7849,7 @@
             this.viewContainer = viewContainer;
             this.componentFactoryResolver = componentFactoryResolver;
             this.displayTime = 5000;
+            this.useFocusedInputRef = true;
         }
         InfoSignDirective.prototype.ngOnChanges = function () {
             this.createInfoSign();
@@ -7861,10 +7867,13 @@
                 this.viewContainer.clear();
                 var componentFactory = this.componentFactoryResolver.resolveComponentFactory(InfoSignComponent);
                 this.componentRef = this.viewContainer.createComponent(componentFactory);
-                this.componentRef.instance.templateRef = this.templateRef;
-                this.componentRef.instance.tooltip = this.sInfoSign;
-                this.componentRef.instance.displayTime = this.displayTime;
-                this.componentRef.instance.focusedInputRef = this.focusedInputRef;
+                var _infoSignComponent = this.componentRef.instance;
+                _infoSignComponent.templateRef = this.templateRef;
+                _infoSignComponent.tooltip = this.sInfoSign;
+                _infoSignComponent.displayTime = this.displayTime;
+                if (this.useFocusedInputRef) {
+                    _infoSignComponent.focusedInputRef = this.focusedInputRef;
+                }
             }
             else if (this.componentRef && this.sInfoSign) {
                 this.componentRef.instance.tooltip = this.sInfoSign;
@@ -7888,6 +7897,9 @@
         __decorate([
             core.Input('sInfoSignFocusedInputRef')
         ], InfoSignDirective.prototype, "focusedInputRef", void 0);
+        __decorate([
+            core.Input('sInfoSignUseFocusedInputRef')
+        ], InfoSignDirective.prototype, "useFocusedInputRef", void 0);
         InfoSignDirective = __decorate([
             core.Directive({
                 selector: "[sInfoSign]"
@@ -10905,9 +10917,9 @@
         ], RadioButtonComponent.prototype, "onFocus", void 0);
         RadioButtonComponent = __decorate([
             core.Component({
-                template: "<s-field-label [field]=\"field\"></s-field-label>\n\n<ng-container *ngIf=\"field.verticalAlignment;else horizontalAlignment\">\n    <div class=\"ui-g\">\n        <div\n            *ngFor=\"let option of field.options; let i = index\"\n            class=\"ui-g-12\">\n            <ng-container\n                [ngTemplateOutlet]=\"radioButton\"\n                [ngTemplateOutletContext]=\"{option: option, index: i}\">\n            </ng-container>\n        </div>\n        <s-button\n            *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n            [label]=\"field.clearLabel || 'Clear selection'\"\n            (onClick)=\"onClear()\"\n            priority=\"link\">\n        </s-button>\n    </div>\n</ng-container>\n\n<ng-template #horizontalAlignment>\n    <div class=\"ui-g\">\n        <ng-container\n            *ngFor=\"let option of field.options; let i = index\"\n            [ngTemplateOutlet]=\"radioButton\"\n            [ngTemplateOutletContext]=\"{option: option, index: i}\">\n        </ng-container>\n    </div>\n    <s-button\n        *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n        class=\"horizontal-clear-option\"\n        [label]=\"field.clearLabel || 'Clear selection'\"\n        (onClick)=\"onClear()\"\n        priority=\"link\">\n    </s-button>\n</ng-template>\n\n<ng-template #radioButton let-option=\"option\" let-i=\"index\">\n    <p-radioButton\n        [name]=\"field.name\"\n        [value]=\"option.value\"\n        [label]=\"option.label\"\n        [formControl]=\"formControl\"\n        [inputId]=\"(field.id || field.name) + '-' + i\"\n        [sTooltip]=\"field.tooltip\"\n        (onClick)=\"onClick.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n    </p-radioButton>\n</ng-template>\n",
+                template: "<s-field-label [field]=\"field\"></s-field-label>\n\n<ng-container *ngIf=\"field.verticalAlignment;else horizontalAlignment\">\n    <div class=\"ui-g\">\n        <div\n            *ngFor=\"let option of field.options; let i = index\"\n            class=\"ui-g-12\">\n            <ng-container\n                [ngTemplateOutlet]=\"radioButton\"\n                [ngTemplateOutletContext]=\"{option: option, index: i}\">\n            </ng-container>\n        </div>\n        <s-button\n            *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n            [label]=\"field.clearLabel || 'Clear selection'\"\n            (onClick)=\"onClear()\"\n            priority=\"link\">\n        </s-button>\n    </div>\n</ng-container>\n\n<ng-template #horizontalAlignment>\n    <div class=\"ui-g horizontal-radio-buttons-container\">\n        <ng-container\n            *ngFor=\"let option of field.options; let i = index\"\n            [ngTemplateOutlet]=\"radioButton\"\n            [ngTemplateOutletContext]=\"{option: option, index: i}\">\n        </ng-container>\n    </div>\n    <s-button\n        *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n        class=\"horizontal-clear-option\"\n        [label]=\"field.clearLabel || 'Clear selection'\"\n        (onClick)=\"onClear()\"\n        priority=\"link\">\n    </s-button>\n</ng-template>\n\n<ng-template #radioButton let-option=\"option\" let-i=\"index\">\n    <p-radioButton\n        class=\"radio-button-item\"\n        [name]=\"field.name\"\n        [value]=\"option.value\"\n        [label]=\"option.label\"\n        [formControl]=\"formControl\"\n        [inputId]=\"(field.id || field.name) + '-' + i\"\n        [sTooltip]=\"field.tooltip\"\n        (onClick)=\"onClick.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n    </p-radioButton>\n</ng-template>\n",
                 encapsulation: core.ViewEncapsulation.None,
-                styles: ["\n        s-button.horizontal-clear-option button {\n            width: min-content !important;\n        }\n    "]
+                styles: ["\n        s-button.horizontal-clear-option button {\n            width: min-content !important;\n        }\n\n        .horizontal-radio-buttons-container {\n            gap: 20px 40px;\n            .radio-button-item {\n                margin: 0;\n            }\n        }\n    "]
             })
         ], RadioButtonComponent);
         return RadioButtonComponent;
@@ -11229,7 +11241,7 @@
         ], RowComponent.prototype, "errorMessages", void 0);
         RowComponent = __decorate([
             core.Component({
-                template: "\n        <div class=\"ui-fluid\" [formGroup]=\"group\">\n        <div class=\"ui-g\">\n            <ng-container *ngFor=\"let field of config.fields\">\n                <div [ngClass]=\"field.gridClass\" *ngIf=\"field.visible()\">\n                    <ng-container *ngIf=\"field.type === FieldType.Custom && field.label\" >\n                        <label *sInfoSign=\"field.infoSign\" [for]=\"field.name\" [ngClass]=\"{ required: field.required() }\" >\n                            {{ field.label }}\n                        </label>\n                    </ng-container>\n\n                    <ng-container *sDynamicForm=\"{ id: id, config: field, group: group}\"></ng-container>\n\n                    <s-control-errors [form]=\"group\" [control]=\"group.controls[field.name]\"\n                        [errorMessages]=\"getErrorMessages(field.errorMessages)\"></s-control-errors>\n\n                    <ng-container *ngIf=\"field.footer\">\n                        <ng-container *ngIf=\"field.footer.help\">\n                            <span *ngIf=\"field.footer.help.visible({ abstractControl: group.controls[field.name], formField: field })\" style=\"color: #888B99\">{{ field.footer.help.text }}</span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"field.footer.link\">\n                            <div\n                                *ngIf=\"field.footer.link.visible({ abstractControl: group.controls[field.name], formField: field })\"\n                                class=\"ui-g\"\n                                style=\"margin-left: -17px\"\n                            >\n                                <s-button\n                                    [label]=\"field.footer.link.label\"\n                                    priority=\"link\"\n                                    (onClick)=\"field.footer.link.onClick({ abstractControl: group.controls[field.name], formField: field })\"\n                                    [auxiliary]=\"true\"\n                                ></s-button>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-template *ngIf=\"field?.bottomTemplate\" [ngTemplateOutlet]=\"field.bottomTemplate\"></ng-template>\n                </div>\n            </ng-container>\n        </div>\n    "
+                template: "\n        <div class=\"ui-fluid\" [formGroup]=\"group\">\n        <div class=\"ui-g\">\n            <ng-container *ngFor=\"let field of config.fields\">\n                <div [ngClass]=\"field.gridClass\" *ngIf=\"field.visible()\">\n                    <ng-container *ngIf=\"field.type === FieldType.Custom && field.label\" >\n                        <label *sInfoSign=\"field.infoSign; displayTime: field.displayTimeInfoSign; useFocusedInputRef: field.useInfoSignFocusedInputRef\" [for]=\"field.name\" [ngClass]=\"{ required: field.required() }\" >\n                            {{ field.label }}\n                        </label>\n                    </ng-container>\n\n                    <ng-container *sDynamicForm=\"{ id: id, config: field, group: group}\"></ng-container>\n\n                    <s-control-errors [form]=\"group\" [control]=\"group.controls[field.name]\"\n                        [errorMessages]=\"getErrorMessages(field.errorMessages)\"></s-control-errors>\n\n                    <ng-container *ngIf=\"field.footer\">\n                        <ng-container *ngIf=\"field.footer.help\">\n                            <span *ngIf=\"field.footer.help.visible({ abstractControl: group.controls[field.name], formField: field })\" style=\"color: #888B99\">{{ field.footer.help.text }}</span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"field.footer.link\">\n                            <div\n                                *ngIf=\"field.footer.link.visible({ abstractControl: group.controls[field.name], formField: field })\"\n                                class=\"ui-g\"\n                                style=\"margin-left: -17px\"\n                            >\n                                <s-button\n                                    [label]=\"field.footer.link.label\"\n                                    priority=\"link\"\n                                    (onClick)=\"field.footer.link.onClick({ abstractControl: group.controls[field.name], formField: field })\"\n                                    [auxiliary]=\"true\"\n                                ></s-button>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-template *ngIf=\"field?.bottomTemplate\" [ngTemplateOutlet]=\"field.bottomTemplate\"></ng-template>\n                </div>\n            </ng-container>\n        </div>\n    "
             })
         ], RowComponent);
         return RowComponent;
@@ -11263,7 +11275,7 @@
         DynamicFieldComponent = __decorate([
             core.Component({
                 selector: "s-dynamic-field",
-                template: "<div class=\"ui-fluid\" [formGroup]=\"form\">\n    <div class=\"ui-g\">\n        <ng-container *ngFor=\"let field of fields\">\n            <div\n                *ngIf=\"!field.visible || field.visible()\"\n                [ngClass]=\"field.gridClass\">\n\n                <ng-container *ngIf=\"field.label && field.type === FieldType.Custom\">\n                    <label\n                        *sInfoSign=\"\n                            field.infoSign;\n                            displayTime: field.displayTimeInfoSign\n                        \"\n                        [for]=\"field.name\"\n                        [ngClass]=\"{ required: field.required() }\"\n                    >\n                        {{ field.label }}\n                    </label>\n                </ng-container>\n\n                <ng-container\n                    *sDynamicForm=\"{\n                        id: id,\n                        config: field,\n                        group: form\n                    }\"\n                ></ng-container>\n\n                <s-control-errors\n                    [form]=\"form\"\n                    [control]=\"form.controls[field.name]\"\n                    [errorMessages]=\"getErrorMessages(field.errorMessages)\"\n                ></s-control-errors>\n\n                <ng-container *ngIf=\"field.footer\">\n                    <ng-container *ngIf=\"field.footer.help\">\n                        <span\n                            *ngIf=\"\n                                field.footer.help.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            style=\"color: #888b99\"\n                        >\n                            {{ field.footer.help.text }}\n                        </span>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"field.footer.link\">\n                        <div\n                            *ngIf=\"\n                                field.footer.link.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            class=\"ui-g\"\n                            style=\"margin-left: -10px\"\n                        >\n                            <s-button\n                                [label]=\"field.footer.link.label\"\n                                priority=\"link\"\n                                (onClick)=\"\n                                    field.footer.link.onClick({\n                                        abstractControl:\n                                            form.controls[field.name],\n                                        formField: field\n                                    })\n                                \"\n                                [auxiliary]=\"true\"\n                            ></s-button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n\n                <ng-template\n                    *ngIf=\"field?.bottomTemplate\"\n                    [ngTemplateOutlet]=\"field.bottomTemplate\"\n                ></ng-template>\n            </div>\n        </ng-container>\n    </div>\n</div>\n"
+                template: "<div class=\"ui-fluid\" [formGroup]=\"form\">\n    <div class=\"ui-g\">\n        <ng-container *ngFor=\"let field of fields\">\n            <div\n                *ngIf=\"!field.visible || field.visible()\"\n                [ngClass]=\"field.gridClass\">\n\n                <ng-container *ngIf=\"field.label && field.type === FieldType.Custom\">\n                    <label\n                        *sInfoSign=\"field.infoSign; displayTime: field.displayTimeInfoSign; useFocusedInputRef: field.useInfoSignFocusedInputRef\"\n                        [for]=\"field.name\"\n                        [ngClass]=\"{ required: field.required() }\"\n                    >\n                        {{ field.label }}\n                    </label>\n                </ng-container>\n\n                <ng-container\n                    *sDynamicForm=\"{\n                        id: id,\n                        config: field,\n                        group: form\n                    }\"\n                ></ng-container>\n\n                <s-control-errors\n                    [form]=\"form\"\n                    [control]=\"form.controls[field.name]\"\n                    [errorMessages]=\"getErrorMessages(field.errorMessages)\"\n                ></s-control-errors>\n\n                <ng-container *ngIf=\"field.footer\">\n                    <ng-container *ngIf=\"field.footer.help\">\n                        <span\n                            *ngIf=\"\n                                field.footer.help.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            style=\"color: #888b99\"\n                        >\n                            {{ field.footer.help.text }}\n                        </span>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"field.footer.link\">\n                        <div\n                            *ngIf=\"\n                                field.footer.link.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            class=\"ui-g\"\n                            style=\"margin-left: -10px\"\n                        >\n                            <s-button\n                                [label]=\"field.footer.link.label\"\n                                priority=\"link\"\n                                (onClick)=\"\n                                    field.footer.link.onClick({\n                                        abstractControl:\n                                            form.controls[field.name],\n                                        formField: field\n                                    })\n                                \"\n                                [auxiliary]=\"true\"\n                            ></s-button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n\n                <ng-template\n                    *ngIf=\"field?.bottomTemplate\"\n                    [ngTemplateOutlet]=\"field.bottomTemplate\"\n                ></ng-template>\n            </div>\n        </ng-container>\n    </div>\n</div>\n"
             })
         ], DynamicFieldComponent);
         return DynamicFieldComponent;
@@ -12035,7 +12047,7 @@
         FieldLabelComponent = __decorate([
             core.Component({
                 selector: 's-field-label',
-                template: "<!--\n    Caso esse componente seja alterado/removido/movido,\n    alterar a label no row.component.ts e dynamic-field.component.ts\n-->\n\n<span *ngIf=\"field.label\">\n    <label\n        *sInfoSign=\"field.infoSign; displayTime: field.displayTimeInfoSign; focusedInputRef: fieldContainerRef\"\n        [for]=\"field.name\"\n        [ngClass]=\"{ required: field.required() }\"\n    >\n        {{ field.label }}\n    </label>\n</span>\n"
+                template: "<!--\n    Caso esse componente seja alterado/removido/movido,\n    alterar a label no row.component.ts e dynamic-field.component.ts\n-->\n\n<span *ngIf=\"field.label\">\n    <label\n        *sInfoSign=\"field.infoSign; displayTime: field.displayTimeInfoSign; focusedInputRef: fieldContainerRef; useFocusedInputRef: field.useInfoSignFocusedInputRef\"\n        [for]=\"field.name\"\n        [ngClass]=\"{ required: field.required() }\"\n    >\n        {{ field.label }}\n    </label>\n</span>\n"
             })
         ], FieldLabelComponent);
         return FieldLabelComponent;
@@ -19766,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++;
@@ -21132,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",
@@ -21629,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;
@@ -21722,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;