@seniorsistemas/angular-components 16.2.2 → 16.3.0

package/fesm5/seniorsistemas-angular-components.js

@@ -1812,6 +1812,7 @@ var LookupField = /** @class */ (function (_super) {
         _this.selectLabel = "Selecionar";
         _this.recordLabel = " registro";
         _this.recordsLabel = " registros";
+        _this.autocompleteForceSelection = true;
         _this.onSelect = function (event) { };
         _this.onUnselect = function (event) { };
         Object.assign(_this, config);
@@ -1986,6 +1987,7 @@ var LookupComponent = /** @class */ (function () {
     function LookupComponent(hotkeysService) {
         this.hotkeysService = hotkeysService;
         this.id = "s-lookup-" + LookupComponent_1.nextId++;
+        this.autocompleteForceSelection = true;
         this.disabled = false;
         this.showSearch = true;
         this.lookupAppendTo = "body";
@@ -2283,6 +2285,9 @@ var LookupComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], LookupComponent.prototype, "id", void 0);
+    __decorate([
+        Input()
+    ], LookupComponent.prototype, "autocompleteForceSelection", void 0);
     __decorate([
         Input()
     ], LookupComponent.prototype, "multiple", void 0);
@@ -2409,7 +2414,7 @@ var LookupComponent = /** @class */ (function () {
     LookupComponent = LookupComponent_1 = __decorate([
         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]=\"true\"\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\"\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\">{{ filterTitle }}</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\"\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\"\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\"\n                [description]=\"searchEmptyDescription\"\n                iconClass=\"fa fa-search\">\n            </s-empty-state>\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\"\n                [multiSortMeta]=\"multiSortMeta\"\n                [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n                [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n                (selectionChange)=\"onSelectionChange($event)\">\n                <ng-template pTemplate=\"colgroup\" let-columns>\n                    <colgroup>\n                        <col\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\" />\n                        <col\n                            *ngFor=\"let col of columns\"\n                            [style.width]=\"col.width\" />\n                    </colgroup>\n                </ng-template>\n                <ng-template pTemplate=\"header\" let-columns>\n                    <tr>\n                        <th\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\">\n                            <s-table-header-checkbox\n                                [useAllObject]=\"lookupRowProps ? false : true\"\n                                [rowProps]=\"lookupRowProps\">\n                            </s-table-header-checkbox>\n                        </th>\n                        <th\n                            [style.width]=\"col.width\"\n                            *ngFor=\"let col of columns\"\n                            [pSortableColumn]=\"col.name\"\n                            [pSortableColumnDisabled]=\"sortableColumnsDisabled?.includes(col.name)\">\n                            <div class=\"senior-header\">\n                                <span class=\"senior-header-title\">{{ col.label }}</span>\n                                <p-sortIcon\n                                    [field]=\"col.name\"\n                                    *ngIf=\"!sortableColumnsDisabled?.includes(col.name)\">\n                                </p-sortIcon>\n                            </div>\n                        </th>\n                    </tr>\n                </ng-template>\n                <ng-template\n                    pTemplate=\"body\"\n                    let-rowData\n                    let-columns\n                    let-rowIndex=\"rowIndex\">\n                    <tr\n                        sNavigation\n                        [pSelectableRow]=\"rowData\"\n                        [pSelectableRowIndex]=\"rowIndex\"\n                        sDoubleClick (onDoubleClick)=\"onTableRowDoubleClick(rowData)\">\n                        <td\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\"\n                            tabindex=\"0\">\n                            <p-tableCheckbox\n                                [value]=\"rowData\"\n                                [pSelectableRow]=\"rowData\">\n                            </p-tableCheckbox>\n                        </td>\n                        <td\n                            [style.width]=\"col['width']\"\n                            *ngFor=\"let col of searchGridFields\"\n                            [ngSwitch]=\"col.type\"\n                            tabindex=\"0\">\n                            <ng-container *ngSwitchCase=\"'Boolean'\">\n                                <ng-container *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getBooleanLabel(rowData, col.name, col.optionsLabel) }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Date'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate: col.calendarLocaleOptions?.dateFormat || \"L\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'DateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'LocalDateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Time'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedTime: col.calendarLocaleOptions?.dateFormat || \"LTS\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Double'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedNumber: getScale(col.scale) | 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) | localizedCurrency | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Number'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getNumberMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Enum'\">\n                                <ng-container\n                                    *ngIf=\"getLabelForValue(getFieldValue(rowData, col.name), col.options); else emptyTemplate\"\n                                >\n                                    <span> {{ getLabelForValue(getFieldValue(rowData, col.name), col.options) }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                <ng-container *ngIf=\"col.mask && col.mask()\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name))\">\n                                        <span>{{ getFieldValue(rowData, col.name) | sMaskFormatter: col.mask() }}</span>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(col.mask && col.mask())\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name)); else emptyTemplate\">\n                                        <span>{{ getFieldValue(rowData, col.name) }}</span>\n                                    </ng-container>\n                                </ng-container>\n                            </ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n                <ng-template pTemplate=\"paginatorright\">\n                    <span [attr.data-hidden]=\"loading\">\n                        {{\n                            searchTotalRecordsLabel ||\n                                searchTotalRecords?.toString() + (searchTotalRecords === 1 ? recordLabel : recordsLabel)\n                        }}\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\"\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\"\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'\">{{ emptyFieldLabel }}</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\"\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\">{{ filterTitle }}</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\"\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\"\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\"\n                [description]=\"searchEmptyDescription\"\n                iconClass=\"fa fa-search\">\n            </s-empty-state>\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\"\n                [multiSortMeta]=\"multiSortMeta\"\n                [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n                [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n                (selectionChange)=\"onSelectionChange($event)\">\n                <ng-template pTemplate=\"colgroup\" let-columns>\n                    <colgroup>\n                        <col\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\" />\n                        <col\n                            *ngFor=\"let col of columns\"\n                            [style.width]=\"col.width\" />\n                    </colgroup>\n                </ng-template>\n                <ng-template pTemplate=\"header\" let-columns>\n                    <tr>\n                        <th\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\">\n                            <s-table-header-checkbox\n                                [useAllObject]=\"lookupRowProps ? false : true\"\n                                [rowProps]=\"lookupRowProps\">\n                            </s-table-header-checkbox>\n                        </th>\n                        <th\n                            [style.width]=\"col.width\"\n                            *ngFor=\"let col of columns\"\n                            [pSortableColumn]=\"col.name\"\n                            [pSortableColumnDisabled]=\"sortableColumnsDisabled?.includes(col.name)\">\n                            <div class=\"senior-header\">\n                                <span class=\"senior-header-title\">{{ col.label }}</span>\n                                <p-sortIcon\n                                    [field]=\"col.name\"\n                                    *ngIf=\"!sortableColumnsDisabled?.includes(col.name)\">\n                                </p-sortIcon>\n                            </div>\n                        </th>\n                    </tr>\n                </ng-template>\n                <ng-template\n                    pTemplate=\"body\"\n                    let-rowData\n                    let-columns\n                    let-rowIndex=\"rowIndex\">\n                    <tr\n                        sNavigation\n                        [pSelectableRow]=\"rowData\"\n                        [pSelectableRowIndex]=\"rowIndex\"\n                        sDoubleClick (onDoubleClick)=\"onTableRowDoubleClick(rowData)\">\n                        <td\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\"\n                            tabindex=\"0\">\n                            <p-tableCheckbox\n                                [value]=\"rowData\"\n                                [pSelectableRow]=\"rowData\">\n                            </p-tableCheckbox>\n                        </td>\n                        <td\n                            [style.width]=\"col['width']\"\n                            *ngFor=\"let col of searchGridFields\"\n                            [ngSwitch]=\"col.type\"\n                            tabindex=\"0\">\n                            <ng-container *ngSwitchCase=\"'Boolean'\">\n                                <ng-container *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getBooleanLabel(rowData, col.name, col.optionsLabel) }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Date'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate: col.calendarLocaleOptions?.dateFormat || \"L\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'DateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'LocalDateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Time'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedTime: col.calendarLocaleOptions?.dateFormat || \"LTS\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Double'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedNumber: getScale(col.scale) | 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) | localizedCurrency | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Number'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getNumberMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Enum'\">\n                                <ng-container\n                                    *ngIf=\"getLabelForValue(getFieldValue(rowData, col.name), col.options); else emptyTemplate\"\n                                >\n                                    <span> {{ getLabelForValue(getFieldValue(rowData, col.name), col.options) }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                <ng-container *ngIf=\"col.mask && col.mask()\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name))\">\n                                        <span>{{ getFieldValue(rowData, col.name) | sMaskFormatter: col.mask() }}</span>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(col.mask && col.mask())\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name)); else emptyTemplate\">\n                                        <span>{{ getFieldValue(rowData, col.name) }}</span>\n                                    </ng-container>\n                                </ng-container>\n                            </ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n                <ng-template pTemplate=\"paginatorright\">\n                    <span [attr.data-hidden]=\"loading\">\n                        {{\n                            searchTotalRecordsLabel ||\n                                searchTotalRecords?.toString() + (searchTotalRecords === 1 ? recordLabel : recordsLabel)\n                        }}\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\"\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\"\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'\">{{ emptyFieldLabel }}</span>\n</ng-template>\n",
             providers: [
                 {
                     provide: NG_VALUE_ACCESSOR,
@@ -5185,7 +5190,7 @@ var LookupFieldComponent = /** @class */ (function () {
     ], LookupFieldComponent.prototype, "formControl", void 0);
     LookupFieldComponent = __decorate([
         Component({
-            template: "<div\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\">\n    <s-lookup\n        [id]=\"(field.id || field.name)\"\n        [multiple]=\"field.multiple\"\n        [formControl]=\"formControl\"\n        [lookupSuggestions]=\"field.lookupSuggestions\"\n        [dataKey]=\"field.dataKey\"\n        [placeholder]=\"field.placeholder\"\n        [searchFields]=\"field.searchFields\"\n        [searchGridFields]=\"field.searchGridFields\"\n        [searchGridData]=\"field.gridData\"\n        (onLookupRequest)=\"field.onLookupRequest($event)\"\n        (onSearchRequest)=\"field.onSearchRequest($event)\"\n        [lookupDisplayField]=\"field.lookupDisplayField\"\n        [searchTotalRecords]=\"field.searchTotalRecords\"\n        [searchTotalRecordsLabel]=\"field.searchTotalRecordsLabel\"\n        [searchTitle]=\"field.searchTitle\"\n        [selectLabel]=\"field.selectLabel\"\n        [searchEmptyTitle]=\"field.searchEmptyTitle\"\n        [filterLabel]=\"field.filterLabel\"\n        [filterTitle]=\"field.filterTitle\"\n        [clearLabel]=\"field.clearLabel\"\n        [cancelLabel]=\"field.cancelLabel\"\n        (onSelect)=\"field.onSelect($event)\"\n        (onUnselect)=\"field.onUnselect($event)\"\n        (onClear)=\"field.onClear ? field.onClear($event) : null\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n        [lookupAppendTo]=\"field.appendTo\"\n        [lookupEmptyMessage]=\"field.emptyMessage\"\n        [recordLabel]=\"field.recordLabel\"\n        [recordsLabel]=\"field.recordsLabel\">\n    </s-lookup>\n</div>\n"
+            template: "<div\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\">\n    <s-lookup\n        [id]=\"(field.id || field.name)\"\n        [multiple]=\"field.multiple\"\n        [formControl]=\"formControl\"\n        [lookupSuggestions]=\"field.lookupSuggestions\"\n        [dataKey]=\"field.dataKey\"\n        [placeholder]=\"field.placeholder\"\n        [searchFields]=\"field.searchFields\"\n        [searchGridFields]=\"field.searchGridFields\"\n        [searchGridData]=\"field.gridData\"\n        (onLookupRequest)=\"field.onLookupRequest($event)\"\n        (onSearchRequest)=\"field.onSearchRequest($event)\"\n        [lookupDisplayField]=\"field.lookupDisplayField\"\n        [searchTotalRecords]=\"field.searchTotalRecords\"\n        [searchTotalRecordsLabel]=\"field.searchTotalRecordsLabel\"\n        [searchTitle]=\"field.searchTitle\"\n        [selectLabel]=\"field.selectLabel\"\n        [searchEmptyTitle]=\"field.searchEmptyTitle\"\n        [filterLabel]=\"field.filterLabel\"\n        [filterTitle]=\"field.filterTitle\"\n        [clearLabel]=\"field.clearLabel\"\n        [cancelLabel]=\"field.cancelLabel\"\n        (onSelect)=\"field.onSelect($event)\"\n        (onUnselect)=\"field.onUnselect($event)\"\n        (onClear)=\"field.onClear ? field.onClear($event) : null\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n        [lookupAppendTo]=\"field.appendTo\"\n        [lookupEmptyMessage]=\"field.emptyMessage\"\n        [recordLabel]=\"field.recordLabel\"\n        [recordsLabel]=\"field.recordsLabel\"\n        [autocompleteForceSelection]=\"field.autocompleteForceSelection\">\n    </s-lookup>\n</div>\n"
         })
     ], LookupFieldComponent);
     return LookupFieldComponent;
@@ -6795,9 +6800,11 @@ var ImageCropperComponent = /** @class */ (function () {
             this.croppedCanvas.emit();
         }
         else {
-            var croppedCanvas = this.rounded ? this.getRoundedCanvas(this.cropper.getCroppedCanvas()) : this.cropper.getCroppedCanvas();
-            this.croppedCanvas.emit(croppedCanvas);
-            this.croppedImage.emit(croppedCanvas.toDataURL());
+            var _croppedCanvas = this.rounded
+                ? this.getRoundedCanvas(this.cropper.getCroppedCanvas())
+                : this.cropper.getCroppedCanvas();
+            this.croppedCanvas.emit(_croppedCanvas);
+            this.croppedImage.emit(_croppedCanvas.toDataURL());
         }
         this.visibleChange.emit(false);
     };
@@ -6897,9 +6904,9 @@ var ImageCropperComponent = /** @class */ (function () {
     ImageCropperComponent = ImageCropperComponent_1 = __decorate([
         Component({
             selector: "s-image-cropper",
-            template: "<div [id]=\"id\">\n    <p-dialog styleClass=\"s-image-cropper {{rounded ? 's-image-cropper--rounded' : ''}}\" [header]=\"headerSection ? '' : header\"\n        [visible]=\"visible\" (visibleChange)=\"onModalVisibleChange($event)\" [modal]=\"true\" [blockScroll]=\"true\"\n        [draggable]=\"false\" [resizable]=\"false\" [closeOnEscape]=\"allowCancel\" [closable]=\"allowCancel\" appendTo=\"body\">\n\n        <p-header *ngIf=\"headerSection\">\n            <ng-content select=\"s-header\"></ng-content>\n        </p-header>\n\n        <s-empty-state [id]=\"id + '-empty-state'\" *ngIf=\"!imageSource\" [title]=\"emptyStateTitle\" [iconClass]=\"emptyStateIconClass\"\n            [primaryActionLabel]=\"emptyStateActionLabel\" (primaryAction)=\"onChangeImage()\"></s-empty-state>\n\n        <div [attr.data-hidden]=\"!imageSource\" class=\"image-container\">\n            <img [id]=\"id + '-cropper'\" #image [src]=\"imageSource || ''\" />\n        </div>\n\n        <p-footer>\n            <div class=\"ui-fluid\" *ngIf=\"!footerSection\">\n                <div class=\"ui-g button-container\">\n\n                    <div *ngIf=\"allowCancel\" class=\"ui-sm-12 ui-md-3 ui-lg-2 ui-xl-2\">\n                        <s-button [id]=\"id + '-cancel-button'\" type=\"button\" priority=\"link\" [label]=\"cancelLabel\"\n                            (onClick)=\"onCancel()\"></s-button>\n                    </div>\n\n                    <div *ngIf=\"imageSource && allowRemove\" class=\"ui-sm-12 ui-md-3 ui-lg-2 ui-xl-2\">\n                        <s-button [id]=\"id + '-remove-button'\" type=\"button\" priority=\"secondary\" [label]=\"removeLabel\"\n                            (onClick)=\"onRemoveImage()\"></s-button>\n                    </div>\n\n                    <div *ngIf=\"imageSource && allowSelectAnother\" class=\"ui-sm-12 ui-md-3 ui-lg-2 ui-xl-2\">\n                        <s-button [id]=\"id + '-select-another-button'\" type=\"button\" priority=\"secondary\" [label]=\"selectAnotherLabel\"\n                            (onClick)=\"onChangeImage()\"></s-button>\n                    </div>\n\n                    <div class=\"ui-sm-12 ui-md-3 ui-lg-2 ui-xl-2\">\n                        <s-button [id]=\"id + '-crop-button'\" type=\"button\" [label]=\"cropLabel\" (onClick)=\"onCropImage()\"></s-button>\n                    </div>\n\n                </div>\n            </div>\n\n            <ng-content select=\"s-footer\" *ngIf=\"footerSection\"></ng-content>\n        </p-footer>\n    </p-dialog>\n</div>",
+            template: "<div [id]=\"id\">\n    <p-dialog\n        styleClass=\"s-image-cropper {{rounded ? 's-image-cropper--rounded' : ''}}\"\n        [header]=\"headerSection ? '' : header\"\n        [visible]=\"visible\"\n        (visibleChange)=\"onModalVisibleChange($event)\"\n        [modal]=\"true\"\n        [blockScroll]=\"true\"\n        [draggable]=\"false\"\n        [resizable]=\"false\"\n        [closeOnEscape]=\"allowCancel\"\n        [closable]=\"allowCancel\"\n        appendTo=\"body\">\n\n        <p-header *ngIf=\"headerSection\">\n            <ng-content select=\"s-header\"></ng-content>\n        </p-header>\n\n        <s-empty-state\n            [id]=\"id + '-empty-state'\"\n            *ngIf=\"!imageSource\"\n            [title]=\"emptyStateTitle\"\n            [iconClass]=\"emptyStateIconClass\"\n            [primaryActionLabel]=\"emptyStateActionLabel\"\n            (primaryAction)=\"onChangeImage()\">\n        </s-empty-state>\n\n        <div [attr.data-hidden]=\"!imageSource\" class=\"image-container\">\n            <img\n                [id]=\"id + '-cropper'\"\n                #image\n                [src]=\"imageSource || ''\"\n                alt=\"cropped image\"/>\n        </div>\n\n        <p-footer>\n            <div class=\"ui-fluid\" *ngIf=\"!footerSection\">\n                <div class=\"ui-g button-container\">\n\n                    <div *ngIf=\"allowCancel\" class=\"ui-sm-12 ui-md-3 ui-lg-2 ui-xl-2\">\n                        <s-button\n                            [id]=\"id + '-cancel-button'\"\n                            type=\"button\"\n                            priority=\"link\"\n                            [label]=\"cancelLabel\"\n                            (onClick)=\"onCancel()\">\n                        </s-button>\n                    </div>\n\n                    <div *ngIf=\"imageSource && allowRemove\" class=\"ui-sm-12 ui-md-3 ui-lg-2 ui-xl-2\">\n                        <s-button\n                            [id]=\"id + '-remove-button'\"\n                            type=\"button\"\n                            priority=\"secondary\"\n                            [label]=\"removeLabel\"\n                            (onClick)=\"onRemoveImage()\">\n                        </s-button>\n                    </div>\n\n                    <div *ngIf=\"imageSource && allowSelectAnother\" class=\"ui-sm-12 ui-md-3 ui-lg-2 ui-xl-2\">\n                        <s-button\n                            [id]=\"id + '-select-another-button'\"\n                            type=\"button\"\n                            priority=\"secondary\"\n                            [label]=\"selectAnotherLabel\"\n                            (onClick)=\"onChangeImage()\">\n                        </s-button>\n                    </div>\n\n                    <div class=\"ui-sm-12 ui-md-3 ui-lg-2 ui-xl-2\">\n                        <s-button\n                            [id]=\"id + '-crop-button'\"\n                            type=\"button\"\n                            [label]=\"cropLabel\"\n                            (onClick)=\"onCropImage()\">\n                        </s-button>\n                    </div>\n                </div>\n            </div>\n\n            <ng-content select=\"s-footer\" *ngIf=\"footerSection\"></ng-content>\n        </p-footer>\n    </p-dialog>\n</div>",
             encapsulation: ViewEncapsulation.None,
-            styles: ["/*!\n * Cropper.js v1.4.1\n * https://fengyuanchen.github.io/cropperjs\n *\n * Copyright 2015-present Chen Fengyuan\n * Released under the MIT license\n *\n * Date: 2018-07-15T09:54:43.167Z\n */.cropper-container{-moz-user-select:none;-ms-touch-action:none;-ms-user-select:none;-webkit-user-select:none;direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:rgba(51,153,255,.75) solid 1px;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:\" \";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:\" \";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}", ".s-image-cropper{border-radius:0!important;top:10%!important;height:80%!important;max-width:100%!important;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column}.s-image-cropper .ui-dialog-content{overflow:hidden;height:auto!important;-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.s-image-cropper .ui-dialog-footer,.s-image-cropper .ui-dialog-header{-ms-flex-negative:0;flex-shrink:0;direction:ltr}.s-image-cropper .image-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%}.s-image-cropper img{max-width:100%;max-height:100%}.s-image-cropper .button-container{-ms-flex-flow:wrap-reverse;flex-flow:wrap-reverse;-ms-flex-pack:end;justify-content:flex-end}.s-image-cropper .cropper-view-box{outline:#fff dashed 2px}.s-image-cropper .cropper-line{opacity:0}.s-image-cropper .cropper-point{background-color:#fff;opacity:1;height:15px;width:15px;border-radius:50%}.s-image-cropper .cropper-point.point-e{right:-8.5px;top:calc(50% - 4.5px)}.s-image-cropper .cropper-point.point-n{top:-8.5px;left:calc(50% - 4.5px)}.s-image-cropper .cropper-point.point-w{left:-8.5px;top:calc(50% - 4.5px)}.s-image-cropper .cropper-point.point-s{bottom:-8.5px;left:calc(50% - 4.5px)}.s-image-cropper .cropper-point.point-ne{right:-8.5px;top:-8.5px}.s-image-cropper .cropper-point.point-nw{left:-8.5px;top:-8.5px}.s-image-cropper .cropper-point.point-sw{left:-8.5px;bottom:-8.5px}.s-image-cropper .cropper-point.point-se{right:-8.5px;bottom:-8.5px}.s-image-cropper--rounded .cropper-face,.s-image-cropper--rounded .cropper-view-box{border-radius:50%}.s-image-cropper--rounded .cropper-view-box{outline:rgba(255,255,255,.3) dashed 1px}.s-image-cropper--rounded .cropper-view-box:after{border:2px dashed #fff;border-radius:50%;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}@media (max-width:767px){.s-image-cropper{border:none!important;top:0!important;left:0!important;width:100%!important;height:100%!important}}@media (min-width:768px){.s-image-cropper{left:10%!important;width:80%!important}}@media (min-width:1200px){.s-image-cropper{left:20%!important;width:60%!important}}"]
+            styles: ["/*!\n * Cropper.js v1.4.1\n * https://fengyuanchen.github.io/cropperjs\n *\n * Copyright 2015-present Chen Fengyuan\n * Released under the MIT license\n *\n * Date: 2018-07-15T09:54:43.167Z\n */.cropper-container{-moz-user-select:none;-ms-touch-action:none;-ms-user-select:none;-webkit-user-select:none;direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:rgba(51,153,255,.75) solid 1px;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:\" \";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:\" \";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}", ".s-image-cropper{border-radius:0!important;height:80%!important;max-width:100%!important;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column}.s-image-cropper .ui-dialog-content{overflow:hidden;height:auto!important;-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.s-image-cropper .ui-dialog-footer,.s-image-cropper .ui-dialog-header{-ms-flex-negative:0;flex-shrink:0;direction:ltr}.s-image-cropper .image-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%}.s-image-cropper img{max-width:100%;max-height:100%}.s-image-cropper .button-container{-ms-flex-flow:wrap-reverse;flex-flow:wrap-reverse;-ms-flex-pack:end;justify-content:flex-end}.s-image-cropper .cropper-view-box{outline:#fff dashed 2px}.s-image-cropper .cropper-line{opacity:0}.s-image-cropper .cropper-point{background-color:#fff;opacity:1;height:15px;width:15px;border-radius:50%}.s-image-cropper .cropper-point.point-e{right:-8.5px;top:calc(50% - 4.5px)}.s-image-cropper .cropper-point.point-n{top:-8.5px;left:calc(50% - 4.5px)}.s-image-cropper .cropper-point.point-w{left:-8.5px;top:calc(50% - 4.5px)}.s-image-cropper .cropper-point.point-s{bottom:-8.5px;left:calc(50% - 4.5px)}.s-image-cropper .cropper-point.point-ne{right:-8.5px;top:-8.5px}.s-image-cropper .cropper-point.point-nw{left:-8.5px;top:-8.5px}.s-image-cropper .cropper-point.point-sw{left:-8.5px;bottom:-8.5px}.s-image-cropper .cropper-point.point-se{right:-8.5px;bottom:-8.5px}.s-image-cropper--rounded .cropper-face,.s-image-cropper--rounded .cropper-view-box{border-radius:50%}.s-image-cropper--rounded .cropper-view-box{outline:rgba(255,255,255,.3) dashed 1px}.s-image-cropper--rounded .cropper-view-box:after{border:2px dashed #fff;border-radius:50%;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}@media (max-width:767px){.s-image-cropper{border:none!important;top:0!important;left:0!important;width:100%!important;height:100%!important}}@media (min-width:768px){.s-image-cropper{width:80%!important}}@media (min-width:1200px){.s-image-cropper{width:60%!important}}"]
         })
     ], ImageCropperComponent);
     return ImageCropperComponent;
@@ -7072,12 +7079,13 @@ var ThumbnailComponent = /** @class */ (function () {
     };
     ThumbnailComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
-        if (this.imgEl)
+        if (this.imgEl) {
             this.imgEl.nativeElement.addEventListener("load", function () {
                 from(_this.thumbnailService.getBinaryFile(_this.imgEl.nativeElement))
                     .pipe(takeUntil(_this.ngUnsubscribe))
                     .subscribe(function (orientation) { return (_this.orientation = orientation); });
             });
+        }
     };
     var ThumbnailComponent_1;
     ThumbnailComponent.nextId = 0;
@@ -7120,7 +7128,7 @@ var ThumbnailComponent = /** @class */ (function () {
     ThumbnailComponent = ThumbnailComponent_1 = __decorate([
         Component({
             selector: "s-thumbnail",
-            template: "<div [id]=\"id\" class=\"thumbnail-container thumbnail-container--{{size}}\" [ngClass]=\"{'thumbnail-container--with-action': hasAction, 'thumbnail-container--brand': isBrand}\">\n    <div [id]=\"id + '-image-container'\" *ngIf=\"imageSource || imageFallback\" class=\"image-container\" [ngClass]=\"{'image-container--rounded': !isBrand}\">\n        <img #img [id]=\"id + '-image'\" (error)=\"fallback = true\" [src]=\"imageSource\"\n            [alt]=\"imageAlt\" *ngIf=\"!fallback\" [ngClass]=\"{\n                'smallThumbnail': isTile,\n                'exif-orientation-2': orientation == 2,\n                'exif-orientation-3': orientation == 3,\n                'exif-orientation-4': orientation == 4,\n                'exif-orientation-5': orientation == 5,\n                'exif-orientation-6': orientation == 6,\n                'exif-orientation-7': orientation == 7,\n                'exif-orientation-8': orientation == 8\n            }\"/>\n\n        <img #img [id]=\"id + '-image-fallback'\" (error)=\"imageFallback = undefined\" [src]=\"imageFallback\"\n            [alt]=\"imageAlt\" *ngIf=\"fallback && imageFallback\" [ngClass]=\"{\n                'smallThumbnail': isTile,\n                'exif-orientation-2': orientation == 2,\n                'exif-orientation-3': orientation == 3,\n                'exif-orientation-4': orientation == 4,\n                'exif-orientation-5': orientation == 5,\n                'exif-orientation-6': orientation == 6,\n                'exif-orientation-7': orientation == 7,\n                'exif-orientation-8': orientation == 8\n            }\"/>\n\n        <i *ngIf=\"fallback && !imageFallback\" ngClass=\"far fa-image\" class=\"fallback-img-color\"></i>\n    </div>\n    <div [id]=\"id + '-action-icon-container'\" *ngIf=\"hasAction\" class=\"action-icon-container action-icon-container--{{size}}\">\n        <span [id]=\"id + '-action-icon'\" [class]=\"actionIconClass\" aria-hidden=\"true\"></span>\n    </div>\n    <div [id]=\"id + '-icon-container'\" *ngIf=\"!imageSource && !imageFallback\" class=\"icon-container icon-container--{{size}}\" [ngClass]=\"{'image-container--rounded': !isBrand}\">\n        <span [id]=\"id + '-icon'\" [class]=\"iconClass\" aria-hidden=\"true\"></span>\n    </div>\n\n    <ng-content></ng-content>\n</div>\n",
+            template: "<div\n    [id]=\"id\"\n    class=\"thumbnail-container thumbnail-container--{{size}}\"\n    [ngClass]=\"{\n        'thumbnail-container--with-action': hasAction,\n        'thumbnail-container--brand': isBrand\n    }\">\n    <div\n        [id]=\"id + '-image-container'\"\n        *ngIf=\"imageSource || imageFallback\"\n        class=\"image-container\"\n        [ngClass]=\"{\n            'image-container--rounded': !isBrand\n        }\">\n        <img\n            #img\n            [id]=\"id + '-image'\"\n            (error)=\"fallback = true\"\n            [src]=\"imageSource\"\n            [alt]=\"imageAlt\"\n            *ngIf=\"!fallback\"\n            [ngClass]=\"{\n                'smallThumbnail': isTile,\n                'exif-orientation-2': orientation == 2,\n                'exif-orientation-3': orientation == 3,\n                'exif-orientation-4': orientation == 4,\n                'exif-orientation-5': orientation == 5,\n                'exif-orientation-6': orientation == 6,\n                'exif-orientation-7': orientation == 7,\n                'exif-orientation-8': orientation == 8\n            }\"/>\n\n        <img\n            #img\n            [id]=\"id + '-image-fallback'\"\n            (error)=\"imageFallback = undefined\"\n            [src]=\"imageFallback\"\n            [alt]=\"imageAlt\"\n            *ngIf=\"fallback && imageFallback\"\n            [ngClass]=\"{\n                'smallThumbnail': isTile,\n                'exif-orientation-2': orientation == 2,\n                'exif-orientation-3': orientation == 3,\n                'exif-orientation-4': orientation == 4,\n                'exif-orientation-5': orientation == 5,\n                'exif-orientation-6': orientation == 6,\n                'exif-orientation-7': orientation == 7,\n                'exif-orientation-8': orientation == 8\n            }\"/>\n\n        <i\n            *ngIf=\"fallback && !imageFallback\"\n            ngClass=\"far fa-image\"\n            class=\"fallback-img-color\">\n        </i>\n    </div>\n    <div\n        [id]=\"id + '-action-icon-container'\"\n        *ngIf=\"hasAction\"\n        class=\"action-icon-container action-icon-container--{{size}}\">\n        <span\n            [id]=\"id + '-action-icon'\"\n            [class]=\"actionIconClass\"\n            aria-hidden=\"true\">\n        </span>\n    </div>\n    <div\n        [id]=\"id + '-icon-container'\"\n        *ngIf=\"!imageSource && !imageFallback\"\n        class=\"icon-container icon-container--{{size}}\"\n        [ngClass]=\"{'image-container--rounded': !isBrand}\">\n        <span\n            [id]=\"id + '-icon'\"\n            [class]=\"iconClass\"\n            aria-hidden=\"true\">\n        </span>\n    </div>\n\n    <ng-content></ng-content>\n</div>\n",
             styles: [":host{display:inline-block}.thumbnail-container{color:#fff;position:relative;text-align:center}.thumbnail-container--large{font-size:50px;height:100px;width:100px}.thumbnail-container--large.thumbnail-container--brand{width:200px}.thumbnail-container--medium{font-size:40px;height:70px;width:70px}.thumbnail-container--medium.thumbnail-container--brand{width:140px}.thumbnail-container--small{font-size:22px;height:40px;width:40px}.thumbnail-container--small.thumbnail-container--brand{width:80px}.thumbnail-container--with-action{cursor:pointer}.action-icon-container{background-color:#428bca;border-radius:50%;bottom:0;position:absolute;right:0}.action-icon-container--large,.action-icon-container--medium{font-size:10pt;height:25px;padding:3px;width:25px}.action-icon-container--small{font-size:6pt;height:16px;padding:2px;width:16px}.icon-container,.image-container{-ms-flex-align:center;align-items:center;height:100%;overflow:hidden;width:100%}.icon-container--rounded,.image-container--rounded{border-radius:50%}.smallThumbnail{height:40px!important}.icon-container{background-color:#ccc;color:#fff}.icon-container--large{line-height:98px}.icon-container--medium{line-height:68px}.icon-container--small{line-height:38px}.image-container{-ms-flex-align:center;align-items:center;background-color:#ccc;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.image-container img{width:100%}.image-container img.exif-orientation-2{transform:rotateY(180deg)}.image-container img.exif-orientation-3{transform:rotate(180deg)}.image-container img.exif-orientation-4{transform:rotate(180deg) rotateY(180deg)}.image-container img.exif-orientation-5{transform:rotate(270deg) rotateY(180deg)}.image-container img.exif-orientation-6{transform:rotate(90deg)}.image-container img.exif-orientation-7{transform:rotate(90deg) rotateY(180deg)}.image-container img.exif-orientation-8{transform:rotate(270deg)}.fallback-img-color{color:#fff}"]
         })
     ], ThumbnailComponent);
@@ -8284,6 +8292,224 @@ var TileModule = /** @class */ (function () {
     return TileModule;
 }());
 
+var FileValidation;
+(function (FileValidation) {
+    FileValidation["MaxFileSize"] = "maxFileSize";
+    FileValidation["MaxFileLimit"] = "maxFileLimit";
+    FileValidation["TypeInvalid"] = "typeInvalid";
+    FileValidation["UnsupportedExtension"] = "unsupportedExtension";
+})(FileValidation || (FileValidation = {}));
+
+var ProfilePicturePickerComponent = /** @class */ (function () {
+    function ProfilePicturePickerComponent(imageCropperService) {
+        this.imageCropperService = imageCropperService;
+        this.aspectRatio = 1;
+        this.removeButtonLabel = "Remover";
+        this.changeButtonLabel = "Alterar foto";
+        this.supportedExtensions = [];
+        this.changedImage = new EventEmitter();
+        this.invalidFile = new EventEmitter();
+    }
+    ProfilePicturePickerComponent.prototype.ngOnInit = function () {
+        this._normalizeSuportedExtensions();
+    };
+    ProfilePicturePickerComponent.prototype.onDragOver = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    ProfilePicturePickerComponent.prototype.onDragLeave = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    ProfilePicturePickerComponent.prototype.onDrop = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        var files = [];
+        var dataTransferFiles = event.dataTransfer.files;
+        for (var i = 0; i < dataTransferFiles.length; i++) {
+            files.push(dataTransferFiles.item(i));
+        }
+        this._showImageCropper(files);
+    };
+    // Verificando o redimensionamento para ajustar o design para ficar responsivo.
+    ProfilePicturePickerComponent.prototype.onResize = function () {
+        if (this.uploadPicture && this.info && this.thumbnail) {
+            var uploadPictureWidth = this._getWidthElement(this.uploadPicture);
+            var infoWidth = this._getWidthElement(this.info);
+            var thumbnailWidth = this._getWidthElement(this.thumbnail);
+            if (thumbnailWidth + infoWidth > uploadPictureWidth) {
+                this.uploadPicture.nativeElement.classList.add("upload-picture--small");
+            }
+            else {
+                this.uploadPicture.nativeElement.classList.remove("upload-picture--small");
+            }
+        }
+    };
+    ProfilePicturePickerComponent.prototype.selectPhoto = function () {
+        var fileInputElement = this.fileInput.nativeElement;
+        fileInputElement.value = "";
+        fileInputElement.click();
+    };
+    ProfilePicturePickerComponent.prototype.removePhoto = function () {
+        var fileInputElement = this.fileInput.nativeElement;
+        fileInputElement.value = "";
+        this.image = "";
+    };
+    ProfilePicturePickerComponent.prototype.photoSelected = function (event) {
+        this._showImageCropper(event.srcElement.files);
+    };
+    ProfilePicturePickerComponent.prototype._showImageCropper = function (files) {
+        var _this = this;
+        if (!this._validateData(files)) {
+            return;
+        }
+        var file = files[0];
+        var fileReader = new FileReader();
+        fileReader.readAsDataURL(file);
+        fileReader.onloadend = function (fileEvent) {
+            _this.imageCropperService.show(__assign({ imageSource: fileEvent.target.result, croppedImage: function (image) {
+                    _this.image = image;
+                    _this.changedImage.emit(image);
+                }, changeImage: function () { return _this.selectPhoto(); }, allowSelectAnother: false, aspectRatio: _this.aspectRatio }, _this.cropperLabelsConfig));
+        };
+    };
+    ProfilePicturePickerComponent.prototype._normalizeSuportedExtensions = function () {
+        this.supportedExtensions = this.supportedExtensions
+            .map(function (extension) { return extension.replace(".", "").toLocaleLowerCase(); });
+    };
+    ProfilePicturePickerComponent.prototype._validateData = function (files) {
+        if (!files.length) {
+            return false;
+        }
+        if (files.length > 1) {
+            this.invalidFile.emit({ file: null, validation: FileValidation.MaxFileLimit });
+            return false;
+        }
+        var file = files[0];
+        if (!file.type.includes("image")) {
+            this.invalidFile.emit({ file: file, validation: FileValidation.TypeInvalid });
+            return false;
+        }
+        if (!this._validateFileExtension(file)) {
+            this.invalidFile.emit({ file: file, validation: FileValidation.UnsupportedExtension });
+            return false;
+        }
+        if (!this._validateFileSize(file)) {
+            this.invalidFile.emit({ file: file, validation: FileValidation.MaxFileSize });
+            return false;
+        }
+        return true;
+    };
+    ProfilePicturePickerComponent.prototype._validateFileExtension = function (file) {
+        var _a;
+        if ((_a = this.supportedExtensions) === null || _a === void 0 ? void 0 : _a.length) {
+            var extension = file.name.split(".").pop().toLowerCase();
+            return this.supportedExtensions.includes(extension);
+        }
+        return true;
+    };
+    ProfilePicturePickerComponent.prototype._validateFileSize = function (file) {
+        if (this.maxFileSize) {
+            return file.size > this.maxFileSize;
+        }
+        return true;
+    };
+    ProfilePicturePickerComponent.prototype._getWidthElement = function (element) {
+        var _a = element.nativeElement.getBoundingClientRect(), left = _a.left, right = _a.right;
+        return right - left;
+    };
+    ProfilePicturePickerComponent.ctorParameters = function () { return [
+        { type: ImageCropperService }
+    ]; };
+    __decorate([
+        Input()
+    ], ProfilePicturePickerComponent.prototype, "simpleTitle", void 0);
+    __decorate([
+        Input()
+    ], ProfilePicturePickerComponent.prototype, "actionTitle", void 0);
+    __decorate([
+        Input()
+    ], ProfilePicturePickerComponent.prototype, "subtitle", void 0);
+    __decorate([
+        Input()
+    ], ProfilePicturePickerComponent.prototype, "aspectRatio", void 0);
+    __decorate([
+        Input()
+    ], ProfilePicturePickerComponent.prototype, "cropperLabelsConfig", void 0);
+    __decorate([
+        Input()
+    ], ProfilePicturePickerComponent.prototype, "removeButtonLabel", void 0);
+    __decorate([
+        Input()
+    ], ProfilePicturePickerComponent.prototype, "changeButtonLabel", void 0);
+    __decorate([
+        Input()
+    ], ProfilePicturePickerComponent.prototype, "maxFileSize", void 0);
+    __decorate([
+        Input()
+    ], ProfilePicturePickerComponent.prototype, "accept", void 0);
+    __decorate([
+        Input()
+    ], ProfilePicturePickerComponent.prototype, "supportedExtensions", void 0);
+    __decorate([
+        ViewChild("uploadPicture")
+    ], ProfilePicturePickerComponent.prototype, "uploadPicture", void 0);
+    __decorate([
+        ViewChild("info")
+    ], ProfilePicturePickerComponent.prototype, "info", void 0);
+    __decorate([
+        ViewChild("thumbnail", { read: ElementRef })
+    ], ProfilePicturePickerComponent.prototype, "thumbnail", void 0);
+    __decorate([
+        ViewChild("fileInput", { read: ElementRef })
+    ], ProfilePicturePickerComponent.prototype, "fileInput", void 0);
+    __decorate([
+        Output()
+    ], ProfilePicturePickerComponent.prototype, "changedImage", void 0);
+    __decorate([
+        Output()
+    ], ProfilePicturePickerComponent.prototype, "invalidFile", void 0);
+    __decorate([
+        HostListener("dragover", ["$event"])
+    ], ProfilePicturePickerComponent.prototype, "onDragOver", null);
+    __decorate([
+        HostListener("dragleave", ["$event"])
+    ], ProfilePicturePickerComponent.prototype, "onDragLeave", null);
+    __decorate([
+        HostListener("drop", ["$event"])
+    ], ProfilePicturePickerComponent.prototype, "onDrop", null);
+    __decorate([
+        HostListener("window:resize")
+    ], ProfilePicturePickerComponent.prototype, "onResize", null);
+    ProfilePicturePickerComponent = __decorate([
+        Component({
+            selector: "s-profile-picture-picker",
+            template: "<input #fileInput [accept]=\"accept\" class=\"file-input\" type=\"file\" (change)=\"photoSelected($event)\">\n<div #uploadPicture class=\"upload-picture\">\n   <s-thumbnail\n      #thumbnail\n      iconClass=\"far fa-user\"\n      [imageSource]=\"image\"\n      [hasAction]=\"!image\"\n      (click)=\"selectPhoto()\">\n   </s-thumbnail>\n   <div #info class=\"info\">\n      <ng-container *ngIf=\"image; then withImage; else noImage\"></ng-container>\n      <p class=\"subtitle\">{{ subtitle }}</p>\n   </div>\n</div>\n\n<ng-template #withImage>\n   <div class=\"buttons\">\n      <s-button\n         [label]=\"changeButtonLabel\"\n         priority=\"primary\"\n         (onClick)=\"selectPhoto()\">\n      </s-button>\n      <s-button\n         [label]=\"removeButtonLabel\"\n         priority=\"secondary\"\n         (onClick)=\"removePhoto()\">\n      </s-button>\n   </div>\n</ng-template>\n\n<ng-template #noImage>\n   <p class=\"title\">\n      {{ simpleTitle }}\n      <span\n         class=\"action-title\"\n         (click)=\"selectPhoto()\">\n         {{ actionTitle }}\n      </span>\n   </p>\n</ng-template>",
+            styles: [".file-input{display:none}.upload-picture{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.upload-picture .info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:12px 20px;-ms-flex-align:start;align-items:flex-start}.upload-picture .info .title{font-family:\"Open Sans\",sans-serif;font-weight:700;font-size:.875rem;line-height:150%;color:#333}.upload-picture .info .title .action-title{cursor:pointer;color:#428bca}.upload-picture .info .buttons{display:-ms-flexbox;display:flex;gap:8px}.upload-picture .info .buttons s-button{margin:0}.upload-picture .info .subtitle{padding:6px 0;font-family:\"Open Sans\",sans-serif;font-weight:400;font-size:.75rem;line-height:150%;color:#697882;text-align:center}.upload-picture--small .info{-ms-flex-align:center;align-items:center}.upload-picture--small .info .subtitle,.upload-picture--small .info .title{text-align:center}.upload-picture--small .info .buttons{-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}"]
+        })
+    ], ProfilePicturePickerComponent);
+    return ProfilePicturePickerComponent;
+}());
+
+var ProfilePicturePickerModule = /** @class */ (function () {
+    function ProfilePicturePickerModule() {
+    }
+    ProfilePicturePickerModule = __decorate([
+        NgModule({
+            imports: [
+                CommonModule,
+                ButtonModule,
+                ThumbnailModule,
+                ImageCropperModule,
+            ],
+            declarations: [ProfilePicturePickerComponent],
+            exports: [ProfilePicturePickerComponent],
+            providers: [ImageCropperService],
+        })
+    ], ProfilePicturePickerModule);
+    return ProfilePicturePickerModule;
+}());
+
 var GlobalSearchSizeEnum;
 (function (GlobalSearchSizeEnum) {
     GlobalSearchSizeEnum["STANDARD"] = "STANDARD";
@@ -10071,5 +10297,5 @@ var CodeEditorModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { AngularComponentsModule, AutocompleteField, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FormField, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, ProductHeaderComponent, ProductHeaderModule, RadioButtonField, RationButtonOption, RowTogllerDirective, Section, SelectField, SelectOption, SidebarComponent, SidebarModule, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, TooltipModule, TooltipPosition, ValidateErrors, LocalizedCurrencyImpurePipe as ɵa, LocalizedBignumberPipe as ɵb, TextAreaFieldComponent as ɵba, TextFieldComponent as ɵbb, BooleanSwitchFieldComponent as ɵbc, DecimalField as ɵbe, StructureModule as ɵbf, HeaderComponent as ɵbg, FooterComponent as ɵbh, NumberLocaleOptions as ɵbi, ThumbnailService as ɵbj, TimelineItemModule as ɵbk, TimelineIconItemComponent as ɵbl, HorizontalTimelineModule as ɵbm, HorizontalTimelineComponent as ɵbn, VerticalTimelineModule as ɵbo, VerticalTimelineComponent as ɵbp, RangeLineComponent as ɵbq, CollapseOptionComponent as ɵbr, CollapsedItemsComponent as ɵbs, VerticalItemsComponent as ɵbt, InfiniteScrollModule as ɵbu, InfiniteScrollDirective as ɵbv, CustomTranslationsModule as ɵbw, CodeEditorComponent as ɵbx, CoreFacade as ɵby, CodeMirror6Core as ɵbz, LocalizedBignumberImpurePipe as ɵc, TooltipModule as ɵd, TooltipComponent as ɵe, TooltipDirective as ɵf, EmptyStateGoBackComponent as ɵg, InfoSignComponent as ɵh, TableColumnsComponent as ɵi, TablePagingComponent as ɵj, AutocompleteFieldComponent as ɵk, BooleanFieldComponent as ɵl, CalendarFieldComponent as ɵm, ChipsFieldComponent as ɵn, CurrencyFieldComponent as ɵo, DynamicFieldComponent as ɵp, DynamicFormDirective as ɵq, FieldsetComponent as ɵr, FileUploadComponent$1 as ɵs, LookupFieldComponent as ɵt, NumberFieldComponent as ɵu, BignumberFieldComponent as ɵv, RadioButtonComponent as ɵw, RowComponent as ɵx, SectionComponent as ɵy, SelectFieldComponent as ɵz };
+export { AngularComponentsModule, AutocompleteField, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FileValidation, FormField, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, ProductHeaderComponent, ProductHeaderModule, ProfilePicturePickerComponent, ProfilePicturePickerModule, RadioButtonField, RationButtonOption, RowTogllerDirective, Section, SelectField, SelectOption, SidebarComponent, SidebarModule, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, TooltipModule, TooltipPosition, ValidateErrors, LocalizedCurrencyImpurePipe as ɵa, LocalizedBignumberPipe as ɵb, TextAreaFieldComponent as ɵba, TextFieldComponent as ɵbb, BooleanSwitchFieldComponent as ɵbc, DecimalField as ɵbe, StructureModule as ɵbf, HeaderComponent as ɵbg, FooterComponent as ɵbh, NumberLocaleOptions as ɵbi, ThumbnailService as ɵbj, TimelineItemModule as ɵbk, TimelineIconItemComponent as ɵbl, HorizontalTimelineModule as ɵbm, HorizontalTimelineComponent as ɵbn, VerticalTimelineModule as ɵbo, VerticalTimelineComponent as ɵbp, RangeLineComponent as ɵbq, CollapseOptionComponent as ɵbr, CollapsedItemsComponent as ɵbs, VerticalItemsComponent as ɵbt, InfiniteScrollModule as ɵbu, InfiniteScrollDirective as ɵbv, CustomTranslationsModule as ɵbw, CodeEditorComponent as ɵbx, CoreFacade as ɵby, CodeMirror6Core as ɵbz, LocalizedBignumberImpurePipe as ɵc, TooltipModule as ɵd, TooltipComponent as ɵe, TooltipDirective as ɵf, EmptyStateGoBackComponent as ɵg, InfoSignComponent as ɵh, TableColumnsComponent as ɵi, TablePagingComponent as ɵj, AutocompleteFieldComponent as ɵk, BooleanFieldComponent as ɵl, CalendarFieldComponent as ɵm, ChipsFieldComponent as ɵn, CurrencyFieldComponent as ɵo, DynamicFieldComponent as ɵp, DynamicFormDirective as ɵq, FieldsetComponent as ɵr, FileUploadComponent$1 as ɵs, LookupFieldComponent as ɵt, NumberFieldComponent as ɵu, BignumberFieldComponent as ɵv, RadioButtonComponent as ɵw, RowComponent as ɵx, SectionComponent as ɵy, SelectFieldComponent as ɵz };
 //# sourceMappingURL=seniorsistemas-angular-components.js.map