@seniorsistemas/angular-components 19.9.10 → 19.9.11-develop-1dc6275b

package/fesm2022/seniorsistemas-angular-components-dynamic-form.mjs

@@ -50,6 +50,7 @@ import * as i1$4 from '@seniorsistemas/angular-components/info-sign';
 import { InfoSignModule } from '@seniorsistemas/angular-components/info-sign';
 import * as i2$1 from '@seniorsistemas/angular-components/bignumber-input';
 import { BignumberInputModule } from '@seniorsistemas/angular-components/bignumber-input';
+import { InputGroupComponent } from '@seniorsistemas/angular-components/input-group';
 import { InputMaskDirective } from '@seniorsistemas/angular-components/input-mask';
 import * as i3 from '@seniorsistemas/angular-components/input-text';
 import { InputTextModule, InputTextDirective } from '@seniorsistemas/angular-components/input-text';
@@ -363,7 +364,7 @@ class RowComponent {
         return '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RowComponent, isStandalone: true, selector: "s-row", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"w-full\"\n    [formGroup]=\"group()\"\n>\n    @let rowConfig = config();\n    @let rowIsVisible = formUtils.getFieldProperty(rowConfig.visible, true);\n    @if (rowIsVisible) {\n        <div class=\"grid w-screen max-w-full grid-cols-12 gap-4\">\n            @for (field of config().fields; let i = $index; track i) {\n                @let fieldName = getName(field);\n                @if (fieldIsExpandedDynamicType(field)) {\n                    @let fieldVisible = formUtils.getFieldProperty(field.visible, true);\n                    @if (fieldVisible) {\n                        <div\n                            class=\"p-1\"\n                            [ngClass]=\"fieldGridClass(field)\"\n                        >\n                            <ng-container *sDynamicForm=\"{ id: id(), config: field, group: group() }\"></ng-container>\n\n                            @if (fieldName) {\n                                <s-control-errors\n                                    [form]=\"group\"\n                                    [control]=\"group().controls[fieldName]\"\n                                    [errorMessages]=\"getErrorMessages(field.errorMessages)\"\n                                ></s-control-errors>\n                            }\n\n                            @if (field.footer) {\n                                @if (field.footer.help) {\n                                    @let footerHelpVisible =\n                                        field.footer.help.visible?.({\n                                            abstractControl: group().controls[fieldName],\n                                            formField: field,\n                                        });\n                                    @if (fieldName && field.footer.help.visible ? footerHelpVisible : true) {\n                                        <span style=\"color: #888b99\">\n                                            {{ field.footer.help.text }}\n                                        </span>\n                                    }\n                                }\n                            }\n\n                            @if (field.footer) {\n                                @let footerLinkVisible =\n                                    field.footer.link?.visible?.({\n                                        abstractControl: group().controls[fieldName],\n                                        formField: field,\n                                    });\n                                @if (fieldName && field.footer.link?.visible ? footerLinkVisible : true) {\n                                    <div style=\"margin-left: -17px\">\n                                        <s-button\n                                            [label]=\"field.footer.link?.label\"\n                                            priority=\"link\"\n                                            (clicked)=\"\n                                                field.footer.link?.onClick({\n                                                    abstractControl: group().controls[fieldName],\n                                                    formField: field,\n                                                })\n                                            \"\n                                            [auxiliary]=\"true\"\n                                        ></s-button>\n                                    </div>\n                                }\n                            }\n                            @if (field.bottomTemplate) {\n                                <ng-template [ngTemplateOutlet]=\"field.bottomTemplate\"></ng-template>\n                            }\n                        </div>\n                    }\n                } @else {\n                    @let gridClass = fieldGridClass(field);\n                    <div [ngClass]=\"gridClass\">\n                        <ng-container *sDynamicForm=\"{ id: id(), config: field, group: group() }\"></ng-container>\n                    </div>\n                }\n            }\n        </div>\n    }\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: ControlErrorsModule }, { kind: "component", type: i1.ControlErrorsComponent, selector: "s-control-errors", inputs: ["id", "control", "errorMessages", "form"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }, { kind: "directive", type: DynamicFormDirective, selector: "[sDynamicForm]", inputs: ["sDynamicForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RowComponent, isStandalone: true, selector: "s-row", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"w-full\"\n    [formGroup]=\"group()\"\n>\n    @let rowConfig = config();\n    @let rowIsVisible = formUtils.getFieldProperty(rowConfig.visible, true);\n    @if (rowIsVisible) {\n        <div class=\"grid w-screen max-w-full grid-cols-12 gap-4\">\n            @for (field of config().fields; let i = $index; track i) {\n                @let fieldName = getName(field);\n                @if (fieldIsExpandedDynamicType(field)) {\n                    @let fieldVisible = formUtils.getFieldProperty(field.visible, true);\n                    @if (fieldVisible) {\n                        <div\n                            class=\"p-1\"\n                            [ngClass]=\"fieldGridClass(field)\"\n                        >\n                            <ng-container *sDynamicForm=\"{ id: id(), config: field, group: group() }\"></ng-container>\n\n                            @if (fieldName) {\n                                <s-control-errors\n                                    [form]=\"group\"\n                                    [control]=\"group().controls[fieldName]\"\n                                    [errorMessages]=\"getErrorMessages(field.errorMessages)\"\n                                ></s-control-errors>\n                            }\n\n                            @if (field.footer) {\n                                @if (field.footer.help) {\n                                    @let footerHelpVisible =\n                                        field.footer.help.visible?.({\n                                            abstractControl: group().controls[fieldName],\n                                            formField: field,\n                                        });\n                                    @if (fieldName && field.footer.help.visible ? footerHelpVisible : true) {\n                                        <span style=\"color: #888b99\">\n                                            {{ field.footer.help.text }}\n                                        </span>\n                                    }\n                                }\n                            }\n\n                            @if (field.footer) {\n                                @let footerLinkVisible =\n                                    field.footer.link?.visible?.({\n                                        abstractControl: group().controls[fieldName],\n                                        formField: field,\n                                    });\n                                @if (fieldName && field.footer.link?.visible ? footerLinkVisible : true) {\n                                    <div style=\"margin-left: -17px\">\n                                        <s-button\n                                            [label]=\"field.footer.link?.label\"\n                                            priority=\"link\"\n                                            (clicked)=\"\n                                                field.footer.link?.onClick({\n                                                    abstractControl: group().controls[fieldName],\n                                                    formField: field,\n                                                })\n                                            \"\n                                            [auxiliary]=\"true\"\n                                        ></s-button>\n                                    </div>\n                                }\n                            }\n                            @if (field.bottomTemplate) {\n                                <ng-template [ngTemplateOutlet]=\"field.bottomTemplate\"></ng-template>\n                            }\n                        </div>\n                    }\n                } @else {\n                    @let gridClass = fieldGridClass(field);\n                    <div [ngClass]=\"gridClass\">\n                        <ng-container *sDynamicForm=\"{ id: id(), config: field, group: group() }\"></ng-container>\n                    </div>\n                }\n            }\n        </div>\n    }\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: ControlErrorsModule }, { kind: "component", type: i1.ControlErrorsComponent, selector: "s-control-errors", inputs: ["id", "control", "errorMessages", "form"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked", "tieredMenuOpened", "tieredMenuClosed"] }, { kind: "directive", type: DynamicFormDirective, selector: "[sDynamicForm]", inputs: ["sDynamicForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowComponent, decorators: [{
             type: Component,
@@ -957,7 +958,7 @@ class LookupComponent {
                 useExisting: forwardRef(() => LookupComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "lookupDialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: Table, descendants: true }, { propertyName: "autocomplete", first: true, predicate: AutoComplete, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{ inputgroup: showSearch, 'native-dropdown': !showSearch }\">\n    <p-autoComplete\n        #autocomplete\n        sAutoCompleteMultipleFix\n        [(ngModel)]=\"value\"\n        [disabled]=\"disabled\"\n        [dataKey]=\"dataKey\"\n        [multiple]=\"multiple\"\n        [inputId]=\"id + '-autocomplete'\"\n        [forceSelection]=\"autocompleteForceSelection\"\n        [maxlength]=\"maxlength\"\n        [suggestions]=\"getLookupSuggestions()\"\n        (completeMethod)=\"onCompleteMethod($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        [dropdown]=\"!showSearch\"\n        [appendTo]=\"lookupAppendTo\"\n        [placeholder]=\"placeholder || ' '\"\n        [autoHighlight]=\"true\"\n        inputStyleClass=\"mousetrap\"\n    >\n    </p-autoComplete>\n    @if (showSearch) {\n        <button\n            class=\"button-addon\"\n            [class.button-addon--disabled]=\"disabled\"\n            [disabled]=\"disabled\"\n            (click)=\"showDialog()\"\n        >\n            <i class=\"fa fa-search\"></i>\n        </button>\n    }\n</div>\n@if (lookupEmptyMessage && hasSearched && getLookupSuggestions().length === 0) {\n    <small class=\"text-gray-500 block pt-1 text-sm\">{{ lookupEmptyMessage }}</small>\n}\n\n<s-dialog\n    [(visible)]=\"dialogVisible\"\n    (visibleChange)=\"onVisibleChange($event!)\"\n    [header]=\"labelOptions?.searchTitle || 'platform.angular_components.advanced_search' | translate\"\n    contentClassName=\"s-lookup-modal\"\n    [size]=\"dialogFullScreen() ? 'fullscreen' : 'xl'\"\n>\n    @if (dialogVisible) {\n        <div\n            class=\"s-lookup-modal-container\"\n            #dialogContainer\n        >\n            @if (searchFields && searchFields.length) {\n                <div\n                    class=\"filter\"\n                    [@collapseContent]=\"\n                        collapsed\n                            ? { value: 'hidden', params: { transitionParams: transitionOptions } }\n                            : { value: 'visible', params: { transitionParams: transitionOptions } }\n                    \"\n                    (@collapseContent.done)=\"onToggleDone()\"\n                >\n                    <form\n                        [formGroup]=\"formGroupDialog\"\n                        novalidate\n                        autocomplete=\"off\"\n                    >\n                        @if (!collapsed) {\n                            <div\n                                class=\"form-content\"\n                                [@childCollapseContent]=\"\n                                    collapsed\n                                        ? { value: ':leave', params: { transitionParams: transitionOptions } }\n                                        : { value: ':enter', params: { transitionParams: transitionOptions } }\n                                \"\n                            >\n                                <div class=\"filter-title sds-section-title\">\n                                    {{ labelOptions?.filterTitle || 'platform.angular_components.filters' | translate }}\n                                </div>\n                                <div class=\"form-fields\">\n                                    <s-dynamic-form\n                                        [configs]=\"searchFieldsDynamicStructure\"\n                                        [form]=\"formGroupDialog\"\n                                    >\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]=\"\n                                                labelOptions?.filterLabel || 'platform.angular_components.filter'\n                                                    | translate\n                                            \"\n                                            (clicked)=\"search()\"\n                                            sTooltip=\"(ALT + SHIFT + F)\"\n                                        >\n                                        </s-button>\n                                        <s-button\n                                            [id]=\"id + '-clear-button'\"\n                                            type=\"button\"\n                                            [label]=\"\n                                                labelOptions?.clearLabel || 'platform.angular_components.clear'\n                                                    | translate\n                                            \"\n                                            (clicked)=\"clear()\"\n                                            priority=\"link\"\n                                            sTooltip=\"(ALT + SHIFT + L)\"\n                                        >\n                                        </s-button>\n                                    </div>\n                                </div>\n                            </div>\n                        }\n                    </form>\n                </div>\n            }\n            @if (searchFields && searchFields.length) {\n                <div class=\"filter-toggle\">\n                    <button\n                        [id]=\"id + '-filter-toggle-button'\"\n                        type=\"button\"\n                        (click)=\"filterToggle()\"\n                    >\n                        <span\n                            class=\"fa\"\n                            [ngClass]=\"{ 'fa-chevron-left': !collapsed, 'fa-chevron-right': collapsed }\"\n                            aria-hidden=\"true\"\n                        >\n                        </span>\n                    </button>\n                </div>\n            }\n            @let isEmptyContent = !searchTotalRecords && !loading;\n            <div\n                class=\"content\"\n                #contentContainer\n                [ngClass]=\"{ 'empty-content': isEmptyContent }\"\n            >\n                @if (isEmptyContent) {\n                    <s-empty-state\n                        [id]=\"id + '-empty-state'\"\n                        [title]=\"\n                            labelOptions?.searchEmptyTitle || 'platform.angular_components.no_records_found' | translate\n                        \"\n                        [description]=\"searchEmptyDescription\"\n                        iconClass=\"fa fa-search\"\n                    >\n                    </s-empty-state>\n                }\n\n                @if (alertConfig) {\n                    <s-alert\n                        [severity]=\"alertConfig.type\"\n                        [summary]=\"alertConfig.title\"\n                        [detail]=\"alertConfig.message\"\n                    >\n                    </s-alert>\n                }\n\n                @if (showAddOption || showEditOption || showRemoveOption) {\n                    <div>\n                        @if (showAddOption) {\n                            <s-button\n                                priority=\"default\"\n                                [label]=\"'platform.angular_components.add' | translate\"\n                                (clicked)=\"onAdd.emit()\"\n                            >\n                            </s-button>\n                        }\n                        @if (showEditOption) {\n                            <s-button\n                                priority=\"default\"\n                                [label]=\"'platform.angular_components.edit' | translate\"\n                                [disabled]=\"selected.length !== 1\"\n                                (clicked)=\"onEdit.emit(this.selected[0])\"\n                            >\n                            </s-button>\n                        }\n                        @if (showRemoveOption) {\n                            <s-button\n                                priority=\"default\"\n                                [label]=\"'platform.angular_components.remove' | translate\"\n                                [disabled]=\"!selected.length\"\n                                (clicked)=\"onRemove.emit(this.selected)\"\n                            >\n                            </s-button>\n                        }\n                    </div>\n                }\n\n                <div class=\"content-child min-h-0 flex-1\">\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                        [multiSortMeta]=\"multiSortMeta\"\n                        [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n                        [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n                        (selectionChange)=\"onSelectionChange($event)\"\n                        *sLoadingState=\"{ loading: loading, indicator: indicatorLogo }\"\n                    >\n                        <ng-template\n                            pTemplate=\"colgroup\"\n                            let-columns\n                        >\n                            <colgroup>\n                                @if (multiple) {\n                                    <col style=\"width: 50px\" />\n                                }\n\n                                @for (col of columns; track $index) {\n                                    <col [style.width]=\"col.width\" />\n                                }\n                            </colgroup>\n                        </ng-template>\n                        <ng-template\n                            pTemplate=\"header\"\n                            let-columns\n                        >\n                            <tr>\n                                @if (multiple) {\n                                    <th style=\"width: 50px\">\n                                        <s-table-header-checkbox\n                                            [useAllObject]=\"lookupRowProps.length ? false : true\"\n                                            [rowProps]=\"lookupRowProps\"\n                                        >\n                                        </s-table-header-checkbox>\n                                    </th>\n                                }\n                                @for (col of columns; track $index) {\n                                    <th\n                                        [style.width]=\"col.width\"\n                                        [pSortableColumn]=\"col.name\"\n                                        [pSortableColumnDisabled]=\"sortableColumnsDisabled.includes(col.name)\"\n                                    >\n                                        <div class=\"senior-header\">\n                                            <span class=\"senior-header-title\">{{ col.label }}</span>\n                                            @if (!sortableColumnsDisabled.includes(col.name)) {\n                                                <p-sortIcon [field]=\"col.name\"> </p-sortIcon>\n                                            }\n                                        </div>\n                                    </th>\n                                }\n                            </tr>\n                        </ng-template>\n                        <ng-template\n                            pTemplate=\"body\"\n                            let-rowData\n                            let-columns\n                            let-rowIndex=\"rowIndex\"\n                        >\n                            <tr\n                                [pSelectableRow]=\"rowData\"\n                                [pSelectableRowIndex]=\"rowIndex\"\n                                sDoubleClick\n                                (doubleClicked)=\"onTableRowDoubleClick(rowData)\"\n                            >\n                                @if (multiple) {\n                                    <td\n                                        style=\"width: 50px\"\n                                        tabindex=\"0\"\n                                    >\n                                        <p-tableCheckbox\n                                            [value]=\"rowData\"\n                                            [pSelectableRow]=\"rowData\"\n                                        >\n                                        </p-tableCheckbox>\n                                    </td>\n                                }\n                                @for (col of searchGridFields; track $index) {\n                                    <td\n                                        [style.width]=\"col.width\"\n                                        [ngSwitch]=\"col.type\"\n                                        tabindex=\"0\"\n                                    >\n                                        @switch (col.type) {\n                                            @case ('boolean') {\n                                                <ng-container\n                                                    *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getBooleanLabel(rowData, col.name, col.optionsLabel)\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('date') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name)\n                                                            | localizedDate\n                                                                : col.calendarLocaleOptions?.dateFormat || 'L'\n                                                            | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('dateTime') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name) | localizedDate | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('localDateTime') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name) | localizedDate | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('time') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name)\n                                                            | localizedTime\n                                                                : col.calendarLocaleOptions?.dateFormat || 'LTS'\n                                                            | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('integer') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getIntegerMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('double') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getDoubleMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('money') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getMoneyMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('number') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getNumberMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('enum') {\n                                                <ng-container\n                                                    *ngIf=\"\n                                                        getLabelForValue(getFieldValue(rowData, col.name), col);\n                                                        else emptyTemplate\n                                                    \"\n                                                >\n                                                    <ng-container\n                                                        *ngIf=\"\n                                                            getBadgeFromValue(getFieldValue(rowData, col.name), col);\n                                                            then withBadge;\n                                                            else withoutBadge\n                                                        \"\n                                                    ></ng-container>\n                                                    <ng-template #withBadge>\n                                                        <s-badge\n                                                            [text]=\"\n                                                                getLabelForValue(getFieldValue(rowData, col.name), col)\n                                                            \"\n                                                            [color]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.color\n                                                            \"\n                                                            [type]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.type\n                                                            \"\n                                                            [iconClass]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.iconClass\n                                                            \"\n                                                            [iconPosition]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.iconPosition\n                                                            \"\n                                                        >\n                                                        </s-badge>\n                                                    </ng-template>\n                                                    <ng-template #withoutBadge>\n                                                        <span>\n                                                            {{\n                                                                getLabelForValue(getFieldValue(rowData, col.name), col)\n                                                            }}\n                                                        </span>\n                                                    </ng-template>\n                                                </ng-container>\n                                            }\n                                            @default {\n                                                @if (fieldHasMask(col) && parseValueMaskValue(col, rowData)) {\n                                                    <ng-container *ngIf=\"hasRenderableValue(rowData, col.name)\">\n                                                        <span>{{\n                                                            getFieldValue(rowData, col.name)\n                                                                | sMaskFormatter: parseValueMaskValue(col, rowData)\n                                                        }}</span>\n                                                    </ng-container>\n                                                } @else {\n                                                    <ng-container\n                                                        *ngIf=\"\n                                                            hasRenderableValue(rowData, col.name);\n                                                            else emptyTemplate\n                                                        \"\n                                                    >\n                                                        <span>{{ getFieldValue(rowData, col.name) }}</span>\n                                                    </ng-container>\n                                                }\n                                            }\n                                        }\n                                    </td>\n                                }\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        </div>\n\n        <ng-template sTemplate=\"footer\">\n            <div class=\"flex w-full justify-end\">\n                <s-button\n                    [id]=\"id + '-cancel-button'\"\n                    type=\"button\"\n                    priority=\"link\"\n                    [label]=\"labelOptions?.cancelLabel || 'platform.angular_components.cancel' | translate\"\n                    (clicked)=\"hideDialog()\"\n                    sTooltip=\"(ALT + SHIFT + C)\"\n                >\n                </s-button>\n                <s-button\n                    [id]=\"id + '-select-button'\"\n                    type=\"button\"\n                    [label]=\"labelOptions?.selectLabel || 'platform.angular_components.select' | translate\"\n                    (clicked)=\"select()\"\n                    sTooltip=\"(ALT + SHIFT + S)\"\n                    [disabled]=\"!selected.length\"\n                >\n                </s-button>\n            </div>\n        </ng-template>\n    }\n</s-dialog>\n\n<ng-template #emptyTemplate>\n    <span class=\"sds-empty-value\">\n        {{ labelOptions?.emptyFieldLabel || 'platform.angular_components.not_informed' | translate }}\n    </span>\n</ng-template>\n\n", styles: ["s-lookup.ng-dirty.ng-invalid .p-inputtext,s-lookup.ng-dirty.ng-invalid .p-autocomplete-input-multiple{border-color:#c13018!important}body s-lookup.ng-dirty.ng-invalid .inputgroup .button-addon{border-color:#c13018!important}s-lookup .p-autocomplete-input-multiple{border-top-right-radius:0!important;border-bottom-right-radius:0!important}s-lookup .inputgroup p-autocomplete+button,s-lookup p-autocomplete .ui-autocomplete-dropdown.ui-button{background-color:#fff;border-color:#ccc;border-width:1px 1px 1px 0;color:#333;min-height:35px;height:auto!important;min-width:auto;width:35px!important;overflow:hidden;border-radius:0 4px 4px 0}s-lookup p-autocomplete span.ui-autocomplete-multiple,s-lookup .inputgroup{display:flex}s-lookup .inputgroup p-autocomplete{display:inline-block}s-lookup .native-dropdown p-autocomplete .p-autocomplete>.p-iconwrapper{position:relative;right:19px}s-lookup .inputgroup p-autocomplete .p-autocomplete-input{width:100%}body s-lookup .inputgroup:has(input:focus-visible) .button-addon{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}body s-lookup .inputgroup .button-addon--disabled{opacity:.5}s-lookup .inputgroup p-autocomplete+button:enabled:hover{background-color:highlight(#ccc);border-color:#ccc}s-lookup .inputgroup p-autocomplete+button:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:-2px}s-lookup:not(.ng-dirty.ng-invalid) .inputgroup p-autocomplete .ui-widget .ui-inputtext{border-right-width:1px;border-right-style:solid}s-lookup .ui-autocomplete-input-token{width:100%}s-lookup .ui-autocomplete-input-token input{width:100%}s-lookup .ui-autocomplete .ui-autocomplete-token{max-width:100%}s-lookup .ui-autocomplete .ui-autocomplete-token-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}s-lookup .p-table-scrollable-body{min-width:100%}.s-lookup-modal main{padding:0}.s-lookup-modal .s-lookup-modal-container{height:85vh;display:flex;flex-direction:row;width:100%}.s-lookup-modal .s-lookup-modal-container .filter{width:30%;height:auto;flex-grow:0;flex-shrink:0;background-color:#e5eaea80;padding:.571rem}.s-lookup-modal .s-lookup-modal-container .filter form{width:100%;height:100%}.s-lookup-modal .s-lookup-modal-container .filter form .form-content{height:100%;display:flex;flex-direction:column}.s-lookup-modal .s-lookup-modal-container .filter form .form-content .filter-title{padding-left:.5rem}.s-lookup-modal .s-lookup-modal-container .filter form .form-content .form-fields{overflow-y:auto}.s-lookup-modal .s-lookup-modal-container .filter-toggle{margin-top:15px;flex-grow:0;flex-shrink:0;width:35px;border-radius:0 4px 4px 0}.s-lookup-modal .s-lookup-modal-container .filter-toggle button{align-items:center;position:relative;background-color:#e5eaea80;height:35px;width:100%;border:1px solid #e5eaea;outline:none;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;text-decoration:none;text-transform:none;padding:7px;transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out}.s-lookup-modal .s-lookup-modal-container .filter-toggle button:hover{background-color:active(rgba(229,234,234,.5));border-color:active(#e5eaea)}.s-lookup-modal .s-lookup-modal-container .filter-toggle button:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:-2px}.s-lookup-modal .s-lookup-modal-container>.content{flex-grow:1;flex-basis:auto;overflow-x:auto;display:flex;flex-direction:column;padding:.5rem}.s-lookup-modal .s-lookup-modal-container>.content s-loading-state{height:100%;display:block}.s-lookup-modal .s-lookup-modal-container>.content .s-loading-state{height:100%}.s-lookup-modal .s-lookup-modal-container>.content .s-loading-state .state-contents{height:100%}.s-lookup-modal .s-lookup-modal-container>.content.empty-content{align-self:center}.s-lookup-modal .s-lookup-modal-container>.content.empty-content .content-child{display:none}.s-lookup-modal .s-lookup-modal-container>.content p-table>.p-datatable{height:100%;display:flex;flex-direction:column}.s-lookup-modal .s-lookup-modal-container>.content p-table>.p-datatable .p-datatable-table-container{flex:1;margin-bottom:0}.inputgroup p-autocomplete{width:calc(100% - 35px)}\n"], dependencies: [{ kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i1$3.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: AutoCompleteMultipleKeyboardFixDirective, selector: "p-autoComplete[sAutoCompleteMultipleFix], p-autocomplete[sAutoCompleteMultipleFix], p-auto-complete[sAutoCompleteMultipleFix]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DialogComponent, selector: "s-dialog", inputs: ["header", "visible", "size", "contentClassName", "escapeOnEsc", "destroyClickOutside", "closeAriaLabel"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "component", type: DynamicFormComponent, selector: "s-dynamic-form", inputs: ["id", "configs", "fields", "form", "errorMessages"] }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: EmptyStateModule }, { kind: "component", type: i5.EmptyStateComponent, selector: "s-empty-state", inputs: ["id", "title", "iconClass", "description", "showPrimaryAction", "showSecondaryAction", "primaryActionLabel", "secondaryActionLabel", "primaryModel"], outputs: ["primaryAction", "secondaryAction"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "ngmodule", type: LoadingStateModule }, { kind: "directive", type: i7.LoadingStateDirective, selector: "[sLoadingState]", inputs: ["sLoadingState"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: LocaleModule }, { kind: "pipe", type: i8.LocalizedDatePipe, name: "localizedDate" }, { kind: "pipe", type: i8.LocalizedTimePipe, name: "localizedTime" }, { kind: "pipe", type: i8.LocalizedBignumberPipe, name: "localizedBignumber" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i9.BadgeComponent, selector: "s-badge", inputs: ["type", "color", "title", "text", "selectable", "iconClass", "iconPosition", "infoSign", "enableTruncateText"], outputs: ["selected"] }, { kind: "ngmodule", type: MaskFormatterModule }, { kind: "pipe", type: i10.MaskFormatterPipe, name: "sMaskFormatter" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: TableHeaderCheckboxModule }, { kind: "component", type: i11.TableHeaderCheckboxComponent, selector: "s-table-header-checkbox", inputs: ["id", "disabled", "rowProps", "useAllObject"] }, { kind: "ngmodule", type: TemplateModule }, { kind: "directive", type: i12.TemplateDirective, selector: "[sTemplate]", inputs: ["sTemplate"] }, { kind: "directive", type: DoubleClickDirective, selector: "[sDoubleClick]", outputs: ["doubleClicked"] }, { kind: "ngmodule", type: AlertModule }, { kind: "component", type: i13.AlertComponent, selector: "s-alert", inputs: ["severity", "summary", "detail", "closable", "escape"], outputs: ["closed"] }], animations: [
+        ], viewQueries: [{ propertyName: "lookupDialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: Table, descendants: true }, { propertyName: "autocomplete", first: true, predicate: AutoComplete, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{ inputgroup: showSearch, 'native-dropdown': !showSearch }\">\n    <p-autoComplete\n        #autocomplete\n        sAutoCompleteMultipleFix\n        [(ngModel)]=\"value\"\n        [disabled]=\"disabled\"\n        [dataKey]=\"dataKey\"\n        [multiple]=\"multiple\"\n        [inputId]=\"id + '-autocomplete'\"\n        [forceSelection]=\"autocompleteForceSelection\"\n        [maxlength]=\"maxlength\"\n        [suggestions]=\"getLookupSuggestions()\"\n        (completeMethod)=\"onCompleteMethod($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        [dropdown]=\"!showSearch\"\n        [appendTo]=\"lookupAppendTo\"\n        [placeholder]=\"placeholder || ' '\"\n        [autoHighlight]=\"true\"\n        inputStyleClass=\"mousetrap\"\n    >\n    </p-autoComplete>\n    @if (showSearch) {\n        <button\n            class=\"button-addon\"\n            [class.button-addon--disabled]=\"disabled\"\n            [disabled]=\"disabled\"\n            (click)=\"showDialog()\"\n        >\n            <i class=\"fa fa-search\"></i>\n        </button>\n    }\n</div>\n@if (lookupEmptyMessage && hasSearched && getLookupSuggestions().length === 0) {\n    <small class=\"text-gray-500 block pt-1 text-sm\">{{ lookupEmptyMessage }}</small>\n}\n\n<s-dialog\n    [(visible)]=\"dialogVisible\"\n    (visibleChange)=\"onVisibleChange($event!)\"\n    [header]=\"labelOptions?.searchTitle || 'platform.angular_components.advanced_search' | translate\"\n    contentClassName=\"s-lookup-modal\"\n    [size]=\"dialogFullScreen() ? 'fullscreen' : 'xl'\"\n>\n    @if (dialogVisible) {\n        <div\n            class=\"s-lookup-modal-container\"\n            #dialogContainer\n        >\n            @if (searchFields && searchFields.length) {\n                <div\n                    class=\"filter\"\n                    [@collapseContent]=\"\n                        collapsed\n                            ? { value: 'hidden', params: { transitionParams: transitionOptions } }\n                            : { value: 'visible', params: { transitionParams: transitionOptions } }\n                    \"\n                    (@collapseContent.done)=\"onToggleDone()\"\n                >\n                    <form\n                        [formGroup]=\"formGroupDialog\"\n                        novalidate\n                        autocomplete=\"off\"\n                    >\n                        @if (!collapsed) {\n                            <div\n                                class=\"form-content\"\n                                [@childCollapseContent]=\"\n                                    collapsed\n                                        ? { value: ':leave', params: { transitionParams: transitionOptions } }\n                                        : { value: ':enter', params: { transitionParams: transitionOptions } }\n                                \"\n                            >\n                                <div class=\"filter-title sds-section-title\">\n                                    {{ labelOptions?.filterTitle || 'platform.angular_components.filters' | translate }}\n                                </div>\n                                <div class=\"form-fields\">\n                                    <s-dynamic-form\n                                        [configs]=\"searchFieldsDynamicStructure\"\n                                        [form]=\"formGroupDialog\"\n                                    >\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]=\"\n                                                labelOptions?.filterLabel || 'platform.angular_components.filter'\n                                                    | translate\n                                            \"\n                                            (clicked)=\"search()\"\n                                            sTooltip=\"(ALT + SHIFT + F)\"\n                                        >\n                                        </s-button>\n                                        <s-button\n                                            [id]=\"id + '-clear-button'\"\n                                            type=\"button\"\n                                            [label]=\"\n                                                labelOptions?.clearLabel || 'platform.angular_components.clear'\n                                                    | translate\n                                            \"\n                                            (clicked)=\"clear()\"\n                                            priority=\"link\"\n                                            sTooltip=\"(ALT + SHIFT + L)\"\n                                        >\n                                        </s-button>\n                                    </div>\n                                </div>\n                            </div>\n                        }\n                    </form>\n                </div>\n            }\n            @if (searchFields && searchFields.length) {\n                <div class=\"filter-toggle\">\n                    <button\n                        [id]=\"id + '-filter-toggle-button'\"\n                        type=\"button\"\n                        (click)=\"filterToggle()\"\n                    >\n                        <span\n                            class=\"fa\"\n                            [ngClass]=\"{ 'fa-chevron-left': !collapsed, 'fa-chevron-right': collapsed }\"\n                            aria-hidden=\"true\"\n                        >\n                        </span>\n                    </button>\n                </div>\n            }\n            @let isEmptyContent = !searchTotalRecords && !loading;\n            <div\n                class=\"content\"\n                #contentContainer\n                [ngClass]=\"{ 'empty-content': isEmptyContent }\"\n            >\n                @if (isEmptyContent) {\n                    <s-empty-state\n                        [id]=\"id + '-empty-state'\"\n                        [title]=\"\n                            labelOptions?.searchEmptyTitle || 'platform.angular_components.no_records_found' | translate\n                        \"\n                        [description]=\"searchEmptyDescription\"\n                        iconClass=\"fa fa-search\"\n                    >\n                    </s-empty-state>\n                }\n\n                @if (alertConfig) {\n                    <s-alert\n                        [severity]=\"alertConfig.type\"\n                        [summary]=\"alertConfig.title\"\n                        [detail]=\"alertConfig.message\"\n                    >\n                    </s-alert>\n                }\n\n                @if (showAddOption || showEditOption || showRemoveOption) {\n                    <div>\n                        @if (showAddOption) {\n                            <s-button\n                                priority=\"default\"\n                                [label]=\"'platform.angular_components.add' | translate\"\n                                (clicked)=\"onAdd.emit()\"\n                            >\n                            </s-button>\n                        }\n                        @if (showEditOption) {\n                            <s-button\n                                priority=\"default\"\n                                [label]=\"'platform.angular_components.edit' | translate\"\n                                [disabled]=\"selected.length !== 1\"\n                                (clicked)=\"onEdit.emit(this.selected[0])\"\n                            >\n                            </s-button>\n                        }\n                        @if (showRemoveOption) {\n                            <s-button\n                                priority=\"default\"\n                                [label]=\"'platform.angular_components.remove' | translate\"\n                                [disabled]=\"!selected.length\"\n                                (clicked)=\"onRemove.emit(this.selected)\"\n                            >\n                            </s-button>\n                        }\n                    </div>\n                }\n\n                <div class=\"content-child min-h-0 flex-1\">\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                        [multiSortMeta]=\"multiSortMeta\"\n                        [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n                        [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n                        (selectionChange)=\"onSelectionChange($event)\"\n                        *sLoadingState=\"{ loading: loading, indicator: indicatorLogo }\"\n                    >\n                        <ng-template\n                            pTemplate=\"colgroup\"\n                            let-columns\n                        >\n                            <colgroup>\n                                @if (multiple) {\n                                    <col style=\"width: 50px\" />\n                                }\n\n                                @for (col of columns; track $index) {\n                                    <col [style.width]=\"col.width\" />\n                                }\n                            </colgroup>\n                        </ng-template>\n                        <ng-template\n                            pTemplate=\"header\"\n                            let-columns\n                        >\n                            <tr>\n                                @if (multiple) {\n                                    <th style=\"width: 50px\">\n                                        <s-table-header-checkbox\n                                            [useAllObject]=\"lookupRowProps.length ? false : true\"\n                                            [rowProps]=\"lookupRowProps\"\n                                        >\n                                        </s-table-header-checkbox>\n                                    </th>\n                                }\n                                @for (col of columns; track $index) {\n                                    <th\n                                        [style.width]=\"col.width\"\n                                        [pSortableColumn]=\"col.name\"\n                                        [pSortableColumnDisabled]=\"sortableColumnsDisabled.includes(col.name)\"\n                                    >\n                                        <div class=\"senior-header\">\n                                            <span class=\"senior-header-title\">{{ col.label }}</span>\n                                            @if (!sortableColumnsDisabled.includes(col.name)) {\n                                                <p-sortIcon [field]=\"col.name\"> </p-sortIcon>\n                                            }\n                                        </div>\n                                    </th>\n                                }\n                            </tr>\n                        </ng-template>\n                        <ng-template\n                            pTemplate=\"body\"\n                            let-rowData\n                            let-columns\n                            let-rowIndex=\"rowIndex\"\n                        >\n                            <tr\n                                [pSelectableRow]=\"rowData\"\n                                [pSelectableRowIndex]=\"rowIndex\"\n                                sDoubleClick\n                                (doubleClicked)=\"onTableRowDoubleClick(rowData)\"\n                            >\n                                @if (multiple) {\n                                    <td\n                                        style=\"width: 50px\"\n                                        tabindex=\"0\"\n                                    >\n                                        <p-tableCheckbox\n                                            [value]=\"rowData\"\n                                            [pSelectableRow]=\"rowData\"\n                                        >\n                                        </p-tableCheckbox>\n                                    </td>\n                                }\n                                @for (col of searchGridFields; track $index) {\n                                    <td\n                                        [style.width]=\"col.width\"\n                                        [ngSwitch]=\"col.type\"\n                                        tabindex=\"0\"\n                                    >\n                                        @switch (col.type) {\n                                            @case ('boolean') {\n                                                <ng-container\n                                                    *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getBooleanLabel(rowData, col.name, col.optionsLabel)\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('date') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name)\n                                                            | localizedDate\n                                                                : col.calendarLocaleOptions?.dateFormat || 'L'\n                                                            | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('dateTime') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name) | localizedDate | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('localDateTime') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name) | localizedDate | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('time') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name)\n                                                            | localizedTime\n                                                                : col.calendarLocaleOptions?.dateFormat || 'LTS'\n                                                            | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('integer') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getIntegerMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('double') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getDoubleMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('money') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getMoneyMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('number') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getNumberMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('enum') {\n                                                <ng-container\n                                                    *ngIf=\"\n                                                        getLabelForValue(getFieldValue(rowData, col.name), col);\n                                                        else emptyTemplate\n                                                    \"\n                                                >\n                                                    <ng-container\n                                                        *ngIf=\"\n                                                            getBadgeFromValue(getFieldValue(rowData, col.name), col);\n                                                            then withBadge;\n                                                            else withoutBadge\n                                                        \"\n                                                    ></ng-container>\n                                                    <ng-template #withBadge>\n                                                        <s-badge\n                                                            [text]=\"\n                                                                getLabelForValue(getFieldValue(rowData, col.name), col)\n                                                            \"\n                                                            [color]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.color\n                                                            \"\n                                                            [type]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.type\n                                                            \"\n                                                            [iconClass]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.iconClass\n                                                            \"\n                                                            [iconPosition]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.iconPosition\n                                                            \"\n                                                        >\n                                                        </s-badge>\n                                                    </ng-template>\n                                                    <ng-template #withoutBadge>\n                                                        <span>\n                                                            {{\n                                                                getLabelForValue(getFieldValue(rowData, col.name), col)\n                                                            }}\n                                                        </span>\n                                                    </ng-template>\n                                                </ng-container>\n                                            }\n                                            @default {\n                                                @if (fieldHasMask(col) && parseValueMaskValue(col, rowData)) {\n                                                    <ng-container *ngIf=\"hasRenderableValue(rowData, col.name)\">\n                                                        <span>{{\n                                                            getFieldValue(rowData, col.name)\n                                                                | sMaskFormatter: parseValueMaskValue(col, rowData)\n                                                        }}</span>\n                                                    </ng-container>\n                                                } @else {\n                                                    <ng-container\n                                                        *ngIf=\"\n                                                            hasRenderableValue(rowData, col.name);\n                                                            else emptyTemplate\n                                                        \"\n                                                    >\n                                                        <span>{{ getFieldValue(rowData, col.name) }}</span>\n                                                    </ng-container>\n                                                }\n                                            }\n                                        }\n                                    </td>\n                                }\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        </div>\n\n        <ng-template sTemplate=\"footer\">\n            <div class=\"flex w-full justify-end\">\n                <s-button\n                    [id]=\"id + '-cancel-button'\"\n                    type=\"button\"\n                    priority=\"link\"\n                    [label]=\"labelOptions?.cancelLabel || 'platform.angular_components.cancel' | translate\"\n                    (clicked)=\"hideDialog()\"\n                    sTooltip=\"(ALT + SHIFT + C)\"\n                >\n                </s-button>\n                <s-button\n                    [id]=\"id + '-select-button'\"\n                    type=\"button\"\n                    [label]=\"labelOptions?.selectLabel || 'platform.angular_components.select' | translate\"\n                    (clicked)=\"select()\"\n                    sTooltip=\"(ALT + SHIFT + S)\"\n                    [disabled]=\"!selected.length\"\n                >\n                </s-button>\n            </div>\n        </ng-template>\n    }\n</s-dialog>\n\n<ng-template #emptyTemplate>\n    <span class=\"sds-empty-value\">\n        {{ labelOptions?.emptyFieldLabel || 'platform.angular_components.not_informed' | translate }}\n    </span>\n</ng-template>\n\n", styles: ["s-lookup .inputgroup{position:relative;display:flex;width:100%;align-items:stretch;border-radius:4px}s-lookup .inputgroup p-autocomplete{display:block;min-width:0px;flex-grow:1;width:auto}s-lookup .inputgroup p-autocomplete .p-autocomplete{width:100%}s-lookup .inputgroup .p-autocomplete-input.p-inputtext,s-lookup .inputgroup .p-autocomplete-input-multiple{min-height:35px;width:100%;border-width:1px;--tw-border-opacity: 1;border-color:rgb(193 193 204 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(33 37 51 / var(--tw-text-opacity, 1));--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);padding:5px 10px!important;border-radius:4px 0 0 4px!important}s-lookup .inputgroup .p-autocomplete-input-multiple{height:auto;padding:3px 10px!important}s-lookup .inputgroup .p-autocomplete-input.p-inputtext:disabled,s-lookup .inputgroup .p-disabled .p-autocomplete-input-multiple{--tw-text-opacity: 1;color:rgb(193 193 204 / var(--tw-text-opacity, 1));border-color:#dedce5!important;background-color:#fbfafc!important}s-lookup .inputgroup .button-addon{display:flex;height:auto;min-height:35px;width:auto;min-width:0px;flex-shrink:0;align-items:center;justify-content:center;gap:.25rem;border-radius:0 4px 4px 0/0px 4px 4px 0px;border-width:1px;border-left-width:0px;--tw-border-opacity: 1;border-color:rgb(193 193 204 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:10px;padding-right:10px;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(33 37 51 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);border-radius:0 4px 4px 0!important}s-lookup .inputgroup .button-addon:enabled:hover{--tw-bg-opacity: 1;background-color:rgb(251 250 252 / var(--tw-bg-opacity, 1))}s-lookup .inputgroup .button-addon:focus{outline:2px solid var(--s-focus-ring-color, #0090ff);outline-offset:-2px}s-lookup .inputgroup .button-addon:disabled{cursor:not-allowed;--tw-border-opacity: 1;border-color:rgb(222 220 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(251 250 252 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(193 193 204 / var(--tw-text-opacity, 1))}s-lookup .inputgroup:after{content:\"\";pointer-events:none;position:absolute;inset:0;border-radius:4px}s-lookup .inputgroup:has(input:focus):after{outline:2px solid var(--s-focus-ring-color, #0090ff);outline-offset:-2px}s-lookup .inputgroup:has(input:focus) .p-autocomplete-input.p-inputtext,s-lookup .inputgroup:has(input:focus) .p-autocomplete-input-multiple,s-lookup .inputgroup:has(.button-addon:focus) .p-autocomplete-input.p-inputtext,s-lookup .inputgroup:has(.button-addon:focus) .p-autocomplete-input-multiple{border-color:#c1c1cc!important;box-shadow:none!important;outline:none}s-lookup .native-dropdown{position:relative;display:flex;width:100%;align-items:stretch;border-radius:4px}s-lookup .native-dropdown p-autocomplete{display:block;min-width:0px;flex-grow:1;width:auto}s-lookup .native-dropdown p-autocomplete .p-autocomplete{width:100%}s-lookup .native-dropdown .p-autocomplete-input.p-inputtext,s-lookup .native-dropdown .p-autocomplete-input-multiple{min-height:35px;width:100%;border-width:1px;--tw-border-opacity: 1;border-color:rgb(193 193 204 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(33 37 51 / var(--tw-text-opacity, 1));--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);padding:5px 10px!important;border-radius:4px 0 0 4px!important}s-lookup .native-dropdown .p-autocomplete-input-multiple{height:auto;padding:3px 10px!important}s-lookup .native-dropdown .p-autocomplete-input.p-inputtext:disabled,s-lookup .native-dropdown .p-disabled .p-autocomplete-input-multiple{--tw-text-opacity: 1;color:rgb(193 193 204 / var(--tw-text-opacity, 1));border-color:#dedce5!important;background-color:#fbfafc!important}s-lookup .native-dropdown .p-autocomplete-dropdown{display:flex;height:auto;min-height:35px;width:auto;min-width:0px;flex-shrink:0;align-items:center;justify-content:center;gap:.25rem;border-radius:0 4px 4px 0/0px 4px 4px 0px;border-width:1px;border-left-width:0px;--tw-border-opacity: 1;border-color:rgb(193 193 204 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:10px;padding-right:10px;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(33 37 51 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);border-radius:0 4px 4px 0!important}s-lookup .native-dropdown .p-autocomplete-dropdown:enabled:hover{--tw-bg-opacity: 1;background-color:rgb(251 250 252 / var(--tw-bg-opacity, 1))}s-lookup .native-dropdown .p-autocomplete-dropdown:focus{outline:2px solid var(--s-focus-ring-color, #0090ff);outline-offset:-2px}s-lookup .native-dropdown .p-autocomplete-dropdown:disabled{cursor:not-allowed;--tw-border-opacity: 1;border-color:rgb(222 220 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(251 250 252 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(193 193 204 / var(--tw-text-opacity, 1))}s-lookup .native-dropdown:after{content:\"\";pointer-events:none;position:absolute;inset:0;border-radius:4px}s-lookup .native-dropdown:has(input:focus):after{outline:2px solid var(--s-focus-ring-color, #0090ff);outline-offset:-2px}s-lookup .native-dropdown:has(input:focus) .p-autocomplete-input.p-inputtext,s-lookup .native-dropdown:has(input:focus) .p-autocomplete-input-multiple,s-lookup .native-dropdown:has(.p-autocomplete-dropdown:focus) .p-autocomplete-input.p-inputtext,s-lookup .native-dropdown:has(.p-autocomplete-dropdown:focus) .p-autocomplete-input-multiple{border-color:#c1c1cc!important;box-shadow:none!important;outline:none}s-lookup .native-dropdown p-autocomplete .p-autocomplete>.p-iconwrapper{position:relative;right:19px}body s-lookup .inputgroup:has(input:focus) .button-addon,body s-lookup .inputgroup:has(input:focus) .p-autocomplete-dropdown,body s-lookup .inputgroup:has(.button-addon:focus) .button-addon,body s-lookup .inputgroup:has(.button-addon:focus) .p-autocomplete-dropdown,body s-lookup .inputgroup:has(.p-autocomplete-dropdown:focus) .button-addon,body s-lookup .inputgroup:has(.p-autocomplete-dropdown:focus) .p-autocomplete-dropdown,body s-lookup .native-dropdown:has(input:focus) .button-addon,body s-lookup .native-dropdown:has(input:focus) .p-autocomplete-dropdown,body s-lookup .native-dropdown:has(.button-addon:focus) .button-addon,body s-lookup .native-dropdown:has(.button-addon:focus) .p-autocomplete-dropdown,body s-lookup .native-dropdown:has(.p-autocomplete-dropdown:focus) .button-addon,body s-lookup .native-dropdown:has(.p-autocomplete-dropdown:focus) .p-autocomplete-dropdown{border-color:#c1c1cc!important}s-lookup.ng-dirty.ng-invalid .inputgroup:not(:focus-within) .p-autocomplete-input.p-inputtext,s-lookup.ng-dirty.ng-invalid .inputgroup:not(:focus-within) .p-autocomplete-input-multiple,s-lookup.ng-dirty.ng-invalid .inputgroup:not(:focus-within) .button-addon,s-lookup.ng-dirty.ng-invalid .inputgroup:not(:focus-within) .p-autocomplete-dropdown,s-lookup.ng-dirty.ng-invalid .native-dropdown:not(:focus-within) .p-autocomplete-input.p-inputtext,s-lookup.ng-dirty.ng-invalid .native-dropdown:not(:focus-within) .p-autocomplete-input-multiple,s-lookup.ng-dirty.ng-invalid .native-dropdown:not(:focus-within) .button-addon,s-lookup.ng-dirty.ng-invalid .native-dropdown:not(:focus-within) .p-autocomplete-dropdown{border-color:#c13018!important}s-lookup .ui-autocomplete-input-token{width:100%}s-lookup .ui-autocomplete-input-token input{width:100%}s-lookup .ui-autocomplete .ui-autocomplete-token{max-width:100%}s-lookup .ui-autocomplete .ui-autocomplete-token-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}s-lookup .p-table-scrollable-body{min-width:100%}.s-lookup-modal main{padding:0}.s-lookup-modal .s-lookup-modal-container{height:85vh;display:flex;flex-direction:row;width:100%}.s-lookup-modal .s-lookup-modal-container .filter{width:30%;height:auto;flex-grow:0;flex-shrink:0;background-color:#e5eaea80;padding:.571rem}.s-lookup-modal .s-lookup-modal-container .filter form{width:100%;height:100%}.s-lookup-modal .s-lookup-modal-container .filter form .form-content{height:100%;display:flex;flex-direction:column}.s-lookup-modal .s-lookup-modal-container .filter form .form-content .filter-title{padding-left:.5rem}.s-lookup-modal .s-lookup-modal-container .filter form .form-content .form-fields{overflow-y:auto}.s-lookup-modal .s-lookup-modal-container .filter-toggle{margin-top:15px;flex-grow:0;flex-shrink:0;width:35px;border-radius:0 4px 4px 0}.s-lookup-modal .s-lookup-modal-container .filter-toggle button{align-items:center;position:relative;background-color:#e5eaea80;height:35px;width:100%;border:1px solid #e5eaea;outline:none;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;text-decoration:none;text-transform:none;padding:7px;transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out}.s-lookup-modal .s-lookup-modal-container .filter-toggle button:hover{background-color:active(rgba(229,234,234,.5));border-color:active(#e5eaea)}.s-lookup-modal .s-lookup-modal-container .filter-toggle button:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:-2px}.s-lookup-modal .s-lookup-modal-container>.content{flex-grow:1;flex-basis:auto;overflow-x:auto;display:flex;flex-direction:column;padding:.5rem}.s-lookup-modal .s-lookup-modal-container>.content s-loading-state{height:100%;display:block}.s-lookup-modal .s-lookup-modal-container>.content .s-loading-state{height:100%}.s-lookup-modal .s-lookup-modal-container>.content .s-loading-state .state-contents{height:100%}.s-lookup-modal .s-lookup-modal-container>.content.empty-content{align-self:center}.s-lookup-modal .s-lookup-modal-container>.content.empty-content .content-child{display:none}.s-lookup-modal .s-lookup-modal-container>.content p-table>.p-datatable{height:100%;display:flex;flex-direction:column}.s-lookup-modal .s-lookup-modal-container>.content p-table>.p-datatable .p-datatable-table-container{flex:1;margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i1$3.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: AutoCompleteMultipleKeyboardFixDirective, selector: "p-autoComplete[sAutoCompleteMultipleFix], p-autocomplete[sAutoCompleteMultipleFix], p-auto-complete[sAutoCompleteMultipleFix]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DialogComponent, selector: "s-dialog", inputs: ["header", "visible", "size", "contentClassName", "escapeOnEsc", "destroyClickOutside", "closeAriaLabel"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "component", type: DynamicFormComponent, selector: "s-dynamic-form", inputs: ["id", "configs", "fields", "form", "errorMessages"] }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked", "tieredMenuOpened", "tieredMenuClosed"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: EmptyStateModule }, { kind: "component", type: i5.EmptyStateComponent, selector: "s-empty-state", inputs: ["id", "title", "iconClass", "description", "showPrimaryAction", "showSecondaryAction", "primaryActionLabel", "secondaryActionLabel", "primaryModel"], outputs: ["primaryAction", "secondaryAction"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "ngmodule", type: LoadingStateModule }, { kind: "directive", type: i7.LoadingStateDirective, selector: "[sLoadingState]", inputs: ["sLoadingState"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: LocaleModule }, { kind: "pipe", type: i8.LocalizedDatePipe, name: "localizedDate" }, { kind: "pipe", type: i8.LocalizedTimePipe, name: "localizedTime" }, { kind: "pipe", type: i8.LocalizedBignumberPipe, name: "localizedBignumber" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i9.BadgeComponent, selector: "s-badge", inputs: ["type", "color", "title", "text", "selectable", "iconClass", "iconPosition", "infoSign", "enableTruncateText"], outputs: ["selected"] }, { kind: "ngmodule", type: MaskFormatterModule }, { kind: "pipe", type: i10.MaskFormatterPipe, name: "sMaskFormatter" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: TableHeaderCheckboxModule }, { kind: "component", type: i11.TableHeaderCheckboxComponent, selector: "s-table-header-checkbox", inputs: ["id", "disabled", "rowProps", "useAllObject"] }, { kind: "ngmodule", type: TemplateModule }, { kind: "directive", type: i12.TemplateDirective, selector: "[sTemplate]", inputs: ["sTemplate"] }, { kind: "directive", type: DoubleClickDirective, selector: "[sDoubleClick]", outputs: ["doubleClicked"] }, { kind: "ngmodule", type: AlertModule }, { kind: "component", type: i13.AlertComponent, selector: "s-alert", inputs: ["severity", "summary", "detail", "closable", "escape"], outputs: ["closed"] }], animations: [
             trigger('collapseContent', [
                 state('hidden', style({
                     width: '10px',
@@ -1037,7 +1038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             })),
                             transition('* <=> *', animate('{{transitionParams}}')),
                         ]),
-                    ], template: "<div [ngClass]=\"{ inputgroup: showSearch, 'native-dropdown': !showSearch }\">\n    <p-autoComplete\n        #autocomplete\n        sAutoCompleteMultipleFix\n        [(ngModel)]=\"value\"\n        [disabled]=\"disabled\"\n        [dataKey]=\"dataKey\"\n        [multiple]=\"multiple\"\n        [inputId]=\"id + '-autocomplete'\"\n        [forceSelection]=\"autocompleteForceSelection\"\n        [maxlength]=\"maxlength\"\n        [suggestions]=\"getLookupSuggestions()\"\n        (completeMethod)=\"onCompleteMethod($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        [dropdown]=\"!showSearch\"\n        [appendTo]=\"lookupAppendTo\"\n        [placeholder]=\"placeholder || ' '\"\n        [autoHighlight]=\"true\"\n        inputStyleClass=\"mousetrap\"\n    >\n    </p-autoComplete>\n    @if (showSearch) {\n        <button\n            class=\"button-addon\"\n            [class.button-addon--disabled]=\"disabled\"\n            [disabled]=\"disabled\"\n            (click)=\"showDialog()\"\n        >\n            <i class=\"fa fa-search\"></i>\n        </button>\n    }\n</div>\n@if (lookupEmptyMessage && hasSearched && getLookupSuggestions().length === 0) {\n    <small class=\"text-gray-500 block pt-1 text-sm\">{{ lookupEmptyMessage }}</small>\n}\n\n<s-dialog\n    [(visible)]=\"dialogVisible\"\n    (visibleChange)=\"onVisibleChange($event!)\"\n    [header]=\"labelOptions?.searchTitle || 'platform.angular_components.advanced_search' | translate\"\n    contentClassName=\"s-lookup-modal\"\n    [size]=\"dialogFullScreen() ? 'fullscreen' : 'xl'\"\n>\n    @if (dialogVisible) {\n        <div\n            class=\"s-lookup-modal-container\"\n            #dialogContainer\n        >\n            @if (searchFields && searchFields.length) {\n                <div\n                    class=\"filter\"\n                    [@collapseContent]=\"\n                        collapsed\n                            ? { value: 'hidden', params: { transitionParams: transitionOptions } }\n                            : { value: 'visible', params: { transitionParams: transitionOptions } }\n                    \"\n                    (@collapseContent.done)=\"onToggleDone()\"\n                >\n                    <form\n                        [formGroup]=\"formGroupDialog\"\n                        novalidate\n                        autocomplete=\"off\"\n                    >\n                        @if (!collapsed) {\n                            <div\n                                class=\"form-content\"\n                                [@childCollapseContent]=\"\n                                    collapsed\n                                        ? { value: ':leave', params: { transitionParams: transitionOptions } }\n                                        : { value: ':enter', params: { transitionParams: transitionOptions } }\n                                \"\n                            >\n                                <div class=\"filter-title sds-section-title\">\n                                    {{ labelOptions?.filterTitle || 'platform.angular_components.filters' | translate }}\n                                </div>\n                                <div class=\"form-fields\">\n                                    <s-dynamic-form\n                                        [configs]=\"searchFieldsDynamicStructure\"\n                                        [form]=\"formGroupDialog\"\n                                    >\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]=\"\n                                                labelOptions?.filterLabel || 'platform.angular_components.filter'\n                                                    | translate\n                                            \"\n                                            (clicked)=\"search()\"\n                                            sTooltip=\"(ALT + SHIFT + F)\"\n                                        >\n                                        </s-button>\n                                        <s-button\n                                            [id]=\"id + '-clear-button'\"\n                                            type=\"button\"\n                                            [label]=\"\n                                                labelOptions?.clearLabel || 'platform.angular_components.clear'\n                                                    | translate\n                                            \"\n                                            (clicked)=\"clear()\"\n                                            priority=\"link\"\n                                            sTooltip=\"(ALT + SHIFT + L)\"\n                                        >\n                                        </s-button>\n                                    </div>\n                                </div>\n                            </div>\n                        }\n                    </form>\n                </div>\n            }\n            @if (searchFields && searchFields.length) {\n                <div class=\"filter-toggle\">\n                    <button\n                        [id]=\"id + '-filter-toggle-button'\"\n                        type=\"button\"\n                        (click)=\"filterToggle()\"\n                    >\n                        <span\n                            class=\"fa\"\n                            [ngClass]=\"{ 'fa-chevron-left': !collapsed, 'fa-chevron-right': collapsed }\"\n                            aria-hidden=\"true\"\n                        >\n                        </span>\n                    </button>\n                </div>\n            }\n            @let isEmptyContent = !searchTotalRecords && !loading;\n            <div\n                class=\"content\"\n                #contentContainer\n                [ngClass]=\"{ 'empty-content': isEmptyContent }\"\n            >\n                @if (isEmptyContent) {\n                    <s-empty-state\n                        [id]=\"id + '-empty-state'\"\n                        [title]=\"\n                            labelOptions?.searchEmptyTitle || 'platform.angular_components.no_records_found' | translate\n                        \"\n                        [description]=\"searchEmptyDescription\"\n                        iconClass=\"fa fa-search\"\n                    >\n                    </s-empty-state>\n                }\n\n                @if (alertConfig) {\n                    <s-alert\n                        [severity]=\"alertConfig.type\"\n                        [summary]=\"alertConfig.title\"\n                        [detail]=\"alertConfig.message\"\n                    >\n                    </s-alert>\n                }\n\n                @if (showAddOption || showEditOption || showRemoveOption) {\n                    <div>\n                        @if (showAddOption) {\n                            <s-button\n                                priority=\"default\"\n                                [label]=\"'platform.angular_components.add' | translate\"\n                                (clicked)=\"onAdd.emit()\"\n                            >\n                            </s-button>\n                        }\n                        @if (showEditOption) {\n                            <s-button\n                                priority=\"default\"\n                                [label]=\"'platform.angular_components.edit' | translate\"\n                                [disabled]=\"selected.length !== 1\"\n                                (clicked)=\"onEdit.emit(this.selected[0])\"\n                            >\n                            </s-button>\n                        }\n                        @if (showRemoveOption) {\n                            <s-button\n                                priority=\"default\"\n                                [label]=\"'platform.angular_components.remove' | translate\"\n                                [disabled]=\"!selected.length\"\n                                (clicked)=\"onRemove.emit(this.selected)\"\n                            >\n                            </s-button>\n                        }\n                    </div>\n                }\n\n                <div class=\"content-child min-h-0 flex-1\">\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                        [multiSortMeta]=\"multiSortMeta\"\n                        [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n                        [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n                        (selectionChange)=\"onSelectionChange($event)\"\n                        *sLoadingState=\"{ loading: loading, indicator: indicatorLogo }\"\n                    >\n                        <ng-template\n                            pTemplate=\"colgroup\"\n                            let-columns\n                        >\n                            <colgroup>\n                                @if (multiple) {\n                                    <col style=\"width: 50px\" />\n                                }\n\n                                @for (col of columns; track $index) {\n                                    <col [style.width]=\"col.width\" />\n                                }\n                            </colgroup>\n                        </ng-template>\n                        <ng-template\n                            pTemplate=\"header\"\n                            let-columns\n                        >\n                            <tr>\n                                @if (multiple) {\n                                    <th style=\"width: 50px\">\n                                        <s-table-header-checkbox\n                                            [useAllObject]=\"lookupRowProps.length ? false : true\"\n                                            [rowProps]=\"lookupRowProps\"\n                                        >\n                                        </s-table-header-checkbox>\n                                    </th>\n                                }\n                                @for (col of columns; track $index) {\n                                    <th\n                                        [style.width]=\"col.width\"\n                                        [pSortableColumn]=\"col.name\"\n                                        [pSortableColumnDisabled]=\"sortableColumnsDisabled.includes(col.name)\"\n                                    >\n                                        <div class=\"senior-header\">\n                                            <span class=\"senior-header-title\">{{ col.label }}</span>\n                                            @if (!sortableColumnsDisabled.includes(col.name)) {\n                                                <p-sortIcon [field]=\"col.name\"> </p-sortIcon>\n                                            }\n                                        </div>\n                                    </th>\n                                }\n                            </tr>\n                        </ng-template>\n                        <ng-template\n                            pTemplate=\"body\"\n                            let-rowData\n                            let-columns\n                            let-rowIndex=\"rowIndex\"\n                        >\n                            <tr\n                                [pSelectableRow]=\"rowData\"\n                                [pSelectableRowIndex]=\"rowIndex\"\n                                sDoubleClick\n                                (doubleClicked)=\"onTableRowDoubleClick(rowData)\"\n                            >\n                                @if (multiple) {\n                                    <td\n                                        style=\"width: 50px\"\n                                        tabindex=\"0\"\n                                    >\n                                        <p-tableCheckbox\n                                            [value]=\"rowData\"\n                                            [pSelectableRow]=\"rowData\"\n                                        >\n                                        </p-tableCheckbox>\n                                    </td>\n                                }\n                                @for (col of searchGridFields; track $index) {\n                                    <td\n                                        [style.width]=\"col.width\"\n                                        [ngSwitch]=\"col.type\"\n                                        tabindex=\"0\"\n                                    >\n                                        @switch (col.type) {\n                                            @case ('boolean') {\n                                                <ng-container\n                                                    *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getBooleanLabel(rowData, col.name, col.optionsLabel)\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('date') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name)\n                                                            | localizedDate\n                                                                : col.calendarLocaleOptions?.dateFormat || 'L'\n                                                            | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('dateTime') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name) | localizedDate | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('localDateTime') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name) | localizedDate | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('time') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name)\n                                                            | localizedTime\n                                                                : col.calendarLocaleOptions?.dateFormat || 'LTS'\n                                                            | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('integer') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getIntegerMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('double') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getDoubleMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('money') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getMoneyMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('number') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getNumberMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('enum') {\n                                                <ng-container\n                                                    *ngIf=\"\n                                                        getLabelForValue(getFieldValue(rowData, col.name), col);\n                                                        else emptyTemplate\n                                                    \"\n                                                >\n                                                    <ng-container\n                                                        *ngIf=\"\n                                                            getBadgeFromValue(getFieldValue(rowData, col.name), col);\n                                                            then withBadge;\n                                                            else withoutBadge\n                                                        \"\n                                                    ></ng-container>\n                                                    <ng-template #withBadge>\n                                                        <s-badge\n                                                            [text]=\"\n                                                                getLabelForValue(getFieldValue(rowData, col.name), col)\n                                                            \"\n                                                            [color]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.color\n                                                            \"\n                                                            [type]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.type\n                                                            \"\n                                                            [iconClass]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.iconClass\n                                                            \"\n                                                            [iconPosition]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.iconPosition\n                                                            \"\n                                                        >\n                                                        </s-badge>\n                                                    </ng-template>\n                                                    <ng-template #withoutBadge>\n                                                        <span>\n                                                            {{\n                                                                getLabelForValue(getFieldValue(rowData, col.name), col)\n                                                            }}\n                                                        </span>\n                                                    </ng-template>\n                                                </ng-container>\n                                            }\n                                            @default {\n                                                @if (fieldHasMask(col) && parseValueMaskValue(col, rowData)) {\n                                                    <ng-container *ngIf=\"hasRenderableValue(rowData, col.name)\">\n                                                        <span>{{\n                                                            getFieldValue(rowData, col.name)\n                                                                | sMaskFormatter: parseValueMaskValue(col, rowData)\n                                                        }}</span>\n                                                    </ng-container>\n                                                } @else {\n                                                    <ng-container\n                                                        *ngIf=\"\n                                                            hasRenderableValue(rowData, col.name);\n                                                            else emptyTemplate\n                                                        \"\n                                                    >\n                                                        <span>{{ getFieldValue(rowData, col.name) }}</span>\n                                                    </ng-container>\n                                                }\n                                            }\n                                        }\n                                    </td>\n                                }\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        </div>\n\n        <ng-template sTemplate=\"footer\">\n            <div class=\"flex w-full justify-end\">\n                <s-button\n                    [id]=\"id + '-cancel-button'\"\n                    type=\"button\"\n                    priority=\"link\"\n                    [label]=\"labelOptions?.cancelLabel || 'platform.angular_components.cancel' | translate\"\n                    (clicked)=\"hideDialog()\"\n                    sTooltip=\"(ALT + SHIFT + C)\"\n                >\n                </s-button>\n                <s-button\n                    [id]=\"id + '-select-button'\"\n                    type=\"button\"\n                    [label]=\"labelOptions?.selectLabel || 'platform.angular_components.select' | translate\"\n                    (clicked)=\"select()\"\n                    sTooltip=\"(ALT + SHIFT + S)\"\n                    [disabled]=\"!selected.length\"\n                >\n                </s-button>\n            </div>\n        </ng-template>\n    }\n</s-dialog>\n\n<ng-template #emptyTemplate>\n    <span class=\"sds-empty-value\">\n        {{ labelOptions?.emptyFieldLabel || 'platform.angular_components.not_informed' | translate }}\n    </span>\n</ng-template>\n\n", styles: ["s-lookup.ng-dirty.ng-invalid .p-inputtext,s-lookup.ng-dirty.ng-invalid .p-autocomplete-input-multiple{border-color:#c13018!important}body s-lookup.ng-dirty.ng-invalid .inputgroup .button-addon{border-color:#c13018!important}s-lookup .p-autocomplete-input-multiple{border-top-right-radius:0!important;border-bottom-right-radius:0!important}s-lookup .inputgroup p-autocomplete+button,s-lookup p-autocomplete .ui-autocomplete-dropdown.ui-button{background-color:#fff;border-color:#ccc;border-width:1px 1px 1px 0;color:#333;min-height:35px;height:auto!important;min-width:auto;width:35px!important;overflow:hidden;border-radius:0 4px 4px 0}s-lookup p-autocomplete span.ui-autocomplete-multiple,s-lookup .inputgroup{display:flex}s-lookup .inputgroup p-autocomplete{display:inline-block}s-lookup .native-dropdown p-autocomplete .p-autocomplete>.p-iconwrapper{position:relative;right:19px}s-lookup .inputgroup p-autocomplete .p-autocomplete-input{width:100%}body s-lookup .inputgroup:has(input:focus-visible) .button-addon{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}body s-lookup .inputgroup .button-addon--disabled{opacity:.5}s-lookup .inputgroup p-autocomplete+button:enabled:hover{background-color:highlight(#ccc);border-color:#ccc}s-lookup .inputgroup p-autocomplete+button:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:-2px}s-lookup:not(.ng-dirty.ng-invalid) .inputgroup p-autocomplete .ui-widget .ui-inputtext{border-right-width:1px;border-right-style:solid}s-lookup .ui-autocomplete-input-token{width:100%}s-lookup .ui-autocomplete-input-token input{width:100%}s-lookup .ui-autocomplete .ui-autocomplete-token{max-width:100%}s-lookup .ui-autocomplete .ui-autocomplete-token-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}s-lookup .p-table-scrollable-body{min-width:100%}.s-lookup-modal main{padding:0}.s-lookup-modal .s-lookup-modal-container{height:85vh;display:flex;flex-direction:row;width:100%}.s-lookup-modal .s-lookup-modal-container .filter{width:30%;height:auto;flex-grow:0;flex-shrink:0;background-color:#e5eaea80;padding:.571rem}.s-lookup-modal .s-lookup-modal-container .filter form{width:100%;height:100%}.s-lookup-modal .s-lookup-modal-container .filter form .form-content{height:100%;display:flex;flex-direction:column}.s-lookup-modal .s-lookup-modal-container .filter form .form-content .filter-title{padding-left:.5rem}.s-lookup-modal .s-lookup-modal-container .filter form .form-content .form-fields{overflow-y:auto}.s-lookup-modal .s-lookup-modal-container .filter-toggle{margin-top:15px;flex-grow:0;flex-shrink:0;width:35px;border-radius:0 4px 4px 0}.s-lookup-modal .s-lookup-modal-container .filter-toggle button{align-items:center;position:relative;background-color:#e5eaea80;height:35px;width:100%;border:1px solid #e5eaea;outline:none;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;text-decoration:none;text-transform:none;padding:7px;transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out}.s-lookup-modal .s-lookup-modal-container .filter-toggle button:hover{background-color:active(rgba(229,234,234,.5));border-color:active(#e5eaea)}.s-lookup-modal .s-lookup-modal-container .filter-toggle button:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:-2px}.s-lookup-modal .s-lookup-modal-container>.content{flex-grow:1;flex-basis:auto;overflow-x:auto;display:flex;flex-direction:column;padding:.5rem}.s-lookup-modal .s-lookup-modal-container>.content s-loading-state{height:100%;display:block}.s-lookup-modal .s-lookup-modal-container>.content .s-loading-state{height:100%}.s-lookup-modal .s-lookup-modal-container>.content .s-loading-state .state-contents{height:100%}.s-lookup-modal .s-lookup-modal-container>.content.empty-content{align-self:center}.s-lookup-modal .s-lookup-modal-container>.content.empty-content .content-child{display:none}.s-lookup-modal .s-lookup-modal-container>.content p-table>.p-datatable{height:100%;display:flex;flex-direction:column}.s-lookup-modal .s-lookup-modal-container>.content p-table>.p-datatable .p-datatable-table-container{flex:1;margin-bottom:0}.inputgroup p-autocomplete{width:calc(100% - 35px)}\n"] }]
+                    ], template: "<div [ngClass]=\"{ inputgroup: showSearch, 'native-dropdown': !showSearch }\">\n    <p-autoComplete\n        #autocomplete\n        sAutoCompleteMultipleFix\n        [(ngModel)]=\"value\"\n        [disabled]=\"disabled\"\n        [dataKey]=\"dataKey\"\n        [multiple]=\"multiple\"\n        [inputId]=\"id + '-autocomplete'\"\n        [forceSelection]=\"autocompleteForceSelection\"\n        [maxlength]=\"maxlength\"\n        [suggestions]=\"getLookupSuggestions()\"\n        (completeMethod)=\"onCompleteMethod($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        [dropdown]=\"!showSearch\"\n        [appendTo]=\"lookupAppendTo\"\n        [placeholder]=\"placeholder || ' '\"\n        [autoHighlight]=\"true\"\n        inputStyleClass=\"mousetrap\"\n    >\n    </p-autoComplete>\n    @if (showSearch) {\n        <button\n            class=\"button-addon\"\n            [class.button-addon--disabled]=\"disabled\"\n            [disabled]=\"disabled\"\n            (click)=\"showDialog()\"\n        >\n            <i class=\"fa fa-search\"></i>\n        </button>\n    }\n</div>\n@if (lookupEmptyMessage && hasSearched && getLookupSuggestions().length === 0) {\n    <small class=\"text-gray-500 block pt-1 text-sm\">{{ lookupEmptyMessage }}</small>\n}\n\n<s-dialog\n    [(visible)]=\"dialogVisible\"\n    (visibleChange)=\"onVisibleChange($event!)\"\n    [header]=\"labelOptions?.searchTitle || 'platform.angular_components.advanced_search' | translate\"\n    contentClassName=\"s-lookup-modal\"\n    [size]=\"dialogFullScreen() ? 'fullscreen' : 'xl'\"\n>\n    @if (dialogVisible) {\n        <div\n            class=\"s-lookup-modal-container\"\n            #dialogContainer\n        >\n            @if (searchFields && searchFields.length) {\n                <div\n                    class=\"filter\"\n                    [@collapseContent]=\"\n                        collapsed\n                            ? { value: 'hidden', params: { transitionParams: transitionOptions } }\n                            : { value: 'visible', params: { transitionParams: transitionOptions } }\n                    \"\n                    (@collapseContent.done)=\"onToggleDone()\"\n                >\n                    <form\n                        [formGroup]=\"formGroupDialog\"\n                        novalidate\n                        autocomplete=\"off\"\n                    >\n                        @if (!collapsed) {\n                            <div\n                                class=\"form-content\"\n                                [@childCollapseContent]=\"\n                                    collapsed\n                                        ? { value: ':leave', params: { transitionParams: transitionOptions } }\n                                        : { value: ':enter', params: { transitionParams: transitionOptions } }\n                                \"\n                            >\n                                <div class=\"filter-title sds-section-title\">\n                                    {{ labelOptions?.filterTitle || 'platform.angular_components.filters' | translate }}\n                                </div>\n                                <div class=\"form-fields\">\n                                    <s-dynamic-form\n                                        [configs]=\"searchFieldsDynamicStructure\"\n                                        [form]=\"formGroupDialog\"\n                                    >\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]=\"\n                                                labelOptions?.filterLabel || 'platform.angular_components.filter'\n                                                    | translate\n                                            \"\n                                            (clicked)=\"search()\"\n                                            sTooltip=\"(ALT + SHIFT + F)\"\n                                        >\n                                        </s-button>\n                                        <s-button\n                                            [id]=\"id + '-clear-button'\"\n                                            type=\"button\"\n                                            [label]=\"\n                                                labelOptions?.clearLabel || 'platform.angular_components.clear'\n                                                    | translate\n                                            \"\n                                            (clicked)=\"clear()\"\n                                            priority=\"link\"\n                                            sTooltip=\"(ALT + SHIFT + L)\"\n                                        >\n                                        </s-button>\n                                    </div>\n                                </div>\n                            </div>\n                        }\n                    </form>\n                </div>\n            }\n            @if (searchFields && searchFields.length) {\n                <div class=\"filter-toggle\">\n                    <button\n                        [id]=\"id + '-filter-toggle-button'\"\n                        type=\"button\"\n                        (click)=\"filterToggle()\"\n                    >\n                        <span\n                            class=\"fa\"\n                            [ngClass]=\"{ 'fa-chevron-left': !collapsed, 'fa-chevron-right': collapsed }\"\n                            aria-hidden=\"true\"\n                        >\n                        </span>\n                    </button>\n                </div>\n            }\n            @let isEmptyContent = !searchTotalRecords && !loading;\n            <div\n                class=\"content\"\n                #contentContainer\n                [ngClass]=\"{ 'empty-content': isEmptyContent }\"\n            >\n                @if (isEmptyContent) {\n                    <s-empty-state\n                        [id]=\"id + '-empty-state'\"\n                        [title]=\"\n                            labelOptions?.searchEmptyTitle || 'platform.angular_components.no_records_found' | translate\n                        \"\n                        [description]=\"searchEmptyDescription\"\n                        iconClass=\"fa fa-search\"\n                    >\n                    </s-empty-state>\n                }\n\n                @if (alertConfig) {\n                    <s-alert\n                        [severity]=\"alertConfig.type\"\n                        [summary]=\"alertConfig.title\"\n                        [detail]=\"alertConfig.message\"\n                    >\n                    </s-alert>\n                }\n\n                @if (showAddOption || showEditOption || showRemoveOption) {\n                    <div>\n                        @if (showAddOption) {\n                            <s-button\n                                priority=\"default\"\n                                [label]=\"'platform.angular_components.add' | translate\"\n                                (clicked)=\"onAdd.emit()\"\n                            >\n                            </s-button>\n                        }\n                        @if (showEditOption) {\n                            <s-button\n                                priority=\"default\"\n                                [label]=\"'platform.angular_components.edit' | translate\"\n                                [disabled]=\"selected.length !== 1\"\n                                (clicked)=\"onEdit.emit(this.selected[0])\"\n                            >\n                            </s-button>\n                        }\n                        @if (showRemoveOption) {\n                            <s-button\n                                priority=\"default\"\n                                [label]=\"'platform.angular_components.remove' | translate\"\n                                [disabled]=\"!selected.length\"\n                                (clicked)=\"onRemove.emit(this.selected)\"\n                            >\n                            </s-button>\n                        }\n                    </div>\n                }\n\n                <div class=\"content-child min-h-0 flex-1\">\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                        [multiSortMeta]=\"multiSortMeta\"\n                        [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n                        [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n                        (selectionChange)=\"onSelectionChange($event)\"\n                        *sLoadingState=\"{ loading: loading, indicator: indicatorLogo }\"\n                    >\n                        <ng-template\n                            pTemplate=\"colgroup\"\n                            let-columns\n                        >\n                            <colgroup>\n                                @if (multiple) {\n                                    <col style=\"width: 50px\" />\n                                }\n\n                                @for (col of columns; track $index) {\n                                    <col [style.width]=\"col.width\" />\n                                }\n                            </colgroup>\n                        </ng-template>\n                        <ng-template\n                            pTemplate=\"header\"\n                            let-columns\n                        >\n                            <tr>\n                                @if (multiple) {\n                                    <th style=\"width: 50px\">\n                                        <s-table-header-checkbox\n                                            [useAllObject]=\"lookupRowProps.length ? false : true\"\n                                            [rowProps]=\"lookupRowProps\"\n                                        >\n                                        </s-table-header-checkbox>\n                                    </th>\n                                }\n                                @for (col of columns; track $index) {\n                                    <th\n                                        [style.width]=\"col.width\"\n                                        [pSortableColumn]=\"col.name\"\n                                        [pSortableColumnDisabled]=\"sortableColumnsDisabled.includes(col.name)\"\n                                    >\n                                        <div class=\"senior-header\">\n                                            <span class=\"senior-header-title\">{{ col.label }}</span>\n                                            @if (!sortableColumnsDisabled.includes(col.name)) {\n                                                <p-sortIcon [field]=\"col.name\"> </p-sortIcon>\n                                            }\n                                        </div>\n                                    </th>\n                                }\n                            </tr>\n                        </ng-template>\n                        <ng-template\n                            pTemplate=\"body\"\n                            let-rowData\n                            let-columns\n                            let-rowIndex=\"rowIndex\"\n                        >\n                            <tr\n                                [pSelectableRow]=\"rowData\"\n                                [pSelectableRowIndex]=\"rowIndex\"\n                                sDoubleClick\n                                (doubleClicked)=\"onTableRowDoubleClick(rowData)\"\n                            >\n                                @if (multiple) {\n                                    <td\n                                        style=\"width: 50px\"\n                                        tabindex=\"0\"\n                                    >\n                                        <p-tableCheckbox\n                                            [value]=\"rowData\"\n                                            [pSelectableRow]=\"rowData\"\n                                        >\n                                        </p-tableCheckbox>\n                                    </td>\n                                }\n                                @for (col of searchGridFields; track $index) {\n                                    <td\n                                        [style.width]=\"col.width\"\n                                        [ngSwitch]=\"col.type\"\n                                        tabindex=\"0\"\n                                    >\n                                        @switch (col.type) {\n                                            @case ('boolean') {\n                                                <ng-container\n                                                    *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getBooleanLabel(rowData, col.name, col.optionsLabel)\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('date') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name)\n                                                            | localizedDate\n                                                                : col.calendarLocaleOptions?.dateFormat || 'L'\n                                                            | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('dateTime') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name) | localizedDate | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('localDateTime') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name) | localizedDate | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('time') {\n                                                <ng-container\n                                                    *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\"\n                                                >\n                                                    <span>{{\n                                                        getFieldValue(rowData, col.name)\n                                                            | localizedTime\n                                                                : col.calendarLocaleOptions?.dateFormat || 'LTS'\n                                                            | async\n                                                    }}</span>\n                                                </ng-container>\n                                            }\n                                            @case ('integer') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getIntegerMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('double') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getDoubleMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('money') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getMoneyMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('number') {\n                                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                                    <span>\n                                                        {{\n                                                            getFieldValue(rowData, col.name)\n                                                                | localizedBignumber: getNumberMaskConfig(col)\n                                                                | async\n                                                        }}\n                                                    </span>\n                                                </ng-container>\n                                            }\n                                            @case ('enum') {\n                                                <ng-container\n                                                    *ngIf=\"\n                                                        getLabelForValue(getFieldValue(rowData, col.name), col);\n                                                        else emptyTemplate\n                                                    \"\n                                                >\n                                                    <ng-container\n                                                        *ngIf=\"\n                                                            getBadgeFromValue(getFieldValue(rowData, col.name), col);\n                                                            then withBadge;\n                                                            else withoutBadge\n                                                        \"\n                                                    ></ng-container>\n                                                    <ng-template #withBadge>\n                                                        <s-badge\n                                                            [text]=\"\n                                                                getLabelForValue(getFieldValue(rowData, col.name), col)\n                                                            \"\n                                                            [color]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.color\n                                                            \"\n                                                            [type]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.type\n                                                            \"\n                                                            [iconClass]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.iconClass\n                                                            \"\n                                                            [iconPosition]=\"\n                                                                getBadgeFromValue(getFieldValue(rowData, col.name), col)\n                                                                    ?.iconPosition\n                                                            \"\n                                                        >\n                                                        </s-badge>\n                                                    </ng-template>\n                                                    <ng-template #withoutBadge>\n                                                        <span>\n                                                            {{\n                                                                getLabelForValue(getFieldValue(rowData, col.name), col)\n                                                            }}\n                                                        </span>\n                                                    </ng-template>\n                                                </ng-container>\n                                            }\n                                            @default {\n                                                @if (fieldHasMask(col) && parseValueMaskValue(col, rowData)) {\n                                                    <ng-container *ngIf=\"hasRenderableValue(rowData, col.name)\">\n                                                        <span>{{\n                                                            getFieldValue(rowData, col.name)\n                                                                | sMaskFormatter: parseValueMaskValue(col, rowData)\n                                                        }}</span>\n                                                    </ng-container>\n                                                } @else {\n                                                    <ng-container\n                                                        *ngIf=\"\n                                                            hasRenderableValue(rowData, col.name);\n                                                            else emptyTemplate\n                                                        \"\n                                                    >\n                                                        <span>{{ getFieldValue(rowData, col.name) }}</span>\n                                                    </ng-container>\n                                                }\n                                            }\n                                        }\n                                    </td>\n                                }\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        </div>\n\n        <ng-template sTemplate=\"footer\">\n            <div class=\"flex w-full justify-end\">\n                <s-button\n                    [id]=\"id + '-cancel-button'\"\n                    type=\"button\"\n                    priority=\"link\"\n                    [label]=\"labelOptions?.cancelLabel || 'platform.angular_components.cancel' | translate\"\n                    (clicked)=\"hideDialog()\"\n                    sTooltip=\"(ALT + SHIFT + C)\"\n                >\n                </s-button>\n                <s-button\n                    [id]=\"id + '-select-button'\"\n                    type=\"button\"\n                    [label]=\"labelOptions?.selectLabel || 'platform.angular_components.select' | translate\"\n                    (clicked)=\"select()\"\n                    sTooltip=\"(ALT + SHIFT + S)\"\n                    [disabled]=\"!selected.length\"\n                >\n                </s-button>\n            </div>\n        </ng-template>\n    }\n</s-dialog>\n\n<ng-template #emptyTemplate>\n    <span class=\"sds-empty-value\">\n        {{ labelOptions?.emptyFieldLabel || 'platform.angular_components.not_informed' | translate }}\n    </span>\n</ng-template>\n\n", styles: ["s-lookup .inputgroup{position:relative;display:flex;width:100%;align-items:stretch;border-radius:4px}s-lookup .inputgroup p-autocomplete{display:block;min-width:0px;flex-grow:1;width:auto}s-lookup .inputgroup p-autocomplete .p-autocomplete{width:100%}s-lookup .inputgroup .p-autocomplete-input.p-inputtext,s-lookup .inputgroup .p-autocomplete-input-multiple{min-height:35px;width:100%;border-width:1px;--tw-border-opacity: 1;border-color:rgb(193 193 204 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(33 37 51 / var(--tw-text-opacity, 1));--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);padding:5px 10px!important;border-radius:4px 0 0 4px!important}s-lookup .inputgroup .p-autocomplete-input-multiple{height:auto;padding:3px 10px!important}s-lookup .inputgroup .p-autocomplete-input.p-inputtext:disabled,s-lookup .inputgroup .p-disabled .p-autocomplete-input-multiple{--tw-text-opacity: 1;color:rgb(193 193 204 / var(--tw-text-opacity, 1));border-color:#dedce5!important;background-color:#fbfafc!important}s-lookup .inputgroup .button-addon{display:flex;height:auto;min-height:35px;width:auto;min-width:0px;flex-shrink:0;align-items:center;justify-content:center;gap:.25rem;border-radius:0 4px 4px 0/0px 4px 4px 0px;border-width:1px;border-left-width:0px;--tw-border-opacity: 1;border-color:rgb(193 193 204 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:10px;padding-right:10px;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(33 37 51 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);border-radius:0 4px 4px 0!important}s-lookup .inputgroup .button-addon:enabled:hover{--tw-bg-opacity: 1;background-color:rgb(251 250 252 / var(--tw-bg-opacity, 1))}s-lookup .inputgroup .button-addon:focus{outline:2px solid var(--s-focus-ring-color, #0090ff);outline-offset:-2px}s-lookup .inputgroup .button-addon:disabled{cursor:not-allowed;--tw-border-opacity: 1;border-color:rgb(222 220 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(251 250 252 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(193 193 204 / var(--tw-text-opacity, 1))}s-lookup .inputgroup:after{content:\"\";pointer-events:none;position:absolute;inset:0;border-radius:4px}s-lookup .inputgroup:has(input:focus):after{outline:2px solid var(--s-focus-ring-color, #0090ff);outline-offset:-2px}s-lookup .inputgroup:has(input:focus) .p-autocomplete-input.p-inputtext,s-lookup .inputgroup:has(input:focus) .p-autocomplete-input-multiple,s-lookup .inputgroup:has(.button-addon:focus) .p-autocomplete-input.p-inputtext,s-lookup .inputgroup:has(.button-addon:focus) .p-autocomplete-input-multiple{border-color:#c1c1cc!important;box-shadow:none!important;outline:none}s-lookup .native-dropdown{position:relative;display:flex;width:100%;align-items:stretch;border-radius:4px}s-lookup .native-dropdown p-autocomplete{display:block;min-width:0px;flex-grow:1;width:auto}s-lookup .native-dropdown p-autocomplete .p-autocomplete{width:100%}s-lookup .native-dropdown .p-autocomplete-input.p-inputtext,s-lookup .native-dropdown .p-autocomplete-input-multiple{min-height:35px;width:100%;border-width:1px;--tw-border-opacity: 1;border-color:rgb(193 193 204 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(33 37 51 / var(--tw-text-opacity, 1));--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);padding:5px 10px!important;border-radius:4px 0 0 4px!important}s-lookup .native-dropdown .p-autocomplete-input-multiple{height:auto;padding:3px 10px!important}s-lookup .native-dropdown .p-autocomplete-input.p-inputtext:disabled,s-lookup .native-dropdown .p-disabled .p-autocomplete-input-multiple{--tw-text-opacity: 1;color:rgb(193 193 204 / var(--tw-text-opacity, 1));border-color:#dedce5!important;background-color:#fbfafc!important}s-lookup .native-dropdown .p-autocomplete-dropdown{display:flex;height:auto;min-height:35px;width:auto;min-width:0px;flex-shrink:0;align-items:center;justify-content:center;gap:.25rem;border-radius:0 4px 4px 0/0px 4px 4px 0px;border-width:1px;border-left-width:0px;--tw-border-opacity: 1;border-color:rgb(193 193 204 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:10px;padding-right:10px;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(33 37 51 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);border-radius:0 4px 4px 0!important}s-lookup .native-dropdown .p-autocomplete-dropdown:enabled:hover{--tw-bg-opacity: 1;background-color:rgb(251 250 252 / var(--tw-bg-opacity, 1))}s-lookup .native-dropdown .p-autocomplete-dropdown:focus{outline:2px solid var(--s-focus-ring-color, #0090ff);outline-offset:-2px}s-lookup .native-dropdown .p-autocomplete-dropdown:disabled{cursor:not-allowed;--tw-border-opacity: 1;border-color:rgb(222 220 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(251 250 252 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(193 193 204 / var(--tw-text-opacity, 1))}s-lookup .native-dropdown:after{content:\"\";pointer-events:none;position:absolute;inset:0;border-radius:4px}s-lookup .native-dropdown:has(input:focus):after{outline:2px solid var(--s-focus-ring-color, #0090ff);outline-offset:-2px}s-lookup .native-dropdown:has(input:focus) .p-autocomplete-input.p-inputtext,s-lookup .native-dropdown:has(input:focus) .p-autocomplete-input-multiple,s-lookup .native-dropdown:has(.p-autocomplete-dropdown:focus) .p-autocomplete-input.p-inputtext,s-lookup .native-dropdown:has(.p-autocomplete-dropdown:focus) .p-autocomplete-input-multiple{border-color:#c1c1cc!important;box-shadow:none!important;outline:none}s-lookup .native-dropdown p-autocomplete .p-autocomplete>.p-iconwrapper{position:relative;right:19px}body s-lookup .inputgroup:has(input:focus) .button-addon,body s-lookup .inputgroup:has(input:focus) .p-autocomplete-dropdown,body s-lookup .inputgroup:has(.button-addon:focus) .button-addon,body s-lookup .inputgroup:has(.button-addon:focus) .p-autocomplete-dropdown,body s-lookup .inputgroup:has(.p-autocomplete-dropdown:focus) .button-addon,body s-lookup .inputgroup:has(.p-autocomplete-dropdown:focus) .p-autocomplete-dropdown,body s-lookup .native-dropdown:has(input:focus) .button-addon,body s-lookup .native-dropdown:has(input:focus) .p-autocomplete-dropdown,body s-lookup .native-dropdown:has(.button-addon:focus) .button-addon,body s-lookup .native-dropdown:has(.button-addon:focus) .p-autocomplete-dropdown,body s-lookup .native-dropdown:has(.p-autocomplete-dropdown:focus) .button-addon,body s-lookup .native-dropdown:has(.p-autocomplete-dropdown:focus) .p-autocomplete-dropdown{border-color:#c1c1cc!important}s-lookup.ng-dirty.ng-invalid .inputgroup:not(:focus-within) .p-autocomplete-input.p-inputtext,s-lookup.ng-dirty.ng-invalid .inputgroup:not(:focus-within) .p-autocomplete-input-multiple,s-lookup.ng-dirty.ng-invalid .inputgroup:not(:focus-within) .button-addon,s-lookup.ng-dirty.ng-invalid .inputgroup:not(:focus-within) .p-autocomplete-dropdown,s-lookup.ng-dirty.ng-invalid .native-dropdown:not(:focus-within) .p-autocomplete-input.p-inputtext,s-lookup.ng-dirty.ng-invalid .native-dropdown:not(:focus-within) .p-autocomplete-input-multiple,s-lookup.ng-dirty.ng-invalid .native-dropdown:not(:focus-within) .button-addon,s-lookup.ng-dirty.ng-invalid .native-dropdown:not(:focus-within) .p-autocomplete-dropdown{border-color:#c13018!important}s-lookup .ui-autocomplete-input-token{width:100%}s-lookup .ui-autocomplete-input-token input{width:100%}s-lookup .ui-autocomplete .ui-autocomplete-token{max-width:100%}s-lookup .ui-autocomplete .ui-autocomplete-token-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}s-lookup .p-table-scrollable-body{min-width:100%}.s-lookup-modal main{padding:0}.s-lookup-modal .s-lookup-modal-container{height:85vh;display:flex;flex-direction:row;width:100%}.s-lookup-modal .s-lookup-modal-container .filter{width:30%;height:auto;flex-grow:0;flex-shrink:0;background-color:#e5eaea80;padding:.571rem}.s-lookup-modal .s-lookup-modal-container .filter form{width:100%;height:100%}.s-lookup-modal .s-lookup-modal-container .filter form .form-content{height:100%;display:flex;flex-direction:column}.s-lookup-modal .s-lookup-modal-container .filter form .form-content .filter-title{padding-left:.5rem}.s-lookup-modal .s-lookup-modal-container .filter form .form-content .form-fields{overflow-y:auto}.s-lookup-modal .s-lookup-modal-container .filter-toggle{margin-top:15px;flex-grow:0;flex-shrink:0;width:35px;border-radius:0 4px 4px 0}.s-lookup-modal .s-lookup-modal-container .filter-toggle button{align-items:center;position:relative;background-color:#e5eaea80;height:35px;width:100%;border:1px solid #e5eaea;outline:none;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;text-decoration:none;text-transform:none;padding:7px;transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out}.s-lookup-modal .s-lookup-modal-container .filter-toggle button:hover{background-color:active(rgba(229,234,234,.5));border-color:active(#e5eaea)}.s-lookup-modal .s-lookup-modal-container .filter-toggle button:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:-2px}.s-lookup-modal .s-lookup-modal-container>.content{flex-grow:1;flex-basis:auto;overflow-x:auto;display:flex;flex-direction:column;padding:.5rem}.s-lookup-modal .s-lookup-modal-container>.content s-loading-state{height:100%;display:block}.s-lookup-modal .s-lookup-modal-container>.content .s-loading-state{height:100%}.s-lookup-modal .s-lookup-modal-container>.content .s-loading-state .state-contents{height:100%}.s-lookup-modal .s-lookup-modal-container>.content.empty-content{align-self:center}.s-lookup-modal .s-lookup-modal-container>.content.empty-content .content-child{display:none}.s-lookup-modal .s-lookup-modal-container>.content p-table>.p-datatable{height:100%;display:flex;flex-direction:column}.s-lookup-modal .s-lookup-modal-container>.content p-table>.p-datatable .p-datatable-table-container{flex:1;margin-bottom:0}\n"] }]
         }], propDecorators: { alertConfig: [{
                 type: Input
             }], formControlName: [{
@@ -1186,12 +1187,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ standalone: true, imports: [FieldLabelComponent, LookupComponent, ReactiveFormsModule, TooltipDirective], template: "@let _field = field();\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef\"\n    ></s-field-label>\n}\n\n<div [sTooltip]=\"_field.tooltip\">\n    <s-lookup\n        [id]=\"_field.id || _field.name\"\n        [multiple]=\"_field.multiple!\"\n        [placeholder]=\"_field.placeholder\"\n        [formControl]=\"formControl()\"\n        [lookupSuggestions]=\"suggestions\"\n        [dataKey]=\"_field.dataKey!\"\n        (onLookupRequest)=\"_field.onSearch ? _field.onSearch($event) : null\"\n        [lookupDisplayField]=\"_field.displayField\"\n        [showSearch]=\"false\"\n        [lookupAppendTo]=\"_field.appendTo\"\n        (onSelect)=\"_field.onSelect ? _field.onSelect($event) : null\"\n        (onUnselect)=\"_field.onUnselect ? _field.onUnselect($event) : null\"\n        (onClear)=\"_field.onClear ? _field.onClear($event) : null\"\n        (onBlur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        [lookupEmptyMessage]=\"_field.emptyMessage\"\n    >\n    </s-lookup>\n</div>\n\n" }]
         }] });
 
