@seniorsistemas/angular-components 17.25.10 → 17.26.0-bugfix-sds-262-3164df87

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

@@ -6602,7 +6602,6 @@
 
     var Field = /** @class */ (function () {
         function Field(config) {
-            var _this = this;
             var _a, _b, _c, _d, _e, _f, _g;
             /**
              * In some cases DynamicFormField use a custom field that alredy exists, this happen in CustomFields when convert 'Integer, Double & Money' types to 'Custom' this create two labels. activate this property hide the parent label.
@@ -6628,7 +6627,6 @@
             this.errorMessages = config.errorMessages;
             this.bottomTemplate = config.bottomTemplate;
             this.footer = config.footer;
-            this.gridClass = Object.keys(this.size).map(function (key) { return "ui-" + key + "-" + _this.size[key]; });
             this.defaultValue = config.defaultValue;
             this.representedBy = config.representedBy;
             this.CustomFieldClass = config.CustomFieldClass;
@@ -6637,6 +6635,14 @@
             this.useInfoSignFocusedInputRef = (_f = config.useInfoSignFocusedInputRef) !== null && _f !== void 0 ? _f : true;
             this.ignoreLabel = (_g = config.ignoreLabel) !== null && _g !== void 0 ? _g : false;
         }
+        Object.defineProperty(Field.prototype, "gridClass", {
+            get: function () {
+                var _this = this;
+                return Object.keys(this.size).map(function (key) { return "ui-" + key + "-" + _this.size[key]; });
+            },
+            enumerable: true,
+            configurable: true
+        });
         return Field;
     }());
 
@@ -7169,12 +7175,14 @@
     var TextAreaField = /** @class */ (function (_super) {
         __extends(TextAreaField, _super);
         function TextAreaField(config) {
+            var _a;
             var _this = _super.call(this, config) || this;
             _this.cols = config.cols;
             _this.rows = config.rows;
             _this.keyFilter = config.keyFilter;
             _this.style = config.style;
             _this.readonly = config.readonly;
+            _this.speechRecognition = (_a = config.speechRecognition) !== null && _a !== void 0 ? _a : false;
             return _this;
         }
         return TextAreaField;
@@ -7895,7 +7903,7 @@
             core.Injectable(),
             core.Component({
                 selector: "s-lookup",
-                template: "<div [ngClass]=\"{ inputgroup: showSearch }\">\n    <p-autoComplete\n        #autocomplete\n        [(ngModel)]=\"value\"\n        [disabled]=\"disabled\"\n        [dataKey]=\"dataKey\"\n        [multiple]=\"multiple\"\n        [inputId]=\"id + '-autocomplete'\"\n        [forceSelection]=\"autocompleteForceSelection\"\n        [suggestions]=\"getLookupSuggestions()\"\n        (completeMethod)=\"lazyLoadLookup($event)\"\n        (onSelect)=\"onSelect.next($event)\"\n        (onBlur)=\"onBlur.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onUnselect)=\"onUnselect.next($event)\"\n        (onClear)=\"onClear.next($event)\"\n        (onKeyUp)=\"onKeyUp.next($event)\"\n        [field]=\"lookupDisplayField\"\n        [emptyMessage]=\"lookupEmptyMessage\"\n        [dropdown]=\"!showSearch\"\n        [appendTo]=\"lookupAppendTo\"\n        [placeholder]=\"placeholder || ' '\"\n        [autoHighlight]=\"true\"\n        inputStyleClass=\"mousetrap\">\n        <ng-template let-item pTemplate=\"selectedItem\">\n            <span\n                class=\"ui-autocomplete-token-label ng-tns-c65-43 ng-star-inserted\"\n                [sTooltip]=\"lookupDisplayFieldTooltip ? item[lookupDisplayField] : null\"\n                tooltipPosition=\"top\">\n                {{item[lookupDisplayField]}}\n            </span>\n        </ng-template>\n    </p-autoComplete>\n    <button\n        *ngIf=\"showSearch\"\n        pButton\n        type=\"button\"\n        icon=\"fa fa-search\"\n        class=\"button-addon\"\n        [disabled]=\"disabled\"\n        (click)=\"showDialog()\">\n    </button>\n</div>\n<p-dialog\n    appendTo=\"body\"\n    styleClass=\"s-lookup-modal\"\n    [header]=\"searchTitle || 'platform.angular_components.advanced_search' | translate\"\n    [(visible)]=\"dialogVisible\"\n    [modal]=\"true\"\n    (onHide)=\"hideDialog()\"\n    [blockScroll]=\"true\"\n    [focusOnShow]=\"true\"\n    [draggable]=\"false\"\n    [resizable]=\"false\"\n    #dialog>\n    <div\n        *ngIf=\"dialogVisible\"\n        class=\"s-lookup-modal-container\">\n        <div\n            *ngIf=\"searchFields && searchFields.length\"\n            class=\"filter\"\n            [@collapseContent]=\"collapsed\n                ? { value: 'hidden', params: { transitionParams: transitionOptions } }\n                : { value: 'visible', params: { transitionParams: transitionOptions } }\"\n            (@collapseContent.done)=\"onToggleDone()\">\n            <form\n                [formGroup]=\"formGroupDialog\"\n                novalidate\n                autocomplete=\"off\">\n                <div\n                    *ngIf=\"!collapsed\"\n                    class=\"form-content\"\n                    [@childCollapseContent]=\"collapsed\n                        ? { value: ':leave', params: { transitionParams: transitionOptions } }\n                        : { value: ':enter', params: { transitionParams: transitionOptions } }\">\n                    <div class=\"filter-title sds-section-title\">\n                        {{ filterTitle || \"platform.angular_components.filters\" | translate }}\n                    </div>\n                    <div class=\"form-fields\">\n                        <s-dynamic-form\n                            [fields]=\"searchFields\"\n                            [form]=\"formGroupDialog\">\n                        </s-dynamic-form>\n                    </div>\n                    <div class=\"ui-g\">\n                        <div class=\"ui-g-12\">\n                            <s-button\n                                [id]=\"id + '-filter-button'\"\n                                type=\"submit\"\n                                [label]=\"filterLabel || 'platform.angular_components.filter' | translate\"\n                                (onClick)=\"search()\"\n                                sTooltip=\"(ALT + SHIFT + F)\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\">\n                            </s-button>\n                            <s-button\n                                [id]=\"id + '-clear-button'\"\n                                type=\"button\"\n                                [label]=\"clearLabel || 'platform.angular_components.clear' | translate\"\n                                (onClick)=\"clear()\"\n                                priority=\"link\"\n                                sTooltip=\"(ALT + SHIFT + L)\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\">\n                            </s-button>\n                        </div>\n                    </div>\n                </div>\n            </form>\n        </div>\n        <div\n            *ngIf=\"searchFields && searchFields.length\"\n            class=\"filter-toggle\">\n            <div class=\"filter-toggle--start-border-mask\"></div>\n            <button\n                [id]=\"id + '-filter-toggle-button'\"\n                type=\"button\"\n                (click)=\"filterToggle()\">\n                <span\n                    class=\"fa\"\n                    [ngClass]=\"{'fa-chevron-left': !collapsed, 'fa-chevron-right': collapsed}\"\n                    aria-hidden=\"true\">\n                </span>\n            </button>\n            <div class=\"filter-toggle--end-border-mask\"></div>\n        </div>\n        <div\n            class=\"content\"\n            [ngClass]=\"{'empty-content': !searchTotalRecords && !loading}\">\n            <s-empty-state\n                [id]=\"id + '-empty-state'\"\n                *ngIf=\"!searchTotalRecords && !loading\"\n                [title]=\"searchEmptyTitle || 'platform.angular_components.no_records_found' | translate\"\n                [description]=\"searchEmptyDescription\"\n                iconClass=\"fa fa-search\">\n            </s-empty-state>\n\n            <div>\n                <s-button\n                    *ngIf=\"showAddOption\"\n                    priority=\"default\"\n                    [label]=\"'platform.angular_components.add' | translate\"\n                    (onClick)=\"onAdd.emit()\">\n                </s-button>\n                <s-button\n                    *ngIf=\"showEditOption\"\n                    priority=\"default\"\n                    [label]=\"'platform.angular_components.edit' | translate\"\n                    [disabled]=\"selected.length !== 1\"\n                    (onClick)=\"onEdit.emit(this.selected[0])\">\n                </s-button>\n                <s-button\n                    *ngIf=\"showRemoveOption\"\n                    priority=\"default\"\n                    [label]=\"'platform.angular_components.remove' | translate\"\n                    [disabled]=\"!selected.length\"\n                    (onClick)=\"onRemove.emit(this.selected)\">\n                </s-button>\n            </div>\n\n            <p-table\n                [dataKey]=\"dataKey\"\n                [value]=\"getGridData()\"\n                [columns]=\"searchGridFields\"\n                [lazy]=\"true\"\n                [scrollable]=\"true\"\n                [paginator]=\"true\"\n                sortMode=\"multiple\"\n                [totalRecords]=\"searchTotalRecords\"\n                [rows]=\"10\"\n                [selection]=\"selected\"\n                (onLazyLoad)=\"lazyLoadGrid($event)\"\n                *sLoadingState=\"{ loading: loading, indicator: 'logo' }\"\n                [multiSortMeta]=\"multiSortMeta\"\n                [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n                [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n                (selectionChange)=\"onSelectionChange($event)\">\n                <ng-template pTemplate=\"colgroup\" let-columns>\n                    <colgroup>\n                        <col\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\" />\n                        <col\n                            *ngFor=\"let col of columns\"\n                            [style.width]=\"col.width\" />\n                    </colgroup>\n                </ng-template>\n                <ng-template pTemplate=\"header\" let-columns>\n                    <tr>\n                        <th\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\">\n                            <s-table-header-checkbox\n                                [useAllObject]=\"lookupRowProps ? false : true\"\n                                [rowProps]=\"lookupRowProps\">\n                            </s-table-header-checkbox>\n                        </th>\n                        <th\n                            [style.width]=\"col.width\"\n                            *ngFor=\"let col of columns\"\n                            [pSortableColumn]=\"col.sortableColumnName ? col.sortableColumnName : col.name\"\n                            [pSortableColumnDisabled]=\"sortableColumnsDisabled?.includes(col.name)\">\n                            <div class=\"senior-header\">\n                                <span class=\"senior-header-title\">{{ col.label }}</span>\n                                <p-sortIcon\n                                    [field]=\"col.name\"\n                                    *ngIf=\"!sortableColumnsDisabled?.includes(col.name)\">\n                                </p-sortIcon>\n                            </div>\n                        </th>\n                    </tr>\n                </ng-template>\n                <ng-template\n                    pTemplate=\"body\"\n                    let-rowData\n                    let-columns\n                    let-rowIndex=\"rowIndex\">\n                    <tr\n                        sNavigation\n                        [pSelectableRow]=\"rowData\"\n                        [pSelectableRowIndex]=\"rowIndex\"\n                        sDoubleClick (onDoubleClick)=\"onTableRowDoubleClick(rowData)\">\n                        <td\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\"\n                            tabindex=\"0\">\n                            <p-tableCheckbox\n                                [value]=\"rowData\"\n                                [pSelectableRow]=\"rowData\">\n                            </p-tableCheckbox>\n                        </td>\n                        <td\n                            [style.width]=\"col['width']\"\n                            *ngFor=\"let col of searchGridFields\"\n                            [ngSwitch]=\"col.type\"\n                            tabindex=\"0\">\n                            <ng-container *ngSwitchCase=\"'Boolean'\">\n                                <ng-container *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getBooleanLabel(rowData, col.name, col.optionsLabel) }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Date'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate: col.calendarLocaleOptions?.dateFormat || \"L\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'DateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'LocalDateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Time'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedTime: col.calendarLocaleOptions?.dateFormat || \"LTS\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Integer'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getIntegerMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Double'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getDoubleMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Money'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getMoneyMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Number'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getNumberMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Enum'\">\n                                <ng-container *ngIf=\"getLabelForValue(getFieldValue(rowData, col.name), col.options); else emptyTemplate\">\n                                    <ng-container *ngIf=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options); then withBadge; else withoutBadge\"></ng-container>\n                                    <ng-template #withBadge>\n                                        <s-badge\n                                            [text]=\"getLabelForValue(getFieldValue(rowData, col.name), col.options)\"\n                                            [color]=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options).color\"\n                                            [type]=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options).type\"\n                                            [iconClass]=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options).iconClass\"\n                                            [iconPosition]=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options).iconPosition\">\n                                        </s-badge>\n                                    </ng-template>\n                                    <ng-template #withoutBadge>\n                                        <span> {{ getLabelForValue(getFieldValue(rowData, col.name), col.options) }} </span>\n                                    </ng-template>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                <ng-container *ngIf=\"col.mask && col.mask()\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name))\">\n                                        <span>{{ getFieldValue(rowData, col.name) | sMaskFormatter: col.mask() }}</span>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(col.mask && col.mask())\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name)); else emptyTemplate\">\n                                        <span>{{ getFieldValue(rowData, col.name) }}</span>\n                                    </ng-container>\n                                </ng-container>\n                            </ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n                <ng-template pTemplate=\"paginatorright\">\n                    <span [attr.data-hidden]=\"loading\">\n                        {{ printRecordTotalizer() }}\n                    </span>\n                </ng-template>\n            </p-table>\n        </div>\n    </div>\n    <p-footer>\n        <s-button\n            [id]=\"id + '-select-button'\"\n            type=\"button\"\n            [label]=\"selectLabel || 'platform.angular_components.select' | translate\"\n            (onClick)=\"select()\"\n            sTooltip=\"(ALT + SHIFT + S)\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\"\n            [disabled]=\"!selected?.length\">\n        </s-button>\n        <s-button\n            [id]=\"id + '-cancel-button'\"\n            type=\"button\"\n            priority=\"link\"\n            [label]=\"cancelLabel || 'platform.angular_components.cancel' | translate\"\n            (onClick)=\"hideDialog()\"\n            sTooltip=\"(ALT + SHIFT + C)\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\">\n        </s-button>\n    </p-footer>\n</p-dialog>\n<ng-template #emptyTemplate>\n    <span [ngClass]=\"'sds-empty-value'\">\n        {{ emptyFieldLabel || 'platform.angular_components.not_informed' | translate }}\n    </span>\n</ng-template>\n",
+                template: "<div [ngClass]=\"{ inputgroup: showSearch }\">\n    <p-autoComplete\n        #autocomplete\n        [(ngModel)]=\"value\"\n        [disabled]=\"disabled\"\n        [dataKey]=\"dataKey\"\n        [multiple]=\"multiple\"\n        [inputId]=\"id + '-autocomplete'\"\n        [forceSelection]=\"autocompleteForceSelection\"\n        [suggestions]=\"getLookupSuggestions()\"\n        (completeMethod)=\"lazyLoadLookup($event)\"\n        (onSelect)=\"onSelect.next($event)\"\n        (onBlur)=\"onBlur.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onUnselect)=\"onUnselect.next($event)\"\n        (onClear)=\"onClear.next($event)\"\n        (onKeyUp)=\"onKeyUp.next($event)\"\n        [field]=\"lookupDisplayField\"\n        [emptyMessage]=\"lookupEmptyMessage\"\n        [dropdown]=\"!showSearch\"\n        [appendTo]=\"lookupAppendTo\"\n        [placeholder]=\"placeholder || ' '\"\n        [autoHighlight]=\"true\"\n        inputStyleClass=\"mousetrap\">\n        <ng-template let-item pTemplate=\"selectedItem\">\n            <span\n                class=\"ui-autocomplete-token-label ng-tns-c65-43 ng-star-inserted\"\n                [sTooltip]=\"lookupDisplayFieldTooltip ? item[lookupDisplayField] : null\"\n                tooltipPosition=\"top\">\n                {{item[lookupDisplayField]}}\n            </span>\n        </ng-template>\n    </p-autoComplete>\n    <button\n        *ngIf=\"showSearch\"\n        pButton\n        type=\"button\"\n        icon=\"fa fa-search\"\n        class=\"button-addon\"\n        [disabled]=\"disabled\"\n        (click)=\"showDialog()\">\n    </button>\n</div>\n<p-dialog\n    appendTo=\"body\"\n    styleClass=\"s-lookup-modal\"\n    [header]=\"searchTitle || 'platform.angular_components.advanced_search' | translate\"\n    [(visible)]=\"dialogVisible\"\n    [modal]=\"true\"\n    (onHide)=\"hideDialog()\"\n    [blockScroll]=\"true\"\n    [focusOnShow]=\"true\"\n    [draggable]=\"false\"\n    [resizable]=\"false\"\n    #dialog>\n    <div\n        *ngIf=\"dialogVisible\"\n        class=\"s-lookup-modal-container\">\n        <div\n            *ngIf=\"searchFields && searchFields.length\"\n            class=\"filter\"\n            [@collapseContent]=\"collapsed\n                ? { value: 'hidden', params: { transitionParams: transitionOptions } }\n                : { value: 'visible', params: { transitionParams: transitionOptions } }\"\n            (@collapseContent.done)=\"onToggleDone()\">\n            <form\n                [formGroup]=\"formGroupDialog\"\n                novalidate\n                autocomplete=\"off\">\n                <div\n                    *ngIf=\"!collapsed\"\n                    class=\"form-content\"\n                    [@childCollapseContent]=\"collapsed\n                        ? { value: ':leave', params: { transitionParams: transitionOptions } }\n                        : { value: ':enter', params: { transitionParams: transitionOptions } }\">\n                    <div class=\"filter-title sds-section-title\">\n                        {{ filterTitle || \"platform.angular_components.filters\" | translate }}\n                    </div>\n                    <div class=\"form-fields\">\n                        <s-dynamic-form\n                            [fields]=\"searchFields\"\n                            [form]=\"formGroupDialog\">\n                        </s-dynamic-form>\n                    </div>\n                    <div class=\"ui-g\">\n                        <div class=\"ui-g-12 no-button-margin\">\n                            <s-button\n                                [id]=\"id + '-filter-button'\"\n                                type=\"submit\"\n                                [label]=\"filterLabel || 'platform.angular_components.filter' | translate\"\n                                (onClick)=\"search()\"\n                                sTooltip=\"(ALT + SHIFT + F)\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\">\n                            </s-button>\n                            <s-button\n                                [id]=\"id + '-clear-button'\"\n                                type=\"button\"\n                                [label]=\"clearLabel || 'platform.angular_components.clear' | translate\"\n                                (onClick)=\"clear()\"\n                                priority=\"link\"\n                                sTooltip=\"(ALT + SHIFT + L)\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\">\n                            </s-button>\n                        </div>\n                    </div>\n                </div>\n            </form>\n        </div>\n        <div\n            *ngIf=\"searchFields && searchFields.length\"\n            class=\"filter-toggle\">\n            <button\n                [id]=\"id + '-filter-toggle-button'\"\n                type=\"button\"\n                (click)=\"filterToggle()\">\n                <span\n                    class=\"fa\"\n                    [ngClass]=\"{'fa-chevron-left': !collapsed, 'fa-chevron-right': collapsed}\"\n                    aria-hidden=\"true\">\n                </span>\n            </button>\n        </div>\n        <div\n            class=\"content\"\n            [ngClass]=\"{'empty-content': !searchTotalRecords && !loading}\">\n            <s-empty-state\n                [id]=\"id + '-empty-state'\"\n                *ngIf=\"!searchTotalRecords && !loading\"\n                [title]=\"searchEmptyTitle || 'platform.angular_components.no_records_found' | translate\"\n                [description]=\"searchEmptyDescription\"\n                iconClass=\"fa fa-search\">\n            </s-empty-state>\n\n            <div class=\"content-child\">\n                <p-table\n                    [dataKey]=\"dataKey\"\n                    [value]=\"getGridData()\"\n                    [columns]=\"searchGridFields\"\n                    [lazy]=\"true\"\n                    [scrollable]=\"true\"\n                    [paginator]=\"true\"\n                    sortMode=\"multiple\"\n                    [totalRecords]=\"searchTotalRecords\"\n                    [rows]=\"10\"\n                    [selection]=\"selected\"\n                    (onLazyLoad)=\"lazyLoadGrid($event)\"\n                    *sLoadingState=\"{ loading: loading, indicator: 'logo' }\"\n                    [multiSortMeta]=\"multiSortMeta\"\n                    [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n                    [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n                    (selectionChange)=\"onSelectionChange($event)\">\n                        <ng-template pTemplate=\"caption\">\n                            <div class=\"buttons-container no-button-margin\">\n                                <s-button\n                                    *ngIf=\"showAddOption\"\n                                    priority=\"default\"\n                                    [label]=\"'platform.angular_components.add' | translate\"\n                                    (onClick)=\"onAdd.emit()\">\n                                </s-button>\n                                <s-button\n                                    *ngIf=\"showEditOption\"\n                                    priority=\"default\"\n                                    [label]=\"'platform.angular_components.edit' | translate\"\n                                    [disabled]=\"selected.length !== 1\"\n                                    (onClick)=\"onEdit.emit(this.selected[0])\">\n                                </s-button>\n                                <s-button\n                                    *ngIf=\"showRemoveOption\"\n                                    priority=\"default\"\n                                    [label]=\"'platform.angular_components.remove' | translate\"\n                                    [disabled]=\"!selected.length\"\n                                    (onClick)=\"onRemove.emit(this.selected)\">\n                                </s-button>\n                            </div>\n                        </ng-template>\n                        <ng-template pTemplate=\"colgroup\" let-columns>\n                            <colgroup>\n                                <col\n                                    *ngIf=\"multiple\"\n                                    style=\"width: 50px\" />\n                                <col\n                                    *ngFor=\"let col of columns\"\n                                    [style.width]=\"col.width\" />\n                            </colgroup>\n                        </ng-template>\n                        <ng-template pTemplate=\"header\" let-columns>\n                            <tr>\n                                <th\n                                    *ngIf=\"multiple\"\n                                    style=\"width: 50px\">\n                                    <s-table-header-checkbox\n                                        [useAllObject]=\"lookupRowProps ? false : true\"\n                                        [rowProps]=\"lookupRowProps\">\n                                    </s-table-header-checkbox>\n                                </th>\n                                <th\n                                    [style.width]=\"col.width\"\n                                    *ngFor=\"let col of columns\"\n                                    [pSortableColumn]=\"col.sortableColumnName ? col.sortableColumnName : col.name\"\n                                    [pSortableColumnDisabled]=\"sortableColumnsDisabled?.includes(col.name)\">\n                                    <div class=\"senior-header\">\n                                        <span class=\"senior-header-title\">{{ col.label }}</span>\n                                        <p-sortIcon\n                                            [field]=\"col.name\"\n                                            *ngIf=\"!sortableColumnsDisabled?.includes(col.name)\">\n                                        </p-sortIcon>\n                                    </div>\n                                </th>\n                            </tr>\n                        </ng-template>\n                        <ng-template\n                            pTemplate=\"body\"\n                            let-rowData\n                            let-columns\n                            let-rowIndex=\"rowIndex\">\n                            <tr\n                                sNavigation\n                                [pSelectableRow]=\"rowData\"\n                                [pSelectableRowIndex]=\"rowIndex\"\n                                sDoubleClick (onDoubleClick)=\"onTableRowDoubleClick(rowData)\">\n                                <td\n                                    *ngIf=\"multiple\"\n                                    style=\"width: 50px\"\n                                    tabindex=\"0\">\n                                    <p-tableCheckbox\n                                        [value]=\"rowData\"\n                                        [pSelectableRow]=\"rowData\">\n                                    </p-tableCheckbox>\n                                </td>\n                                <td\n                                    [style.width]=\"col['width']\"\n                                    *ngFor=\"let col of searchGridFields\"\n                                    [ngSwitch]=\"col.type\"\n                                    tabindex=\"0\">\n                                    <ng-container *ngSwitchCase=\"'Boolean'\">\n                                        <ng-container *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\">\n                                            <span>{{ getBooleanLabel(rowData, col.name, col.optionsLabel) }}</span>\n                                        </ng-container>\n                                    </ng-container>\n                                    <ng-container *ngSwitchCase=\"'Date'\">\n                                        <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                            <span>{{ getFieldValue(rowData, col.name) | localizedDate: col.calendarLocaleOptions?.dateFormat || \"L\" | async }}</span>\n                                        </ng-container>\n                                    </ng-container>\n                                    <ng-container *ngSwitchCase=\"'DateTime'\">\n                                        <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                            <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                        </ng-container>\n                                    </ng-container>\n                                    <ng-container *ngSwitchCase=\"'LocalDateTime'\">\n                                        <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                            <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                        </ng-container>\n                                    </ng-container>\n                                    <ng-container *ngSwitchCase=\"'Time'\">\n                                        <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                            <span>{{ getFieldValue(rowData, col.name) | localizedTime: col.calendarLocaleOptions?.dateFormat || \"LTS\" | async }}</span>\n                                        </ng-container>\n                                    </ng-container>\n                                    <ng-container *ngSwitchCase=\"'Integer'\">\n                                        <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                            <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getIntegerMaskConfig(col) | async }} </span>\n                                        </ng-container>\n                                    </ng-container>\n                                    <ng-container *ngSwitchCase=\"'Double'\">\n                                        <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                            <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getDoubleMaskConfig(col) | async }} </span>\n                                        </ng-container>\n                                    </ng-container>\n                                    <ng-container *ngSwitchCase=\"'Money'\">\n                                        <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                            <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getMoneyMaskConfig(col) | async }} </span>\n                                        </ng-container>\n                                    </ng-container>\n                                    <ng-container *ngSwitchCase=\"'Number'\">\n                                        <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                            <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getNumberMaskConfig(col) | async }} </span>\n                                        </ng-container>\n                                    </ng-container>\n                                    <ng-container *ngSwitchCase=\"'Enum'\">\n                                        <ng-container *ngIf=\"getLabelForValue(getFieldValue(rowData, col.name), col.options); else emptyTemplate\">\n                                            <ng-container *ngIf=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options); then withBadge; else withoutBadge\"></ng-container>\n                                            <ng-template #withBadge>\n                                                <s-badge\n                                                    [text]=\"getLabelForValue(getFieldValue(rowData, col.name), col.options)\"\n                                                    [color]=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options).color\"\n                                                    [type]=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options).type\"\n                                                    [iconClass]=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options).iconClass\"\n                                                    [iconPosition]=\"getBadgeFromValue(getFieldValue(rowData, col.name), col.options).iconPosition\">\n                                                </s-badge>\n                                            </ng-template>\n                                            <ng-template #withoutBadge>\n                                                <span> {{ getLabelForValue(getFieldValue(rowData, col.name), col.options) }} </span>\n                                            </ng-template>\n                                        </ng-container>\n                                    </ng-container>\n                                    <ng-container *ngSwitchDefault>\n                                        <ng-container *ngIf=\"col.mask && col.mask()\">\n                                            <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name))\">\n                                                <span>{{ getFieldValue(rowData, col.name) | sMaskFormatter: col.mask() }}</span>\n                                            </ng-container>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(col.mask && col.mask())\">\n                                            <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name)); else emptyTemplate\">\n                                                <span>{{ getFieldValue(rowData, col.name) }}</span>\n                                            </ng-container>\n                                        </ng-container>\n                                    </ng-container>\n                                </td>\n                            </tr>\n                        </ng-template>\n                        <ng-template pTemplate=\"paginatorright\">\n                            <span [attr.data-hidden]=\"loading\">\n                                {{ printRecordTotalizer() }}\n                            </span>\n                        </ng-template>\n                </p-table>\n            </div>\n\n        </div>\n    </div>\n    <p-footer>\n        <s-button\n            [id]=\"id + '-select-button'\"\n            type=\"button\"\n            [label]=\"selectLabel || 'platform.angular_components.select' | translate\"\n            (onClick)=\"select()\"\n            sTooltip=\"(ALT + SHIFT + S)\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\"\n            [disabled]=\"!selected?.length\">\n        </s-button>\n        <s-button\n            [id]=\"id + '-cancel-button'\"\n            type=\"button\"\n            priority=\"link\"\n            [label]=\"cancelLabel || 'platform.angular_components.cancel' | translate\"\n            (onClick)=\"hideDialog()\"\n            sTooltip=\"(ALT + SHIFT + C)\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\">\n        </s-button>\n    </p-footer>\n</p-dialog>\n<ng-template #emptyTemplate>\n    <span [ngClass]=\"'sds-empty-value'\">\n        {{ emptyFieldLabel || 'platform.angular_components.not_informed' | translate }}\n    </span>\n</ng-template>\n",
                 providers: [
                     {
                         provide: forms.NG_VALUE_ACCESSOR,
@@ -7925,7 +7933,7 @@
                         animations.transition("* <=> *", animations.animate("{{transitionParams}}")),
                     ]),
                 ],
-                styles: ["s-lookup.ng-dirty.ng-invalid .ui-inputtext{border-color:#c13018}s-lookup .ui-inputtext{border-top-right-radius:0;border-bottom-right-radius:0}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-top-left-radius:0;border-bottom-left-radius:0}s-lookup .inputgroup,s-lookup p-autocomplete span.ui-autocomplete-multiple{display:-ms-flexbox;display:flex}s-lookup .inputgroup p-autocomplete{display:inline-block}s-lookup .inputgroup p-autocomplete .ui-autocomplete-input{width:100%}s-lookup .inputgroup p-autocomplete+button:enabled:hover,s-lookup .inputgroup p-autocomplete+button:focus{background-color:#e6e6e6;border-color:#ccc}s-lookup .inputgroup p-autocomplete .ui-widget .ui-inputtext{border-right-width:1px;border-right-style:solid}s-lookup .ui-autocomplete-input-token,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}body .s-lookup-modal.ui-dialog .ui-dialog-content{padding:0;margin-bottom:0;max-height:none}s-lookup .ui-table-scrollable-body{min-width:100%}.s-lookup-modal{height:80%!important;max-width:100%!important;max-height:inherit!important;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column}.s-lookup-modal .ui-dialog-content{height:auto!important;-ms-flex:1;flex:1;overflow:auto}.s-lookup-modal .ui-dialog-footer,.s-lookup-modal .ui-dialog-header{-ms-flex-negative:0;flex-shrink:0;border-radius:0 0 4px 4px}.s-lookup-modal .s-lookup-modal-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%;width:100%}.s-lookup-modal .s-lookup-modal-container .filter{position:relative;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;width:85%;background-color:rgba(229,234,234,.5);height:100%;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:-ms-flexbox;display:flex;-ms-flex-direction:column;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{-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;width:35px;border-radius:0 4px 4px 0}.s-lookup-modal .s-lookup-modal-container .filter-toggle button{-ms-flex-align:center;align-items:center;position:relative;background-color:rgba(229,234,234,.5);height:35px;width:100%;border:1px solid #e5eaea;outline:0;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:focus,.s-lookup-modal .s-lookup-modal-container .filter-toggle button:hover{background-color:rgba(201,211,211,.5);border-color:#c9d3d3}.s-lookup-modal .s-lookup-modal-container .filter-toggle--start-border-mask{height:15px;border-left:1px solid #e5eaea}.s-lookup-modal .s-lookup-modal-container .filter-toggle--end-border-mask{height:calc(100% - 49px);border-left:1px solid #e5eaea}.s-lookup-modal .s-lookup-modal-container .content{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:auto;flex-basis:auto;overflow-x:auto;padding:.5rem}.s-lookup-modal .s-lookup-modal-container .content.empty-content{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.s-lookup-modal .s-lookup-modal-container .content .s-loading-state-container,.s-lookup-modal .s-lookup-modal-container .content .s-loading-state-container .contents{height:100%}.s-lookup-modal .s-lookup-modal-container .content p-table{position:relative;height:100%}.s-lookup-modal .s-lookup-modal-container .content p-table .ui-table{height:100%}.s-lookup-modal .s-lookup-modal-container .content p-table .ui-table .ui-table-scrollable-wrapper{height:calc(100% - 60px)}.s-lookup-modal .s-lookup-modal-container .content p-table .ui-table .ui-table-scrollable-wrapper .ui-table-scrollable-view{height:100%}.s-lookup-modal .s-lookup-modal-container .content p-table .ui-table .ui-table-scrollable-wrapper .ui-table-scrollable-view .ui-table-scrollable-body{position:relative;height:calc(100% - 60px)}@media (max-width:767px){.s-lookup-modal{border:none!important;top:0!important;left:0!important;width:100%!important;height:100%!important}}@media (min-width:768px){.s-lookup-modal{width:80%!important}.s-lookup-modal .s-lookup-modal-container .filter{width:40%}}@media (min-width:1200px){.s-lookup-modal{width:60%!important}.s-lookup-modal .s-lookup-modal-container .filter{width:30%}}.inputgroup p-autocomplete{width:calc(100% - 35px)}"]
+                styles: [".no-button-margin s-button{margin-left:0}s-lookup.ng-dirty.ng-invalid .ui-inputtext{border-color:#c13018}s-lookup .ui-inputtext{border-top-right-radius:0;border-bottom-right-radius:0}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-top-left-radius:0;border-bottom-left-radius:0}s-lookup .inputgroup,s-lookup p-autocomplete span.ui-autocomplete-multiple{display:-ms-flexbox;display:flex}s-lookup .inputgroup p-autocomplete{display:inline-block}s-lookup .inputgroup p-autocomplete .ui-autocomplete-input{width:100%}s-lookup .inputgroup p-autocomplete+button:enabled:hover,s-lookup .inputgroup p-autocomplete+button:focus{background-color:#e6e6e6;border-color:#ccc}s-lookup .inputgroup p-autocomplete .ui-widget .ui-inputtext{border-right-width:1px;border-right-style:solid}s-lookup .ui-autocomplete-input-token,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}body .s-lookup-modal.ui-dialog .ui-dialog-content{padding:0;margin-bottom:0;max-height:none}s-lookup .ui-table-scrollable-body{min-width:100%}.s-lookup-modal{height:80%!important;max-width:100%!important;max-height:inherit!important;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column}.s-lookup-modal .ui-dialog-content{height:auto!important;-ms-flex:1;flex:1;overflow:auto}.s-lookup-modal .ui-dialog-footer,.s-lookup-modal .ui-dialog-header{-ms-flex-negative:0;flex-shrink:0;border-radius:0 0 4px 4px}.s-lookup-modal .s-lookup-modal-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%;width:100%}.s-lookup-modal .s-lookup-modal-container .filter{position:relative;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;width:85%;background-color:rgba(229,234,234,.5);height:100%;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:-ms-flexbox;display:flex;-ms-flex-direction:column;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;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;width:35px;border-radius:0 4px 4px 0}.s-lookup-modal .s-lookup-modal-container .filter-toggle button{-ms-flex-align:center;align-items:center;position:relative;background-color:rgba(229,234,234,.5);height:35px;width:100%;border:1px solid #e5eaea;outline:0;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:focus,.s-lookup-modal .s-lookup-modal-container .filter-toggle button:hover{background-color:rgba(201,211,211,.5);border-color:#c9d3d3}.s-lookup-modal .s-lookup-modal-container .content{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:auto;flex-basis:auto;overflow-x:auto;padding:.5rem}.s-lookup-modal .s-lookup-modal-container .content.empty-content{-ms-flex-item-align:center;-ms-grid-row-align:center;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 .content-child{height:100%;overflow:auto}.s-lookup-modal .s-lookup-modal-container .content .buttons-container{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:10px}.s-lookup-modal .s-lookup-modal-container .content .s-loading-state-container,.s-lookup-modal .s-lookup-modal-container .content .s-loading-state-container .contents{height:100%}.s-lookup-modal .s-lookup-modal-container .content p-table>.ui-table{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.s-lookup-modal .s-lookup-modal-container .content p-table>.ui-table .ui-table-scrollable-wrapper{overflow:auto}@media (max-width:767px){.s-lookup-modal{border:none!important;top:0!important;left:0!important;width:100%!important;height:100%!important}}@media (min-width:768px){.s-lookup-modal{width:80%!important}.s-lookup-modal .s-lookup-modal-container .filter{width:40%}}@media (min-width:1200px){.s-lookup-modal{width:60%!important}.s-lookup-modal .s-lookup-modal-container .filter{width:30%}}.inputgroup p-autocomplete{width:calc(100% - 35px)}"]
             })
         ], LookupComponent);
         return LookupComponent;
@@ -11519,7 +11527,7 @@
         ], TextAreaFieldComponent.prototype, "inputRef", void 0);
         TextAreaFieldComponent = __decorate([
             core.Component({
-                template: "<s-field-label *ngIf=\"inputRef\" [field]=\"field\"\n    [fieldContainerRef]=\"inputRef?.nativeElement\"></s-field-label>\n\n<textarea #inputRef\n    [id]=\"(field.id || field.name)\"\n    *ngIf=\"!field.keyFilter\"\n    pInputTextarea\n    [rows]=\"field.rows\"\n    [cols]=\"field.cols\"\n    [formControl]=\"formControl\"\n    style=\"resize: vertical;\"\n    [ngStyle]=\"field.style\"\n    [readonly]=\"field.readonly ? field.readonly() : false\"\n></textarea>\n<textarea #inputRef\n    [id]=\"(field.id || field.name)\"\n    *ngIf=\"field.keyFilter\"\n    pInputTextarea\n    [rows]=\"field.rows\"\n    [cols]=\"field.cols\"\n    [formControl]=\"formControl\"\n    style=\"resize: vertical;\"\n    [pKeyFilter]=\"field.keyFilter\"\n    [ngStyle]=\"field.style\"\n    [readonly]=\"field.readonly ? field.readonly() : false\"\n></textarea>\n"
+                template: "<s-field-label *ngIf=\"textArea\" [field]=\"field\"\n    [fieldContainerRef]=\"textArea.textAreaElement?.nativeElement\"></s-field-label>\n\n<s-textarea\n    #textArea\n    [inputId]=\"(field.id || field.name)\"\n    [rows]=\"field.rows\"\n    [formControl]=\"formControl\"\n    style=\"resize: vertical;\"\n    [inputStyle]=\"field.style\"\n    [readOnly]=\"field.readonly ? field.readonly() : false\"\n    [keyFilter]=\"field.keyFilter\"\n    [speechRecognition]=\"field.speechRecognition\">\n</s-textarea>\n"
             })
         ], TextAreaFieldComponent);
         return TextAreaFieldComponent;
