@seniorsistemas/angular-components 16.2.3 → 16.3.1

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('primeng/breadcrumb'), require('@angular/router'), require('rxjs'), require('rxjs/operators'), require('primeng/tieredmenu'), require('primeng/tooltip'), require('primeng/dom'), require('primeng/calendar'), require('@angular/animations'), require('@angular/forms'), require('@angular/common/http'), require('angular2-hotkeys'), require('bignumber.js'), require('primeng/autocomplete'), require('primeng/dialog'), require('primeng/table'), require('@seniorsistemas/ng2-currency-mask'), require('@seniorsistemas/senior-platform-data'), require('moment'), require('ngx-cookie-service'), require('ng2-currency-mask'), require('primeng/button'), require('primeng/checkbox'), require('primeng/chips'), require('primeng/dropdown'), require('primeng/fieldset'), require('primeng/inputmask'), require('primeng/inputtext'), require('primeng/inputtextarea'), require('primeng/keyfilter'), require('primeng/multiselect'), require('primeng/inputswitch'), require('primeng/panel'), require('primeng/radiobutton'), require('primeng/progressbar'), require('@angular/platform-browser'), require('@ngx-translate/core'), require('cropperjs'), require('element-resize-detector'), require('@angular/cdk/a11y'), require('primeng/scrollpanel'), require('primeng/sidebar'), require('@codemirror/view'), require('@codemirror/state'), require('@codemirror/lint'), require('@codemirror/language'), require('@lezer/generator'), require('@codemirror/highlight'), require('@codemirror/autocomplete'), require('@codemirror/tooltip'), require('@codemirror/gutter')) :
-    typeof define === 'function' && define.amd ? define('@seniorsistemas/angular-components', ['exports', '@angular/core', '@angular/common', 'primeng/breadcrumb', '@angular/router', 'rxjs', 'rxjs/operators', 'primeng/tieredmenu', 'primeng/tooltip', 'primeng/dom', 'primeng/calendar', '@angular/animations', '@angular/forms', '@angular/common/http', 'angular2-hotkeys', 'bignumber.js', 'primeng/autocomplete', 'primeng/dialog', 'primeng/table', '@seniorsistemas/ng2-currency-mask', '@seniorsistemas/senior-platform-data', 'moment', 'ngx-cookie-service', 'ng2-currency-mask', 'primeng/button', 'primeng/checkbox', 'primeng/chips', 'primeng/dropdown', 'primeng/fieldset', 'primeng/inputmask', 'primeng/inputtext', 'primeng/inputtextarea', 'primeng/keyfilter', 'primeng/multiselect', 'primeng/inputswitch', 'primeng/panel', 'primeng/radiobutton', 'primeng/progressbar', '@angular/platform-browser', '@ngx-translate/core', 'cropperjs', 'element-resize-detector', '@angular/cdk/a11y', 'primeng/scrollpanel', 'primeng/sidebar', '@codemirror/view', '@codemirror/state', '@codemirror/lint', '@codemirror/language', '@lezer/generator', '@codemirror/highlight', '@codemirror/autocomplete', '@codemirror/tooltip', '@codemirror/gutter'], factory) :
-    (global = global || self, factory((global.seniorsistemas = global.seniorsistemas || {}, global.seniorsistemas['angular-components'] = {}), global.ng.core, global.ng.common, global.breadcrumb, global.ng.router, global.rxjs, global.rxjs.operators, global.tieredmenu, global.tooltip, global.dom, global.calendar, global.ng.animations, global.ng.forms, global.ng.common.http, global.angular2Hotkeys, global.BigNumber, global.autocomplete$1, global.dialog, global.table, global.ng2CurrencyMask, global.seniorPlatformData, global.moment_, global.ngxCookieService, global.ng2CurrencyMask$1, global.button, global.checkbox, global.chips, global.dropdown, global.fieldset, global.inputmask, global.inputtext, global.inputtextarea, global.keyfilter, global.multiselect, global.inputswitch, global.panel, global.radiobutton, global.progressbar, global.ng.platformBrowser, global.core$1, global.Cropper, global.elementResizeDetectorMaker_, global.ng.cdk.a11y, global.scrollpanel, global.sidebar, global.view, global.state, global.lint, global.language, global.generator, global.highlight, global.autocomplete$2, global.tooltip$1, global.gutter));
-}(this, (function (exports, core, common, breadcrumb, router, rxjs, operators, tieredmenu, tooltip, dom, calendar, animations, forms, http, angular2Hotkeys, BigNumber, autocomplete$1, dialog, table, ng2CurrencyMask, seniorPlatformData, moment_, ngxCookieService, ng2CurrencyMask$1, button, checkbox, chips, dropdown, fieldset, inputmask, inputtext, inputtextarea, keyfilter, multiselect, inputswitch, panel, radiobutton, progressbar, platformBrowser, core$1, Cropper, elementResizeDetectorMaker_, a11y, scrollpanel, sidebar, view, state, lint, language, generator, highlight, autocomplete$2, tooltip$1, gutter) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('primeng/breadcrumb'), require('@angular/router'), require('rxjs'), require('rxjs/operators'), require('primeng/tieredmenu'), require('primeng/tooltip'), require('primeng/dom'), require('primeng/calendar'), require('@angular/animations'), require('@angular/forms'), require('@angular/common/http'), require('angular2-hotkeys'), require('bignumber.js'), require('primeng/autocomplete'), require('primeng/dialog'), require('primeng/table'), require('@seniorsistemas/ng2-currency-mask'), require('@seniorsistemas/senior-platform-data'), require('moment'), require('ngx-cookie-service'), require('ng2-currency-mask'), require('primeng/button'), require('primeng/checkbox'), require('primeng/chips'), require('primeng/dropdown'), require('primeng/fieldset'), require('primeng/inputmask'), require('primeng/inputtext'), require('primeng/inputtextarea'), require('primeng/keyfilter'), require('primeng/multiselect'), require('primeng/inputswitch'), require('primeng/panel'), require('primeng/radiobutton'), require('primeng/progressbar'), require('@angular/platform-browser'), require('@ngx-translate/core'), require('cropperjs'), require('element-resize-detector'), require('@angular/cdk/a11y'), require('primeng/scrollpanel'), require('primeng/sidebar'), require('primeng/api'), require('primeng/confirmdialog'), require('@codemirror/view'), require('@codemirror/state'), require('@codemirror/lint'), require('@codemirror/language'), require('@lezer/generator'), require('@codemirror/highlight'), require('@codemirror/autocomplete'), require('@codemirror/tooltip'), require('@codemirror/gutter')) :
+    typeof define === 'function' && define.amd ? define('@seniorsistemas/angular-components', ['exports', '@angular/core', '@angular/common', 'primeng/breadcrumb', '@angular/router', 'rxjs', 'rxjs/operators', 'primeng/tieredmenu', 'primeng/tooltip', 'primeng/dom', 'primeng/calendar', '@angular/animations', '@angular/forms', '@angular/common/http', 'angular2-hotkeys', 'bignumber.js', 'primeng/autocomplete', 'primeng/dialog', 'primeng/table', '@seniorsistemas/ng2-currency-mask', '@seniorsistemas/senior-platform-data', 'moment', 'ngx-cookie-service', 'ng2-currency-mask', 'primeng/button', 'primeng/checkbox', 'primeng/chips', 'primeng/dropdown', 'primeng/fieldset', 'primeng/inputmask', 'primeng/inputtext', 'primeng/inputtextarea', 'primeng/keyfilter', 'primeng/multiselect', 'primeng/inputswitch', 'primeng/panel', 'primeng/radiobutton', 'primeng/progressbar', '@angular/platform-browser', '@ngx-translate/core', 'cropperjs', 'element-resize-detector', '@angular/cdk/a11y', 'primeng/scrollpanel', 'primeng/sidebar', 'primeng/api', 'primeng/confirmdialog', '@codemirror/view', '@codemirror/state', '@codemirror/lint', '@codemirror/language', '@lezer/generator', '@codemirror/highlight', '@codemirror/autocomplete', '@codemirror/tooltip', '@codemirror/gutter'], factory) :
+    (global = global || self, factory((global.seniorsistemas = global.seniorsistemas || {}, global.seniorsistemas['angular-components'] = {}), global.ng.core, global.ng.common, global.breadcrumb, global.ng.router, global.rxjs, global.rxjs.operators, global.tieredmenu, global.tooltip, global.dom, global.calendar, global.ng.animations, global.ng.forms, global.ng.common.http, global.angular2Hotkeys, global.BigNumber, global.autocomplete$1, global.dialog, global.table, global.ng2CurrencyMask, global.seniorPlatformData, global.moment_, global.ngxCookieService, global.ng2CurrencyMask$1, global.button, global.checkbox, global.chips, global.dropdown, global.fieldset, global.inputmask, global.inputtext, global.inputtextarea, global.keyfilter, global.multiselect, global.inputswitch, global.panel, global.radiobutton, global.progressbar, global.ng.platformBrowser, global.core$1, global.Cropper, global.elementResizeDetectorMaker_, global.ng.cdk.a11y, global.scrollpanel, global.sidebar, global.api, global.confirmdialog, global.view, global.state, global.lint, global.language, global.generator, global.highlight, global.autocomplete$2, global.tooltip$1, global.gutter));
+}(this, (function (exports, core, common, breadcrumb, router, rxjs, operators, tieredmenu, tooltip, dom, calendar, animations, forms, http, angular2Hotkeys, BigNumber, autocomplete$1, dialog, table, ng2CurrencyMask, seniorPlatformData, moment_, ngxCookieService, ng2CurrencyMask$1, button, checkbox, chips, dropdown, fieldset, inputmask, inputtext, inputtextarea, keyfilter, multiselect, inputswitch, panel, radiobutton, progressbar, platformBrowser, core$1, Cropper, elementResizeDetectorMaker_, a11y, scrollpanel, sidebar, api, confirmdialog, view, state, lint, language, generator, highlight, autocomplete$2, tooltip$1, gutter) { 'use strict';
 
     var BigNumber__default = 'default' in BigNumber ? BigNumber['default'] : BigNumber;
     Cropper = Cropper && Object.prototype.hasOwnProperty.call(Cropper, 'default') ? Cropper['default'] : Cropper;
@@ -6973,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);
         };
@@ -7075,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;
@@ -7250,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;
@@ -7298,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);
@@ -8463,6 +8466,248 @@
     }());
 
 