+/**
+ * Cria uma função que converte um `AddonConfig` em `InputGroupAddon`, reaproveitando o mesmo objeto
+ * enquanto o `AddonConfig` for o mesmo (evita reatribuir o input do `s-input-group` a cada ciclo de detecção).
+ *
+ * O addon fica desabilitado quando o próprio `disabled` do addon for verdadeiro ou quando o form control estiver desabilitado.
+ */
+function createAddonResolver(fieldUtils, isFormDisabled) {
+    const cache = new WeakMap();
+    return (addon) => {
+        if (!addon)
+            return undefined;
+        let resolved = cache.get(addon);
+        if (!resolved) {
+            resolved = {
+                get label() {
+                    return addon.label;
+                },
+                get icon() {
+                    return addon.icon;
+                },
+                callback: () => addon.callback?.(),
+                disabled: () => fieldUtils.fieldPropertyIsDisabled(addon) || isFormDisabled(),
+            };
+            cache.set(addon, resolved);
+        }
+        return resolved;
+    };
+}
+
 class BignumberFieldComponent {
     localeService = inject(LocaleService);
     changeDetectorRef = inject(ChangeDetectorRef);
     field = input.required();
     formControl = input.required();
     fieldUtils = inject(FormFieldUtilsService);
+    toAddon = createAddonResolver(this.fieldUtils, () => this.formControl().disabled);
     onInput = new EventEmitter();
     onFocus = new EventEmitter();
     onComplete = new EventEmitter();
@@ -1270,7 +1301,7 @@ class BignumberFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BignumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BignumberFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onInput: "onInput", onFocus: "onFocus", onComplete: "onComplete" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let _field = field();\n@let isFormDisabled = formControl().disabled;\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef!.nativeElement\"\n    />\n}\n@if (_field.mask) {\n    @let autoClear = _field.type === 'number' ? (_field.autoClear ?? true) : false;\n    <input\n        #inputRef\n        sInputText\n        class=\"input-text mousetrap\"\n        type=\"text\"\n        [id]=\"_field.id || _field.name\"\n        [name]=\"_field.name\"\n        [sInputMask]=\"fieldUtils.getFieldPropertyMask(_field.mask)\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        slotChar=\"_\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [showDelay]=\"500\"\n        [autoClear]=\"autoClear\"\n        [formControl]=\"formControl()\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (maskComplete)=\"onComplete.next($event)\"\n        (input)=\"onInput.next($event)\"\n    />\n} @else {\n    <div class=\"bignumber-field\">\n        @if (_field.leftAddon) {\n            <div class=\"button-left\">\n                <ng-container *ngTemplateOutlet=\"addonRender; context: { button: _field.leftAddon }\"></ng-container>\n            </div>\n        }\n        @let allowNegative = _field.type === 'number' ? (_field.allowNegative ?? true) : false;\n        @let scale = fieldUtils.isFunction(_field.scale) ? fieldUtils.trigger(_field.scale) : _field.scale;\n        <input\n            #inputRef\n            [id]=\"_field.id || _field.name\"\n            type=\"text\"\n            [name]=\"_field.name\"\n            sBignumberInput\n            [allowNegative]=\"allowNegative\"\n            [precision]=\"\n                fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\n            \"\n            [minDecimalPlaces]=\"scale\"\n            [maxDecimalPlaces]=\"scale\"\n            [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator ?? ''\"\n            [thousandSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator ?? ''\"\n            [blockDecimalOverflow]=\"true\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [placeholder]=\"_field.placeholder\"\n            [showDelay]=\"500\"\n            sInputText\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            [ngClass]=\"'mousetrap'\"\n            class=\"input-text\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            [formControl]=\"formControl()\"\n        />\n        @if (_field.rightAddon) {\n            <div class=\"button-right\">\n                <ng-container *ngTemplateOutlet=\"addonRender; context: { button: _field.rightAddon }\"></ng-container>\n            </div>\n        }\n    </div>\n}\n\n<ng-template\n    #addonRender\n    let-button=\"button\"\n>\n    <s-button\n        [label]=\"button.label\"\n        [priority]=\"button.priority ?? 'default'\"\n        [iconClass]=\"button.icon\"\n        [disabled]=\"fieldUtils.fieldPropertyIsDisabled(button) || isFormDisabled\"\n        [auxiliary]=\"false\"\n        (clicked)=\"button.callback?.()\"\n    />\n</ng-template>\n\n", styles: [".bignumber-field{display:flex;width:100%}.bignumber-field .input-text{width:auto;flex-grow:1}.bignumber-field:has(.button-left) .input-text{border-top-left-radius:0;border-bottom-left-radius:0}.bignumber-field:has(.button-left) s-button,.bignumber-field:has(.button-left) .button-left button.s-button-with-text{min-width:40px!important}.bignumber-field:has(.button-left) .button-left button{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.bignumber-field:has(input:focus-visible) .button-left button{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}.bignumber-field:has(input.ng-invalid.ng-dirty) .button-left button{border-color:#c13018!important}.bignumber-field:has(.button-left button:focus) .input-text{border-color:#428bca!important}.bignumber-field:has(.button-left button:focus) .button-right button{border-color:#428bca!important}.bignumber-field:has(.button-right) .input-text{border-top-right-radius:0;border-bottom-right-radius:0}.bignumber-field:has(.button-right) s-button,.bignumber-field:has(.button-right) .button-right button.s-button-with-text{min-width:40px!important}.bignumber-field:has(.button-right) .button-right button{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.bignumber-field:has(input:focus-visible) .button-right button{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}.bignumber-field:has(input.ng-invalid.ng-dirty) .button-right button{border-color:#c13018!important}.bignumber-field:has(.button-right button:focus) .input-text{border-color:#428bca!important}.bignumber-field:has(.button-right button:focus) .button-left button{border-color:#428bca!important}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "directive", type: InputMaskDirective, selector: "input[sInputMask]", inputs: ["sInputMask", "slotChar", "unmask", "characterPattern", "autoClear"], outputs: ["maskComplete"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: BignumberInputModule }, { kind: "directive", type: i2$1.BignumberInputDirective, selector: "input[sBignumberInput]", inputs: ["precision", "scale", "minDecimalPlaces", "maxDecimalPlaces", "decimalSeparator", "thousandsSeparator", "thousandSeparator", "alignTo", "allowNegative", "blockDecimalOverflow", "placeholder"], outputs: ["minDecimalPlacesChange", "maxDecimalPlacesChange", "decimalSeparatorChange", "thousandSeparatorChange", "placeholderChange", "pasteRejected"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputTextDirective, selector: "input[sInputText]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BignumberFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onInput: "onInput", onFocus: "onFocus", onComplete: "onComplete" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let _field = field();\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef!.nativeElement\"\n    />\n}\n\n@let autoClear = _field.type === 'number' ? (_field.autoClear ?? true) : false;\n@let allowNegative = _field.type === 'number' ? (_field.allowNegative ?? true) : false;\n@let scale = fieldUtils.isFunction(_field.scale) ? fieldUtils.trigger(_field.scale) : _field.scale;\n\n<s-input-group\n    [leftAddon]=\"toAddon(_field.leftAddon)\"\n    [rightAddon]=\"toAddon(_field.rightAddon)\"\n>\n    @if (_field.mask) {\n        <input\n            #inputRef\n            sInputText\n            class=\"input-text mousetrap\"\n            type=\"text\"\n            [id]=\"_field.id || _field.name\"\n            [name]=\"_field.name\"\n            [sInputMask]=\"fieldUtils.getFieldPropertyMask(_field.mask)\"\n            [placeholder]=\"_field.placeholder ?? ''\"\n            slotChar=\"_\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [showDelay]=\"500\"\n            [autoClear]=\"autoClear\"\n            [formControl]=\"formControl()\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            (maskComplete)=\"onComplete.next($event)\"\n            (input)=\"onInput.next($event)\"\n        />\n    } @else {\n        <input\n            #inputRef\n            [id]=\"_field.id || _field.name\"\n            type=\"text\"\n            [name]=\"_field.name\"\n            sBignumberInput\n            [allowNegative]=\"allowNegative\"\n            [precision]=\"\n                fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\n            \"\n            [minDecimalPlaces]=\"scale\"\n            [maxDecimalPlaces]=\"scale\"\n            [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator ?? ''\"\n            [thousandSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator ?? ''\"\n            [blockDecimalOverflow]=\"true\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [placeholder]=\"_field.placeholder\"\n            [showDelay]=\"500\"\n            sInputText\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            [ngClass]=\"'mousetrap'\"\n            class=\"input-text\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            [formControl]=\"formControl()\"\n        />\n    }\n</s-input-group>\n", dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "directive", type: InputMaskDirective, selector: "input[sInputMask]", inputs: ["sInputMask", "slotChar", "unmask", "characterPattern", "autoClear"], outputs: ["maskComplete"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: InputGroupComponent, selector: "s-input-group", inputs: ["leftAddon", "rightAddon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: BignumberInputModule }, { kind: "directive", type: i2$1.BignumberInputDirective, selector: "input[sBignumberInput]", inputs: ["precision", "scale", "minDecimalPlaces", "maxDecimalPlaces", "decimalSeparator", "thousandsSeparator", "thousandSeparator", "alignTo", "allowNegative", "blockDecimalOverflow", "placeholder"], outputs: ["minDecimalPlacesChange", "maxDecimalPlacesChange", "decimalSeparatorChange", "thousandSeparatorChange", "placeholderChange", "pasteRejected"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputTextDirective, selector: "input[sInputText]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BignumberFieldComponent, decorators: [{
             type: Component,
@@ -1279,12 +1310,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         InputMaskDirective,
                         TooltipDirective,
                         ReactiveFormsModule,
-                        ButtonComponent,
+                        InputGroupComponent,
                         NgClass,
                         BignumberInputModule,
                         InputTextModule,
-                        NgTemplateOutlet,
-                    ], template: "@let _field = field();\n@let isFormDisabled = formControl().disabled;\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef!.nativeElement\"\n    />\n}\n@if (_field.mask) {\n    @let autoClear = _field.type === 'number' ? (_field.autoClear ?? true) : false;\n    <input\n        #inputRef\n        sInputText\n        class=\"input-text mousetrap\"\n        type=\"text\"\n        [id]=\"_field.id || _field.name\"\n        [name]=\"_field.name\"\n        [sInputMask]=\"fieldUtils.getFieldPropertyMask(_field.mask)\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        slotChar=\"_\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [showDelay]=\"500\"\n        [autoClear]=\"autoClear\"\n        [formControl]=\"formControl()\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (maskComplete)=\"onComplete.next($event)\"\n        (input)=\"onInput.next($event)\"\n    />\n} @else {\n    <div class=\"bignumber-field\">\n        @if (_field.leftAddon) {\n            <div class=\"button-left\">\n                <ng-container *ngTemplateOutlet=\"addonRender; context: { button: _field.leftAddon }\"></ng-container>\n            </div>\n        }\n        @let allowNegative = _field.type === 'number' ? (_field.allowNegative ?? true) : false;\n        @let scale = fieldUtils.isFunction(_field.scale) ? fieldUtils.trigger(_field.scale) : _field.scale;\n        <input\n            #inputRef\n            [id]=\"_field.id || _field.name\"\n            type=\"text\"\n            [name]=\"_field.name\"\n            sBignumberInput\n            [allowNegative]=\"allowNegative\"\n            [precision]=\"\n                fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\n            \"\n            [minDecimalPlaces]=\"scale\"\n            [maxDecimalPlaces]=\"scale\"\n            [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator ?? ''\"\n            [thousandSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator ?? ''\"\n            [blockDecimalOverflow]=\"true\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [placeholder]=\"_field.placeholder\"\n            [showDelay]=\"500\"\n            sInputText\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            [ngClass]=\"'mousetrap'\"\n            class=\"input-text\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            [formControl]=\"formControl()\"\n        />\n        @if (_field.rightAddon) {\n            <div class=\"button-right\">\n                <ng-container *ngTemplateOutlet=\"addonRender; context: { button: _field.rightAddon }\"></ng-container>\n            </div>\n        }\n    </div>\n}\n\n<ng-template\n    #addonRender\n    let-button=\"button\"\n>\n    <s-button\n        [label]=\"button.label\"\n        [priority]=\"button.priority ?? 'default'\"\n        [iconClass]=\"button.icon\"\n        [disabled]=\"fieldUtils.fieldPropertyIsDisabled(button) || isFormDisabled\"\n        [auxiliary]=\"false\"\n        (clicked)=\"button.callback?.()\"\n    />\n</ng-template>\n\n", styles: [".bignumber-field{display:flex;width:100%}.bignumber-field .input-text{width:auto;flex-grow:1}.bignumber-field:has(.button-left) .input-text{border-top-left-radius:0;border-bottom-left-radius:0}.bignumber-field:has(.button-left) s-button,.bignumber-field:has(.button-left) .button-left button.s-button-with-text{min-width:40px!important}.bignumber-field:has(.button-left) .button-left button{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.bignumber-field:has(input:focus-visible) .button-left button{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}.bignumber-field:has(input.ng-invalid.ng-dirty) .button-left button{border-color:#c13018!important}.bignumber-field:has(.button-left button:focus) .input-text{border-color:#428bca!important}.bignumber-field:has(.button-left button:focus) .button-right button{border-color:#428bca!important}.bignumber-field:has(.button-right) .input-text{border-top-right-radius:0;border-bottom-right-radius:0}.bignumber-field:has(.button-right) s-button,.bignumber-field:has(.button-right) .button-right button.s-button-with-text{min-width:40px!important}.bignumber-field:has(.button-right) .button-right button{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.bignumber-field:has(input:focus-visible) .button-right button{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}.bignumber-field:has(input.ng-invalid.ng-dirty) .button-right button{border-color:#c13018!important}.bignumber-field:has(.button-right button:focus) .input-text{border-color:#428bca!important}.bignumber-field:has(.button-right button:focus) .button-left button{border-color:#428bca!important}\n"] }]
+                    ], template: "@let _field = field();\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef!.nativeElement\"\n    />\n}\n\n@let autoClear = _field.type === 'number' ? (_field.autoClear ?? true) : false;\n@let allowNegative = _field.type === 'number' ? (_field.allowNegative ?? true) : false;\n@let scale = fieldUtils.isFunction(_field.scale) ? fieldUtils.trigger(_field.scale) : _field.scale;\n\n<s-input-group\n    [leftAddon]=\"toAddon(_field.leftAddon)\"\n    [rightAddon]=\"toAddon(_field.rightAddon)\"\n>\n    @if (_field.mask) {\n        <input\n            #inputRef\n            sInputText\n            class=\"input-text mousetrap\"\n            type=\"text\"\n            [id]=\"_field.id || _field.name\"\n            [name]=\"_field.name\"\n            [sInputMask]=\"fieldUtils.getFieldPropertyMask(_field.mask)\"\n            [placeholder]=\"_field.placeholder ?? ''\"\n            slotChar=\"_\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [showDelay]=\"500\"\n            [autoClear]=\"autoClear\"\n            [formControl]=\"formControl()\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            (maskComplete)=\"onComplete.next($event)\"\n            (input)=\"onInput.next($event)\"\n        />\n    } @else {\n        <input\n            #inputRef\n            [id]=\"_field.id || _field.name\"\n            type=\"text\"\n            [name]=\"_field.name\"\n            sBignumberInput\n            [allowNegative]=\"allowNegative\"\n            [precision]=\"\n                fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\n            \"\n            [minDecimalPlaces]=\"scale\"\n            [maxDecimalPlaces]=\"scale\"\n            [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator ?? ''\"\n            [thousandSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator ?? ''\"\n            [blockDecimalOverflow]=\"true\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [placeholder]=\"_field.placeholder\"\n            [showDelay]=\"500\"\n            sInputText\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            [ngClass]=\"'mousetrap'\"\n            class=\"input-text\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            [formControl]=\"formControl()\"\n        />\n    }\n</s-input-group>\n" }]
         }], propDecorators: { onInput: [{
                 type: Output
             }], onFocus: [{
@@ -1303,7 +1333,7 @@ class BooleanFieldComponent {
         this.formControl().reset();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BooleanFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BooleanFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let _field = field();\r\n<ng-template\r\n    #radioButtonRender\r\n    let-value=\"value\"\r\n    let-label=\"label\"\r\n    let-inputIdAppend=\"inputIdAppend\"\r\n>\r\n    @if (label) {\r\n        @let inputId = (_field.id || _field.name) + inputIdAppend;\r\n        <s-radiobutton\r\n            [name]=\"_field.name\"\r\n            [value]=\"value\"\r\n            [formControl]=\"formControl()\"\r\n            [inputId]=\"inputId\"\r\n            [label]=\"label\"\r\n            (focusedInput)=\"_field.onFocus ? _field.onFocus($event) : null\"\r\n            (inputFocusLost)=\"_field.onBlur ? _field.onBlur($event) : null\"\r\n        />\r\n    }\r\n</ng-template>\r\n\r\n<s-field-label [field]=\"_field\"></s-field-label>\r\n\r\n@if (_field.verticalAlignment) {\r\n    <div class=\"flex flex-col gap-2\">\r\n        <ng-template\r\n            *ngTemplateOutlet=\"\r\n                radioButtonRender;\r\n                context: { value: true, label: _field.optionsLabel.true, inputIdAppend: '-1' }\r\n            \"\r\n        />\r\n        <ng-template\r\n            *ngTemplateOutlet=\"\r\n                radioButtonRender;\r\n                context: { value: false, label: _field.optionsLabel.false, inputIdAppend: '-2' }\r\n            \"\r\n        />\r\n        @if (!_field.showClear && !!_field.required && !_field.required()) {\r\n            <ng-template\r\n                *ngTemplateOutlet=\"\r\n                    radioButtonRender;\r\n                    context: { value: null, label: _field.optionsLabel.empty, inputIdAppend: '-3' }\r\n                \"\r\n            />\r\n        }\r\n        <div>\r\n            @if (_field.showClear && !_field.required?.() && !formControl().disabled) {\r\n                <s-button\r\n                    [label]=\"_field.optionsLabel.clear || 'Clear selection'\"\r\n                    (clicked)=\"onClear()\"\r\n                    priority=\"link\"\r\n                >\r\n                </s-button>\r\n            }\r\n        </div>\r\n    </div>\r\n} @else {\r\n    <div class=\"horizontal-radio-buttons-container flex flex-wrap gap-2\">\r\n        <ng-template\r\n            *ngTemplateOutlet=\"\r\n                radioButtonRender;\r\n                context: { value: true, label: _field.optionsLabel.true, inputIdAppend: '-1' }\r\n            \"\r\n        />\r\n\r\n        <ng-template\r\n            *ngTemplateOutlet=\"\r\n                radioButtonRender;\r\n                context: { value: false, label: _field.optionsLabel.false, inputIdAppend: '-2' }\r\n            \"\r\n        />\r\n\r\n        <ng-template\r\n            *ngTemplateOutlet=\"\r\n                radioButtonRender;\r\n                context: { value: null, label: _field.optionsLabel.empty, inputIdAppend: '-3' }\r\n            \"\r\n        />\r\n\r\n        @if (_field.showClear && !_field.required?.() && !formControl().disabled) {\r\n            <s-button\r\n                [label]=\"_field.optionsLabel.clear || 'Clear selection'\"\r\n                (clicked)=\"onClear()\"\r\n                priority=\"link\"\r\n            >\r\n            </s-button>\r\n        }\r\n    </div>\r\n}\r\n", styles: [".horizontal-radio-buttons-container{gap:20px 40px;align-items:center;.radio-button-item{margin:0}}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "component", type: RadioButtonComponent, selector: "s-radiobutton", inputs: ["buttonDisabled", "label", "name", "value", "inputId"], outputs: ["buttonDisabledChange", "valueChange", "focusedInput", "inputFocusLost"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BooleanFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let _field = field();\r\n<ng-template\r\n    #radioButtonRender\r\n    let-value=\"value\"\r\n    let-label=\"label\"\r\n    let-inputIdAppend=\"inputIdAppend\"\r\n>\r\n    @if (label) {\r\n        @let inputId = (_field.id || _field.name) + inputIdAppend;\r\n        <s-radiobutton\r\n            [name]=\"_field.name\"\r\n            [value]=\"value\"\r\n            [formControl]=\"formControl()\"\r\n            [inputId]=\"inputId\"\r\n            [label]=\"label\"\r\n            (focusedInput)=\"_field.onFocus ? _field.onFocus($event) : null\"\r\n            (inputFocusLost)=\"_field.onBlur ? _field.onBlur($event) : null\"\r\n        />\r\n    }\r\n</ng-template>\r\n\r\n<s-field-label [field]=\"_field\"></s-field-label>\r\n\r\n@if (_field.verticalAlignment) {\r\n    <div class=\"flex flex-col gap-2\">\r\n        <ng-template\r\n            *ngTemplateOutlet=\"\r\n                radioButtonRender;\r\n                context: { value: true, label: _field.optionsLabel.true, inputIdAppend: '-1' }\r\n            \"\r\n        />\r\n        <ng-template\r\n            *ngTemplateOutlet=\"\r\n                radioButtonRender;\r\n                context: { value: false, label: _field.optionsLabel.false, inputIdAppend: '-2' }\r\n            \"\r\n        />\r\n        @if (!_field.showClear && !!_field.required && !_field.required()) {\r\n            <ng-template\r\n                *ngTemplateOutlet=\"\r\n                    radioButtonRender;\r\n                    context: { value: null, label: _field.optionsLabel.empty, inputIdAppend: '-3' }\r\n                \"\r\n            />\r\n        }\r\n        <div>\r\n            @if (_field.showClear && !_field.required?.() && !formControl().disabled) {\r\n                <s-button\r\n                    [label]=\"_field.optionsLabel.clear || 'Clear selection'\"\r\n                    (clicked)=\"onClear()\"\r\n                    priority=\"link\"\r\n                >\r\n                </s-button>\r\n            }\r\n        </div>\r\n    </div>\r\n} @else {\r\n    <div class=\"horizontal-radio-buttons-container flex flex-wrap gap-2\">\r\n        <ng-template\r\n            *ngTemplateOutlet=\"\r\n                radioButtonRender;\r\n                context: { value: true, label: _field.optionsLabel.true, inputIdAppend: '-1' }\r\n            \"\r\n        />\r\n\r\n        <ng-template\r\n            *ngTemplateOutlet=\"\r\n                radioButtonRender;\r\n                context: { value: false, label: _field.optionsLabel.false, inputIdAppend: '-2' }\r\n            \"\r\n        />\r\n\r\n        <ng-template\r\n            *ngTemplateOutlet=\"\r\n                radioButtonRender;\r\n                context: { value: null, label: _field.optionsLabel.empty, inputIdAppend: '-3' }\r\n            \"\r\n        />\r\n\r\n        @if (_field.showClear && !_field.required?.() && !formControl().disabled) {\r\n            <s-button\r\n                [label]=\"_field.optionsLabel.clear || 'Clear selection'\"\r\n                (clicked)=\"onClear()\"\r\n                priority=\"link\"\r\n            >\r\n            </s-button>\r\n        }\r\n    </div>\r\n}\r\n", styles: [".horizontal-radio-buttons-container{gap:20px 40px;align-items:center;.radio-button-item{margin:0}}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "component", type: RadioButtonComponent, selector: "s-radiobutton", inputs: ["buttonDisabled", "label", "name", "value", "inputId"], outputs: ["buttonDisabledChange", "valueChange", "focusedInput", "inputFocusLost"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked", "tieredMenuOpened", "tieredMenuClosed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BooleanFieldComponent, decorators: [{
             type: Component,
@@ -1339,7 +1369,7 @@ class ButtonFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ButtonFieldComponent, isStandalone: true, selector: "s-button-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let _field = field();\n<section\n    [class.full-width]=\"_field.fullWidth\"\n    [class.fit-content]=\"!_field.fullWidth\"\n>\n    <s-button\n        #button\n        [label]=\"_field.label\"\n        [priority]=\"_field.priority ?? 'default'\"\n        [iconClass]=\"_field.iconClass\"\n        [disabled]=\"_field.disabled ?? false\"\n        [auxiliary]=\"_field.auxiliary ?? false\"\n        [caret]=\"_field.caret ?? false\"\n        [id]=\"_field.id\"\n        [tooltip]=\"_field.tooltip ? _field.tooltip : button.tooltip\"\n        (clicked)=\"clickedButton($event)\"\n        [iconColor]=\"_field.iconColor\"\n        [badge]=\"_field.badge\"\n        [animation]=\"_field.animation\"\n        [slide]=\"_field.slide ?? false\"\n        [menuOptions]=\"_field.menuOptions ?? []\"\n        [baseZIndex]=\"_field.baseZIndex ?? 0\"\n        [styleClass]=\"_field.styleClass ? _field.styleClass : button.styleClass\"\n        [rightIconClass]=\"_field.rightIconClass\"\n        [tooltipPosition]=\"_field.tooltipPosition ? _field.tooltipPosition : button.tooltipPosition\"\n        [type]=\"_field.type\"\n        [size]=\"_field.size\"\n        (mouseenter)=\"handleMouseEnter()\"\n        (mouseleave)=\"handleMouseLeave()\"\n    >\n    </s-button>\n</section>\n\n", styles: ["section{height:100%;display:flex;align-items:flex-end}section.full-width{width:100%}section.fit-content{width:fit-content}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ButtonFieldComponent, isStandalone: true, selector: "s-button-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let _field = field();\n<section\n    [class.full-width]=\"_field.fullWidth\"\n    [class.fit-content]=\"!_field.fullWidth\"\n>\n    <s-button\n        #button\n        [label]=\"_field.label\"\n        [priority]=\"_field.priority ?? 'default'\"\n        [iconClass]=\"_field.iconClass\"\n        [disabled]=\"_field.disabled ?? false\"\n        [auxiliary]=\"_field.auxiliary ?? false\"\n        [caret]=\"_field.caret ?? false\"\n        [id]=\"_field.id\"\n        [tooltip]=\"_field.tooltip ? _field.tooltip : button.tooltip\"\n        (clicked)=\"clickedButton($event)\"\n        [iconColor]=\"_field.iconColor\"\n        [badge]=\"_field.badge\"\n        [animation]=\"_field.animation\"\n        [slide]=\"_field.slide ?? false\"\n        [menuOptions]=\"_field.menuOptions ?? []\"\n        [baseZIndex]=\"_field.baseZIndex ?? 0\"\n        [styleClass]=\"_field.styleClass ? _field.styleClass : button.styleClass\"\n        [rightIconClass]=\"_field.rightIconClass\"\n        [tooltipPosition]=\"_field.tooltipPosition ? _field.tooltipPosition : button.tooltipPosition\"\n        [type]=\"_field.type\"\n        [size]=\"_field.size\"\n        (mouseenter)=\"handleMouseEnter()\"\n        (mouseleave)=\"handleMouseLeave()\"\n    >\n    </s-button>\n</section>\n\n", styles: ["section{height:100%;display:flex;align-items:flex-end}section.full-width{width:100%}section.fit-content{width:fit-content}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked", "tieredMenuOpened", "tieredMenuClosed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonFieldComponent, decorators: [{
             type: Component,
@@ -1466,6 +1496,7 @@ class CurrencyFieldComponent {
     fieldUtils = inject(FormFieldUtilsService);
     currencies = currencies;
     mask;
+    isFormDisabled = () => this.formControl().disabled;
     inputRef = computed(() => this.inputRefComponent()?.nativeElement);
     ngOnInit() {
         this.onLocaleService();
@@ -1514,7 +1545,7 @@ class CurrencyFieldComponent {
         return field.alignTo === 'right' ? NumberAlignmentOption.RIGHT : NumberAlignmentOption.LEFT;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CurrencyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CurrencyFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "inputRefComponent", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _field = field();\r\n@let isFormDisabled = formControl().disabled;\r\n@if (inputRef()) {\r\n    <s-field-label\r\n        [field]=\"_field\"\r\n        [fieldContainerRef]=\"inputRef()\"\r\n    ></s-field-label>\r\n}\r\n@let hasMask = !!_field.mask;\r\n@let currencySymbol = _field.currency\r\n    ? currencyService.getCurrencySymbol({ currency: _field.currency() })\r\n    : _field.numberLocaleOptions?.currencySymbol;\r\n\r\n<div class=\"currency-field\">\r\n    @if (currencySymbol) {\r\n        <div class=\"button-left\">\r\n            <s-button\r\n                [label]=\"currencySymbol\"\r\n                priority=\"default\"\r\n                [disabled]=\"isFormDisabled\"\r\n                [auxiliary]=\"false\"\r\n            />\r\n        </div>\r\n    }\r\n\r\n    @if (hasMask) {\r\n        <input\r\n            #inputRef\r\n            class=\"input-text mousetrap\"\r\n            sInputText\r\n            type=\"text\"\r\n            [id]=\"_field.id || _field.name\"\r\n            [name]=\"_field.name\"\r\n            [formControl]=\"formControl()\"\r\n            [sInputMask]=\"mask\"\r\n            [placeholder]=\"_field.placeholder ?? ''\"\r\n            slotChar=\"_\"\r\n            [sTooltip]=\"_field.tooltip\"\r\n            tooltipPosition=\"top\"\r\n            [showDelay]=\"500\"\r\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\r\n            (focus)=\"_field.onFocus ? _field.onFocus($event) : null\"\r\n            (maskComplete)=\"_field.onComplete ? _field.onComplete($event) : null\"\r\n            (input)=\"_field.onInput ? _field.onInput($event) : null\"\r\n        />\r\n    } @else if (!hasMask) {\r\n        <input\r\n            #inputRef\r\n            type=\"text\"\r\n            [id]=\"_field.id || _field.name\"\r\n            class=\"input-text\"\r\n            sInputText\r\n            [name]=\"_field.name\"\r\n            [formControl]=\"formControl()\"\r\n            sNumberInput\r\n            [precision]=\"\r\n                _field.precision\r\n                    ? fieldUtils.isFunction(_field.precision)\r\n                        ? fieldUtils.trigger(_field.precision)\r\n                        : _field.precision\r\n                    : _field.currency && _field.currency()\r\n                      ? currencies[_field.currency()].precision\r\n                      : 15\r\n            \"\r\n            [scale]=\"\r\n                _field.scale\r\n                    ? fieldUtils.isFunction(_field.scale)\r\n                        ? fieldUtils.trigger(_field.scale)\r\n                        : _field.scale\r\n                    : _field.currency && _field.currency()\r\n                      ? currencies[_field.currency()].scale\r\n                      : 2\r\n            \"\r\n            [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator ?? ''\"\r\n            [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator ?? ''\"\r\n            [alignTo]=\"parseAlignTo(_field)\"\r\n            [sTooltip]=\"_field.tooltip\"\r\n            tooltipPosition=\"top\"\r\n            [placeholder]=\"_field.placeholder ?? ''\"\r\n            [showDelay]=\"500\"\r\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\r\n            [ngClass]=\"'mousetrap'\"\r\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\r\n            (focus)=\"_field.onFocus ? _field.onFocus($event) : null\"\r\n        />\r\n    }\r\n</div>\r\n", styles: [".currency-field{display:flex;width:100%}.currency-field .input-text{width:auto;flex-grow:1}.currency-field:has(.button-left) .input-text{border-top-left-radius:0;border-bottom-left-radius:0}.currency-field:has(.button-left) s-button,.currency-field:has(.button-left) .button-left button.s-button-with-text{min-width:40px!important}.currency-field:has(.button-left) .button-left button{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.currency-field:has(input:focus-visible) .button-left button{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}.currency-field:has(input.ng-invalid.ng-dirty) .button-left button{border-color:#c13018!important}.currency-field:has(.button-left button:focus) .input-text{border-color:#428bca!important}.currency-field:has(.button-left button:focus) .button-right button{border-color:#428bca!important}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InputMaskDirective, selector: "input[sInputMask]", inputs: ["sInputMask", "slotChar", "unmask", "characterPattern", "autoClear"], outputs: ["maskComplete"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "ngmodule", type: NumberInputModule }, { kind: "directive", type: i2$3.NumberInputDirective, selector: "input[sNumberInput]" }, { kind: "directive", type: InputTextDirective, selector: "input[sInputText]" }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CurrencyFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "inputRefComponent", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _field = field();\n@if (inputRef()) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef()\"\n    ></s-field-label>\n}\n@let hasMask = !!_field.mask;\n@let currencySymbol =\n    _field.currency\n        ? currencyService.getCurrencySymbol({ currency: _field.currency() })\n        : _field.numberLocaleOptions?.currencySymbol;\n\n@let currencyAddon = currencySymbol ? { label: currencySymbol, disabled: isFormDisabled } : undefined;\n\n<s-input-group [leftAddon]=\"currencyAddon\">\n    @if (hasMask) {\n        <input\n            #inputRef\n            class=\"input-text mousetrap\"\n            sInputText\n            type=\"text\"\n            [id]=\"_field.id || _field.name\"\n            [name]=\"_field.name\"\n            [formControl]=\"formControl()\"\n            [sInputMask]=\"mask\"\n            [placeholder]=\"_field.placeholder ?? ''\"\n            slotChar=\"_\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [showDelay]=\"500\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"_field.onFocus ? _field.onFocus($event) : null\"\n            (maskComplete)=\"_field.onComplete ? _field.onComplete($event) : null\"\n            (input)=\"_field.onInput ? _field.onInput($event) : null\"\n        />\n    } @else if (!hasMask) {\n        <input\n            #inputRef\n            type=\"text\"\n            [id]=\"_field.id || _field.name\"\n            class=\"input-text\"\n            sInputText\n            [name]=\"_field.name\"\n            [formControl]=\"formControl()\"\n            sNumberInput\n            [precision]=\"\n                _field.precision\n                    ? fieldUtils.isFunction(_field.precision)\n                        ? fieldUtils.trigger(_field.precision)\n                        : _field.precision\n                    : _field.currency && _field.currency()\n                      ? currencies[_field.currency()].precision\n                      : 15\n            \"\n            [scale]=\"\n                _field.scale\n                    ? fieldUtils.isFunction(_field.scale)\n                        ? fieldUtils.trigger(_field.scale)\n                        : _field.scale\n                    : _field.currency && _field.currency()\n                      ? currencies[_field.currency()].scale\n                      : 2\n            \"\n            [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator ?? ''\"\n            [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator ?? ''\"\n            [blockDecimalOverflow]=\"true\"\n            [alignTo]=\"parseAlignTo(_field)\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [placeholder]=\"_field.placeholder ?? ''\"\n            [showDelay]=\"500\"\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            [ngClass]=\"'mousetrap'\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"_field.onFocus ? _field.onFocus($event) : null\"\n        />\n    }\n</s-input-group>\n", dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InputMaskDirective, selector: "input[sInputMask]", inputs: ["sInputMask", "slotChar", "unmask", "characterPattern", "autoClear"], outputs: ["maskComplete"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "ngmodule", type: NumberInputModule }, { kind: "directive", type: i2$3.NumberInputDirective, selector: "input[sNumberInput]" }, { kind: "directive", type: InputTextDirective, selector: "input[sInputText]" }, { kind: "component", type: InputGroupComponent, selector: "s-input-group", inputs: ["leftAddon", "rightAddon"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
             type: Component,
@@ -1526,8 +1557,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TooltipDirective,
                         NumberInputModule,
                         InputTextDirective,
-                        ButtonComponent,
-                    ], encapsulation: ViewEncapsulation.None, template: "@let _field = field();\r\n@let isFormDisabled = formControl().disabled;\r\n@if (inputRef()) {\r\n    <s-field-label\r\n        [field]=\"_field\"\r\n        [fieldContainerRef]=\"inputRef()\"\r\n    ></s-field-label>\r\n}\r\n@let hasMask = !!_field.mask;\r\n@let currencySymbol = _field.currency\r\n    ? currencyService.getCurrencySymbol({ currency: _field.currency() })\r\n    : _field.numberLocaleOptions?.currencySymbol;\r\n\r\n<div class=\"currency-field\">\r\n    @if (currencySymbol) {\r\n        <div class=\"button-left\">\r\n            <s-button\r\n                [label]=\"currencySymbol\"\r\n                priority=\"default\"\r\n                [disabled]=\"isFormDisabled\"\r\n                [auxiliary]=\"false\"\r\n            />\r\n        </div>\r\n    }\r\n\r\n    @if (hasMask) {\r\n        <input\r\n            #inputRef\r\n            class=\"input-text mousetrap\"\r\n            sInputText\r\n            type=\"text\"\r\n            [id]=\"_field.id || _field.name\"\r\n            [name]=\"_field.name\"\r\n            [formControl]=\"formControl()\"\r\n            [sInputMask]=\"mask\"\r\n            [placeholder]=\"_field.placeholder ?? ''\"\r\n            slotChar=\"_\"\r\n            [sTooltip]=\"_field.tooltip\"\r\n            tooltipPosition=\"top\"\r\n            [showDelay]=\"500\"\r\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\r\n            (focus)=\"_field.onFocus ? _field.onFocus($event) : null\"\r\n            (maskComplete)=\"_field.onComplete ? _field.onComplete($event) : null\"\r\n            (input)=\"_field.onInput ? _field.onInput($event) : null\"\r\n        />\r\n    } @else if (!hasMask) {\r\n        <input\r\n            #inputRef\r\n            type=\"text\"\r\n            [id]=\"_field.id || _field.name\"\r\n            class=\"input-text\"\r\n            sInputText\r\n            [name]=\"_field.name\"\r\n            [formControl]=\"formControl()\"\r\n            sNumberInput\r\n            [precision]=\"\r\n                _field.precision\r\n                    ? fieldUtils.isFunction(_field.precision)\r\n                        ? fieldUtils.trigger(_field.precision)\r\n                        : _field.precision\r\n                    : _field.currency && _field.currency()\r\n                      ? currencies[_field.currency()].precision\r\n                      : 15\r\n            \"\r\n            [scale]=\"\r\n                _field.scale\r\n                    ? fieldUtils.isFunction(_field.scale)\r\n                        ? fieldUtils.trigger(_field.scale)\r\n                        : _field.scale\r\n                    : _field.currency && _field.currency()\r\n                      ? currencies[_field.currency()].scale\r\n                      : 2\r\n            \"\r\n            [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator ?? ''\"\r\n            [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator ?? ''\"\r\n            [alignTo]=\"parseAlignTo(_field)\"\r\n            [sTooltip]=\"_field.tooltip\"\r\n            tooltipPosition=\"top\"\r\n            [placeholder]=\"_field.placeholder ?? ''\"\r\n            [showDelay]=\"500\"\r\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\r\n            [ngClass]=\"'mousetrap'\"\r\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\r\n            (focus)=\"_field.onFocus ? _field.onFocus($event) : null\"\r\n        />\r\n    }\r\n</div>\r\n", styles: [".currency-field{display:flex;width:100%}.currency-field .input-text{width:auto;flex-grow:1}.currency-field:has(.button-left) .input-text{border-top-left-radius:0;border-bottom-left-radius:0}.currency-field:has(.button-left) s-button,.currency-field:has(.button-left) .button-left button.s-button-with-text{min-width:40px!important}.currency-field:has(.button-left) .button-left button{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.currency-field:has(input:focus-visible) .button-left button{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}.currency-field:has(input.ng-invalid.ng-dirty) .button-left button{border-color:#c13018!important}.currency-field:has(.button-left button:focus) .input-text{border-color:#428bca!important}.currency-field:has(.button-left button:focus) .button-right button{border-color:#428bca!important}\n"] }]
+                        InputGroupComponent,
+                    ], encapsulation: ViewEncapsulation.None, template: "@let _field = field();\n@if (inputRef()) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef()\"\n    ></s-field-label>\n}\n@let hasMask = !!_field.mask;\n@let currencySymbol =\n    _field.currency\n        ? currencyService.getCurrencySymbol({ currency: _field.currency() })\n        : _field.numberLocaleOptions?.currencySymbol;\n\n@let currencyAddon = currencySymbol ? { label: currencySymbol, disabled: isFormDisabled } : undefined;\n\n<s-input-group [leftAddon]=\"currencyAddon\">\n    @if (hasMask) {\n        <input\n            #inputRef\n            class=\"input-text mousetrap\"\n            sInputText\n            type=\"text\"\n            [id]=\"_field.id || _field.name\"\n            [name]=\"_field.name\"\n            [formControl]=\"formControl()\"\n            [sInputMask]=\"mask\"\n            [placeholder]=\"_field.placeholder ?? ''\"\n            slotChar=\"_\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [showDelay]=\"500\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"_field.onFocus ? _field.onFocus($event) : null\"\n            (maskComplete)=\"_field.onComplete ? _field.onComplete($event) : null\"\n            (input)=\"_field.onInput ? _field.onInput($event) : null\"\n        />\n    } @else if (!hasMask) {\n        <input\n            #inputRef\n            type=\"text\"\n            [id]=\"_field.id || _field.name\"\n            class=\"input-text\"\n            sInputText\n            [name]=\"_field.name\"\n            [formControl]=\"formControl()\"\n            sNumberInput\n            [precision]=\"\n                _field.precision\n                    ? fieldUtils.isFunction(_field.precision)\n                        ? fieldUtils.trigger(_field.precision)\n                        : _field.precision\n                    : _field.currency && _field.currency()\n                      ? currencies[_field.currency()].precision\n                      : 15\n            \"\n            [scale]=\"\n                _field.scale\n                    ? fieldUtils.isFunction(_field.scale)\n                        ? fieldUtils.trigger(_field.scale)\n                        : _field.scale\n                    : _field.currency && _field.currency()\n                      ? currencies[_field.currency()].scale\n                      : 2\n            \"\n            [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator ?? ''\"\n            [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator ?? ''\"\n            [blockDecimalOverflow]=\"true\"\n            [alignTo]=\"parseAlignTo(_field)\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [placeholder]=\"_field.placeholder ?? ''\"\n            [showDelay]=\"500\"\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            [ngClass]=\"'mousetrap'\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"_field.onFocus ? _field.onFocus($event) : null\"\n        />\n    }\n</s-input-group>\n" }]
         }] });
 
 class FileUploadFieldComponent {
@@ -1608,6 +1639,7 @@ class NumberFieldComponent {
     field = input.required();
     formControl = input.required();
     fieldUtils = inject(FormFieldUtilsService);
+    toAddon = createAddonResolver(this.fieldUtils, () => this.formControl().disabled);
     onInput = new EventEmitter();
     onFocus = new EventEmitter();
     onComplete = new EventEmitter();
@@ -1680,7 +1712,7 @@ class NumberFieldComponent {
         this.inputRef = input;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NumberFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onInput: "onInput", onFocus: "onFocus", onComplete: "onComplete" }, ngImport: i0, template: "@let _field = field();\n@let isFormDisabled = formControl().disabled;\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef.nativeElement\"\n    />\n}\n\n@let hasMask = !!_field.mask;\n@if (hasMask) {\n    <input\n        sInputText\n        class=\"input-text mousetrap\"\n        type=\"text\"\n        [id]=\"_field.id || _field.name\"\n        [name]=\"_field.name\"\n        [sInputMask]=\"_field.mask ? fieldUtils.getFieldPropertyMask(_field.mask) : undefined\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        slotChar=\"_\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [showDelay]=\"500\"\n        [formControl]=\"formControl()\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (maskComplete)=\"onComplete.next($event)\"\n        (input)=\"onInput.next($event)\"\n    />\n} @else if (!hasMask) {\n    <div class=\"legacy-number-field\">\n        @if (_field.leftAddon) {\n            <div class=\"button-left\">\n                <ng-container *ngTemplateOutlet=\"addonRender; context: { button: _field.leftAddon }\"></ng-container>\n            </div>\n        }\n\n        @if (\n            _field.type === 'legacyNumber' && _field.localizedNumber && _field.alignTo === numberAlignmentOption.LEFT\n        ) {\n            <ng-container *ngTemplateOutlet=\"localizedNumber\"></ng-container>\n        } @else {\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        }\n\n        @if (_field.rightAddon) {\n            <div class=\"button-right\">\n                <ng-container *ngTemplateOutlet=\"addonRender; context: { button: _field.rightAddon }\"></ng-container>\n            </div>\n        }\n    </div>\n}\n\n<ng-template #input>\n    <input\n        #inputRef\n        [id]=\"_field.id || _field.name\"\n        type=\"text\"\n        [name]=\"_field.name\"\n        sNumberInput\n        [precision]=\"fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\"\n        [scale]=\"fieldUtils.isFunction(_field.scale) ? fieldUtils.trigger(_field.scale) : _field.scale\"\n        [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator ?? ''\"\n        [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator ?? ''\"\n        [alignTo]=\"_field.alignTo ?? numberAlignmentOption.LEFT\"\n        [blockDecimalOverflow]=\"true\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder\"\n        [showDelay]=\"500\"\n        sInputText\n        [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        [formControl]=\"formControl()\"\n        class=\"input-text\"\n    />\n</ng-template>\n<ng-template #localizedNumber>\n    <input\n        #inputRef\n        [id]=\"_field.id || _field.name\"\n        type=\"text\"\n        [name]=\"_field.name\"\n        sLocalizedNumberInput\n        [precision]=\"fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\"\n        [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator\"\n        [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder\"\n        [showDelay]=\"500\"\n        sInputText\n        [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        [formControl]=\"formControl()\"\n    />\n</ng-template>\n\n<ng-template\n    #addonRender\n    let-button=\"button\"\n>\n    <s-button\n        [label]=\"button.label\"\n        [priority]=\"button.priority ?? 'default'\"\n        [iconClass]=\"button.icon\"\n        [disabled]=\"fieldUtils.fieldPropertyIsDisabled(button) || isFormDisabled\"\n        [auxiliary]=\"false\"\n        (clicked)=\"button.callback?.()\"\n    />\n</ng-template>\n", styles: [".legacy-number-field{display:flex;width:100%}.legacy-number-field .input-text{width:auto;flex-grow:1}.legacy-number-field:has(.button-left) .input-text{border-top-left-radius:0;border-bottom-left-radius:0}.legacy-number-field:has(.button-left) s-button,.legacy-number-field:has(.button-left) .button-left button.s-button-with-text{min-width:40px!important}.legacy-number-field:has(.button-left) .button-left button{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.legacy-number-field:has(input:focus-visible) .button-left button{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}.legacy-number-field:has(input.ng-invalid.ng-dirty) .button-left button{border-color:#c13018!important}.legacy-number-field:has(.button-left button:focus) .input-text{border-color:#428bca!important}.legacy-number-field:has(.button-left button:focus) .button-right button{border-color:#428bca!important}.legacy-number-field:has(.button-right) .input-text{border-top-right-radius:0;border-bottom-right-radius:0}.legacy-number-field:has(.button-right) s-button,.legacy-number-field:has(.button-right) .button-right button.s-button-with-text{min-width:40px!important}.legacy-number-field:has(.button-right) .button-right button{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.legacy-number-field:has(input:focus-visible) .button-right button{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}.legacy-number-field:has(input.ng-invalid.ng-dirty) .button-right button{border-color:#c13018!important}.legacy-number-field:has(.button-right button:focus) .input-text{border-color:#428bca!important}.legacy-number-field:has(.button-right button:focus) .button-left button{border-color:#428bca!important}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "directive", type: InputMaskDirective, selector: "input[sInputMask]", inputs: ["sInputMask", "slotChar", "unmask", "characterPattern", "autoClear"], outputs: ["maskComplete"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }, { kind: "ngmodule", type: LocalizedNumberInputModule }, { kind: "directive", type: i2$4.LocalizedNumberInputDirective, selector: "input[sLocalizedNumberInput]", inputs: ["decimalSeparator", "thousandsSeparator", "precision"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NumberInputModule }, { kind: "directive", type: i2$3.NumberInputDirective, selector: "input[sNumberInput]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputTextDirective, selector: "input[sInputText]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NumberFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onInput: "onInput", onFocus: "onFocus", onComplete: "onComplete" }, ngImport: i0, template: "@let _field = field();\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef.nativeElement\"\n    />\n}\n\n<s-input-group\n    [leftAddon]=\"toAddon(_field.leftAddon)\"\n    [rightAddon]=\"toAddon(_field.rightAddon)\"\n>\n    @if (_field.mask) {\n        <input\n            sInputText\n            class=\"input-text mousetrap\"\n            type=\"text\"\n            [id]=\"_field.id || _field.name\"\n            [name]=\"_field.name\"\n            [sInputMask]=\"fieldUtils.getFieldPropertyMask(_field.mask)\"\n            [placeholder]=\"_field.placeholder ?? ''\"\n            slotChar=\"_\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [showDelay]=\"500\"\n            [formControl]=\"formControl()\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            (maskComplete)=\"onComplete.next($event)\"\n            (input)=\"onInput.next($event)\"\n        />\n    } @else if (\n        _field.type === 'legacyNumber' && _field.localizedNumber && _field.alignTo === numberAlignmentOption.LEFT\n    ) {\n        <input\n            #inputRef\n            [id]=\"_field.id || _field.name\"\n            type=\"text\"\n            [name]=\"_field.name\"\n            sLocalizedNumberInput\n            [precision]=\"\n                fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\n            \"\n            [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator\"\n            [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [placeholder]=\"_field.placeholder\"\n            [showDelay]=\"500\"\n            sInputText\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            [ngClass]=\"'mousetrap'\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            [formControl]=\"formControl()\"\n        />\n    } @else {\n        <input\n            #inputRef\n            [id]=\"_field.id || _field.name\"\n            type=\"text\"\n            [name]=\"_field.name\"\n            sNumberInput\n            [precision]=\"\n                fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\n            \"\n            [scale]=\"fieldUtils.isFunction(_field.scale) ? fieldUtils.trigger(_field.scale) : _field.scale\"\n            [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator ?? ''\"\n            [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator ?? ''\"\n            [alignTo]=\"_field.alignTo ?? numberAlignmentOption.LEFT\"\n            [blockDecimalOverflow]=\"true\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [placeholder]=\"_field.placeholder\"\n            [showDelay]=\"500\"\n            sInputText\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            [ngClass]=\"'mousetrap'\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            [formControl]=\"formControl()\"\n            class=\"input-text\"\n        />\n    }\n</s-input-group>\n", dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "directive", type: InputMaskDirective, selector: "input[sInputMask]", inputs: ["sInputMask", "slotChar", "unmask", "characterPattern", "autoClear"], outputs: ["maskComplete"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: InputGroupComponent, selector: "s-input-group", inputs: ["leftAddon", "rightAddon"] }, { kind: "ngmodule", type: LocalizedNumberInputModule }, { kind: "directive", type: i2$4.LocalizedNumberInputDirective, selector: "input[sLocalizedNumberInput]", inputs: ["decimalSeparator", "thousandsSeparator", "precision"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NumberInputModule }, { kind: "directive", type: i2$3.NumberInputDirective, selector: "input[sNumberInput]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputTextDirective, selector: "input[sInputText]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberFieldComponent, decorators: [{
             type: Component,
@@ -1689,13 +1721,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         InputMaskDirective,
                         TooltipDirective,
                         ReactiveFormsModule,
-                        ButtonComponent,
+                        InputGroupComponent,
                         LocalizedNumberInputModule,
                         NgClass,
                         NumberInputModule,
-                        NgTemplateOutlet,
                         InputTextModule,
-                    ], encapsulation: ViewEncapsulation.None, template: "@let _field = field();\n@let isFormDisabled = formControl().disabled;\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef.nativeElement\"\n    />\n}\n\n@let hasMask = !!_field.mask;\n@if (hasMask) {\n    <input\n        sInputText\n        class=\"input-text mousetrap\"\n        type=\"text\"\n        [id]=\"_field.id || _field.name\"\n        [name]=\"_field.name\"\n        [sInputMask]=\"_field.mask ? fieldUtils.getFieldPropertyMask(_field.mask) : undefined\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        slotChar=\"_\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [showDelay]=\"500\"\n        [formControl]=\"formControl()\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (maskComplete)=\"onComplete.next($event)\"\n        (input)=\"onInput.next($event)\"\n    />\n} @else if (!hasMask) {\n    <div class=\"legacy-number-field\">\n        @if (_field.leftAddon) {\n            <div class=\"button-left\">\n                <ng-container *ngTemplateOutlet=\"addonRender; context: { button: _field.leftAddon }\"></ng-container>\n            </div>\n        }\n\n        @if (\n            _field.type === 'legacyNumber' && _field.localizedNumber && _field.alignTo === numberAlignmentOption.LEFT\n        ) {\n            <ng-container *ngTemplateOutlet=\"localizedNumber\"></ng-container>\n        } @else {\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        }\n\n        @if (_field.rightAddon) {\n            <div class=\"button-right\">\n                <ng-container *ngTemplateOutlet=\"addonRender; context: { button: _field.rightAddon }\"></ng-container>\n            </div>\n        }\n    </div>\n}\n\n<ng-template #input>\n    <input\n        #inputRef\n        [id]=\"_field.id || _field.name\"\n        type=\"text\"\n        [name]=\"_field.name\"\n        sNumberInput\n        [precision]=\"fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\"\n        [scale]=\"fieldUtils.isFunction(_field.scale) ? fieldUtils.trigger(_field.scale) : _field.scale\"\n        [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator ?? ''\"\n        [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator ?? ''\"\n        [alignTo]=\"_field.alignTo ?? numberAlignmentOption.LEFT\"\n        [blockDecimalOverflow]=\"true\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder\"\n        [showDelay]=\"500\"\n        sInputText\n        [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        [formControl]=\"formControl()\"\n        class=\"input-text\"\n    />\n</ng-template>\n<ng-template #localizedNumber>\n    <input\n        #inputRef\n        [id]=\"_field.id || _field.name\"\n        type=\"text\"\n        [name]=\"_field.name\"\n        sLocalizedNumberInput\n        [precision]=\"fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\"\n        [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator\"\n        [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder\"\n        [showDelay]=\"500\"\n        sInputText\n        [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        [formControl]=\"formControl()\"\n    />\n</ng-template>\n\n<ng-template\n    #addonRender\n    let-button=\"button\"\n>\n    <s-button\n        [label]=\"button.label\"\n        [priority]=\"button.priority ?? 'default'\"\n        [iconClass]=\"button.icon\"\n        [disabled]=\"fieldUtils.fieldPropertyIsDisabled(button) || isFormDisabled\"\n        [auxiliary]=\"false\"\n        (clicked)=\"button.callback?.()\"\n    />\n</ng-template>\n", styles: [".legacy-number-field{display:flex;width:100%}.legacy-number-field .input-text{width:auto;flex-grow:1}.legacy-number-field:has(.button-left) .input-text{border-top-left-radius:0;border-bottom-left-radius:0}.legacy-number-field:has(.button-left) s-button,.legacy-number-field:has(.button-left) .button-left button.s-button-with-text{min-width:40px!important}.legacy-number-field:has(.button-left) .button-left button{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.legacy-number-field:has(input:focus-visible) .button-left button{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}.legacy-number-field:has(input.ng-invalid.ng-dirty) .button-left button{border-color:#c13018!important}.legacy-number-field:has(.button-left button:focus) .input-text{border-color:#428bca!important}.legacy-number-field:has(.button-left button:focus) .button-right button{border-color:#428bca!important}.legacy-number-field:has(.button-right) .input-text{border-top-right-radius:0;border-bottom-right-radius:0}.legacy-number-field:has(.button-right) s-button,.legacy-number-field:has(.button-right) .button-right button.s-button-with-text{min-width:40px!important}.legacy-number-field:has(.button-right) .button-right button{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.legacy-number-field:has(input:focus-visible) .button-right button{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}.legacy-number-field:has(input.ng-invalid.ng-dirty) .button-right button{border-color:#c13018!important}.legacy-number-field:has(.button-right button:focus) .input-text{border-color:#428bca!important}.legacy-number-field:has(.button-right button:focus) .button-left button{border-color:#428bca!important}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "@let _field = field();\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef.nativeElement\"\n    />\n}\n\n<s-input-group\n    [leftAddon]=\"toAddon(_field.leftAddon)\"\n    [rightAddon]=\"toAddon(_field.rightAddon)\"\n>\n    @if (_field.mask) {\n        <input\n            sInputText\n            class=\"input-text mousetrap\"\n            type=\"text\"\n            [id]=\"_field.id || _field.name\"\n            [name]=\"_field.name\"\n            [sInputMask]=\"fieldUtils.getFieldPropertyMask(_field.mask)\"\n            [placeholder]=\"_field.placeholder ?? ''\"\n            slotChar=\"_\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [showDelay]=\"500\"\n            [formControl]=\"formControl()\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            (maskComplete)=\"onComplete.next($event)\"\n            (input)=\"onInput.next($event)\"\n        />\n    } @else if (\n        _field.type === 'legacyNumber' && _field.localizedNumber && _field.alignTo === numberAlignmentOption.LEFT\n    ) {\n        <input\n            #inputRef\n            [id]=\"_field.id || _field.name\"\n            type=\"text\"\n            [name]=\"_field.name\"\n            sLocalizedNumberInput\n            [precision]=\"\n                fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\n            \"\n            [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator\"\n            [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [placeholder]=\"_field.placeholder\"\n            [showDelay]=\"500\"\n            sInputText\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            [ngClass]=\"'mousetrap'\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            [formControl]=\"formControl()\"\n        />\n    } @else {\n        <input\n            #inputRef\n            [id]=\"_field.id || _field.name\"\n            type=\"text\"\n            [name]=\"_field.name\"\n            sNumberInput\n            [precision]=\"\n                fieldUtils.isFunction(_field.precision) ? fieldUtils.trigger(_field.precision) : _field.precision\n            \"\n            [scale]=\"fieldUtils.isFunction(_field.scale) ? fieldUtils.trigger(_field.scale) : _field.scale\"\n            [decimalSeparator]=\"_field.numberLocaleOptions?.decimalSeparator ?? ''\"\n            [thousandsSeparator]=\"_field.numberLocaleOptions?.thousandsSeparator ?? ''\"\n            [alignTo]=\"_field.alignTo ?? numberAlignmentOption.LEFT\"\n            [blockDecimalOverflow]=\"true\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [placeholder]=\"_field.placeholder\"\n            [showDelay]=\"500\"\n            sInputText\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            [ngClass]=\"'mousetrap'\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            [formControl]=\"formControl()\"\n            class=\"input-text\"\n        />\n    }\n</s-input-group>\n" }]
         }], propDecorators: { onInput: [{
                 type: Output
             }], onFocus: [{
@@ -1715,6 +1746,8 @@ class PasswordFieldComponent {
     inputRef = null;
     ngUnsubscribe = new Subject();
     passwordVisible = false;
+    showPasswordAddon = this.createToggleAddon('fas fa-eye');
+    hidePasswordAddon = this.createToggleAddon('fas fa-eye-slash');
     formUtils = inject(FormFieldUtilsService);
     ngOnInit() {
         this.formUtils.switchEmptyStringToNull(this.formControl(), this.ngUnsubscribe);
@@ -1742,11 +1775,18 @@ class PasswordFieldComponent {
     onChangeVisible() {
         this.passwordVisible = !this.passwordVisible;
     }
+    createToggleAddon(icon) {
+        return {
+            icon,
+            callback: () => this.onChangeVisible(),
+            disabled: () => this.formControl().disabled,
+        };
+    }
     ngAfterViewInit() {
         this.changeDetectorRef.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PasswordFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onInput: "onInput", onFocus: "onFocus", onComplete: "onComplete" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let _field = field();\n@let isFormDisabled = formControl().disabled;\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef\"\n    ></s-field-label>\n}\n\n<div\n    class=\"password-field\"\n    [ngClass]=\"{ 'password-field--toggle': _field.showToggle }\"\n>\n    <input\n        #inputRef\n        [type]=\"passwordVisible ? 'text' : 'password'\"\n        [id]=\"_field.id || _field.name\"\n        class=\"password-input\"\n        [name]=\"_field.name\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        [showDelay]=\"500\"\n        [maxLength]=\"_field.maxLength ?? 9999999\"\n        sInputText\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (input)=\"onInput.next($event)\"\n        [formControl]=\"formControl()\"\n        [ngStyle]=\"_field.style\"\n        [sPasswordStrength]=\"_field.passwordStrength ? _field.passwordStrength : false\"\n        [passwordStrengthDescription]=\"\n            _field.passwordStrengthOptions?.description ? _field.passwordStrengthOptions!.description : ''\n        \"\n        [passwordStrengthWeakTitle]=\"\n            _field.passwordStrengthOptions?.weakTitle ? _field.passwordStrengthOptions?.weakTitle : ''\n        \"\n        [passwordStrengthMediumTitle]=\"\n            _field.passwordStrengthOptions?.mediumTitle ? _field.passwordStrengthOptions?.mediumTitle : ''\n        \"\n        [passwordStrengthStrongTitle]=\"\n            _field.passwordStrengthOptions?.strongTitle ? _field.passwordStrengthOptions?.strongTitle : ''\n        \"\n        [passwordStrengthValidation]=\"_field.passwordStrengthOptions?.validation\"\n    />\n    @if (_field.showToggle) {\n        <span class=\"toggle-button\">\n            <s-button\n                [iconClass]=\"passwordVisible ? 'fas fa-eye-slash' : 'fas fa-eye'\"\n                [disabled]=\"isFormDisabled\"\n                priority=\"default\"\n                (clicked)=\"onChangeVisible()\"\n            >\n            </s-button>\n        </span>\n    }\n</div>\n", styles: ["s-text-field.ng-dirty.ng-invalid .password-input{border-color:#c13018}s-text-field.ng-dirty.ng-invalid .password-input:hover{border-color:highlight(#c13018)}.password-field{display:flex}.password-field--toggle .password-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.password-field--toggle .toggle-button s-button button{border-bottom-left-radius:0;border-top-left-radius:0}.password-field:has(.password-input.ng-invalid.ng-dirty) s-button button{border:1px solid #c13018}.password-field:has(.password-input:focus-visible) s-button button{outline:2px solid var(--s-focus-ring-color);outline-offset:-2px}.password-field:has(.password-input:focus-visible):has(button) .password-input{border-right:none}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PasswordStrengthModule }, { kind: "directive", type: i2$5.PasswordStrengthDirective, selector: "[sPasswordStrength]", inputs: ["sPasswordStrength", "passwordStrengthValidation", "passwordStrengthPosition", "passwordStrengthWeakTitle", "passwordStrengthMediumTitle", "passwordStrengthStrongTitle", "passwordStrengthDescription"] }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputTextDirective, selector: "input[sInputText]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PasswordFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onInput: "onInput", onFocus: "onFocus", onComplete: "onComplete" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let _field = field();\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef\"\n    ></s-field-label>\n}\n\n<s-input-group [rightAddon]=\"_field.showToggle ? (passwordVisible ? hidePasswordAddon : showPasswordAddon) : undefined\">\n    <input\n        #inputRef\n        [type]=\"passwordVisible ? 'text' : 'password'\"\n        [id]=\"_field.id || _field.name\"\n        class=\"password-input\"\n        [name]=\"_field.name\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        [showDelay]=\"500\"\n        [maxLength]=\"_field.maxLength ?? 9999999\"\n        sInputText\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (input)=\"onInput.next($event)\"\n        [formControl]=\"formControl()\"\n        [ngStyle]=\"_field.style\"\n        [sPasswordStrength]=\"_field.passwordStrength ? _field.passwordStrength : false\"\n        [passwordStrengthDescription]=\"\n            _field.passwordStrengthOptions?.description ? _field.passwordStrengthOptions!.description : ''\n        \"\n        [passwordStrengthWeakTitle]=\"\n            _field.passwordStrengthOptions?.weakTitle ? _field.passwordStrengthOptions?.weakTitle : ''\n        \"\n        [passwordStrengthMediumTitle]=\"\n            _field.passwordStrengthOptions?.mediumTitle ? _field.passwordStrengthOptions?.mediumTitle : ''\n        \"\n        [passwordStrengthStrongTitle]=\"\n            _field.passwordStrengthOptions?.strongTitle ? _field.passwordStrengthOptions?.strongTitle : ''\n        \"\n        [passwordStrengthValidation]=\"_field.passwordStrengthOptions?.validation\"\n    />\n</s-input-group>\n", styles: ["s-text-field.ng-dirty.ng-invalid .password-input{border-color:#c13018}s-text-field.ng-dirty.ng-invalid .password-input:hover{border-color:highlight(#c13018)}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PasswordStrengthModule }, { kind: "directive", type: i2$5.PasswordStrengthDirective, selector: "[sPasswordStrength]", inputs: ["sPasswordStrength", "passwordStrengthValidation", "passwordStrengthPosition", "passwordStrengthWeakTitle", "passwordStrengthMediumTitle", "passwordStrengthStrongTitle", "passwordStrengthDescription"] }, { kind: "component", type: InputGroupComponent, selector: "s-input-group", inputs: ["leftAddon", "rightAddon"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputTextDirective, selector: "input[sInputText]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PasswordFieldComponent, decorators: [{
             type: Component,
@@ -1757,9 +1797,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReactiveFormsModule,
                         NgStyle,
                         PasswordStrengthModule,
-                        ButtonComponent,
+                        InputGroupComponent,
                         InputTextModule,
-                    ], template: "@let _field = field();\n@let isFormDisabled = formControl().disabled;\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef\"\n    ></s-field-label>\n}\n\n<div\n    class=\"password-field\"\n    [ngClass]=\"{ 'password-field--toggle': _field.showToggle }\"\n>\n    <input\n        #inputRef\n        [type]=\"passwordVisible ? 'text' : 'password'\"\n        [id]=\"_field.id || _field.name\"\n        class=\"password-input\"\n        [name]=\"_field.name\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        [showDelay]=\"500\"\n        [maxLength]=\"_field.maxLength ?? 9999999\"\n        sInputText\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (input)=\"onInput.next($event)\"\n        [formControl]=\"formControl()\"\n        [ngStyle]=\"_field.style\"\n        [sPasswordStrength]=\"_field.passwordStrength ? _field.passwordStrength : false\"\n        [passwordStrengthDescription]=\"\n            _field.passwordStrengthOptions?.description ? _field.passwordStrengthOptions!.description : ''\n        \"\n        [passwordStrengthWeakTitle]=\"\n            _field.passwordStrengthOptions?.weakTitle ? _field.passwordStrengthOptions?.weakTitle : ''\n        \"\n        [passwordStrengthMediumTitle]=\"\n            _field.passwordStrengthOptions?.mediumTitle ? _field.passwordStrengthOptions?.mediumTitle : ''\n        \"\n        [passwordStrengthStrongTitle]=\"\n            _field.passwordStrengthOptions?.strongTitle ? _field.passwordStrengthOptions?.strongTitle : ''\n        \"\n        [passwordStrengthValidation]=\"_field.passwordStrengthOptions?.validation\"\n    />\n    @if (_field.showToggle) {\n        <span class=\"toggle-button\">\n            <s-button\n                [iconClass]=\"passwordVisible ? 'fas fa-eye-slash' : 'fas fa-eye'\"\n                [disabled]=\"isFormDisabled\"\n                priority=\"default\"\n                (clicked)=\"onChangeVisible()\"\n            >\n            </s-button>\n        </span>\n    }\n</div>\n", styles: ["s-text-field.ng-dirty.ng-invalid .password-input{border-color:#c13018}s-text-field.ng-dirty.ng-invalid .password-input:hover{border-color:highlight(#c13018)}.password-field{display:flex}.password-field--toggle .password-input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.password-field--toggle .toggle-button s-button button{border-bottom-left-radius:0;border-top-left-radius:0}.password-field:has(.password-input.ng-invalid.ng-dirty) s-button button{border:1px solid #c13018}.password-field:has(.password-input:focus-visible) s-button button{outline:2px solid var(--s-focus-ring-color);outline-offset:-2px}.password-field:has(.password-input:focus-visible):has(button) .password-input{border-right:none}\n"] }]
+                    ], template: "@let _field = field();\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef\"\n    ></s-field-label>\n}\n\n<s-input-group [rightAddon]=\"_field.showToggle ? (passwordVisible ? hidePasswordAddon : showPasswordAddon) : undefined\">\n    <input\n        #inputRef\n        [type]=\"passwordVisible ? 'text' : 'password'\"\n        [id]=\"_field.id || _field.name\"\n        class=\"password-input\"\n        [name]=\"_field.name\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        [showDelay]=\"500\"\n        [maxLength]=\"_field.maxLength ?? 9999999\"\n        sInputText\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (input)=\"onInput.next($event)\"\n        [formControl]=\"formControl()\"\n        [ngStyle]=\"_field.style\"\n        [sPasswordStrength]=\"_field.passwordStrength ? _field.passwordStrength : false\"\n        [passwordStrengthDescription]=\"\n            _field.passwordStrengthOptions?.description ? _field.passwordStrengthOptions!.description : ''\n        \"\n        [passwordStrengthWeakTitle]=\"\n            _field.passwordStrengthOptions?.weakTitle ? _field.passwordStrengthOptions?.weakTitle : ''\n        \"\n        [passwordStrengthMediumTitle]=\"\n            _field.passwordStrengthOptions?.mediumTitle ? _field.passwordStrengthOptions?.mediumTitle : ''\n        \"\n        [passwordStrengthStrongTitle]=\"\n            _field.passwordStrengthOptions?.strongTitle ? _field.passwordStrengthOptions?.strongTitle : ''\n        \"\n        [passwordStrengthValidation]=\"_field.passwordStrengthOptions?.validation\"\n    />\n</s-input-group>\n", styles: ["s-text-field.ng-dirty.ng-invalid .password-input{border-color:#c13018}s-text-field.ng-dirty.ng-invalid .password-input:hover{border-color:highlight(#c13018)}\n"] }]
         }], propDecorators: { onInput: [{
                 type: Output
             }], onFocus: [{
@@ -1810,7 +1850,7 @@ class RadioButtonFieldComponent {
         this.formControl().reset();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RadioButtonFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus" }, ngImport: i0, template: "@let _field = field();\r\n<s-field-label [field]=\"_field\"></s-field-label>\r\n\r\n@if (_field.verticalAlignment) {\r\n    <div class=\"flex flex-col gap-2\">\r\n        @for (option of _field.options; let i = $index; track i) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"radioButton\"\r\n                [ngTemplateOutletContext]=\"{ option: option, index: i }\"\r\n            >\r\n            </ng-container>\r\n        }\r\n        @if (_field.showClear && _field.required && !_field.required() && !formControl().disabled) {\r\n            <s-button\r\n                [label]=\"_field.clearLabel || 'Clear selection'\"\r\n                (clicked)=\"onClear()\"\r\n                priority=\"link\"\r\n            >\r\n            </s-button>\r\n        }\r\n    </div>\r\n} @else {\r\n    <div class=\"horizontal-radio-buttons-container flex flex-wrap gap-2\">\r\n        @for (option of _field.options; let i = $index; track i) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"radioButton\"\r\n                [ngTemplateOutletContext]=\"{ option: option, index: i }\"\r\n            >\r\n            </ng-container>\r\n        }\r\n    </div>\r\n    @if (_field.showClear && _field.required && !_field.required() && !formControl().disabled) {\r\n        <s-button\r\n            class=\"horizontal-clear-option\"\r\n            [label]=\"_field.clearLabel || 'Clear selection'\"\r\n            (clicked)=\"onClear()\"\r\n            priority=\"link\"\r\n        >\r\n        </s-button>\r\n    }\r\n}\r\n\r\n<ng-template\r\n    #radioButton\r\n    let-option=\"option\"\r\n    let-i=\"index\"\r\n>\r\n    @let inputId = (_field.id || _field.name) + '-' + i;\r\n    <s-radiobutton\r\n        class=\"radio-button-item\"\r\n        [name]=\"_field.name\"\r\n        [value]=\"option.value\"\r\n        [formControl]=\"formControl()\"\r\n        [inputId]=\"inputId\"\r\n        [sTooltip]=\"_field.tooltip\"\r\n        [label]=\"option.label\"\r\n        (focusedInput)=\"onFocus.next($event)\"\r\n        (inputFocusLost)=\"_field.onBlur ? _field.onBlur($event) : null\"\r\n    />\r\n</ng-template>\r\n", styles: ["s-button.horizontal-clear-option button{width:min-content!important}.horizontal-radio-buttons-container{gap:20px 40px;.radio-button-item{margin:0}}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: RadioButtonComponent, selector: "s-radiobutton", inputs: ["buttonDisabled", "label", "name", "value", "inputId"], outputs: ["buttonDisabledChange", "valueChange", "focusedInput", "inputFocusLost"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RadioButtonFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus" }, ngImport: i0, template: "@let _field = field();\r\n<s-field-label [field]=\"_field\"></s-field-label>\r\n\r\n@if (_field.verticalAlignment) {\r\n    <div class=\"flex flex-col gap-2\">\r\n        @for (option of _field.options; let i = $index; track i) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"radioButton\"\r\n                [ngTemplateOutletContext]=\"{ option: option, index: i }\"\r\n            >\r\n            </ng-container>\r\n        }\r\n        @if (_field.showClear && _field.required && !_field.required() && !formControl().disabled) {\r\n            <s-button\r\n                [label]=\"_field.clearLabel || 'Clear selection'\"\r\n                (clicked)=\"onClear()\"\r\n                priority=\"link\"\r\n            >\r\n            </s-button>\r\n        }\r\n    </div>\r\n} @else {\r\n    <div class=\"horizontal-radio-buttons-container flex flex-wrap gap-2\">\r\n        @for (option of _field.options; let i = $index; track i) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"radioButton\"\r\n                [ngTemplateOutletContext]=\"{ option: option, index: i }\"\r\n            >\r\n            </ng-container>\r\n        }\r\n    </div>\r\n    @if (_field.showClear && _field.required && !_field.required() && !formControl().disabled) {\r\n        <s-button\r\n            class=\"horizontal-clear-option\"\r\n            [label]=\"_field.clearLabel || 'Clear selection'\"\r\n            (clicked)=\"onClear()\"\r\n            priority=\"link\"\r\n        >\r\n        </s-button>\r\n    }\r\n}\r\n\r\n<ng-template\r\n    #radioButton\r\n    let-option=\"option\"\r\n    let-i=\"index\"\r\n>\r\n    @let inputId = (_field.id || _field.name) + '-' + i;\r\n    <s-radiobutton\r\n        class=\"radio-button-item\"\r\n        [name]=\"_field.name\"\r\n        [value]=\"option.value\"\r\n        [formControl]=\"formControl()\"\r\n        [inputId]=\"inputId\"\r\n        [sTooltip]=\"_field.tooltip\"\r\n        [label]=\"option.label\"\r\n        (focusedInput)=\"onFocus.next($event)\"\r\n        (inputFocusLost)=\"_field.onBlur ? _field.onBlur($event) : null\"\r\n    />\r\n</ng-template>\r\n", styles: ["s-button.horizontal-clear-option button{width:min-content!important}.horizontal-radio-buttons-container{gap:20px 40px;.radio-button-item{margin:0}}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked", "tieredMenuOpened", "tieredMenuClosed"] }, { kind: "component", type: RadioButtonComponent, selector: "s-radiobutton", inputs: ["buttonDisabled", "label", "name", "value", "inputId"], outputs: ["buttonDisabledChange", "valueChange", "focusedInput", "inputFocusLost"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonFieldComponent, decorators: [{
             type: Component,
@@ -1991,6 +2031,7 @@ class TextFieldComponent {
     field = input.required();
     formControl = input.required();
     fieldUtils = inject(FormFieldUtilsService);
+    toAddon = createAddonResolver(this.fieldUtils, () => this.formControl().disabled);
     onInput = new EventEmitter();
     onFocus = new EventEmitter();
     onComplete = new EventEmitter();
@@ -2026,7 +2067,7 @@ class TextFieldComponent {
         return this.inputRef?.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TextFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onInput: "onInput", onFocus: "onFocus", onComplete: "onComplete" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let _field = field();\n@let isFormDisabled = formControl().disabled;\n\n@if (inputElement) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputElement\"\n    />\n}\n\n@if (_field.mask) {\n    <input\n        #inputRef\n        sInputText\n        class=\"input-text mousetrap\"\n        [sInputMask]=\"fieldUtils.getFieldPropertyMask(_field.mask)\"\n        [characterPattern]=\"fieldUtils.getFieldProperty(_field.characterPattern ?? '[A-Za-z]')\"\n        [unmask]=\"fieldUtils.getFieldProperty(_field.unmask ?? false)\"\n        slotChar=\"_\"\n        [type]=\"_field.inputType || 'text'\"\n        [id]=\"_field.id || _field.name\"\n        [name]=\"_field.name\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [showDelay]=\"500\"\n        [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n        [readOnly]=\"_field.readonly ? _field.readonly() : false\"\n        [formControl]=\"formControl()\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (maskComplete)=\"onComplete.next($event)\"\n        (input)=\"onInput.next($event)\"\n    />\n} @else {\n    <div class=\"text-field\">\n        @if (_field.leftAddon) {\n            <div class=\"button-left\">\n                <ng-container *ngTemplateOutlet=\"addonRender; context: { button: _field.leftAddon }\"></ng-container>\n            </div>\n        }\n\n        <ng-container *ngTemplateOutlet=\"_field.keyFilter ? inputKeyFilter : input\"></ng-container>\n\n        @if (_field.rightAddon) {\n            <div class=\"button-right\">\n                <ng-container *ngTemplateOutlet=\"addonRender; context: { button: _field.rightAddon }\"></ng-container>\n            </div>\n        }\n    </div>\n}\n<ng-template #input>\n    <input\n        #inputRef\n        [type]=\"_field.inputType || 'text'\"\n        [id]=\"_field.id || _field.name\"\n        [name]=\"_field.name\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        [showDelay]=\"500\"\n        [maxLength]=\"_field.maxLength ?? 9999999\"\n        sInputText\n        class=\"input-text\"\n        [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (input)=\"onInput.next($event)\"\n        [formControl]=\"formControl()\"\n        [ngStyle]=\"_field.style\"\n        [readOnly]=\"_field.readonly ? _field.readonly() : false\"\n    />\n</ng-template>\n<ng-template #inputKeyFilter>\n    <input\n        #inputText\n        [type]=\"_field.inputType || 'text'\"\n        [id]=\"_field.id || _field.name\"\n        [name]=\"_field.name\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        [showDelay]=\"500\"\n        [maxLength]=\"_field.maxLength ?? 9999999\"\n        sInputText\n        [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n        class=\"input-text\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (input)=\"onInput.next($event)\"\n        [pKeyFilter]=\"_field.keyFilter\"\n        [formControl]=\"formControl()\"\n        [ngStyle]=\"_field.style\"\n        [readOnly]=\"_field.readonly ? _field.readonly() : false\"\n    />\n</ng-template>\n\n<ng-template\n    #addonRender\n    let-button=\"button\"\n>\n    <s-button\n        [label]=\"button.label\"\n        [priority]=\"button.priority ?? 'default'\"\n        [iconClass]=\"button.icon\"\n        [disabled]=\"fieldUtils.fieldPropertyIsDisabled(button) || isFormDisabled\"\n        [auxiliary]=\"false\"\n        (clicked)=\"button.callback?.()\"\n    />\n</ng-template>\n", styles: [".text-field{display:flex;width:100%}.text-field .input-text{width:auto;flex-grow:1}.text-field:has(.button-left) .input-text{border-top-left-radius:0;border-bottom-left-radius:0}.text-field:has(.button-left) s-button,.text-field:has(.button-left) .button-left button.s-button-with-text{min-width:40px!important}.text-field:has(.button-left) .button-left button{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.text-field:has(input:focus-visible) .button-left button{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}.text-field:has(input.ng-invalid.ng-dirty) .button-left button{border-color:#c13018!important}.text-field:has(.button-left button:focus) .input-text{border-color:#428bca!important}.text-field:has(.button-left button:focus) .button-right button{border-color:#428bca!important}.text-field:has(.button-right) .input-text{border-top-right-radius:0;border-bottom-right-radius:0}.text-field:has(.button-right) s-button,.text-field:has(.button-right) .button-right button.s-button-with-text{min-width:40px!important}.text-field:has(.button-right) .button-right button{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.text-field:has(input:focus-visible) .button-right button{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}.text-field:has(input.ng-invalid.ng-dirty) .button-right button{border-color:#c13018!important}.text-field:has(.button-right button:focus) .input-text{border-color:#428bca!important}.text-field:has(.button-right button:focus) .button-left button{border-color:#428bca!important}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "directive", type: InputMaskDirective, selector: "input[sInputMask]", inputs: ["sInputMask", "slotChar", "unmask", "characterPattern", "autoClear"], outputs: ["maskComplete"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "directive", type: i3$2.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputTextDirective, selector: "input[sInputText]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TextFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onInput: "onInput", onFocus: "onFocus", onComplete: "onComplete" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let _field = field();\n\n@if (inputElement) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputElement\"\n    />\n}\n\n<s-input-group\n    [leftAddon]=\"toAddon(_field.leftAddon)\"\n    [rightAddon]=\"toAddon(_field.rightAddon)\"\n>\n    @if (_field.mask) {\n        <input\n            #inputRef\n            sInputText\n            class=\"input-text mousetrap\"\n            [sInputMask]=\"fieldUtils.getFieldPropertyMask(_field.mask)\"\n            [characterPattern]=\"fieldUtils.getFieldProperty(_field.characterPattern ?? '[A-Za-z]')\"\n            [unmask]=\"fieldUtils.getFieldProperty(_field.unmask ?? false)\"\n            slotChar=\"_\"\n            [type]=\"_field.inputType || 'text'\"\n            [id]=\"_field.id || _field.name\"\n            [name]=\"_field.name\"\n            [placeholder]=\"_field.placeholder ?? ''\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [showDelay]=\"500\"\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            [readOnly]=\"_field.readonly ? _field.readonly() : false\"\n            [formControl]=\"formControl()\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            (maskComplete)=\"onComplete.next($event)\"\n            (input)=\"onInput.next($event)\"\n        />\n    } @else if (_field.keyFilter) {\n        <input\n            #inputRef\n            [type]=\"_field.inputType || 'text'\"\n            [id]=\"_field.id || _field.name\"\n            [name]=\"_field.name\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [placeholder]=\"_field.placeholder ?? ''\"\n            [showDelay]=\"500\"\n            [maxLength]=\"_field.maxLength ?? 9999999\"\n            sInputText\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            class=\"input-text\"\n            [ngClass]=\"'mousetrap'\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            (input)=\"onInput.next($event)\"\n            [pKeyFilter]=\"_field.keyFilter\"\n            [formControl]=\"formControl()\"\n            [ngStyle]=\"_field.style\"\n            [readOnly]=\"_field.readonly ? _field.readonly() : false\"\n        />\n    } @else {\n        <input\n            #inputRef\n            [type]=\"_field.inputType || 'text'\"\n            [id]=\"_field.id || _field.name\"\n            [name]=\"_field.name\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [placeholder]=\"_field.placeholder ?? ''\"\n            [showDelay]=\"500\"\n            [maxLength]=\"_field.maxLength ?? 9999999\"\n            sInputText\n            class=\"input-text\"\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            [ngClass]=\"'mousetrap'\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            (input)=\"onInput.next($event)\"\n            [formControl]=\"formControl()\"\n            [ngStyle]=\"_field.style\"\n            [readOnly]=\"_field.readonly ? _field.readonly() : false\"\n        />\n    }\n</s-input-group>\n", dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "directive", type: InputMaskDirective, selector: "input[sInputMask]", inputs: ["sInputMask", "slotChar", "unmask", "characterPattern", "autoClear"], outputs: ["maskComplete"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "directive", type: i3$2.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InputTextDirective, selector: "input[sInputText]" }, { kind: "component", type: InputGroupComponent, selector: "s-input-group", inputs: ["leftAddon", "rightAddon"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
@@ -2034,14 +2075,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FieldLabelComponent,
                         InputMaskDirective,
                         TooltipModule,
-                        ButtonComponent,
                         ReactiveFormsModule,
                         NgClass,
                         KeyFilterModule,
                         NgStyle,
-                        NgTemplateOutlet,
                         InputTextDirective,
-                    ], template: "@let _field = field();\n@let isFormDisabled = formControl().disabled;\n\n@if (inputElement) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputElement\"\n    />\n}\n\n@if (_field.mask) {\n    <input\n        #inputRef\n        sInputText\n        class=\"input-text mousetrap\"\n        [sInputMask]=\"fieldUtils.getFieldPropertyMask(_field.mask)\"\n        [characterPattern]=\"fieldUtils.getFieldProperty(_field.characterPattern ?? '[A-Za-z]')\"\n        [unmask]=\"fieldUtils.getFieldProperty(_field.unmask ?? false)\"\n        slotChar=\"_\"\n        [type]=\"_field.inputType || 'text'\"\n        [id]=\"_field.id || _field.name\"\n        [name]=\"_field.name\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [showDelay]=\"500\"\n        [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n        [readOnly]=\"_field.readonly ? _field.readonly() : false\"\n        [formControl]=\"formControl()\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (maskComplete)=\"onComplete.next($event)\"\n        (input)=\"onInput.next($event)\"\n    />\n} @else {\n    <div class=\"text-field\">\n        @if (_field.leftAddon) {\n            <div class=\"button-left\">\n                <ng-container *ngTemplateOutlet=\"addonRender; context: { button: _field.leftAddon }\"></ng-container>\n            </div>\n        }\n\n        <ng-container *ngTemplateOutlet=\"_field.keyFilter ? inputKeyFilter : input\"></ng-container>\n\n        @if (_field.rightAddon) {\n            <div class=\"button-right\">\n                <ng-container *ngTemplateOutlet=\"addonRender; context: { button: _field.rightAddon }\"></ng-container>\n            </div>\n        }\n    </div>\n}\n<ng-template #input>\n    <input\n        #inputRef\n        [type]=\"_field.inputType || 'text'\"\n        [id]=\"_field.id || _field.name\"\n        [name]=\"_field.name\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        [showDelay]=\"500\"\n        [maxLength]=\"_field.maxLength ?? 9999999\"\n        sInputText\n        class=\"input-text\"\n        [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (input)=\"onInput.next($event)\"\n        [formControl]=\"formControl()\"\n        [ngStyle]=\"_field.style\"\n        [readOnly]=\"_field.readonly ? _field.readonly() : false\"\n    />\n</ng-template>\n<ng-template #inputKeyFilter>\n    <input\n        #inputText\n        [type]=\"_field.inputType || 'text'\"\n        [id]=\"_field.id || _field.name\"\n        [name]=\"_field.name\"\n        [sTooltip]=\"_field.tooltip\"\n        tooltipPosition=\"top\"\n        [placeholder]=\"_field.placeholder ?? ''\"\n        [showDelay]=\"500\"\n        [maxLength]=\"_field.maxLength ?? 9999999\"\n        sInputText\n        [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n        class=\"input-text\"\n        [ngClass]=\"'mousetrap'\"\n        (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n        (focus)=\"onFocus.next($event)\"\n        (input)=\"onInput.next($event)\"\n        [pKeyFilter]=\"_field.keyFilter\"\n        [formControl]=\"formControl()\"\n        [ngStyle]=\"_field.style\"\n        [readOnly]=\"_field.readonly ? _field.readonly() : false\"\n    />\n</ng-template>\n\n<ng-template\n    #addonRender\n    let-button=\"button\"\n>\n    <s-button\n        [label]=\"button.label\"\n        [priority]=\"button.priority ?? 'default'\"\n        [iconClass]=\"button.icon\"\n        [disabled]=\"fieldUtils.fieldPropertyIsDisabled(button) || isFormDisabled\"\n        [auxiliary]=\"false\"\n        (clicked)=\"button.callback?.()\"\n    />\n</ng-template>\n", styles: [".text-field{display:flex;width:100%}.text-field .input-text{width:auto;flex-grow:1}.text-field:has(.button-left) .input-text{border-top-left-radius:0;border-bottom-left-radius:0}.text-field:has(.button-left) s-button,.text-field:has(.button-left) .button-left button.s-button-with-text{min-width:40px!important}.text-field:has(.button-left) .button-left button{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.text-field:has(input:focus-visible) .button-left button{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}.text-field:has(input.ng-invalid.ng-dirty) .button-left button{border-color:#c13018!important}.text-field:has(.button-left button:focus) .input-text{border-color:#428bca!important}.text-field:has(.button-left button:focus) .button-right button{border-color:#428bca!important}.text-field:has(.button-right) .input-text{border-top-right-radius:0;border-bottom-right-radius:0}.text-field:has(.button-right) s-button,.text-field:has(.button-right) .button-right button.s-button-with-text{min-width:40px!important}.text-field:has(.button-right) .button-right button{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.text-field:has(input:focus-visible) .button-right button{outline:2px solid var(--s-focus-ring-color)!important;outline-offset:-2px}.text-field:has(input.ng-invalid.ng-dirty) .button-right button{border-color:#c13018!important}.text-field:has(.button-right button:focus) .input-text{border-color:#428bca!important}.text-field:has(.button-right button:focus) .button-left button{border-color:#428bca!important}\n"] }]
+                        InputGroupComponent,
+                    ], template: "@let _field = field();\n\n@if (inputElement) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputElement\"\n    />\n}\n\n<s-input-group\n    [leftAddon]=\"toAddon(_field.leftAddon)\"\n    [rightAddon]=\"toAddon(_field.rightAddon)\"\n>\n    @if (_field.mask) {\n        <input\n            #inputRef\n            sInputText\n            class=\"input-text mousetrap\"\n            [sInputMask]=\"fieldUtils.getFieldPropertyMask(_field.mask)\"\n            [characterPattern]=\"fieldUtils.getFieldProperty(_field.characterPattern ?? '[A-Za-z]')\"\n            [unmask]=\"fieldUtils.getFieldProperty(_field.unmask ?? false)\"\n            slotChar=\"_\"\n            [type]=\"_field.inputType || 'text'\"\n            [id]=\"_field.id || _field.name\"\n            [name]=\"_field.name\"\n            [placeholder]=\"_field.placeholder ?? ''\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [showDelay]=\"500\"\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            [readOnly]=\"_field.readonly ? _field.readonly() : false\"\n            [formControl]=\"formControl()\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            (maskComplete)=\"onComplete.next($event)\"\n            (input)=\"onInput.next($event)\"\n        />\n    } @else if (_field.keyFilter) {\n        <input\n            #inputRef\n            [type]=\"_field.inputType || 'text'\"\n            [id]=\"_field.id || _field.name\"\n            [name]=\"_field.name\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [placeholder]=\"_field.placeholder ?? ''\"\n            [showDelay]=\"500\"\n            [maxLength]=\"_field.maxLength ?? 9999999\"\n            sInputText\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            class=\"input-text\"\n            [ngClass]=\"'mousetrap'\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            (input)=\"onInput.next($event)\"\n            [pKeyFilter]=\"_field.keyFilter\"\n            [formControl]=\"formControl()\"\n            [ngStyle]=\"_field.style\"\n            [readOnly]=\"_field.readonly ? _field.readonly() : false\"\n        />\n    } @else {\n        <input\n            #inputRef\n            [type]=\"_field.inputType || 'text'\"\n            [id]=\"_field.id || _field.name\"\n            [name]=\"_field.name\"\n            [sTooltip]=\"_field.tooltip\"\n            tooltipPosition=\"top\"\n            [placeholder]=\"_field.placeholder ?? ''\"\n            [showDelay]=\"500\"\n            [maxLength]=\"_field.maxLength ?? 9999999\"\n            sInputText\n            class=\"input-text\"\n            [autocomplete]=\"_field.browserAutocomplete ? 'on' : 'off'\"\n            [ngClass]=\"'mousetrap'\"\n            (blur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            (focus)=\"onFocus.next($event)\"\n            (input)=\"onInput.next($event)\"\n            [formControl]=\"formControl()\"\n            [ngStyle]=\"_field.style\"\n            [readOnly]=\"_field.readonly ? _field.readonly() : false\"\n        />\n    }\n</s-input-group>\n" }]
         }], propDecorators: { onInput: [{
                 type: Output
             }], onFocus: [{