@seniorsistemas/angular-components 16.3.0 → 16.3.1

package/fesm5/seniorsistemas-angular-components.js

@@ -43,6 +43,8 @@ import * as elementResizeDetectorMaker_ from 'element-resize-detector';
 import { FocusTrapFactory, A11yModule } from '@angular/cdk/a11y';
 import { ScrollPanelModule } from 'primeng/scrollpanel';
 import { Sidebar, SidebarModule as SidebarModule$1 } from 'primeng/sidebar';
+import { ConfirmationService } from 'primeng/api';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { EditorView } from '@codemirror/view';
 import { StateField, StateEffect, EditorState } from '@codemirror/state';
 import { setDiagnostics } from '@codemirror/lint';
@@ -8301,11 +8303,18 @@ var FileValidation;
 })(FileValidation || (FileValidation = {}));
 
 var ProfilePicturePickerComponent = /** @class */ (function () {
-    function ProfilePicturePickerComponent(imageCropperService) {
+    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 EventEmitter();
         this.invalidFile = new EventEmitter();
@@ -8351,9 +8360,18 @@ var ProfilePicturePickerComponent = /** @class */ (function () {
         fileInputElement.click();
     };
     ProfilePicturePickerComponent.prototype.removePhoto = function () {
-        var fileInputElement = this.fileInput.nativeElement;
-        fileInputElement.value = "";
-        this.image = "";
+        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);
@@ -8419,7 +8437,8 @@ var ProfilePicturePickerComponent = /** @class */ (function () {
         return right - left;
     };
     ProfilePicturePickerComponent.ctorParameters = function () { return [
-        { type: ImageCropperService }
+        { type: ImageCropperService },
+        { type: ConfirmationService }
     ]; };
     __decorate([
         Input()
@@ -8442,6 +8461,9 @@ var ProfilePicturePickerComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], ProfilePicturePickerComponent.prototype, "changeButtonLabel", void 0);
+    __decorate([
+        Input()
+    ], ProfilePicturePickerComponent.prototype, "confirmationTexts", void 0);
     __decorate([
         Input()
     ], ProfilePicturePickerComponent.prototype, "maxFileSize", void 0);
@@ -8484,7 +8506,7 @@ var ProfilePicturePickerComponent = /** @class */ (function () {
     ProfilePicturePickerComponent = __decorate([
         Component({
             selector: "s-profile-picture-picker",
-            template: "<input #fileInput [accept]=\"accept\" class=\"file-input\" type=\"file\" (change)=\"photoSelected($event)\">\n<div #uploadPicture class=\"upload-picture\">\n   <s-thumbnail\n      #thumbnail\n      iconClass=\"far fa-user\"\n      [imageSource]=\"image\"\n      [hasAction]=\"!image\"\n      (click)=\"selectPhoto()\">\n   </s-thumbnail>\n   <div #info class=\"info\">\n      <ng-container *ngIf=\"image; then withImage; else noImage\"></ng-container>\n      <p class=\"subtitle\">{{ subtitle }}</p>\n   </div>\n</div>\n\n<ng-template #withImage>\n   <div class=\"buttons\">\n      <s-button\n         [label]=\"changeButtonLabel\"\n         priority=\"primary\"\n         (onClick)=\"selectPhoto()\">\n      </s-button>\n      <s-button\n         [label]=\"removeButtonLabel\"\n         priority=\"secondary\"\n         (onClick)=\"removePhoto()\">\n      </s-button>\n   </div>\n</ng-template>\n\n<ng-template #noImage>\n   <p class=\"title\">\n      {{ simpleTitle }}\n      <span\n         class=\"action-title\"\n         (click)=\"selectPhoto()\">\n         {{ actionTitle }}\n      </span>\n   </p>\n</ng-template>",
+            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);
@@ -8501,10 +8523,14 @@ var ProfilePicturePickerModule = /** @class */ (function () {
                 ButtonModule,
                 ThumbnailModule,
                 ImageCropperModule,
+                ConfirmDialogModule,
             ],
             declarations: [ProfilePicturePickerComponent],
             exports: [ProfilePicturePickerComponent],
-            providers: [ImageCropperService],
+            providers: [
+                ImageCropperService,
+                ConfirmationService,
+            ],
         })
     ], ProfilePicturePickerModule);
     return ProfilePicturePickerModule;