@seniorsistemas/angular-components 17.10.0 → 17.10.2

package/fesm5/seniorsistemas-angular-components.js

@@ -1,4 +1,4 @@
-import { __decorate, __assign, __extends, __spread, __awaiter, __generator, __param, __values, __rest, __read } from 'tslib';
+import { __decorate, __values, __assign, __extends, __spread, __awaiter, __generator, __param, __rest, __read } from 'tslib';
 import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Renderer2, Directive, KeyValueDiffers, HostBinding, TemplateRef, InjectionToken, Inject, ViewEncapsulation, ViewContainerRef, ChangeDetectorRef, Pipe, ɵɵinject, ContentChild, Optional, ViewChildren } from '@angular/core';
 import { trigger, transition, style as style$7, animate, state, group, query, animateChild } from '@angular/animations';
 import { Subject, of, from, ReplaySubject, throwError, fromEvent, forkJoin } from 'rxjs';
@@ -379,8 +379,8 @@ var TooltipComponent = /** @class */ (function () {
     }
     TooltipComponent = __decorate([
         Component({
-            template: "<div\n   class=\"tooltip\"\n   [ngClass]=\"['tooltip--' + position]\"\n   [class.tooltip--visible]=\"visible\"\n   [ngStyle]=\"{\n      'left': left + 'px',\n      'top': top + 'px'\n   }\">\n   <ng-template\n      *ngIf=\"escape;\n         then escapeTemplate;\n         else noEscapeTemplate\">\n   </ng-template>   \n</div>\n\n<ng-template #noEscapeTemplate>\n   <span\n      class=\"tooltip__content\"\n      [innerHTML]=\"tooltip\">\n   </span>\n</ng-template>\n\n<ng-template #escapeTemplate>\n   <span class=\"tooltip__content\">\n      {{ tooltip }}\n   </span>\n</ng-template>",
-            styles: [".tooltip{background-color:#000;border-radius:2px;color:#fff;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:21px;margin-top:5px;opacity:0;padding:8px;position:fixed;transform:translateX(-50%);text-align:center;max-width:150px;word-wrap:break-word;z-index:99999}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip::before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom{margin-top:8px;transform:translateX(-50%)}.tooltip--bottom::before{border:5px solid transparent;border-bottom:5px solid #000;left:calc(50% - 5px);top:-10px}.tooltip--top{margin-bottom:8px;transform:translate(-50%,-100%)}.tooltip--top::before{border:5px solid transparent;border-top:5px solid #000;left:calc(50% - 5px);bottom:-10px}.tooltip--left{margin-right:28px;transform:translate(calc(-100% - 7px),-50%)}.tooltip--left::before{border:5px solid transparent;border-left:5px solid #000;right:-10px;bottom:calc(50% - 5px)}.tooltip--right{margin-left:7px;transform:translateY(-50%)}.tooltip--right::before{border:5px solid transparent;border-right:5px solid #000;left:-10px;bottom:calc(50% - 5px)}"]
+            template: "<div\n   id=\"tooltip\"\n   class=\"tooltip\"\n   [ngClass]=\"['tooltip--' + position]\"\n   [class.tooltip--visible]=\"visible\"\n   [ngStyle]=\"{\n      'left': left + 'px',\n      'top': top + 'px'\n   }\">\n   <ng-template\n      *ngIf=\"escape;\n         then escapeTemplate;\n         else noEscapeTemplate\">\n   </ng-template>   \n</div>\n\n<ng-template #noEscapeTemplate>\n   <span\n      class=\"tooltip__content\"\n      [innerHTML]=\"tooltip\">\n   </span>\n</ng-template>\n\n<ng-template #escapeTemplate>\n   <span class=\"tooltip__content\">\n      {{ tooltip }}\n   </span>\n</ng-template>",
+            styles: [".tooltip{background-color:#000;border-radius:2px;color:#fff;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:21px;margin-top:5px;opacity:0;padding:8px;position:fixed;transform:translateX(-50%);text-align:center;max-width:220px;word-wrap:break-word;z-index:99999}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip::before{content:\"\";height:0;position:absolute;width:0}.tooltip--bottom{margin-top:8px;transform:translateX(-50%)}.tooltip--bottom::before{border:5px solid transparent;border-bottom:5px solid #000;left:calc(50% - 5px);top:-10px}.tooltip--top{margin-bottom:8px;transform:translate(-50%,-100%)}.tooltip--top::before{border:5px solid transparent;border-top:5px solid #000;left:calc(50% - 5px);bottom:-10px}.tooltip--left{margin-right:28px;transform:translate(calc(-100% - 7px),-50%)}.tooltip--left::before{border:5px solid transparent;border-left:5px solid #000;right:-10px;bottom:calc(50% - 5px)}.tooltip--right{margin-left:7px;transform:translateY(-50%)}.tooltip--right::before{border:5px solid transparent;border-right:5px solid #000;left:-10px;bottom:calc(50% - 5px)}"]
         })
     ], TooltipComponent);
     return TooltipComponent;
@@ -480,7 +480,7 @@ var TooltipDirective = /** @class */ (function () {
             top: Math.min(elementRect.top, toolTipRect.top),
             right: Math.max(elementRect.right, toolTipRect.right),
             left: Math.min(elementRect.left, toolTipRect.left),
-            bottom: Math.max(elementRect.bottom, toolTipRect.bottom)
+            bottom: Math.max(elementRect.bottom, toolTipRect.bottom),
         };
         if (this.isMousePositionOutsideOfElement(event.clientX, event.clientY, totalElementArea)) {
             this.destroy();
@@ -497,12 +497,12 @@ var TooltipDirective = /** @class */ (function () {
         if (this.focusedInputRef) {
             var inputFocus = this.focusedInputRef;
             var icon_1 = this.getIconFromFocusedInput();
-            this.renderer.listen(this.focusedInputRef, 'focus', function () {
+            this.renderer.listen(this.focusedInputRef, "focus", function () {
                 if (icon_1 && _this.isMatchingTooltip(icon_1)) {
                     _this.createTootipByFocus(icon_1);
                 }
             });
-            this.renderer.listen(inputFocus, 'blur', function () {
+            this.renderer.listen(inputFocus, "blur", function () {
                 if (icon_1 && _this.isMatchingTooltip(icon_1)) {
                     _this.removeTooltip(icon_1);
                     _this.destroy();
@@ -523,7 +523,7 @@ var TooltipDirective = /** @class */ (function () {
      * @returns true se o tooltip corresponde; caso contrário, false.
      */
     TooltipDirective.prototype.isMatchingTooltip = function (icon) {
-        var tooltipText = icon.getAttribute('ng-reflect-tooltip');
+        var tooltipText = icon.getAttribute("ng-reflect-tooltip");
         return this.tooltip === tooltipText;
     };
     /**
@@ -531,7 +531,7 @@ var TooltipDirective = /** @class */ (function () {
      * @param icon O ícone do input em focus.
      */
     TooltipDirective.prototype.removeTooltip = function (icon) {
-        var tooltip = icon.querySelector('.tooltip');
+        var tooltip = icon.querySelector(".tooltip");
         if (tooltip) {
             tooltip.remove();
         }
@@ -539,9 +539,7 @@ var TooltipDirective = /** @class */ (function () {
     // whenever the component with the tooltip is clicked I destroy the tooltip.
     // whenever a key is pressed on the component with the tooltip I destroy the tooltip.
     TooltipDirective.prototype.onClick = function () {
-        if (this.tooltipEvent === TooltipEvent.Hover &&
-            !navigator.userAgent.match(/Android/i) &&
-            !navigator.userAgent.match(/iPhone/i)) {
+        if (this.tooltipEvent === TooltipEvent.Hover && !navigator.userAgent.match(/Android/i) && !navigator.userAgent.match(/iPhone/i)) {
             this.destroy();
         }
     };
@@ -586,12 +584,7 @@ var TooltipDirective = /** @class */ (function () {
         }
     };
     TooltipDirective.prototype.validatePosition = function () {
-        var containsPosition = [
-            TooltipPosition.Top,
-            TooltipPosition.Right,
-            TooltipPosition.Bottom,
-            TooltipPosition.Left,
-        ].includes(this.position);
+        var containsPosition = [TooltipPosition.Top, TooltipPosition.Right, TooltipPosition.Bottom, TooltipPosition.Left].includes(this.position);
         if (!containsPosition) {
             this.position = TooltipPosition.Top;
             throw new Error("Tooltip " + this.position + " position is unexpected");
@@ -604,7 +597,7 @@ var TooltipDirective = /** @class */ (function () {
             document.body.appendChild(domElem);
             this.setTooltipComponentProperties();
             this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);
-            this.tooltipDivElement = domElem.querySelector('.tooltip');
+            this.tooltipDivElement = domElem.querySelector(".tooltip");
             if (this.displayTime) {
                 window.setTimeout(this.destroy.bind(this), this.displayTime);
             }
@@ -626,142 +619,81 @@ var TooltipDirective = /** @class */ (function () {
         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');
+            var tooltip_1 = domElem.querySelector(".tooltip");
             icon.appendChild(tooltip_1);
             this.setTooltipComponentProperties();
             setTimeout(function () { return tooltip_1.classList.add("tooltip--visible"); }, 0);
-            this.renderer.listen(window, 'scroll', function () {
-                _this.updateTooltipPosition();
+            this.renderer.listen(window, "scroll", function () {
+                _this.setTooltipPositionProperty();
             });
         }
     };
-    TooltipDirective.prototype.updateTooltipPosition = function () {
-        if (this.componentRef) {
-            var _a = this.elementRef.nativeElement.getBoundingClientRect(), left = _a.left, right = _a.right, top_1 = _a.top, bottom = _a.bottom;
-            var tooltipWidth = right - left;
-            var tooltipHeight = bottom - top_1;
-            switch (this.position) {
-                case TooltipPosition.Top:
-                    this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
-                    this.componentRef.instance.top = Math.round(top_1 - 20 - 5);
-                    break;
-                case TooltipPosition.Bottom:
-                    this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
-                    this.componentRef.instance.top = Math.round(bottom + 20);
-                    break;
-                case TooltipPosition.Left:
-                    this.componentRef.instance.left = Math.round(left - 20);
-                    this.componentRef.instance.top = Math.round(top_1 + tooltipHeight / 2 - 5);
-                    break;
-                case TooltipPosition.Right:
-                    this.componentRef.instance.left = Math.round(right + 20);
-                    this.componentRef.instance.top = Math.round(top_1 + tooltipHeight / 2 - 5);
-                    break;
-                default:
-                    break;
-            }
-        }
-    };
     TooltipDirective.prototype.showTooltip = function () {
         if (this.componentRef !== null) {
             this.componentRef.instance.visible = this.visible;
-            window.addEventListener('mousemove', this.boundOnWindowMouseMoveFunction);
+            this.setTooltipPositionProperty();
+            window.addEventListener("mousemove", this.boundOnWindowMouseMoveFunction);
         }
     };
-    TooltipDirective.prototype.setTooltipComponentProperties = function () {
+    TooltipDirective.prototype.setTooltipPositionProperty = function () {
+        var e_1, _a;
         var margin = 20;
         var anchorSize = 5;
+        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 = [
+            {
+                pos: TooltipPosition.Top,
+                check: function () { return top > height; },
+                set: function () { return ({ left: left + (right - left) / 2, top: top - margin - anchorSize }); },
+            },
+            {
+                pos: TooltipPosition.Bottom,
+                check: function () { return document.body.clientHeight - bottom > height; },
+                set: function () { return ({ left: left + (right - left) / 2, top: bottom + margin }); },
+            },
+            {
+                pos: TooltipPosition.Left,
+                check: function () { return left > width; },
+                set: function () { return ({ left: left - margin, top: top + height / 2 - anchorSize }); },
+            },
+            {
+                pos: TooltipPosition.Right,
+                check: function () { return document.body.clientWidth - right > width; },
+                set: function () { return ({ left: right + margin, top: top + height / 2 - anchorSize }); },
+            },
+        ];
+        try {
+            for (var positions_1 = __values(positions), positions_1_1 = positions_1.next(); !positions_1_1.done; positions_1_1 = positions_1.next()) {
+                var _d = positions_1_1.value, pos = _d.pos, check = _d.check, set = _d.set;
+                if (check()) {
+                    this.position = pos;
+                    var _e = set(), left_1 = _e.left, top_1 = _e.top;
+                    this.componentRef.instance.left = Math.round(left_1);
+                    this.componentRef.instance.top = Math.round(top_1);
+                    this.componentRef.instance.position = this.position;
+                    return;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (positions_1_1 && !positions_1_1.done && (_a = positions_1.return)) _a.call(positions_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        // Se não conseguir posicionar, mostrar abaixo
+        this.position = TooltipPosition.Bottom;
+        this.componentRef.instance.left = Math.round(left + (right - left) / 2);
+        this.componentRef.instance.top = Math.round(bottom + margin);
+        this.componentRef.instance.position = this.position;
+    };
+    TooltipDirective.prototype.setTooltipComponentProperties = function () {
         if (this.componentRef !== null) {
             this.componentRef.instance.tooltip = this.tooltip;
             this.componentRef.instance.escape = this.escape;
-            var _a = this.elementRef.nativeElement.getBoundingClientRect(), left = _a.left, right = _a.right, top_2 = _a.top, bottom = _a.bottom;
-            var tooltipHeight = bottom - top_2;
-            var tooltipWidth = right - left;
-            var safeSpace = 150;
-            var positioned = false;
-            var invalidOptions = [];
-            while (!positioned) {
-                if (invalidOptions.includes(TooltipPosition.Top)
-                    && invalidOptions.includes(TooltipPosition.Bottom)
-                    && invalidOptions.includes(TooltipPosition.Left)
-                    && invalidOptions.includes(TooltipPosition.Right)) {
-                    this.destroy();
-                    throw new Error("No space to show tooltip");
-                }
-                switch (this.position) {
-                    case TooltipPosition.Top: {
-                        if (invalidOptions.includes(TooltipPosition.Top)) {
-                            this.position = TooltipPosition.Left;
-                            break;
-                        }
-                        var topShift = top_2;
-                        if (topShift <= tooltipHeight + safeSpace) {
-                            this.position = TooltipPosition.Bottom;
-                            invalidOptions.push(TooltipPosition.Top);
-                            positioned = false;
-                            break;
-                        }
-                        this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
-                        this.componentRef.instance.top = Math.round(top_2 - margin - anchorSize);
-                        positioned = true;
-                        break;
-                    }
-                    case TooltipPosition.Bottom: {
-                        if (invalidOptions.includes(TooltipPosition.Bottom)) {
-                            this.position = TooltipPosition.Left;
-                            break;
-                        }
-                        var bottomShift = document.body.clientHeight - bottom;
-                        if (bottomShift <= tooltipHeight + safeSpace) {
-                            this.position = TooltipPosition.Top;
-                            invalidOptions.push(TooltipPosition.Bottom);
-                            break;
-                        }
-                        this.componentRef.instance.left = Math.round(tooltipWidth / 2 + left);
-                        this.componentRef.instance.top = Math.round(bottom + margin);
-                        positioned = true;
-                        break;
-                    }
-                    case TooltipPosition.Left: {
-                        if (invalidOptions.includes(TooltipPosition.Left)) {
-                            this.position = TooltipPosition.Top;
-                            break;
-                        }
-                        var leftShift = left;
-                        if (leftShift <= tooltipWidth + safeSpace) {
-                            this.position = TooltipPosition.Right;
-                            invalidOptions.push(TooltipPosition.Left);
-                            positioned = false;
-                            break;
-                        }
-                        this.componentRef.instance.left = Math.round(left - margin);
-                        this.componentRef.instance.top = Math.round(top_2 + tooltipHeight / 2 - anchorSize);
-                        positioned = true;
-                        break;
-                    }
-                    case TooltipPosition.Right: {
-                        if (invalidOptions.includes(TooltipPosition.Right)) {
-                            this.position = TooltipPosition.Top;
-                            break;
-                        }
-                        var rightShift = document.body.clientWidth - right;
-                        if (rightShift <= tooltipWidth + safeSpace) {
-                            this.position = TooltipPosition.Left;
-                            invalidOptions.push(TooltipPosition.Right);
-                            positioned = false;
-                            break;
-                        }
-                        this.componentRef.instance.left = Math.round(right + margin);
-                        this.componentRef.instance.top = Math.round(top_2 + tooltipHeight / 2 - anchorSize);
-                        positioned = true;
-                        break;
-                    }
-                    default: {
-                        break;
-                    }
-                }
-                this.componentRef.instance.position = this.position;
-            }
         }
     };
     TooltipDirective.prototype.destroy = function () {
@@ -772,7 +704,7 @@ var TooltipDirective = /** @class */ (function () {
             this.componentRef = null;
             this.tooltipDivElement = null;
         }
-        window.removeEventListener('mousemove', this.boundOnWindowMouseMoveFunction);
+        window.removeEventListener("mousemove", this.boundOnWindowMouseMoveFunction);
     };
     TooltipDirective.ctorParameters = function () { return [
         { type: ElementRef },
@@ -966,15 +898,21 @@ var BadgeTypes;
 
 var BadgeComponent = /** @class */ (function () {
     function BadgeComponent() {
-        this.type = BadgeTypes.Pill;
-        this.color = BadgeColors.Blue;
         this.selectable = false;
-        this.iconPosition = "left";
         this.selected = new EventEmitter();
     }
     BadgeComponent.prototype.onClick = function () {
         this.selected.emit(this.text);
     };
+    BadgeComponent.prototype.ngOnInit = function () {
+        this._setDefaultValues();
+    };
+    BadgeComponent.prototype._setDefaultValues = function () {
+        var _a, _b, _c;
+        this.type = (_a = this.type) !== null && _a !== void 0 ? _a : BadgeTypes.Pill;
+        this.color = (_b = this.color) !== null && _b !== void 0 ? _b : BadgeColors.Blue;
+        this.iconPosition = (_c = this.iconPosition) !== null && _c !== void 0 ? _c : "left";
+    };
     __decorate([
         Input()
     ], BadgeComponent.prototype, "type", void 0);
@@ -5443,6 +5381,9 @@ var LookupComponent = /** @class */ (function () {
     LookupComponent.prototype.getFieldValue = function (obj, path) {
         return path.split(".").reduce(function (result, prop) { return (result[prop] === undefined ? "" : result[prop]); }, obj);
     };
+    LookupComponent.prototype.getBadgeFromValue = function (value, options) {
+        return options === null || options === void 0 ? void 0 : options.find(function (opt) { return opt.value === value; }).badge;
+    };
     LookupComponent.prototype.getLabelForValue = function (value, options) {
         if (!options)
             return value;
@@ -5744,7 +5685,7 @@ var LookupComponent = /** @class */ (function () {
         Injectable(),
         Component({
             selector: "s-lookup",
-            template: "<div [ngClass]=\"{ inputgroup: showSearch }\">\n    <p-autoComplete\n        #autocomplete\n        [(ngModel)]=\"value\"\n        [disabled]=\"disabled\"\n        [dataKey]=\"dataKey\"\n        [multiple]=\"multiple\"\n        [inputId]=\"id + '-autocomplete'\"\n        [forceSelection]=\"autocompleteForceSelection\"\n        [suggestions]=\"getLookupSuggestions()\"\n        (completeMethod)=\"lazyLoadLookup($event)\"\n        (onSelect)=\"onSelect.next($event)\"\n        (onBlur)=\"onBlur.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onUnselect)=\"onUnselect.next($event)\"\n        (onClear)=\"onClear.next($event)\"\n        (onKeyUp)=\"onKeyUp.next($event)\"\n        [field]=\"lookupDisplayField\"\n        [emptyMessage]=\"lookupEmptyMessage\"\n        [dropdown]=\"!showSearch\"\n        [appendTo]=\"lookupAppendTo\"\n        [placeholder]=\"placeholder || ' '\"\n        [autoHighlight]=\"true\"\n        inputStyleClass=\"mousetrap\">\n        <ng-template let-item pTemplate=\"selectedItem\">\n            <span\n                class=\"ui-autocomplete-token-label ng-tns-c65-43 ng-star-inserted\"\n                [sTooltip]=\"lookupDisplayFieldTooltip ? item[lookupDisplayField] : null\"\n                tooltipPosition=\"top\">\n                {{item[lookupDisplayField]}}\n            </span>\n        </ng-template>\n    </p-autoComplete>\n    <button\n        *ngIf=\"showSearch\"\n        pButton\n        type=\"button\"\n        icon=\"fa fa-search\"\n        class=\"button-addon\"\n        [disabled]=\"disabled\"\n        (click)=\"showDialog()\">\n    </button>\n</div>\n<p-dialog\n    appendTo=\"body\"\n    styleClass=\"s-lookup-modal\"\n    [header]=\"searchTitle || 'platform.angular_components.advanced_search' | translate\"\n    [(visible)]=\"dialogVisible\"\n    [modal]=\"true\"\n    (onHide)=\"hideDialog()\"\n    [blockScroll]=\"true\"\n    [focusOnShow]=\"true\"\n    [draggable]=\"false\"\n    [resizable]=\"false\"\n    #dialog>\n    <div\n        *ngIf=\"dialogVisible\"\n        class=\"s-lookup-modal-container\">\n        <div\n            *ngIf=\"searchFields && searchFields.length\"\n            class=\"filter\"\n            [@collapseContent]=\"collapsed\n                ? { value: 'hidden', params: { transitionParams: transitionOptions } }\n                : { value: 'visible', params: { transitionParams: transitionOptions } }\"\n            (@collapseContent.done)=\"onToggleDone()\">\n            <form\n                [formGroup]=\"formGroupDialog\"\n                novalidate\n                autocomplete=\"off\">\n                <div\n                    *ngIf=\"!collapsed\"\n                    class=\"form-content\"\n                    [@childCollapseContent]=\"collapsed\n                        ? { value: ':leave', params: { transitionParams: transitionOptions } }\n                        : { value: ':enter', params: { transitionParams: transitionOptions } }\">\n                    <div class=\"filter-title sds-section-title\">\n                        {{ filterTitle || \"platform.angular_components.filters\" | translate }}\n                    </div>\n                    <div class=\"form-fields\">\n                        <s-dynamic-form\n                            [fields]=\"searchFields\"\n                            [form]=\"formGroupDialog\">\n                        </s-dynamic-form>\n                    </div>\n                    <div class=\"ui-g\">\n                        <div class=\"ui-g-12\">\n                            <s-button\n                                [id]=\"id + '-filter-button'\"\n                                type=\"submit\"\n                                [label]=\"filterLabel || 'platform.angular_components.filter' | translate\"\n                                (onClick)=\"search()\"\n                                sTooltip=\"(ALT + SHIFT + F)\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\">\n                            </s-button>\n                            <s-button\n                                [id]=\"id + '-clear-button'\"\n                                type=\"button\"\n                                [label]=\"clearLabel || 'platform.angular_components.clear' | translate\"\n                                (onClick)=\"clear()\"\n                                priority=\"link\"\n                                sTooltip=\"(ALT + SHIFT + L)\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\">\n                            </s-button>\n                        </div>\n                    </div>\n                </div>\n            </form>\n        </div>\n        <div\n            *ngIf=\"searchFields && searchFields.length\"\n            class=\"filter-toggle\">\n            <div class=\"filter-toggle--start-border-mask\"></div>\n            <button\n                [id]=\"id + '-filter-toggle-button'\"\n                type=\"button\"\n                (click)=\"filterToggle()\">\n                <span\n                    class=\"fa\"\n                    [ngClass]=\"{'fa-chevron-left': !collapsed, 'fa-chevron-right': collapsed}\"\n                    aria-hidden=\"true\">\n                </span>\n            </button>\n            <div class=\"filter-toggle--end-border-mask\"></div>\n        </div>\n        <div\n            class=\"content\"\n            [ngClass]=\"{'empty-content': !searchTotalRecords && !loading}\">\n            <s-empty-state\n                [id]=\"id + '-empty-state'\"\n                *ngIf=\"!searchTotalRecords && !loading\"\n                [title]=\"searchEmptyTitle || 'platform.angular_components.no_records_found' | translate\"\n                [description]=\"searchEmptyDescription\"\n                iconClass=\"fa fa-search\">\n            </s-empty-state>\n\n            <div>\n                <s-button\n                    *ngIf=\"showAddOption\"\n                    priority=\"default\"\n                    [label]=\"'platform.angular_components.add' | translate\"\n                    (onClick)=\"onAdd.emit()\">\n                </s-button>\n                <s-button\n                    *ngIf=\"showEditOption\"\n                    priority=\"default\"\n                    [label]=\"'platform.angular_components.edit' | translate\"\n                    [disabled]=\"selected.length !== 1\"\n                    (onClick)=\"onEdit.emit(this.selected[0])\">\n                </s-button>\n                <s-button\n                    *ngIf=\"showRemoveOption\"\n                    priority=\"default\"\n                    [label]=\"'platform.angular_components.remove' | translate\"\n                    [disabled]=\"!selected.length\"\n                    (onClick)=\"onRemove.emit(this.selected)\">\n                </s-button>\n            </div>\n\n            <p-table\n                [dataKey]=\"dataKey\"\n                [value]=\"getGridData()\"\n                [columns]=\"searchGridFields\"\n                [lazy]=\"true\"\n                [scrollable]=\"true\"\n                [paginator]=\"true\"\n                sortMode=\"multiple\"\n                [totalRecords]=\"searchTotalRecords\"\n                [rows]=\"10\"\n                [selection]=\"selected\"\n                (onLazyLoad)=\"lazyLoadGrid($event)\"\n                *sLoadingState=\"{ loading: loading, indicator: 'logo' }\"\n                [multiSortMeta]=\"multiSortMeta\"\n                [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n                [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n                (selectionChange)=\"onSelectionChange($event)\">\n                <ng-template pTemplate=\"colgroup\" let-columns>\n                    <colgroup>\n                        <col\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\" />\n                        <col\n                            *ngFor=\"let col of columns\"\n                            [style.width]=\"col.width\" />\n                    </colgroup>\n                </ng-template>\n                <ng-template pTemplate=\"header\" let-columns>\n                    <tr>\n                        <th\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\">\n                            <s-table-header-checkbox\n                                [useAllObject]=\"lookupRowProps ? false : true\"\n                                [rowProps]=\"lookupRowProps\">\n                            </s-table-header-checkbox>\n                        </th>\n                        <th\n                            [style.width]=\"col.width\"\n                            *ngFor=\"let col of columns\"\n                            [pSortableColumn]=\"col.name\"\n                            [pSortableColumnDisabled]=\"sortableColumnsDisabled?.includes(col.name)\">\n                            <div class=\"senior-header\">\n                                <span class=\"senior-header-title\">{{ col.label }}</span>\n                                <p-sortIcon\n                                    [field]=\"col.name\"\n                                    *ngIf=\"!sortableColumnsDisabled?.includes(col.name)\">\n                                </p-sortIcon>\n                            </div>\n                        </th>\n                    </tr>\n                </ng-template>\n                <ng-template\n                    pTemplate=\"body\"\n                    let-rowData\n                    let-columns\n                    let-rowIndex=\"rowIndex\">\n                    <tr\n                        sNavigation\n                        [pSelectableRow]=\"rowData\"\n                        [pSelectableRowIndex]=\"rowIndex\"\n                        sDoubleClick (onDoubleClick)=\"onTableRowDoubleClick(rowData)\">\n                        <td\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\"\n                            tabindex=\"0\">\n                            <p-tableCheckbox\n                                [value]=\"rowData\"\n                                [pSelectableRow]=\"rowData\">\n                            </p-tableCheckbox>\n                        </td>\n                        <td\n                            [style.width]=\"col['width']\"\n                            *ngFor=\"let col of searchGridFields\"\n                            [ngSwitch]=\"col.type\"\n                            tabindex=\"0\">\n                            <ng-container *ngSwitchCase=\"'Boolean'\">\n                                <ng-container *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getBooleanLabel(rowData, col.name, col.optionsLabel) }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Date'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate: col.calendarLocaleOptions?.dateFormat || \"L\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'DateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'LocalDateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Time'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedTime: col.calendarLocaleOptions?.dateFormat || \"LTS\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Integer'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getIntegerMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Double'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getDoubleMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Money'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getMoneyMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Number'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getNumberMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Enum'\">\n                                <ng-container\n                                    *ngIf=\"getLabelForValue(getFieldValue(rowData, col.name), col.options); else emptyTemplate\"\n                                >\n                                    <span> {{ getLabelForValue(getFieldValue(rowData, col.name), col.options) }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                <ng-container *ngIf=\"col.mask && col.mask()\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name))\">\n                                        <span>{{ getFieldValue(rowData, col.name) | sMaskFormatter: col.mask() }}</span>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(col.mask && col.mask())\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name)); else emptyTemplate\">\n                                        <span>{{ getFieldValue(rowData, col.name) }}</span>\n                                    </ng-container>\n                                </ng-container>\n                            </ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n                <ng-template pTemplate=\"paginatorright\">\n                    <span [attr.data-hidden]=\"loading\">\n                        {{ printRecordTotalizer() }}\n                    </span>\n                </ng-template>\n            </p-table>\n        </div>\n    </div>\n    <p-footer>\n        <s-button\n            [id]=\"id + '-select-button'\"\n            type=\"button\"\n            [label]=\"selectLabel || 'platform.angular_components.select' | translate\"\n            (onClick)=\"select()\"\n            sTooltip=\"(ALT + SHIFT + S)\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\"\n            [disabled]=\"!selected?.length\">\n        </s-button>\n        <s-button\n            [id]=\"id + '-cancel-button'\"\n            type=\"button\"\n            priority=\"link\"\n            [label]=\"cancelLabel || 'platform.angular_components.cancel' | translate\"\n            (onClick)=\"hideDialog()\"\n            sTooltip=\"(ALT + SHIFT + C)\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\">\n        </s-button>\n    </p-footer>\n</p-dialog>\n<ng-template #emptyTemplate>\n    <span [ngClass]=\"'sds-empty-value'\">\n        {{ emptyFieldLabel || 'platform.angular_components.not_informed' | translate }}\n    </span>\n</ng-template>\n",
+            template: "<div [ngClass]=\"{ inputgroup: showSearch }\">\n    <p-autoComplete\n        #autocomplete\n        [(ngModel)]=\"value\"\n        [disabled]=\"disabled\"\n        [dataKey]=\"dataKey\"\n        [multiple]=\"multiple\"\n        [inputId]=\"id + '-autocomplete'\"\n        [forceSelection]=\"autocompleteForceSelection\"\n        [suggestions]=\"getLookupSuggestions()\"\n        (completeMethod)=\"lazyLoadLookup($event)\"\n        (onSelect)=\"onSelect.next($event)\"\n        (onBlur)=\"onBlur.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onUnselect)=\"onUnselect.next($event)\"\n        (onClear)=\"onClear.next($event)\"\n        (onKeyUp)=\"onKeyUp.next($event)\"\n        [field]=\"lookupDisplayField\"\n        [emptyMessage]=\"lookupEmptyMessage\"\n        [dropdown]=\"!showSearch\"\n        [appendTo]=\"lookupAppendTo\"\n        [placeholder]=\"placeholder || ' '\"\n        [autoHighlight]=\"true\"\n        inputStyleClass=\"mousetrap\">\n        <ng-template let-item pTemplate=\"selectedItem\">\n            <span\n                class=\"ui-autocomplete-token-label ng-tns-c65-43 ng-star-inserted\"\n                [sTooltip]=\"lookupDisplayFieldTooltip ? item[lookupDisplayField] : null\"\n                tooltipPosition=\"top\">\n                {{item[lookupDisplayField]}}\n            </span>\n        </ng-template>\n    </p-autoComplete>\n    <button\n        *ngIf=\"showSearch\"\n        pButton\n        type=\"button\"\n        icon=\"fa fa-search\"\n        class=\"button-addon\"\n        [disabled]=\"disabled\"\n        (click)=\"showDialog()\">\n    </button>\n</div>\n<p-dialog\n    appendTo=\"body\"\n    styleClass=\"s-lookup-modal\"\n    [header]=\"searchTitle || 'platform.angular_components.advanced_search' | translate\"\n    [(visible)]=\"dialogVisible\"\n    [modal]=\"true\"\n    (onHide)=\"hideDialog()\"\n    [blockScroll]=\"true\"\n    [focusOnShow]=\"true\"\n    [draggable]=\"false\"\n    [resizable]=\"false\"\n    #dialog>\n    <div\n        *ngIf=\"dialogVisible\"\n        class=\"s-lookup-modal-container\">\n        <div\n            *ngIf=\"searchFields && searchFields.length\"\n            class=\"filter\"\n            [@collapseContent]=\"collapsed\n                ? { value: 'hidden', params: { transitionParams: transitionOptions } }\n                : { value: 'visible', params: { transitionParams: transitionOptions } }\"\n            (@collapseContent.done)=\"onToggleDone()\">\n            <form\n                [formGroup]=\"formGroupDialog\"\n                novalidate\n                autocomplete=\"off\">\n                <div\n                    *ngIf=\"!collapsed\"\n                    class=\"form-content\"\n                    [@childCollapseContent]=\"collapsed\n                        ? { value: ':leave', params: { transitionParams: transitionOptions } }\n                        : { value: ':enter', params: { transitionParams: transitionOptions } }\">\n                    <div class=\"filter-title sds-section-title\">\n                        {{ filterTitle || \"platform.angular_components.filters\" | translate }}\n                    </div>\n                    <div class=\"form-fields\">\n                        <s-dynamic-form\n                            [fields]=\"searchFields\"\n                            [form]=\"formGroupDialog\">\n                        </s-dynamic-form>\n                    </div>\n                    <div class=\"ui-g\">\n                        <div class=\"ui-g-12\">\n                            <s-button\n                                [id]=\"id + '-filter-button'\"\n                                type=\"submit\"\n                                [label]=\"filterLabel || 'platform.angular_components.filter' | translate\"\n                                (onClick)=\"search()\"\n                                sTooltip=\"(ALT + SHIFT + F)\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\">\n                            </s-button>\n                            <s-button\n                                [id]=\"id + '-clear-button'\"\n                                type=\"button\"\n                                [label]=\"clearLabel || 'platform.angular_components.clear' | translate\"\n                                (onClick)=\"clear()\"\n                                priority=\"link\"\n                                sTooltip=\"(ALT + SHIFT + L)\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\">\n                            </s-button>\n                        </div>\n                    </div>\n                </div>\n            </form>\n        </div>\n        <div\n            *ngIf=\"searchFields && searchFields.length\"\n            class=\"filter-toggle\">\n            <div class=\"filter-toggle--start-border-mask\"></div>\n            <button\n                [id]=\"id + '-filter-toggle-button'\"\n                type=\"button\"\n                (click)=\"filterToggle()\">\n                <span\n                    class=\"fa\"\n                    [ngClass]=\"{'fa-chevron-left': !collapsed, 'fa-chevron-right': collapsed}\"\n                    aria-hidden=\"true\">\n                </span>\n            </button>\n            <div class=\"filter-toggle--end-border-mask\"></div>\n        </div>\n        <div\n            class=\"content\"\n            [ngClass]=\"{'empty-content': !searchTotalRecords && !loading}\">\n            <s-empty-state\n                [id]=\"id + '-empty-state'\"\n                *ngIf=\"!searchTotalRecords && !loading\"\n                [title]=\"searchEmptyTitle || 'platform.angular_components.no_records_found' | translate\"\n                [description]=\"searchEmptyDescription\"\n                iconClass=\"fa fa-search\">\n            </s-empty-state>\n\n            <div>\n                <s-button\n                    *ngIf=\"showAddOption\"\n                    priority=\"default\"\n                    [label]=\"'platform.angular_components.add' | translate\"\n                    (onClick)=\"onAdd.emit()\">\n                </s-button>\n                <s-button\n                    *ngIf=\"showEditOption\"\n                    priority=\"default\"\n                    [label]=\"'platform.angular_components.edit' | translate\"\n                    [disabled]=\"selected.length !== 1\"\n                    (onClick)=\"onEdit.emit(this.selected[0])\">\n                </s-button>\n                <s-button\n                    *ngIf=\"showRemoveOption\"\n                    priority=\"default\"\n                    [label]=\"'platform.angular_components.remove' | translate\"\n                    [disabled]=\"!selected.length\"\n                    (onClick)=\"onRemove.emit(this.selected)\">\n                </s-button>\n            </div>\n\n            <p-table\n                [dataKey]=\"dataKey\"\n                [value]=\"getGridData()\"\n                [columns]=\"searchGridFields\"\n                [lazy]=\"true\"\n                [scrollable]=\"true\"\n                [paginator]=\"true\"\n                sortMode=\"multiple\"\n                [totalRecords]=\"searchTotalRecords\"\n                [rows]=\"10\"\n                [selection]=\"selected\"\n                (onLazyLoad)=\"lazyLoadGrid($event)\"\n                *sLoadingState=\"{ loading: loading, indicator: 'logo' }\"\n                [multiSortMeta]=\"multiSortMeta\"\n                [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n                [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n                (selectionChange)=\"onSelectionChange($event)\">\n                <ng-template pTemplate=\"colgroup\" let-columns>\n                    <colgroup>\n                        <col\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\" />\n                        <col\n                            *ngFor=\"let col of columns\"\n                            [style.width]=\"col.width\" />\n                    </colgroup>\n                </ng-template>\n                <ng-template pTemplate=\"header\" let-columns>\n                    <tr>\n                        <th\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\">\n                            <s-table-header-checkbox\n                                [useAllObject]=\"lookupRowProps ? false : true\"\n                                [rowProps]=\"lookupRowProps\">\n                            </s-table-header-checkbox>\n                        </th>\n                        <th\n                            [style.width]=\"col.width\"\n                            *ngFor=\"let col of columns\"\n                            [pSortableColumn]=\"col.name\"\n                            [pSortableColumnDisabled]=\"sortableColumnsDisabled?.includes(col.name)\">\n                            <div class=\"senior-header\">\n                                <span class=\"senior-header-title\">{{ col.label }}</span>\n                                <p-sortIcon\n                                    [field]=\"col.name\"\n                                    *ngIf=\"!sortableColumnsDisabled?.includes(col.name)\">\n                                </p-sortIcon>\n                            </div>\n                        </th>\n                    </tr>\n                </ng-template>\n                <ng-template\n                    pTemplate=\"body\"\n                    let-rowData\n                    let-columns\n                    let-rowIndex=\"rowIndex\">\n                    <tr\n                        sNavigation\n                        [pSelectableRow]=\"rowData\"\n                        [pSelectableRowIndex]=\"rowIndex\"\n                        sDoubleClick (onDoubleClick)=\"onTableRowDoubleClick(rowData)\">\n                        <td\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\"\n                            tabindex=\"0\">\n                            <p-tableCheckbox\n                                [value]=\"rowData\"\n                                [pSelectableRow]=\"rowData\">\n                            </p-tableCheckbox>\n                        </td>\n                        <td\n                            [style.width]=\"col['width']\"\n                            *ngFor=\"let col of searchGridFields\"\n                            [ngSwitch]=\"col.type\"\n                            tabindex=\"0\">\n                            <ng-container *ngSwitchCase=\"'Boolean'\">\n                                <ng-container *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getBooleanLabel(rowData, col.name, col.optionsLabel) }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Date'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate: col.calendarLocaleOptions?.dateFormat || \"L\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'DateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'LocalDateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Time'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedTime: col.calendarLocaleOptions?.dateFormat || \"LTS\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Integer'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getIntegerMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Double'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getDoubleMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Money'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getMoneyMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Number'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getNumberMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Enum'\">\n                                <ng-container *ngIf=\"getLabelForValue(getFieldValue(rowData, col.name), col.options); else emptyTemplate\">\n                                    <ng-container *ngIf=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options); then withBadge; else withoutBadge\"></ng-container>\n                                    <ng-template #withBadge>\n                                        <s-badge\n                                            [text]=\"getLabelForValue(getFieldValue(rowData, col.name), col.options)\"\n                                            [color]=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options).color\"\n                                            [type]=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options).type\"\n                                            [iconClass]=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options).iconClass\"\n                                            [iconPosition]=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options).iconPosition\">\n                                        </s-badge>\n                                    </ng-template>\n                                    <ng-template #withoutBadge>\n                                        <span> {{ getLabelForValue(getFieldValue(rowData, col.name), col.options) }} </span>\n                                    </ng-template>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                <ng-container *ngIf=\"col.mask && col.mask()\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name))\">\n                                        <span>{{ getFieldValue(rowData, col.name) | sMaskFormatter: col.mask() }}</span>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(col.mask && col.mask())\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name)); else emptyTemplate\">\n                                        <span>{{ getFieldValue(rowData, col.name) }}</span>\n                                    </ng-container>\n                                </ng-container>\n                            </ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n                <ng-template pTemplate=\"paginatorright\">\n                    <span [attr.data-hidden]=\"loading\">\n                        {{ printRecordTotalizer() }}\n                    </span>\n                </ng-template>\n            </p-table>\n        </div>\n    </div>\n    <p-footer>\n        <s-button\n            [id]=\"id + '-select-button'\"\n            type=\"button\"\n            [label]=\"selectLabel || 'platform.angular_components.select' | translate\"\n            (onClick)=\"select()\"\n            sTooltip=\"(ALT + SHIFT + S)\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\"\n            [disabled]=\"!selected?.length\">\n        </s-button>\n        <s-button\n            [id]=\"id + '-cancel-button'\"\n            type=\"button\"\n            priority=\"link\"\n            [label]=\"cancelLabel || 'platform.angular_components.cancel' | translate\"\n            (onClick)=\"hideDialog()\"\n            sTooltip=\"(ALT + SHIFT + C)\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\">\n        </s-button>\n    </p-footer>\n</p-dialog>\n<ng-template #emptyTemplate>\n    <span [ngClass]=\"'sds-empty-value'\">\n        {{ emptyFieldLabel || 'platform.angular_components.not_informed' | translate }}\n    </span>\n</ng-template>\n",
             providers: [
                 {
                     provide: NG_VALUE_ACCESSOR,
@@ -9426,7 +9367,7 @@ var LookupFieldComponent = /** @class */ (function () {
     ], LookupFieldComponent.prototype, "formControl", void 0);
     LookupFieldComponent = __decorate([
         Component({
-            template: "<s-field-label [field]=\"field\">\n\n<div [sTooltip]=\"field.tooltip\" tooltipPosition=\"top\" [showDelay]=\"500\">\n    <s-lookup\n        [id]=\"field.id || field.name\"\n        [multiple]=\"field.multiple\"\n        [formControl]=\"formControl\"\n        [lookupSuggestions]=\"field.lookupSuggestions\"\n        [dataKey]=\"field.dataKey\"\n        [placeholder]=\"field.placeholder\"\n        [showSearch]=\"field.showSearch\"\n        [searchFields]=\"field.searchFields\"\n        [searchGridFields]=\"field.searchGridFields\"\n        [searchGridData]=\"field.gridData\"\n        (onLookupRequest)=\"field.onLookupRequest($event)\"\n        (onSearchRequest)=\"field.onSearchRequest($event)\"\n        [lookupDisplayField]=\"field.lookupDisplayField\"\n        [searchTotalRecords]=\"field.searchTotalRecords\"\n        [searchTotalRecordsLabel]=\"field.searchTotalRecordsLabel\"\n        [searchTitle]=\"field.searchTitle\"\n        [selectLabel]=\"field.selectLabel\"\n        [searchEmptyTitle]=\"field.searchEmptyTitle\"\n        [filterLabel]=\"field.filterLabel\"\n        [filterTitle]=\"field.filterTitle\"\n        [clearLabel]=\"field.clearLabel\"\n        [cancelLabel]=\"field.cancelLabel\"\n        [emptyFieldLabel]=\"field.emptyFieldLabel\"\n        (onSelect)=\"field.onSelect($event)\"\n        (onUnselect)=\"field.onUnselect($event)\"\n        (onClear)=\"field.onClear ? field.onClear($event) : null\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n        [lookupAppendTo]=\"field.appendTo\"\n        [lookupEmptyMessage]=\"field.emptyMessage\"\n        [recordLabel]=\"field.recordLabel\"\n        [recordsLabel]=\"field.recordsLabel\"\n        [defaultFilter]=\"field.defaultFilter\"\n        [autocompleteForceSelection]=\"field.autocompleteForceSelection\"\n        [showAddOption]=\"field.showAddOption\"\n        [showEditOption]=\"field.showEditOption\"\n        [showRemoveOption]=\"field.showRemoveOption\"\n        (onAdd)=\"field.onAdd()\"\n        (onEdit)=\"field.onEdit($event)\"\n        (onRemove)=\"field.onRemove($event)\"\n    >\n    </s-lookup>\n</div>\n"
+            template: "<s-field-label [field]=\"field\"></s-field-label>\n\n<div [sTooltip]=\"field.tooltip\" tooltipPosition=\"top\" [showDelay]=\"500\">\n    <s-lookup\n        [id]=\"field.id || field.name\"\n        [multiple]=\"field.multiple\"\n        [formControl]=\"formControl\"\n        [lookupSuggestions]=\"field.lookupSuggestions\"\n        [dataKey]=\"field.dataKey\"\n        [placeholder]=\"field.placeholder\"\n        [showSearch]=\"field.showSearch\"\n        [searchFields]=\"field.searchFields\"\n        [searchGridFields]=\"field.searchGridFields\"\n        [searchGridData]=\"field.gridData\"\n        (onLookupRequest)=\"field.onLookupRequest($event)\"\n        (onSearchRequest)=\"field.onSearchRequest($event)\"\n        [lookupDisplayField]=\"field.lookupDisplayField\"\n        [searchTotalRecords]=\"field.searchTotalRecords\"\n        [searchTotalRecordsLabel]=\"field.searchTotalRecordsLabel\"\n        [searchTitle]=\"field.searchTitle\"\n        [selectLabel]=\"field.selectLabel\"\n        [searchEmptyTitle]=\"field.searchEmptyTitle\"\n        [filterLabel]=\"field.filterLabel\"\n        [filterTitle]=\"field.filterTitle\"\n        [clearLabel]=\"field.clearLabel\"\n        [cancelLabel]=\"field.cancelLabel\"\n        [emptyFieldLabel]=\"field.emptyFieldLabel\"\n        (onSelect)=\"field.onSelect($event)\"\n        (onUnselect)=\"field.onUnselect($event)\"\n        (onClear)=\"field.onClear ? field.onClear($event) : null\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n        [lookupAppendTo]=\"field.appendTo\"\n        [lookupEmptyMessage]=\"field.emptyMessage\"\n        [recordLabel]=\"field.recordLabel\"\n        [recordsLabel]=\"field.recordsLabel\"\n        [defaultFilter]=\"field.defaultFilter\"\n        [autocompleteForceSelection]=\"field.autocompleteForceSelection\"\n        [showAddOption]=\"field.showAddOption\"\n        [showEditOption]=\"field.showEditOption\"\n        [showRemoveOption]=\"field.showRemoveOption\"\n        (onAdd)=\"field.onAdd()\"\n        (onEdit)=\"field.onEdit($event)\"\n        (onRemove)=\"field.onRemove($event)\"\n    >\n    </s-lookup>\n</div>\n"
         })
     ], LookupFieldComponent);
     return LookupFieldComponent;
@@ -11624,6 +11565,7 @@ var DynamicFormModule = /** @class */ (function () {
         NgModule({
             imports: [
                 AutoCompleteModule,
+                BadgeModule,
                 BignumberInputModule,
                 ButtonModule,
                 CalendarMaskModule,