@@ -13383,6 +13391,513 @@
         return TextFieldModule;
     }());
 
+    var TextAreaComponent = /** @class */ (function () {
+        function TextAreaComponent() {
+            this.onChange = function () { };
+            this.onTouched = function () { };
+            this.disabled = false;
+            this.value = '';
+            this.inputId = "textarea-" + Math.random();
+            this.rows = 5;
+            this.speechRecognition = false;
+            this.readOnly = false;
+            this.renderTextArea = false;
+        }
+        TextAreaComponent_1 = TextAreaComponent;
+        Object.defineProperty(TextAreaComponent.prototype, "textAreaElement", {
+            get: function () {
+                return this._textAreaElement;
+            },
+            set: function (value) {
+                var _this = this;
+                this._textAreaElement = value;
+                setTimeout(function () {
+                    _this.renderTextArea = true;
+                });
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TextAreaComponent.prototype.writeValue = function (obj) {
+            this.value = obj;
+        };
+        TextAreaComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        TextAreaComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        TextAreaComponent.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        TextAreaComponent.prototype.setValue = function (value) {
+            if (this.disabled) {
+                return;
+            }
+            this.value = value;
+            this.writeValue(this.value);
+            this.onChange(this.value);
+            this.onTouched(this.value);
+        };
+        TextAreaComponent.prototype.handleRecognizedText = function (recognizedText) {
+            this.setValue(recognizedText);
+        };
+        var TextAreaComponent_1;
+        __decorate([
+            core.ViewChild('textArea', { read: core.ElementRef })
+        ], TextAreaComponent.prototype, "textAreaElement", null);
+        __decorate([
+            core.Input()
+        ], TextAreaComponent.prototype, "inputId", void 0);
+        __decorate([
+            core.Input()
+        ], TextAreaComponent.prototype, "rows", void 0);
+        __decorate([
+            core.Input()
+        ], TextAreaComponent.prototype, "speechRecognition", void 0);
+        __decorate([
+            core.Input()
+        ], TextAreaComponent.prototype, "keyFilter", void 0);
+        __decorate([
+            core.Input()
+        ], TextAreaComponent.prototype, "inputStyle", void 0);
+        __decorate([
+            core.Input()
+        ], TextAreaComponent.prototype, "readOnly", void 0);
+        TextAreaComponent = TextAreaComponent_1 = __decorate([
+            core.Component({
+                selector: 's-textarea',
+                template: "<textarea\n    *ngIf=\"keyFilter\"\n    #textArea\n    class=\"textarea\"\n    [pKeyFilter]=\"keyFilter\"\n    [id]=\"inputId\"\n    [rows]=\"rows\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [ngStyle]=\"inputStyle\"\n    [readOnly]=\"readOnly\"\n    (ngModelChange)=\"setValue($event)\">\n</textarea>\n\n<textarea\n    *ngIf=\"!keyFilter\"\n    #textArea\n    class=\"textarea\"\n    [id]=\"inputId\"\n    [rows]=\"rows\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [ngStyle]=\"inputStyle\"\n    [readOnly]=\"readOnly\"\n    (ngModelChange)=\"setValue($event)\">\n</textarea>\n\n<s-speech-recognition\n        *ngIf=\"speechRecognition && renderTextArea\"\n        [textAreaElement]=\"textAreaElement.nativeElement\"\n        (recognizedText)=\"handleRecognizedText($event)\">\n</s-speech-recognition>\n",
+                providers: [
+                    {
+                        provide: forms.NG_VALUE_ACCESSOR,
+                        useExisting: core.forwardRef(function () { return TextAreaComponent_1; }),
+                        multi: true,
+                    },
+                ],
+                styles: [".textarea{border-radius:3px;border:1px solid #c1c1cc;background:#fff;width:100%;max-width:100%;min-height:4em;min-width:10em;outline:0;padding:8px;display:block}.textarea:disabled{opacity:.5}"]
+            })
+        ], TextAreaComponent);
+        return TextAreaComponent;
+    }());
+
+    var SpeechRecognitionService = /** @class */ (function () {
+        function SpeechRecognitionService(localeService, ngZone) {
+            this.localeService = localeService;
+            this.ngZone = ngZone;
+            this.isListening = false;
+            this.TIMEOUT_NO_MESSAGE = 3000;
+            this.setRecognition();
+        }
+        SpeechRecognitionService.prototype.listen = function () {
+            var _this = this;
+            if (this.isListening) {
+                return;
+            }
+            var speechSubject = new rxjs.Subject();
+            this.isListening = true;
+            this.recognition.continuous = true;
+            this.recognition.interimResults = true;
+            this.recognition.maxAlternatives = 1;
+            var silenceTimer;
+            var restartSilenceTimer = function () {
+                if (silenceTimer !== undefined) {
+                    clearTimeout(silenceTimer);
+                }
+                silenceTimer = setTimeout(function () {
+                    _this.recognition.stop();
+                }, _this.TIMEOUT_NO_MESSAGE);
+            };
+            var fullTranscript = '';
+            var interimTranscript = '';
+            this.recognition.onresult = function (event) {
+                _this.ngZone.run(function () {
+                    restartSilenceTimer();
+                    var interimTranscript = '';
+                    for (var i = event.resultIndex; i < event.results.length; ++i) {
+                        var transcript = event.results[i][0].transcript;
+                        if (event.results[i].isFinal) {
+                            fullTranscript += transcript + '\n';
+                        }
+                        else {
+                            interimTranscript += transcript;
+                        }
+                    }
+                    interimTranscript = interimTranscript;
+                    speechSubject.next({ text: fullTranscript + interimTranscript, isFinal: false });
+                });
+            };
+            this.recognition.onerror = function () {
+                _this.ngZone.run(function () {
+                    if (silenceTimer !== undefined) {
+                        clearTimeout(silenceTimer);
+                    }
+                    _this.isListening = false;
+                    speechSubject.next({
+                        isFinal: true,
+                        text: ''
+                    });
+                });
+            };
+            this.recognition.onend = function () {
+                _this.ngZone.run(function () {
+                    if (silenceTimer !== undefined) {
+                        clearTimeout(silenceTimer);
+                    }
+                    speechSubject.next({ text: fullTranscript + interimTranscript, isFinal: true });
+                    _this.isListening = false;
+                    speechSubject.complete();
+                });
+            };
+            this.recognition.start();
+            return speechSubject;
+        };
+        SpeechRecognitionService.prototype.stop = function () {
+            this.recognition.stop();
+        };
+        SpeechRecognitionService.prototype.setRecognition = function () {
+            var SpeechRecognitionConstructor = window.SpeechRecognition || window.webkitSpeechRecognition;
+            if (!SpeechRecognitionConstructor) {
+                throw new Error('Speech recognition is not supported in this browser.');
+            }
+            this.recognition = new SpeechRecognitionConstructor();
+            this.recognition.lang = this.localeService.getLocaleOptions().locale || 'pt-BR';
+            this.recognition.interimResults = false;
+            this.recognition.maxAlternatives = 1;
+        };
+        SpeechRecognitionService.ctorParameters = function () { return [
+            { type: LocaleService },
+            { type: core.NgZone }
+        ]; };
+        SpeechRecognitionService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function SpeechRecognitionService_Factory() { return new SpeechRecognitionService(core["ɵɵinject"](LocaleService), core["ɵɵinject"](core.NgZone)); }, token: SpeechRecognitionService, providedIn: "root" });
+        SpeechRecognitionService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            })
+        ], SpeechRecognitionService);
+        return SpeechRecognitionService;
+    }());
+
+    var TextToSpeechService = /** @class */ (function () {
+        function TextToSpeechService(locale, ngZone) {
+            this.locale = locale;
+            this.ngZone = ngZone;
+            this.utterance = new SpeechSynthesisUtterance();
+            this.voices = [];
+            this.setVoices();
+        }
+        TextToSpeechService.prototype.setVoices = function () {
+            var _this = this;
+            var _voices = speechSynthesis.getVoices();
+            if (!_voices.length) {
+                speechSynthesis.onvoiceschanged = function () {
+                    _this.ngZone.run(function () {
+                        _voices = speechSynthesis.getVoices();
+                        var currentLang = _this.locale.getLocaleOptions().locale || 'pt-BR';
+                        _this.voices = _voices.filter(function (voice) { return voice.lang === currentLang; });
+                        _this.activeVoice = _this.voices[0];
+                    });
+                };
+            }
+        };
+        /**
+         * Updates the active voice
+         * [MDN Reference](https://developer.mozilla.org/docs/Web/API/SpeechSynthesisVoice/voiceURI)
+         * @param voiceUri
+         */
+        TextToSpeechService.prototype.updateVoice = function (voiceUri) {
+            this.activeVoice = this.voices.find(function (voice) { return voice.voiceURI === voiceUri; });
+        };
+        TextToSpeechService.prototype.speak = function (text, speed) {
+            var _this = this;
+            if (speed === void 0) { speed = 1; }
+            if (!this.activeVoice) {
+                return;
+            }
+            return new Promise(function (resolve) {
+                _this.utterance.text = text;
+                _this.utterance.voice = _this.activeVoice;
+                _this.utterance.rate = speed;
+                speechSynthesis.speak(_this.utterance);
+                _this.utterance.onend = function () {
+                    _this.ngZone.run(function () {
+                        resolve(true);
+                    });
+                };
+            });
+        };
+        TextToSpeechService.prototype.pause = function () {
+            speechSynthesis.pause();
+        };
+        TextToSpeechService.prototype.resume = function () {
+            speechSynthesis.resume();
+        };
+        TextToSpeechService.prototype.cancel = function () {
+            speechSynthesis.cancel();
+        };
+        Object.defineProperty(TextToSpeechService.prototype, "hasVoice", {
+            get: function () {
+                return !!this.activeVoice;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TextToSpeechService.ctorParameters = function () { return [
+            { type: LocaleService },
+            { type: core.NgZone }
+        ]; };
+        TextToSpeechService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function TextToSpeechService_Factory() { return new TextToSpeechService(core["ɵɵinject"](LocaleService), core["ɵɵinject"](core.NgZone)); }, token: TextToSpeechService, providedIn: "root" });
+        TextToSpeechService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            })
+        ], TextToSpeechService);
+        return TextToSpeechService;
+    }());
+
+    var SpeechRecognitionComponent = /** @class */ (function () {
+        function SpeechRecognitionComponent(speechRecognitionService, textToSpeechService, translateService) {
+            var _this = this;
+            this.speechRecognitionService = speechRecognitionService;
+            this.textToSpeechService = textToSpeechService;
+            this.translateService = translateService;
+            this._recognizedText = '';
+            this.originalTextAreaElementText = '';
+            this.isDoneSpeaking = false;
+            this.onDestroy$ = new rxjs.Subject();
+            this.VOICE_SPEEDS = [0.5, 1, 1.5, 2];
+            this.SPEECH_RECOGNITION_MARGIN_OFFSET = 13;
+            this.keydownEventListener = function (event) {
+                if (_this.disabled) {
+                    event.preventDefault();
+                }
+            };
+            this.TEXT_AREA_ELEMENT_MUTATION_OBSERVER = new MutationObserver(function () {
+                _this.SPEECH_CONTAINER_WIDTH_CALLBACK();
+            });
+            this.SPEECH_CONTAINER_WIDTH_CALLBACK = function () {
+                _this.setSpeechContainerWidth();
+            };
+            this.speechRecognitionContainerWidth = 0;
+            this.disabled = false;
+            this.isSpeaking = false;
+            this.voiceSpeed = 1;
+            this.isDisabledMicrophone = false;
+            this.canRenderMicrophone = true;
+            this.canRenderTextToSpeech = true;
+            this.canRenderListeningText = false;
+            this.canRenderDiscard = false;
+            this.canRenderAprove = false;
+            this.canRenderTextToSpeechToolbar = false;
+            this.isPlayingTextToSpeech = false;
+            this.recognizedText = new core.EventEmitter();
+        }
+        SpeechRecognitionComponent.prototype.ngOnInit = function () {
+            if (!this.textAreaElement) {
+                throw new Error('textAreaElement is required');
+            }
+            this.textAreaElement.placeholder = this.translateService.instant("platform.angular_components.text_area_speech_recognition_placeholder");
+            this.textAreaElement.addEventListener('keydown', this.keydownEventListener);
+            var config = { attributes: true, childList: true, subtree: true };
+            this.TEXT_AREA_ELEMENT_MUTATION_OBSERVER.observe(this.textAreaElement, config);
+            window.addEventListener('resize', this.SPEECH_CONTAINER_WIDTH_CALLBACK);
+        };
+        SpeechRecognitionComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this.setSpeechContainerWidth();
+            });
+        };
+        SpeechRecognitionComponent.prototype.onListen = function () {
+            var _this = this;
+            if (this.isDisabledMicrophone || this.isListening) {
+                return;
+            }
+            this.disabled = true;
+            this.canRenderMicrophone = false;
+            this.canRenderListeningText = true;
+            if (this.textAreaElement.value && !this.originalTextAreaElementText) {
+                this.originalTextAreaElementText = this.textAreaElement.value;
+            }
+            this.textAreaElement.value = '';
+            this.isSpeaking = true;
+            this.speechRecognitionService.listen()
+                .pipe(operators.takeUntil(this.onDestroy$))
+                .subscribe(function (_a) {
+                var text = _a.text, isFinal = _a.isFinal;
+                _this._recognizedText = text;
+                _this.setTextAreaValue(text);
+                setTimeout(function () {
+                    _this.textAreaElement.scrollTop = _this.textAreaElement.scrollHeight;
+                }, 120);
+                if (isFinal) {
+                    _this.canRenderAprove = true;
+                    _this.canRenderDiscard = true;
+                    _this.canRenderListeningText = false;
+                    _this.isSpeaking = false;
+                }
+            });
+        };
+        SpeechRecognitionComponent.prototype.onOpenToolbar = function () {
+            if (this.isDisabledTextToSpeech) {
+                return;
+            }
+            this.canRenderTextToSpeechToolbar = true;
+            this.canRenderTextToSpeech = false;
+            this.isPlayingTextToSpeech = true;
+            this.speak();
+        };
+        SpeechRecognitionComponent.prototype.onCloseToolbar = function () {
+            this.canRenderTextToSpeechToolbar = false;
+            this.canRenderTextToSpeech = true;
+            this.isPlayingTextToSpeech = false;
+            this.textToSpeechService.cancel();
+            this.voiceSpeed = 1;
+        };
+        SpeechRecognitionComponent.prototype.onDiscard = function () {
+            this.canRenderAprove = false;
+            this.canRenderDiscard = false;
+            this.canRenderMicrophone = true;
+            this.canRenderTextToSpeechToolbar = false;
+            this.canRenderTextToSpeech = true;
+            this._recognizedText = '';
+            this.setTextAreaValue(this.originalTextAreaElementText);
+            this.disabled = false;
+            this.textToSpeechService.cancel();
+        };
+        SpeechRecognitionComponent.prototype.onAprove = function () {
+            this.canRenderAprove = false;
+            this.canRenderDiscard = false;
+            this.canRenderMicrophone = true;
+            this.canRenderTextToSpeechToolbar = false;
+            this.canRenderTextToSpeech = true;
+            this.originalTextAreaElementText = this._recognizedText;
+            this.recognizedText.emit(this._recognizedText);
+            this._recognizedText = '';
+            this.disabled = false;
+            this.textToSpeechService.cancel();
+        };
+        SpeechRecognitionComponent.prototype.ngOnDestroy = function () {
+            this.onDestroy$.next();
+            this.onDestroy$.complete();
+            this.textAreaElement.removeEventListener('keydown', this.keydownEventListener);
+            window.removeEventListener('resize', this.SPEECH_CONTAINER_WIDTH_CALLBACK);
+            this.TEXT_AREA_ELEMENT_MUTATION_OBSERVER.disconnect();
+        };
+        SpeechRecognitionComponent.prototype.toggleTextToSpeech = function () {
+            if (this.isPlayingTextToSpeech) {
+                this.textToSpeechService.pause();
+            }
+            else {
+                if (this.isDoneSpeaking) {
+                    this.speak();
+                }
+                else {
+                    this.textToSpeechService.resume();
+                }
+            }
+            this.isPlayingTextToSpeech = !this.isPlayingTextToSpeech;
+        };
+        SpeechRecognitionComponent.prototype.restartTextToSpeech = function () {
+            this.isPlayingTextToSpeech = true;
+            this.textToSpeechService.cancel();
+            this.speak();
+        };
+        SpeechRecognitionComponent.prototype.updateVoiceSpeed = function () {
+            var voiceSpeedIndex = this.VOICE_SPEEDS.indexOf(this.voiceSpeed);
+            var nextVoiceSpeedIndex = this.VOICE_SPEEDS[voiceSpeedIndex + 1] ? voiceSpeedIndex + 1 : 0;
+            this.voiceSpeed = this.VOICE_SPEEDS[nextVoiceSpeedIndex];
+            this.textToSpeechService.cancel();
+            this.speak();
+        };
+        SpeechRecognitionComponent.prototype.stopListening = function () {
+            this.speechRecognitionService.stop();
+        };
+        Object.defineProperty(SpeechRecognitionComponent.prototype, "isListening", {
+            get: function () {
+                return this.speechRecognitionService.isListening;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(SpeechRecognitionComponent.prototype, "isDisabledTextToSpeech", {
+            get: function () {
+                var hasTextToSpeechVoice = this.textToSpeechService.hasVoice;
+                return !this._recognizedText || !hasTextToSpeechVoice || this.isListening;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        SpeechRecognitionComponent.prototype.setTextAreaValue = function (value) {
+            this.textAreaElement.value = value;
+        };
+        SpeechRecognitionComponent.prototype.speak = function () {
+            var _this = this;
+            this.isDoneSpeaking = false;
+            this.textToSpeechService.speak(this._recognizedText, this.voiceSpeed).then(function () {
+                _this.isPlayingTextToSpeech = false;
+                _this.isDoneSpeaking = true;
+            });
+        };
+        SpeechRecognitionComponent.prototype.setSpeechContainerWidth = function () {
+            this.speechRecognitionContainerWidth = this.textAreaElement.getBoundingClientRect().width - this.SPEECH_RECOGNITION_MARGIN_OFFSET;
+        };
+        SpeechRecognitionComponent.ctorParameters = function () { return [
+            { type: SpeechRecognitionService },
+            { type: TextToSpeechService },
+            { type: core$1.TranslateService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], SpeechRecognitionComponent.prototype, "textAreaElement", void 0);
+        __decorate([
+            core.Output()
+        ], SpeechRecognitionComponent.prototype, "recognizedText", void 0);
+        SpeechRecognitionComponent = __decorate([
+            core.Component({
+                selector: 's-speech-recognition',
+                template: "<section class=\"speech-recognition\" [style.width.px]=\"speechRecognitionContainerWidth\" *ngIf=\"speechRecognitionContainerWidth\">\n    <div class=\"speech-recognition-text\">\n        <ng-container *ngIf=\"canRenderMicrophone\">\n            {{ 'platform.angular_components.text_area_before_speech' | translate }}\n        </ng-container>\n\n        <ng-container *ngIf=\"isSpeaking\">\n            {{ 'platform.angular_components.text_area_while_speech' | translate }}\n        </ng-container>\n\n        <ng-container *ngIf=\"canRenderAprove && canRenderDiscard\">\n            {{ 'platform.angular_components.text_area_end_speech' | translate }}\n        </ng-container>\n    </div>\n    <div class=\"speech-recognition-buttons\">\n        <span\n            *ngIf=\"canRenderListeningText\"\n            (click)=\"stopListening()\"\n            class=\"speech-recognition-item speech-recognition-item-regular\">\n            <i class=\"far fa-ellipsis-h\"></i>\n        </span>\n\n        <span\n            *ngIf=\"canRenderMicrophone\"\n            (click)=\"onListen()\"\n            class=\"speech-recognition-item speech-recognition-item-microphone\"\n            [class.speech-recognition-item-disabled]=\"isDisabledMicrophone || isListening || disabled\">\n            <i class=\"fas fa-microphone\"></i>\n        </span>\n\n        <span\n            *ngIf=\"canRenderAprove\"\n            (click)=\"onAprove()\"\n            class=\"speech-recognition-item speech-recognition-item-aprove\">\n            <i class=\"fas fa-check\"></i>\n        </span>\n\n        <span *ngIf=\"canRenderDiscard\"\n            (click)=\"onDiscard()\"\n            class=\"speech-recognition-item speech-recognition-item-discard\">\n            <i class=\"fas fa-times\"></i>\n        </span>\n\n        <span\n            *ngIf=\"canRenderTextToSpeech\"\n            (click)=\"onOpenToolbar()\"\n            class=\"speech-recognition-item speech-recognition-item-regular\"\n            [class.speech-recognition-item-disabled]=\"isDisabledTextToSpeech\">\n            <i class=\"fas fa-volume-down\"></i>\n        </span>\n\n        <span\n            *ngIf=\"canRenderTextToSpeechToolbar\"\n            class=\"speech-recognition-item-toolbar\">\n             <i class=\"fas\" [class.fa-pause]=\"isPlayingTextToSpeech\" [class.fa-play]=\"!isPlayingTextToSpeech\"\n             (click)=\"toggleTextToSpeech()\"></i>\n                <i class=\"fas fa-backward\" (click)=\"restartTextToSpeech()\"></i>\n                <span (click)=\"updateVoiceSpeed()\">\n                    {{ voiceSpeed }}x\n                </span>\n                <i class=\"fas fa-times\" (click)=\"onCloseToolbar()\"></i>\n        </span>\n    </div>\n</section>\n",
+                styles: [".speech-recognition{display:-ms-flexbox;display:flex;gap:10px;-ms-flex-pack:justify;justify-content:space-between}.speech-recognition-buttons{display:-ms-flexbox;display:flex;gap:10px;position:relative;bottom:15px}.speech-recognition-item{display:-ms-inline-flexbox;display:inline-flex;height:25px;padding:4px 12px;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:8px;border-radius:15px;cursor:pointer;transition:background .1s ease-in}.speech-recognition-item i,.speech-recognition-item span{color:#fff}.speech-recognition-item-disabled{cursor:default!important}.speech-recognition-item-disabled *{opacity:.5}.speech-recognition-item-microphone{background:#428bca}.speech-recognition-item-microphone:not(.speech-recognition-item-disabled):hover{background:#063951}.speech-recognition-item-regular{background:#7892a1}.speech-recognition-item-regular:not(.speech-recognition-item-disabled):hover{background:#697882}.speech-recognition-item-aprove{background:#0c9348}.speech-recognition-item-aprove:not(.speech-recognition-item-disabled):hover{background:#063951}.speech-recognition-item-discard{background:#c13018}.speech-recognition-item-discard:not(.speech-recognition-item-disabled):hover{background:#063951}.speech-recognition-item-toolbar{background:#7892a1;display:-ms-flexbox;display:flex;border-radius:15px;-ms-flex-align:center;align-items:center;color:#fff}.speech-recognition-item-toolbar i,.speech-recognition-item-toolbar span{cursor:pointer}.speech-recognition-item-toolbar i:not(:first-child),.speech-recognition-item-toolbar i:not(:last-child){padding:6px}.speech-recognition-item-toolbar i:first-child{padding-left:10px}.speech-recognition-item-toolbar i:last-child{padding-right:10px}.speech-recognition-item-toolbar span{height:25px}.speech-recognition-text{color:#212533;font-size:12px;font-style:normal;font-weight:400;word-break:break-word}"]
+            })
+        ], SpeechRecognitionComponent);
+        return SpeechRecognitionComponent;
+    }());
+
+    var SpeechRecognitionModule = /** @class */ (function () {
+        function SpeechRecognitionModule() {
+        }
+        SpeechRecognitionModule = __decorate([
+            core.NgModule({
+                declarations: [SpeechRecognitionComponent],
+                imports: [
+                    common.CommonModule,
+                    core$1.TranslateModule
+                ],
+                exports: [SpeechRecognitionComponent]
+            })
+        ], SpeechRecognitionModule);
+        return SpeechRecognitionModule;
+    }());
+
+    var TextAreaModule = /** @class */ (function () {
+        function TextAreaModule() {
+        }
+        TextAreaModule = __decorate([
+            core.NgModule({
+                declarations: [TextAreaComponent],
+                imports: [
+                    common.CommonModule,
+                    forms.FormsModule,
+                    forms.ReactiveFormsModule,
+                    SpeechRecognitionModule,
+                    keyfilter.KeyFilterModule
+                ],
+                exports: [TextAreaComponent]
+            })
+        ], TextAreaModule);
+        return TextAreaModule;
+    }());
+
     var DynamicFormModule = /** @class */ (function () {
         function DynamicFormModule() {
         }
@@ -13441,6 +13956,7 @@
                     ProfilePictureModule,
                     EditorFieldModule,
                     FieldLabelModule,
+                    TextAreaModule
                 ],
                 declarations: [
                     AutocompleteFieldComponent,
@@ -20642,8 +21158,8 @@
         TimelineIconItemComponent = __decorate([
             core.Component({
                 selector: "s-timeline-icon-item",
-                template: "<ng-container *ngIf=\"item\">\n   <div\n      class=\"timeline__icon-item\"\n      [ngClass]=\"{\n         'timeline__icon-item--small': item.testSize('small'),\n         'timeline__icon-item--normal': item.testSize('normal'),\n         'timeline__icon-item--warning': item.testSeverity('warning'),\n         'timeline__icon-item--error': item.testSeverity('error'),\n         'timeline__icon-item--completed': isComplete,\n         'timeline__icon-item--active': isActive,\n         'timeline__icon-item--active--highlight': isActive && highlightActive\n      }\">\n      <div\n         class=\"timeline__icon-item__icon\"\n         [pTooltip]=\"item.tooltip\"\n         tooltipPosition=\"top\"\n         [ngStyle]=\"{ backgroundColor: item.color }\">\n         <ng-content *ngIf=\"item.icon; then icon_content; else label_text_content\"></ng-content>\n         <ng-template #icon_content>\n            <span [ngClass]=\"item.icon\"></span>\n         </ng-template>\n         <ng-template #label_text_content>\n            <span class=\"timeline__icon-item__icon__label\">\n               {{ item.label }}\n            </span>\n         </ng-template>\n      </div>\n   </div>\n</ng-container>\n",
-                styles: [".timeline__icon-item .timeline__icon-item__icon{-ms-flex-align:center;align-items:center;background-color:#697882;border-radius:50%;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:4px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.timeline__icon-item .timeline__icon-item__icon .timeline__icon-item__icon__label{font-family:\"Open Sans\",sans-serif}.timeline__icon-item.timeline__icon-item--small .timeline__icon-item__icon{font-size:0;height:16px;width:16px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon{font-size:10px;height:24px;padding:8px;width:24px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:14px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon{font-size:20px;height:40px;padding:10px;width:40px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:22px}.timeline__icon-item.timeline__icon-item--active .timeline__icon-item__icon,.timeline__icon-item.timeline__icon-item--completed .timeline__icon-item__icon{background-color:#0c9348}.timeline__icon-item.timeline__icon-item--warning.timeline__icon-item--active .timeline__icon-item__icon{background-color:#fcbf10;color:#333}.timeline__icon-item.timeline__icon-item--danger.timeline__icon-item--active .timeline__icon-item__icon{background-color:#f8931f;color:#333}.timeline__icon-item.timeline__icon-item--error.timeline__icon-item--active .timeline__icon-item__icon{background-color:#c13018}"]
+                template: "<ng-container *ngIf=\"item\">\n   <div\n      class=\"timeline__icon-item\"\n      [ngClass]=\"{\n         'timeline__icon-item--small': item.testSize('small'),\n         'timeline__icon-item--normal': item.testSize('normal'),\n         'timeline__icon-item--warning': item.testSeverity('warning'),\n         'timeline__icon-item--error': item.testSeverity('error'),\n         'timeline__icon-item--completed': isComplete,\n         'timeline__icon-item--active': isActive,\n         'timeline__icon-item--active--highlight': isActive && highlightActive\n      }\">\n      <div\n         class=\"timeline__icon-item__icon\"\n         [pTooltip]=\"item.tooltip\"\n         tooltipPosition=\"top\"\n         [ngStyle]=\"{ backgroundColor: item.color }\">\n         <ng-content *ngIf=\"item.icon; then icon_content; else label_text_content\"></ng-content>\n         <ng-template #icon_content>\n            <span [ngClass]=\"item.icon\"></span>\n         </ng-template>\n         <ng-template #label_text_content>\n            <span class=\"timeline__icon-item__icon__label\" [class.large_label]=\"item.label?.length > 2\">\n               {{ item.label }}\n            </span>\n         </ng-template>\n      </div>\n   </div>\n</ng-container>\n",
+                styles: [".timeline__icon-item .timeline__icon-item__icon{-ms-flex-align:center;align-items:center;background-color:#697882;border-radius:50%;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:4px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.timeline__icon-item .timeline__icon-item__icon .timeline__icon-item__icon__label{font-family:\"Open Sans\",sans-serif}.timeline__icon-item.timeline__icon-item--small .timeline__icon-item__icon{font-size:0;height:16px;width:16px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon{font-size:10px;height:24px;padding:8px;width:24px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:14px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon .timeline__icon-item__icon__label.large_label{font-size:12px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon{font-size:20px;height:40px;padding:10px;width:40px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:22px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon .timeline__icon-item__icon__label.large_label{font-size:18px}.timeline__icon-item.timeline__icon-item--active .timeline__icon-item__icon,.timeline__icon-item.timeline__icon-item--completed .timeline__icon-item__icon{background-color:#0c9348}.timeline__icon-item.timeline__icon-item--warning.timeline__icon-item--active .timeline__icon-item__icon{background-color:#fcbf10;color:#333}.timeline__icon-item.timeline__icon-item--danger.timeline__icon-item--active .timeline__icon-item__icon{background-color:#f8931f;color:#333}.timeline__icon-item.timeline__icon-item--error.timeline__icon-item--active .timeline__icon-item__icon{background-color:#c13018}"]
             })
         ], TimelineIconItemComponent);
         return TimelineIconItemComponent;
@@ -20915,7 +21431,7 @@
         TimelineItemSize["Small"] = "small";
     })(exports.TimelineItemSize || (exports.TimelineItemSize = {}));
 
-    var LABEL_MAX_LENGTH = 2;
+    var LABEL_MAX_LENGTH = 3;
     var TimelineItem = /** @class */ (function () {
         function TimelineItem(params) {
             this.id = params.id;
@@ -20938,7 +21454,7 @@
                 throw new Error("An icon and label string were passed to the item. Enter an icon or label text");
             }
             if (((_a = this.label) === null || _a === void 0 ? void 0 : _a.length) > LABEL_MAX_LENGTH) {
-                throw new Error("Label text is expected to be a maximum of two characters long");
+                throw new Error("Label text is expected to be a maximum of three characters long");
             }
         };
         TimelineItem.prototype.testSize = function (value) {
@@ -22636,7 +23152,11 @@
         "platform.angular_components.add_all": "Adicionar todos",
         "platform.angular_components.remove_all": "Remover todos",
         "platform.angular_components.country_name_gb": "Reino Unido",
-        "platform.angular_components.insight_footer": "Conteúdo gerado por inteligência artificial. Sujeito a imprecisões."
+        "platform.angular_components.insight_footer": "Conteúdo gerado por inteligência artificial. Sujeito a imprecisões.",
+        "platform.angular_components.text_area_speech_recognition_placeholder": "Preencha o campo, com pelo menos, uma frase",
+        "platform.angular_components.text_area_before_speech": "Grave ou ouça o texto clicando nos Ícones",
+        "platform.angular_components.text_area_while_speech": "Clique novamente no Ícone para finalizar",
+        "platform.angular_components.text_area_end_speech": "Gravação finalizada"
     };
 
     exports.AccordionComponent = AccordionComponent;
@@ -22819,9 +23339,11 @@
     exports.TaxCalculationLanguageConfigs = TaxCalculationLanguageConfigs;
     exports.TemplateDirective = TemplateDirective;
     exports.TemplateModule = TemplateModule;
+    exports.TextAreaComponent = TextAreaComponent;
     exports.TextAreaField = TextAreaField;
     exports.TextAreaIAComponent = TextAreaIAComponent;
     exports.TextAreaIAModule = TextAreaIAModule;
+    exports.TextAreaModule = TextAreaModule;
     exports.TextField = TextField;
     exports.ThumbnailComponent = ThumbnailComponent;
     exports.ThumbnailModule = ThumbnailModule;
@@ -22881,69 +23403,73 @@
     exports.ɵbv = ProfilePictureFieldComponent;
     exports.ɵbw = EditorFieldModule;
     exports.ɵbx = EditorFieldComponent;
-    exports.ɵby = AutocompleteFieldComponent;
-    exports.ɵbz = BooleanFieldComponent;
+    exports.ɵby = SpeechRecognitionModule;
+    exports.ɵbz = SpeechRecognitionComponent;
     exports.ɵc = InfoSignComponent;
-    exports.ɵca = BooleanSwitchFieldComponent;
-    exports.ɵcb = CalendarFieldComponent;
-    exports.ɵcc = ChipsFieldComponent;
-    exports.ɵcd = CountryPhonePickerFieldComponent;
-    exports.ɵce = DynamicFieldComponent;
-    exports.ɵcf = DynamicFormDirective;
-    exports.ɵcg = FieldsetComponent;
-    exports.ɵch = FileUploadComponent$1;
-    exports.ɵci = LookupFieldComponent;
-    exports.ɵcj = RadioButtonComponent;
-    exports.ɵck = RowComponent;
-    exports.ɵcl = SectionComponent;
-    exports.ɵcm = SelectFieldComponent;
-    exports.ɵcn = SliderFieldComponent;
-    exports.ɵco = TextAreaFieldComponent;
-    exports.ɵcp = TextAreaIAFieldComponent;
-    exports.ɵcq = IAssistService;
-    exports.ɵcr = ButtonFieldComponent;
-    exports.ɵct = DecimalField;
-    exports.ɵcu = SideTableComponent;
-    exports.ɵcv = InfiniteScrollModule;
-    exports.ɵcw = InfiniteScrollDirective;
-    exports.ɵcx = IAInsightSidebarComponent;
-    exports.ɵcy = IAInsightCardComponent;
-    exports.ɵcz = IAInsightCardLoaderComponent;
+    exports.ɵca = SpeechRecognitionService;
+    exports.ɵcb = TextToSpeechService;
+    exports.ɵcc = AutocompleteFieldComponent;
+    exports.ɵcd = BooleanFieldComponent;
+    exports.ɵce = BooleanSwitchFieldComponent;
+    exports.ɵcf = CalendarFieldComponent;
+    exports.ɵcg = ChipsFieldComponent;
+    exports.ɵch = CountryPhonePickerFieldComponent;
+    exports.ɵci = DynamicFieldComponent;
+    exports.ɵcj = DynamicFormDirective;
+    exports.ɵck = FieldsetComponent;
+    exports.ɵcl = FileUploadComponent$1;
+    exports.ɵcm = LookupFieldComponent;
+    exports.ɵcn = RadioButtonComponent;
+    exports.ɵco = RowComponent;
+    exports.ɵcp = SectionComponent;
+    exports.ɵcq = SelectFieldComponent;
+    exports.ɵcr = SliderFieldComponent;
+    exports.ɵcs = TextAreaFieldComponent;
+    exports.ɵct = TextAreaIAFieldComponent;
+    exports.ɵcu = IAssistService;
+    exports.ɵcv = ButtonFieldComponent;
+    exports.ɵcx = DecimalField;
+    exports.ɵcy = SideTableComponent;
+    exports.ɵcz = InfiniteScrollModule;
     exports.ɵd = TieredMenuEventService;
-    exports.ɵda = GridMenuItemComponent;
-    exports.ɵdb = InlineEditItemComponent;
-    exports.ɵdc = InlineEditCalendarComponent;
-    exports.ɵdd = InlineEditLookupComponent;
-    exports.ɵde = InlineEditNumberComponent;
-    exports.ɵdf = InlineEditTextComponent;
-    exports.ɵdg = InlineEditTextAreaComponent;
-    exports.ɵdh = InlineEditTextAreaIAComponent;
-    exports.ɵdi = KanbanEventService;
-    exports.ɵdj = KanbanItemComponent;
-    exports.ɵdk = KanbanColumnComponent;
-    exports.ɵdl = KanbanItemDraggingComponent;
-    exports.ɵdm = NumberLocaleOptions;
-    exports.ɵdn = BorderButtonModule;
-    exports.ɵdo = BorderButtonComponent;
-    exports.ɵdp = ProgressBarDeterminateComponent;
-    exports.ɵdq = ProgressBarIndeterminateComponent;
-    exports.ɵdr = SelectButtonItemComponent;
-    exports.ɵds = SlidePanelService;
-    exports.ɵdt = ThumbnailItemComponent;
-    exports.ɵdu = ThumbnailItemVideoComponent;
-    exports.ɵdv = ThumbnailItemImageComponent;
-    exports.ɵdw = TimelineItemModule;
-    exports.ɵdx = TimelineIconItemComponent;
-    exports.ɵdy = HorizontalTimelineModule;
-    exports.ɵdz = HorizontalTimelineComponent;
+    exports.ɵda = InfiniteScrollDirective;
+    exports.ɵdb = IAInsightSidebarComponent;
+    exports.ɵdc = IAInsightCardComponent;
+    exports.ɵdd = IAInsightCardLoaderComponent;
+    exports.ɵde = GridMenuItemComponent;
+    exports.ɵdf = InlineEditItemComponent;
+    exports.ɵdg = InlineEditCalendarComponent;
+    exports.ɵdh = InlineEditLookupComponent;
+    exports.ɵdi = InlineEditNumberComponent;
+    exports.ɵdj = InlineEditTextComponent;
+    exports.ɵdk = InlineEditTextAreaComponent;
+    exports.ɵdl = InlineEditTextAreaIAComponent;
+    exports.ɵdm = KanbanEventService;
+    exports.ɵdn = KanbanItemComponent;
+    exports.ɵdo = KanbanColumnComponent;
+    exports.ɵdp = KanbanItemDraggingComponent;
+    exports.ɵdq = NumberLocaleOptions;
+    exports.ɵdr = BorderButtonModule;
+    exports.ɵds = BorderButtonComponent;
+    exports.ɵdt = ProgressBarDeterminateComponent;
+    exports.ɵdu = ProgressBarIndeterminateComponent;
+    exports.ɵdv = SelectButtonItemComponent;
+    exports.ɵdw = SlidePanelService;
+    exports.ɵdx = ThumbnailItemComponent;
+    exports.ɵdy = ThumbnailItemVideoComponent;
+    exports.ɵdz = ThumbnailItemImageComponent;
     exports.ɵe = TieredMenuService;
-    exports.ɵea = VerticalTimelineModule;
-    exports.ɵeb = VerticalTimelineComponent;
-    exports.ɵec = RangeLineComponent;
-    exports.ɵed = CollapseOptionComponent;
-    exports.ɵee = CollapsedItemsComponent;
-    exports.ɵef = VerticalItemsComponent;
-    exports.ɵeg = ChipItemComponent;
+    exports.ɵea = TimelineItemModule;
+    exports.ɵeb = TimelineIconItemComponent;
+    exports.ɵec = HorizontalTimelineModule;
+    exports.ɵed = HorizontalTimelineComponent;
+    exports.ɵee = VerticalTimelineModule;
+    exports.ɵef = VerticalTimelineComponent;
+    exports.ɵeg = RangeLineComponent;
+    exports.ɵeh = CollapseOptionComponent;
+    exports.ɵei = CollapsedItemsComponent;
+    exports.ɵej = VerticalItemsComponent;
+    exports.ɵek = ChipItemComponent;
     exports.ɵf = TieredMenuGlobalService;
     exports.ɵg = TieredMenuComponent;
     exports.ɵh = TieredMenuNestedComponent;