+    (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, confirmationService) {
+            this.imageCropperService = imageCropperService;
+            this.confirmationService = confirmationService;
+            this.aspectRatio = 1;
+            this.removeButtonLabel = "Remover";
+            this.changeButtonLabel = "Alterar foto";
+            this.confirmationTexts = {
+                removalHeader: "Remover foto de perfil",
+                removalMessage: "Deseja remover sua foto de perfil? Não pode ser revertida.",
+                removalAcceptLabel: "Remover",
+                removalRejectLabel: "Cancelar",
+            };
+            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 _this = this;
+            this.confirmationService.confirm({
+                message: this.confirmationTexts.removalMessage,
+                acceptLabel: this.confirmationTexts.removalAcceptLabel,
+                rejectLabel: this.confirmationTexts.removalRejectLabel,
+                header: this.confirmationTexts.removalHeader,
+                accept: 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 },
+            { type: api.ConfirmationService }
+        ]; };
+        __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, "confirmationTexts", 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: "<p-confirmDialog></p-confirmDialog>\n\n<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,
+                    confirmdialog.ConfirmDialogModule,
+                ],
+                declarations: [ProfilePicturePickerComponent],
+                exports: [ProfilePicturePickerComponent],
+                providers: [
+                    ImageCropperService,
+                    api.ConfirmationService,
+                ],
+            })
+        ], ProfilePicturePickerModule);
+        return ProfilePicturePickerModule;
+    }());
+
+
     (function (GlobalSearchSizeEnum) {
         GlobalSearchSizeEnum["STANDARD"] = "STANDARD";
         GlobalSearchSizeEnum["MEDIUM"] = "MEDIUM";
@@ -10331,6 +10576,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;