@seniorsistemas/angular-components 16.2.2 → 16.3.0

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

@@ -1985,6 +1985,7 @@
             _this.selectLabel = "Selecionar";
             _this.recordLabel = " registro";
             _this.recordsLabel = " registros";
+            _this.autocompleteForceSelection = true;
             _this.onSelect = function (event) { };
             _this.onUnselect = function (event) { };
             Object.assign(_this, config);
@@ -2159,6 +2160,7 @@
         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";
@@ -2456,6 +2458,9 @@
         __decorate([
             core.Input()
         ], LookupComponent.prototype, "id", void 0);
+        __decorate([
+            core.Input()
+        ], LookupComponent.prototype, "autocompleteForceSelection", void 0);
         __decorate([
             core.Input()
         ], LookupComponent.prototype, "multiple", void 0);
@@ -2582,7 +2587,7 @@
         LookupComponent = LookupComponent_1 = __decorate([
             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]=\"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: forms.NG_VALUE_ACCESSOR,
@@ -5358,7 +5363,7 @@
         ], LookupFieldComponent.prototype, "formControl", void 0);
         LookupFieldComponent = __decorate([
             core.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;
@@ -6968,9 +6973,11 @@
                 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);
         };
@@ -7070,9 +7077,9 @@
         ImageCropperComponent = ImageCropperComponent_1 = __decorate([
             core.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: core.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;
@@ -7245,12 +7252,13 @@
         };
         ThumbnailComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
-            if (this.imgEl)
+            if (this.imgEl) {
                 this.imgEl.nativeElement.addEventListener("load", function () {
                     rxjs.from(_this.thumbnailService.getBinaryFile(_this.imgEl.nativeElement))
                         .pipe(operators.takeUntil(_this.ngUnsubscribe))
                         .subscribe(function (orientation) { return (_this.orientation = orientation); });
                 });
+            }
         };
         var ThumbnailComponent_1;
         ThumbnailComponent.nextId = 0;
@@ -7293,7 +7301,7 @@
         ThumbnailComponent = ThumbnailComponent_1 = __decorate([
             core.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);
@@ -8458,6 +8466,224 @@
     }());
 
 
+    (function (FileValidation) {
+        FileValidation["MaxFileSize"] = "maxFileSize";
+        FileValidation["MaxFileLimit"] = "maxFileLimit";
+        FileValidation["TypeInvalid"] = "typeInvalid";
+        FileValidation["UnsupportedExtension"] = "unsupportedExtension";
+    })(exports.FileValidation || (exports.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 core.EventEmitter();
+            this.invalidFile = new core.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: exports.FileValidation.MaxFileLimit });
+                return false;
+            }
+            var file = files[0];
+            if (!file.type.includes("image")) {
+                this.invalidFile.emit({ file: file, validation: exports.FileValidation.TypeInvalid });
+                return false;
+            }
+            if (!this._validateFileExtension(file)) {
+                this.invalidFile.emit({ file: file, validation: exports.FileValidation.UnsupportedExtension });
+                return false;
+            }
+            if (!this._validateFileSize(file)) {
+                this.invalidFile.emit({ file: file, validation: exports.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([
+            core.Input()
+        ], ProfilePicturePickerComponent.prototype, "simpleTitle", void 0);
+        __decorate([
+            core.Input()
+        ], ProfilePicturePickerComponent.prototype, "actionTitle", void 0);
+        __decorate([
+            core.Input()
+        ], ProfilePicturePickerComponent.prototype, "subtitle", void 0);
+        __decorate([
+            core.Input()
+        ], ProfilePicturePickerComponent.prototype, "aspectRatio", void 0);
+        __decorate([
+            core.Input()
+        ], ProfilePicturePickerComponent.prototype, "cropperLabelsConfig", void 0);
+        __decorate([
+            core.Input()
+        ], ProfilePicturePickerComponent.prototype, "removeButtonLabel", void 0);
+        __decorate([
+            core.Input()
+        ], ProfilePicturePickerComponent.prototype, "changeButtonLabel", void 0);
+        __decorate([
+            core.Input()
+        ], ProfilePicturePickerComponent.prototype, "maxFileSize", void 0);
+        __decorate([
+            core.Input()
+        ], ProfilePicturePickerComponent.prototype, "accept", void 0);
+        __decorate([
+            core.Input()
+        ], ProfilePicturePickerComponent.prototype, "supportedExtensions", void 0);
+        __decorate([
+            core.ViewChild("uploadPicture")
+        ], ProfilePicturePickerComponent.prototype, "uploadPicture", void 0);
+        __decorate([
+            core.ViewChild("info")
+        ], ProfilePicturePickerComponent.prototype, "info", void 0);
+        __decorate([
+            core.ViewChild("thumbnail", { read: core.ElementRef })
+        ], ProfilePicturePickerComponent.prototype, "thumbnail", void 0);
+        __decorate([
+            core.ViewChild("fileInput", { read: core.ElementRef })
+        ], ProfilePicturePickerComponent.prototype, "fileInput", void 0);
+        __decorate([
+            core.Output()
+        ], ProfilePicturePickerComponent.prototype, "changedImage", void 0);
+        __decorate([
+            core.Output()
+        ], ProfilePicturePickerComponent.prototype, "invalidFile", void 0);
+        __decorate([
+            core.HostListener("dragover", ["$event"])
+        ], ProfilePicturePickerComponent.prototype, "onDragOver", null);
+        __decorate([
+            core.HostListener("dragleave", ["$event"])
+        ], ProfilePicturePickerComponent.prototype, "onDragLeave", null);
+        __decorate([
+            core.HostListener("drop", ["$event"])
+        ], ProfilePicturePickerComponent.prototype, "onDrop", null);
+        __decorate([
+            core.HostListener("window:resize")
+        ], ProfilePicturePickerComponent.prototype, "onResize", null);
+        ProfilePicturePickerComponent = __decorate([
+            core.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([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    ButtonModule,
+                    ThumbnailModule,
+                    ImageCropperModule,
+                ],
+                declarations: [ProfilePicturePickerComponent],
+                exports: [ProfilePicturePickerComponent],
+                providers: [ImageCropperService],
+            })
+        ], ProfilePicturePickerModule);
+        return ProfilePicturePickerModule;
+    }());
+
+
     (function (GlobalSearchSizeEnum) {
         GlobalSearchSizeEnum["STANDARD"] = "STANDARD";
         GlobalSearchSizeEnum["MEDIUM"] = "MEDIUM";
@@ -10326,6 +10552,8 @@
     exports.Option = Option;
     exports.ProductHeaderComponent = ProductHeaderComponent;
     exports.ProductHeaderModule = ProductHeaderModule;
+    exports.ProfilePicturePickerComponent = ProfilePicturePickerComponent;
+    exports.ProfilePicturePickerModule = ProfilePicturePickerModule;
     exports.RadioButtonField = RadioButtonField;
     exports.RationButtonOption = RationButtonOption;
     exports.RowTogllerDirective = RowTogllerDirective;