keevo-components 1.8.340 → 1.8.341

package/fesm2022/keevo-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewChild, Injectable, Directive, Pipe, ViewChildren, ContentChildren, forwardRef, model, HostListener, NgModule, signal, input, viewChild, computed, inject, contentChildren, effect, ChangeDetectionStrategy, HostBinding, Injector } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewChild, Injectable, Directive, Pipe, ViewChildren, ContentChildren, forwardRef, model, HostListener, NgModule, signal, computed, input, viewChild, inject, contentChildren, effect, ChangeDetectionStrategy, HostBinding, Injector } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass } from '@angular/common';
 import * as i1$1 from 'primeng/button';
@@ -47,24 +47,26 @@ import { DividerModule } from 'primeng/divider';
 import * as i1$4 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import { filter as filter$1 } from 'rxjs/operators';
+import { DialogModule } from 'primeng/dialog';
+import * as i2$2 from 'primeng/slider';
+import { SliderModule } from 'primeng/slider';
+import { FileUploadModule } from 'primeng/fileupload';
 import { AccordionModule } from 'primeng/accordion';
 import { BadgeModule } from 'primeng/badge';
 import * as i5$9 from 'primeng/breadcrumb';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
 import * as i5$4 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
-import * as i2$2 from 'primeng/carousel';
+import * as i2$3 from 'primeng/carousel';
 import { CarouselModule, Carousel } from 'primeng/carousel';
 import { ChipModule } from 'primeng/chip';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import * as i7$2 from 'primeng/contextmenu';
 import { ContextMenuModule } from 'primeng/contextmenu';
 import { DataViewModule } from 'primeng/dataview';
-import { DialogModule } from 'primeng/dialog';
 import { EditorModule } from 'primeng/editor';
-import * as i2$4 from 'primeng/fieldset';
+import * as i2$5 from 'primeng/fieldset';
 import { FieldsetModule } from 'primeng/fieldset';
-import { FileUploadModule } from 'primeng/fileupload';
 import { ImageModule } from 'primeng/image';
 import * as i5$5 from 'primeng/inputmask';
 import { InputMaskModule } from 'primeng/inputmask';
@@ -104,17 +106,15 @@ import { ToastModule } from 'primeng/toast';
 import { ToolbarModule } from 'primeng/toolbar';
 import * as i1$6 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
-import * as i2$3 from 'primeng/selectbutton';
+import * as i2$4 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import * as i3$3 from 'primeng/stepper';
 import { StepperModule } from 'primeng/stepper';
 import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
-import * as i4$1 from 'primeng/slider';
-import { SliderModule } from 'primeng/slider';
-import Quill from 'quill';
 import * as i1$5 from 'ngx-loading';
 import { NgxLoadingModule } from 'ngx-loading';
+import Quill from 'quill';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { OrgChart } from 'd3-org-chart';
 import * as d3 from 'd3';
@@ -3684,6 +3684,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class KvLabelModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvLabelModule, declarations: [KvLabelComponent], imports: [CommonModule], exports: [KvLabelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLabelModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLabelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        KvLabelComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        KvLabelComponent
+                    ]
+                }]
+        }] });
+
+class KvModalComponent {
+    constructor(dynamicDialogRef) {
+        this.dynamicDialogRef = dynamicDialogRef;
+        /**
+         * Ações do Dialog
+         */
+        this.actions = [];
+        this.actionsPosition = 'right';
+        this.justify_content = 'justify-content-start';
+    }
+    ngOnInit() {
+        this.addSubTitle();
+        this.setMarginBottom();
+        this.defPositionButtons();
+    }
+    onWindowResize() {
+        this.setMarginBottom();
+    }
+    /**
+     * Adiciona sub-título à tela
+     */
+    addSubTitle() {
+        if (this.subtitle) {
+            const headerElement = document.querySelector('.p-dialog .p-dialog-header');
+            if (headerElement) {
+                const subtitleElement = document.createElement('span');
+                subtitleElement.textContent = this.subtitle;
+                subtitleElement.style.fontSize = '0.75rem';
+                subtitleElement.style.width = '100%';
+                subtitleElement.style.marginLeft = '2px';
+                headerElement.appendChild(subtitleElement);
+            }
+            if (this.subHeader) {
+                const headerElement = document.querySelector('.p-dialog .p-dialog-header');
+                const subHeader = this.subHeader.nativeElement;
+                if (headerElement && this.subHeader) {
+                    subHeader.style.width = '100%';
+                    subHeader.style.marginLeft = '2px';
+                    headerElement.appendChild(this.subHeader.nativeElement);
+                }
+            }
+        }
+    }
+    defPositionButtons() {
+        if (this.actionsPosition === 'right') {
+            this.justify_content = 'justify-content-end';
+        }
+        if (this.actionsPosition === 'center') {
+            this.justify_content = 'justify-content-center';
+        }
+        if (this.actionsPosition === 'left') {
+            this.justify_content = 'justify-content-start';
+        }
+    }
+    setMarginBottom() {
+        let actionsFieldHeight = document.getElementById('actions-field')?.offsetHeight;
+        let divBox = document.getElementById('content-modal');
+        if (divBox) {
+            if (actionsFieldHeight) {
+                divBox.style.marginBottom = `${actionsFieldHeight + 30}px`;
+            }
+            else {
+                divBox.style.marginBottom = `50px`;
+            }
+        }
+    }
+    clickExecute(action) {
+        if (action.command) {
+            action.command();
+            if (action.closeAfterClick != false)
+                this.dynamicDialogRef.close();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvModalComponent, deps: [{ token: i1$3.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvModalComponent, selector: "kv-modal", inputs: { actions: "actions", actionsPosition: "actionsPosition", subtitle: "subtitle", subHeader: "subHeader" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, ngImport: i0, template: "<!-- RENDERIZA\u00C7\u00C3O DO MODAL -->\r\n<div class=\"col-12 mb-4\" id=\"content-modal\">\r\n    <!-- COLOCAR UM COMPONENTE SUBHEADER AQUI -->\r\n\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- RENDERIZA\u00C7\u00C3O DOS BOT\u00D5ES -->\r\n\r\n<div class=\"bg-white flex flex-row flex-wrap gap-2 p-2 modal-barra-acoes {{justify_content}}\" *ngIf=\"actions\" id=\"actions-field\">\r\n    <kv-button\r\n        *ngFor=\" let action of actions\"\r\n        [ngClass]=\"action.visible==false?'hidden':''\"\r\n        icon=\"{{action.icon}}\"\r\n        label=\"{{action.label}}\"\r\n        [disabled]=\"action.disabled || false\"\r\n        (onClick)=\"clickExecute(action)\"\r\n        [severity]=\"action.severity ||'primary'\"\r\n    />\r\n</div>\r\n", styles: ["*{padding-bottom:0rem;padding-top:0rem}.barra-acoes{position:fixed;bottom:0;left:0;right:0;background-color:#fff;padding:10px;z-index:999}#page-form-container{padding-bottom:40px}@media screen and (max-width: 991px){#page-form-container{padding-bottom:100px}}.modal-barra-acoes{position:fixed;bottom:0;left:0;right:0;z-index:999;margin-right:1.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["label", "icon", "loading", "disabled", "severity", "size", "fullWidth"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kv-modal', template: "<!-- RENDERIZA\u00C7\u00C3O DO MODAL -->\r\n<div class=\"col-12 mb-4\" id=\"content-modal\">\r\n    <!-- COLOCAR UM COMPONENTE SUBHEADER AQUI -->\r\n\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- RENDERIZA\u00C7\u00C3O DOS BOT\u00D5ES -->\r\n\r\n<div class=\"bg-white flex flex-row flex-wrap gap-2 p-2 modal-barra-acoes {{justify_content}}\" *ngIf=\"actions\" id=\"actions-field\">\r\n    <kv-button\r\n        *ngFor=\" let action of actions\"\r\n        [ngClass]=\"action.visible==false?'hidden':''\"\r\n        icon=\"{{action.icon}}\"\r\n        label=\"{{action.label}}\"\r\n        [disabled]=\"action.disabled || false\"\r\n        (onClick)=\"clickExecute(action)\"\r\n        [severity]=\"action.severity ||'primary'\"\r\n    />\r\n</div>\r\n", styles: ["*{padding-bottom:0rem;padding-top:0rem}.barra-acoes{position:fixed;bottom:0;left:0;right:0;background-color:#fff;padding:10px;z-index:999}#page-form-container{padding-bottom:40px}@media screen and (max-width: 991px){#page-form-container{padding-bottom:100px}}.modal-barra-acoes{position:fixed;bottom:0;left:0;right:0;z-index:999;margin-right:1.5rem}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.DynamicDialogRef }], propDecorators: { actions: [{
+                type: Input
+            }], actionsPosition: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], subHeader: [{
+                type: Input
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
 class PrimeNgModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PrimeNgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: PrimeNgModule, exports: [AccordionModule,
@@ -3891,178 +4003,412 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 }]
         }] });
 
-class KvAvatarComponent {
-    constructor(imageService, notificationService) {
-        this.imageService = imageService;
-        this.notificationService = notificationService;
-        this.borderColor = '#002542';
-        this.btnsColor = '#002542';
-        this.width = 135;
-        this.height = 135;
-        this.imageUrlChange = new EventEmitter();
-        this.onModalOpen = new EventEmitter();
-        this.removerFotoEvent = new EventEmitter();
-        this.btnAlterarFoto = false;
-        this.existeLogo = false;
-        this.selectedImage = '';
-        this.showCropModal = false;
-        this.imageLoaded = false;
-        this.imageX = 0;
-        this.imageY = 0;
+class KvButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvButtonModule, declarations: [KvButtonComponent], imports: [CommonModule,
+            PrimeNgModule], exports: [KvButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvButtonModule, imports: [CommonModule,
+            PrimeNgModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        KvButtonComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PrimeNgModule
+                    ],
+                    exports: [
+                        KvButtonComponent
+                    ]
+                }]
+        }] });
+
+class KvModalModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvModalModule, declarations: [KvModalComponent], imports: [CommonModule, PrimeNgModule, KvButtonModule], exports: [KvModalComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvModalModule, imports: [CommonModule, PrimeNgModule, KvButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [KvModalComponent],
+                    imports: [CommonModule, PrimeNgModule, KvButtonModule],
+                    exports: [KvModalComponent],
+                }]
+        }] });
+
+class ImageCutterService {
+    constructor(dialogservice) {
+        this.dialogservice = dialogservice;
+    }
+    cut(imageBase64, width, height, indCircle = false) {
+        const cutConfig = { imageBase64, width, height, indCircle };
+        this.abrirModal(cutConfig);
+        return new Promise((resolve, reject) => {
+            window.addEventListener('cropImage', (event) => {
+                if (event.detail.status == true) {
+                    resolve(event.detail.result);
+                }
+                else {
+                    reject('Operacao cancelada.');
+                }
+            });
+        });
+    }
+    abrirModal(cutConfig) {
+        const params = {
+            closable: true,
+            maximizable: false,
+            popup: true,
+            width: '75vw',
+            header: `Cortar`,
+            id: { imagem: cutConfig.imageBase64, width: cutConfig.width, height: cutConfig.height, indCircle: cutConfig.indCircle },
+            styleClass: 'modal'
+        };
+        const dialogRef = FormService.openDialog(this.dialogservice, SimpleComponent, () => { }, params);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ImageCutterService, deps: [{ token: i1$3.DialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ImageCutterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ImageCutterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$3.DialogService }] });
+class SimpleComponent {
+    constructor(dynamicDialogRef, dialogService) {
+        this.dynamicDialogRef = dynamicDialogRef;
+        this.dialogService = dialogService;
+        // ? Variavies que recebem os valores do dialog
+        this._variaviesDialog = signal(null);
+        //? Referências para o contexto e canvas
+        this.canvas = signal(null);
+        this.ctx = signal(null);
+        this._Image = signal(new Image());
+        //? Coordenadas iniciais e finais do desenho
         this.startX = 0;
         this.startY = 0;
-        this.valueZoom = 20;
-        this.scaleFactor = 2;
-        this.canvasWidth = signal(null);
-        this.canvasHeight = signal(null);
-        this.imageUrl = input(this.imageService.userDefaultImage());
-        this.imageSource = signal(this.imageService.userDefaultImage());
-        this.imgCanva = signal(null);
-        this.widthTela = window.innerWidth;
+        //? Fator de escala da imagem e zoom
+        this.scaleFactorReadOnly = computed(() => {
+            return Math.min(this.scaleFactor(), 3);
+        });
+        this.scaleFactor = signal(null);
+        this.scaleFactorModel = 0;
+        this.imageX = 0;
+        this.imageY = 0;
+        //#region Propriedades computadas de tamanho do canvas e da imagem
+        //? Largura e altura do canvas baseado na tamanho da tela
+        this.canvasWidth = computed(() => this.widthTela() * 0.5);
+        this.canvasHeight = computed(() => this.heigthTela() * 0.5);
+        //? Largura e altura da área de corte
+        this.cutWidth = computed(() => {
+            if (this._variaviesDialog()?.indCircle) {
+                return this.radius() * 2;
+            }
+            else {
+                const canvasWidth = this.canvasWidth();
+                const maxWidth = canvasWidth * 0.8;
+                const proportionalHeight = maxWidth * this.proporcaoImagem();
+                return proportionalHeight > this.canvasHeight() * 0.8 ? this.canvasHeight() * 0.8 / this.proporcaoImagem() : maxWidth;
+            }
+        });
+        this.cutHeight = computed(() => {
+            if (this._variaviesDialog()?.indCircle) {
+                return this.radius() * 2;
+            }
+            else {
+                const canvasHeight = this.canvasHeight();
+                const maxHeight = canvasHeight * 0.8;
+                const proportionalWidth = maxHeight / this.proporcaoImagem();
+                return proportionalWidth > this.canvasWidth() * 0.8 ? this.canvasWidth() * 0.8 * this.proporcaoImagem() : maxHeight;
+            }
+        });
+        //? Largura e altura da imagem no canvas (baseado na escala) - tamanho real da imagem
+        this.canvaImageWidth = computed(() => {
+            return this._Image().width * this.scaleFactorReadOnly();
+        });
+        this.canvaImageHeight = computed(() => {
+            return this._Image().height * this.scaleFactorReadOnly();
+        });
+        this.proporcaoImagem = computed(() => {
+            return this._variaviesDialog()?.height / this._variaviesDialog()?.width;
+        });
+        this.radius = computed(() => {
+            const minSize = Math.min(this.canvasHeight() * 0.8, this.canvasWidth() * 0.8);
+            return minSize / 2;
+        });
+        //#endregion
+        // #region Limites de movimentação da imagem
+        //? Limites de movimentação da imagem
+        this.indCircle = computed(() => {
+            return this._variaviesDialog()?.indCircle;
+        });
+        this.xMin = computed(() => {
+            return !this._variaviesDialog()?.indCircle ? (this.canvasWidth() - this.cutWidth()) / 2 : (this.canvasWidth() - (this.radius() * 2)) / 2;
+        });
+        this.yMin = computed(() => {
+            return !this._variaviesDialog()?.indCircle ? (this.canvasHeight() - this.cutHeight()) / 2 : (this.canvasHeight() - (this.radius() * 2)) / 2;
+        });
+        this.xMax = computed(() => {
+            return !this._variaviesDialog()?.indCircle ? -(this.canvaImageWidth() - (this.xMin()) - this.cutWidth()) : -(this.canvaImageWidth() - (this.xMin()) - (this.radius() * 2));
+        });
+        this.yMax = computed(() => {
+            return !this._variaviesDialog()?.indCircle ? -(this.canvaImageHeight() - (this.yMin()) - this.cutHeight()) : -(this.canvaImageHeight() - (this.yMin()) - (this.radius() * 2));
+        });
+        // #endregion
+        //? Proporção da imagem
+        this.widthTela = signal(0);
+        this.heigthTela = signal(0);
+        this.atualizaTamanhoTela();
     }
-    ngOnInit() {
-        this.imageSource.set(this.imageUrl());
-        this.getImageSrc();
+    setScaleFactorModel(valor) {
+        this.scaleFactorModel = valor;
+        this.scaleFactor.set(this.scaleFactorModel);
     }
     onWindowResize() {
-        this.widthTela = window.innerWidth;
-        this.heigthTela = window.innerHeight;
+        this.atualizaTamanhoTela();
         this.updateCanvasSize();
-        this.updateCropBorderSize();
+        this.atualizaCutBorder();
     }
-    getImageSrc() {
-        const imageUrl = this.imageUrl();
-        if (imageUrl && (imageUrl.startsWith('data:image') || imageUrl.startsWith('http') || imageUrl.startsWith('https'))) {
-            this.existeLogo = true;
+    atualizaTamanhoTela() {
+        this.widthTela.set(window.innerWidth);
+        this.heigthTela.set(window.innerHeight);
+    }
+    ngAfterViewInit() {
+        this.recuperarVariaviesDialog();
+        this.inciarReferencias();
+        this.iniciarCanvas();
+    }
+    inciarReferencias() {
+        this.canvas.set(this.cropCanvas.nativeElement);
+        this.ctx.set(this.canvas().getContext('2d'));
+        this._Image().src = this._variaviesDialog()?.imagem;
+    }
+    iniciarCanvas() {
+        this._Image().onload = () => {
+            //? Define o tamanho do canvas
+            this.canvas().height = this.canvasHeight();
+            this.canvas().width = this.canvasWidth();
+            this.ajustarZommEPosicaoInicial();
+            this.initializeImageMove(this.canvas(), this.ctx(), this._Image());
+            this.initializeMouseWheel(this.canvas(), this.ctx(), this._Image());
+            this.redrawCanvas(this.ctx(), this._Image());
+        };
+    }
+    ajustarZommEPosicaoInicial() {
+        const cutWidth = this.cutWidth();
+        const cutHeight = this.cutHeight();
+        const imageWidth = this._Image().width;
+        const imageHeight = this._Image().height;
+        //? Ajusta possição e zoom inicial
+        if (this._variaviesDialog()?.indCircle) {
+            const scaleFactor = (this.radius() * 2) / Math.min(imageWidth, imageHeight);
+            this.setScaleFactorModel(scaleFactor);
+            this.scaleFactor.set(scaleFactor);
         }
-        else if (imageUrl && imageUrl.length > 0) {
-            this.existeLogo = true;
-            this.imageSource.set('data:image/jpg;base64,' + imageUrl);
+        else {
+            const scaleFactor = this.cutHeight() === this.cutWidth()
+                ? this._Image().width > this._Image().height
+                    ? this.cutHeight() / imageHeight
+                    : this.cutWidth() / imageWidth
+                : this.cutHeight() > this.cutWidth()
+                    ? this.cutHeight() / imageHeight
+                    : this.cutWidth() / imageWidth;
+            this.setScaleFactorModel(scaleFactor);
+            this.scaleFactor.set(scaleFactor);
+        }
+        this.imageX = Math.max((this.canvas().width - imageWidth * this.scaleFactorReadOnly()) / 2, this.xMin());
+        this.imageY = Math.max((this.canvasHeight() - imageHeight * this.scaleFactorReadOnly()) / 2, this.yMin());
+    }
+    //#region Métodos de recuperação de dados
+    recuperaInstanciaDialog() {
+        const arr = this.dialogService.dialogComponentRefMap;
+        const entries = arr.entries();
+        const firstEntry = entries.next().value;
+        const [firstKey, firstValue] = firstEntry;
+        const instance = this.dialogService.getInstance(firstKey);
+        this.dialogInstance = instance;
+        return instance;
+    }
+    recuperarVariaviesDialog() {
+        this._variaviesDialog.set(this.recuperaInstanciaDialog().data.id);
+    }
+    //#endregion
+    //#region Métodos de atualizacao do canvas
+    //? Atualiza o tamanho do canvas
+    updateCanvasSize() {
+        this.imageX = (this.canvas().width - this._Image().width * this.scaleFactorReadOnly()) / 2;
+        this.imageY = (this.canvasHeight() / 2) - (this._Image().height * this.scaleFactorReadOnly()) / 2;
+        this.canvas().height = this.canvasHeight();
+        this.canvas().width = this.canvasWidth();
+        this.redrawCanvas(this.ctx(), this._Image());
+    }
+    redrawCanvas(ctx, img) {
+        if (!ctx)
+            return;
+        this.drawCropArea(ctx);
+        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+        ctx.filter = 'blur(5px) opacity(0.9)';
+        ctx.drawImage(img, this.imageX, this.imageY, img.width * this.scaleFactorReadOnly(), img.height * this.scaleFactorReadOnly());
+        ctx.filter = 'none';
+        this.drawImageInCropArea(ctx, img);
+    }
+    //? Desenha a área de corte
+    drawCropArea(ctx) {
+        if (!ctx)
+            return;
+        this.atualizaCutBorder();
+        const cropX = ctx.canvas.width / 2 - this.cutWidth() / 2;
+        const cropY = ctx.canvas.height / 2 - this.cutHeight() / 2;
+        const cropXCircle = ctx.canvas.width / 2 - this.radius() / 2;
+        const cropYCircle = ctx.canvas.height / 2 - this.radius() / 2;
+        ctx.beginPath();
+        ctx.strokeStyle = 'transparent';
+        ctx.lineWidth = 2;
+        if (this._variaviesDialog()?.indCircle) {
+            ctx.arc(cropXCircle, cropYCircle, this.radius(), 0, Math.PI * 2, true);
         }
         else {
-            this.existeLogo = false;
-            this.imageSource.set(this.imageService.userDefaultImage());
+            ctx.rect(cropX, cropY, this.cutWidth(), this.cutHeight());
         }
+        ctx.stroke();
     }
-    openFile() {
-        const inputElement = document.getElementById('fotoEscolhida');
-        if (inputElement) {
-            inputElement.click();
+    //? Desenha a imagem na área de corte
+    drawImageInCropArea(ctx, img) {
+        if (!ctx)
+            return;
+        const cropX = (ctx.canvas.width - this.cutWidth()) / 2;
+        const cropY = (ctx.canvas.height - this.cutHeight()) / 2;
+        ctx.save();
+        ctx.beginPath();
+        if (this._variaviesDialog()?.indCircle) {
+            ctx.arc(ctx.canvas.width / 2, ctx.canvas.height / 2, this.radius(), 0, Math.PI * 2, true);
         }
-    }
-    selectFotoSelecionada(event) {
-        const file = event.target.files[0];
-        if (file) {
-            const reader = new FileReader();
-            reader.readAsDataURL(file);
-            reader.onload = () => {
-                this.selectedImage = reader.result;
-                this.onModalOpen.emit(null);
-                this.openCropModal();
-                this.existeLogo = false;
-            };
+        else {
+            ctx.rect(cropX, cropY, this.cutWidth(), this.cutHeight());
         }
+        ctx.clip();
+        ctx.drawImage(img, this.imageX, this.imageY, img.width * this.scaleFactorReadOnly(), img.height * this.scaleFactorReadOnly());
+        ctx.restore();
     }
-    questionRemoverFoto() {
-        const msg = '<h3>Você tem certeza que deseja retirar a foto desse usuário?</h3>';
-        this.notificationService.question({
-            type: 'question',
-            message: msg,
-            accept: (data) => {
-                this.removerFoto();
-            },
-            reject: (data) => {
-            }
-        });
-    }
-    removerFoto() {
-        this.imageSource.set('');
-        this.removerFotoEvent.emit();
-        this.existeLogo = false;
-        this.imageUrlChange.emit(this.imageSource());
-        this.fileInput.nativeElement.value = '';
+    atualizaCutBorder() {
+        if (this.cropBorder && this.cropBorder.nativeElement) {
+            const cropBorderElement = this.cropBorder.nativeElement;
+            if (this._variaviesDialog()?.indCircle) {
+                cropBorderElement.style.borderRadius = this.radius() * 2 + 'px';
+                cropBorderElement.style.width = this.radius() * 2 + 'px';
+                cropBorderElement.style.height = this.radius() * 2 + 'px';
+            }
+            else {
+                cropBorderElement.style.width = this.cutWidth() + 'px';
+                cropBorderElement.style.height = this.cutHeight() + 'px';
+            }
+        }
     }
-    handleImageError(event) {
-        event.target.src = this.imageService.userDefaultImage();
+    //#endregion
+    //#region handlers de eventos
+    onZoomChange(e) {
+        const prevZoom = this.scaleFactorReadOnly();
+        const zoomValue = e.value;
+        const direction = prevZoom < zoomValue ? 'up' : 'down';
+        this.ajustarZoom(direction);
     }
-    //------- Recorte de imagem -------
-    openCropModal() {
-        this.showCropModal = true;
-        setTimeout(() => {
-            const canvas = this.cropCanvas.nativeElement;
-            const ctx = canvas.getContext('2d');
-            const img = new Image();
-            img.src = this.selectedImage;
-            img.onload = () => {
-                this.imageLoaded = true;
-                canvas.height = 400;
-                canvas.width = this.retornaTamanhoCanvas();
-                this.scaleFactor = canvas.height / img.height;
-                this.imageX = (canvas.width - img.width * this.scaleFactor) / 2;
-                this.imageY = 0;
-                this.canvasWidth.set(canvas.width);
-                this.canvasHeight.set(canvas.height);
-                this.redrawCanvas(ctx, img);
-                this.initializeImageMove(canvas, ctx, img);
-                this.initializeMouseWheel(canvas, ctx, img);
-                this.valueZoom = this.scaleFactor * 20;
-            };
-        }, 0);
+    initializeMouseWheel(canvas, ctx, img) {
+        canvas.onwheel = (e) => {
+            e.preventDefault();
+            //? Recuperando os valores de zoom e delta atuais
+            const direction = e.deltaY > 0 ? 'down' : 'up';
+            this.ajustarZoom(direction);
+        };
     }
-    cropImage() {
-        const canvas = this.cropCanvas.nativeElement;
-        const ctx = canvas.getContext('2d');
-        if (ctx) {
-            const cropRadius = this.getCropRadius();
-            const centerX = canvas.width / 2;
-            const centerY = canvas.height / 2;
-            const imageData = ctx.getImageData(centerX - cropRadius, centerY - cropRadius, cropRadius * 2, cropRadius * 2);
-            const newCanvas = document.createElement('canvas');
-            const newCtx = newCanvas.getContext('2d');
-            newCanvas.width = cropRadius * 2;
-            newCanvas.height = cropRadius * 2;
-            if (newCtx) {
-                newCtx.putImageData(imageData, 0, 0);
-                this.imageSource.set(newCanvas.toDataURL());
-                this.imageUrlChange.emit(this.imageSource());
-                this.existeLogo = true;
-                this.closeCropModal();
+    ajustarZoom(direction) {
+        const prevScaleFactor = this.scaleFactorReadOnly();
+        const delta = direction == 'down' ? -0.01 : 0.01;
+        let scaleFactor = Math.min((prevScaleFactor + (delta * 1.2)), 3);
+        const newHeight = this._Image().height * scaleFactor;
+        const newWidth = this._Image().width * scaleFactor;
+        if (this._variaviesDialog()?.indCircle) {
+            if (newHeight < this.radius() * 2 || newWidth < this.radius() * 2) {
+                scaleFactor = prevScaleFactor;
+            }
+            else {
+                this.scaleFactor.set(scaleFactor);
+                this.setScaleFactorModel(scaleFactor);
             }
         }
-    }
-    onZoomChange(event) {
+        else {
+            if (newHeight < this.cutHeight() || newWidth < this.cutWidth()) {
+                scaleFactor = prevScaleFactor;
+            }
+            else {
+                this.scaleFactor.set(scaleFactor);
+                this.setScaleFactorModel(scaleFactor);
+            }
+        }
+        this.scaleFactor.set(scaleFactor);
+        this.setScaleFactorModel(scaleFactor);
         const canvas = this.cropCanvas.nativeElement;
-        const ctx = canvas.getContext('2d');
-        const img = new Image();
-        img.src = this.selectedImage;
-        img.onload = () => {
-            const zoomValue = event.value / 20;
-            this.scaleFactor = Math.max(zoomValue, 0.1); // Garantir que o fator de escala não seja menor que 0.1
-            this.redrawCanvas(ctx, img);
-        };
-    }
-    retornaTamanhoCanvas() {
-        return this.widthTela < 700 ? this.widthTela * 0.7 : this.widthTela * 0.4;
-    }
-    closeCropModal() {
-        this.showCropModal = false;
-        this.valueZoom = 20;
-        this.imageLoaded = false;
-        this.imageX = this.imgCanva()?.width / 2;
-        this.imageY = this.imgCanva()?.height / 2;
-        this.startX = 0;
-        this.startY = 0;
-    }
-    redrawCanvas(ctx, img) {
-        this.updateCropBorderSize();
-        if (!ctx)
-            return;
-        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-        ctx.filter = 'blur(5px) opacity(0.9)';
-        ctx.drawImage(img, this.imageX, this.imageY, img.width * this.scaleFactor, img.height * this.scaleFactor);
-        ctx.filter = 'none';
-        this.drawImageInCropArea(ctx, img);
-        this.drawCropArea(ctx);
+        const canvasWidth = canvas.offsetWidth;
+        const canvasHeight = canvas.offsetHeight;
+        const centerX = canvasWidth / 2;
+        const centerY = canvasHeight / 2;
+        const newCanvasX = centerX - (centerX - this.imageX) * (scaleFactor / prevScaleFactor);
+        const newCanvasY = centerY - (centerY - this.imageY) * (scaleFactor / prevScaleFactor);
+        this.imageX = newCanvasX;
+        this.imageY = newCanvasY;
+        if (!this.verificaImagemdentroDosLimiteXmin()) {
+            const diffXmin = this.retornaDiffXmax();
+            this.moveImage(this.imageX - diffXmin);
+        }
+        if (!this.verificaImagemdentroDosLimiteXmax()) {
+            const diffXmax = this.retornaDiffXmin();
+            this.moveImage(this.imageX + diffXmax);
+        }
+        if (!this.verificaImagemdentroDosLimiteYmax()) {
+            const diffYmax = this.retornaDiffYmin();
+            this.moveImage(undefined, this.imageY + diffYmax);
+        }
+        if (!this.verificaImagemdentroDosLimiteYmin()) {
+            const diffYmin = this.retornaDiffYmax();
+            this.moveImage(undefined, this.imageY - diffYmin);
+        }
+        this.redrawCanvas(this.ctx(), this._Image());
+    }
+    verificaImagemdentroDosLimiteXmin() {
+        const newImageX = this.imageX;
+        return newImageX < this.xMin();
+    }
+    verificaImagemdentroDosLimiteXmax() {
+        const newImageX = this.imageX;
+        return newImageX > this.xMax();
+    }
+    verificaImagemdentroDosLimiteYmin() {
+        const newImageY = this.imageY;
+        return newImageY < this.yMin();
+    }
+    verificaImagemdentroDosLimiteYmax() {
+        const newImageY = this.imageY;
+        return newImageY > this.yMax();
+    }
+    retornaDiffXmin() {
+        const newImageX = this.imageX;
+        return this.xMin() - newImageX;
+    }
+    retornaDiffXmax() {
+        const newImageX = this.imageX;
+        return newImageX - this.xMax();
+    }
+    retornaDiffYmin() {
+        const newImageY = this.imageY;
+        return this.yMin() - newImageY;
+    }
+    retornaDiffYmax() {
+        const newImageY = this.imageY;
+        return newImageY - this.yMax();
     }
     initializeImageMove(canvas, ctx, img) {
         let isDragging = false;
@@ -4073,13 +4419,6 @@ class KvAvatarComponent {
             this.startX = e.offsetX - this.imageX;
             this.startY = e.offsetY - this.imageY;
         };
-        canvas.onmousemove = (e) => {
-            if (isDragging) {
-                this.imageX = e.offsetX - this.startX;
-                this.imageY = e.offsetY - this.startY;
-                this.redrawCanvas(ctx, img);
-            }
-        };
         canvas.onmouseup = () => {
             isDragging = false;
             canvas.style.cursor = 'grab';
@@ -4088,84 +4427,276 @@ class KvAvatarComponent {
             isDragging = false;
             canvas.style.cursor = 'grab';
         };
-    }
-    initializeMouseWheel(canvas, ctx, img) {
-        canvas.onwheel = (e) => {
-            e.preventDefault();
-            const delta = e.deltaY > 0 ? -0.1 : 0.1;
-            this.scaleFactor = Math.min(Math.max(this.scaleFactor + delta, 0.1), 5); // limita o fator de escala entre 0.1 e 5
-            this.redrawCanvas(ctx, img);
-            this.valueZoom = this.scaleFactor * 20;
+        canvas.onmousemove = (e) => {
+            if (isDragging) {
+                // Calcula o novo posicionamento da imagem
+                let newImageX = e.offsetX - this.startX;
+                let newImageY = e.offsetY - this.startY;
+                if (newImageX < this.xMin() && newImageX > this.xMax()) {
+                    this.moveImage(newImageX);
+                }
+                if (newImageY < this.yMin() && newImageY > this.yMax()) {
+                    this.moveImage(undefined, newImageY);
+                }
+                this.redrawCanvas(ctx, img);
+            }
         };
     }
-    drawImageInCropArea(ctx, img) {
-        if (!ctx)
-            return;
-        const cropRadius = this.getCropRadius();
-        const cropX = (ctx.canvas.width - cropRadius * 2) / 2;
-        const cropY = (ctx.canvas.height - cropRadius * 2) / 2;
-        ctx.save();
-        ctx.beginPath();
-        ctx.arc(cropX + cropRadius, cropY + cropRadius, cropRadius, 0, Math.PI * 2, true);
-        ctx.clip();
-        ctx.drawImage(img, this.imageX, this.imageY, img.width * this.scaleFactor, img.height * this.scaleFactor);
-        ctx.restore();
+    moveImage(dx, dy) {
+        this.imageX = (dx ?? this.imageX);
+        this.imageY = (dy ?? this.imageY);
     }
-    drawCropArea(ctx) {
-        if (!ctx)
-            return;
-        const cropRadius = this.getCropRadius();
-        const cropX = (ctx.canvas.width - cropRadius * 2) / 2;
-        const cropY = (ctx.canvas.height - cropRadius * 2) / 2;
-        ctx.beginPath();
-        ctx.arc(cropX + cropRadius, cropY + cropRadius, cropRadius, 0, Math.PI * 2, true);
-        ctx.strokeStyle = 'transparent';
-        ctx.lineWidth = 2;
-        ctx.stroke();
+    //#endregion
+    //#region Métodos de corte e fechamento do modal
+    cropImage() {
+        const ctx = this.ctx();
+        if (ctx) {
+            const X = ((this.canvas().width - this._Image().width * this.scaleFactorReadOnly()) / 2);
+            const Y = ((this.canvasHeight() / 2) - (this._Image().height * this.scaleFactorReadOnly()) / 2);
+            // Recuperar o imageData da imagem que está na área de corte
+            let imageData;
+            const cropX = (ctx.canvas.width - this.cutWidth()) / 2;
+            const cropY = (ctx.canvas.height - this.cutHeight()) / 2;
+            if (this._variaviesDialog()?.indCircle) {
+                // Create a new canvas with the same dimensions as the circle
+                const circleCanvas = document.createElement('canvas');
+                const circleCtx = circleCanvas.getContext('2d');
+                circleCanvas.width = this.radius() * 2;
+                circleCanvas.height = this.radius() * 2;
+                // Draw the circle on the new canvas
+                circleCtx.beginPath();
+                circleCtx.arc(this.radius(), this.radius(), this.radius(), 0, 2 * Math.PI);
+                circleCtx.fill();
+                // Set the composite operation to 'destination-in' to cut out the circle
+                ctx.globalCompositeOperation = 'destination-in';
+                // Draw the image on the main canvas using the circle as a mask
+                ctx.drawImage(circleCanvas, cropX, cropY);
+                // Reset the composite operation to the default value
+                ctx.globalCompositeOperation = 'source-over';
+                // Get the image data of the cropped circle
+                imageData = ctx.getImageData(cropX, cropY, this.radius() * 2, this.radius() * 2);
+            }
+            else {
+                imageData = ctx.getImageData(cropX, cropY, this.cutWidth(), this.cutHeight());
+            }
+            // Obter os valores de width e height da variável _variaviesDialog
+            const variaveisDialog = this._variaviesDialog();
+            if (variaveisDialog) {
+                const { width, height } = variaveisDialog;
+                // Criar um novo canvas e contexto com os valores de width e height
+                const newCanvas = document.createElement('canvas');
+                const newCtx = newCanvas.getContext('2d');
+                newCanvas.width = width;
+                newCanvas.height = height;
+                if (newCtx) {
+                    // Redimensionar a imagem para o tamanho especificado
+                    const tempCanvas = document.createElement('canvas');
+                    const tempCtx = tempCanvas.getContext('2d');
+                    tempCanvas.width = this.cutWidth();
+                    tempCanvas.height = this.cutHeight();
+                    tempCtx.putImageData(imageData, 0, 0);
+                    newCtx.drawImage(tempCanvas, 0, 0, width, height);
+                    window.dispatchEvent(new CustomEvent('cropImage', { detail: {
+                            result: Promise.resolve(newCanvas.toDataURL()),
+                            status: true
+                        } }));
+                    this.closeCropModal();
+                }
+            }
+        }
     }
-    getCropRadius() {
-        const baseRadius = 200; // Raio base para uma tela de referência
-        const referenceWidth = (this.widthTela + 100); // Largura da tela de referência
-        const scaleFactor = window.innerWidth / referenceWidth; // Fator de escala com base na largura da tela atual
-        const diagonal = Math.sqrt(Math.pow(this.canvasHeight(), 2) + Math.pow(this.canvasWidth(), 2));
-        const calculatedRadius = (diagonal / 4);
-        const maxRadius = baseRadius * scaleFactor; // Ajusta o raio com base no fator de escala
-        return Math.min(calculatedRadius, maxRadius);
+    closeCropModal() {
+        this.dialogInstance.close();
     }
-    updateCropBorderSize() {
-        if (this.cropBorder && this.cropBorder.nativeElement) {
-            const radius = this.getCropRadius();
-            const cropBorderElement = this.cropBorder.nativeElement;
-            cropBorderElement.style.width = `${radius * 2}px`;
-            cropBorderElement.style.height = `${radius * 2}px`;
+    cancel() {
+        window.dispatchEvent(new CustomEvent('cropImage', { detail: {
+                result: Promise.resolve('cancel'),
+                status: false
+            } }));
+        this.closeCropModal();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SimpleComponent, deps: [{ token: i1$3.DynamicDialogRef }, { token: i1$3.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SimpleComponent, isStandalone: true, selector: "app-simple-component", host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "cropCanvas", first: true, predicate: ["cropCanvas"], descendants: true }, { propertyName: "cropBorder", first: true, predicate: ["cropBorder"], descendants: true }], ngImport: i0, template: `
+      <div class="modal-content">
+        <div class="crop-container">
+          <canvas #cropCanvas class="crop-canvas"></canvas>
+          <div #cropBorder class="crop-border"></div>
+        </div>
+
+        <div class="w-full mt-2">
+          <kv-label label="Zoom" style="text-align: left;" />
+          <p-slider [(ngModel)]="this.scaleFactorModel" [step]="0.000001"  [max]="3"  (onChange)="onZoomChange($event)"></p-slider>
+        </div>
+
+          <div class="button-container">
+          <kv-button label="Cancelar" severity="tertiary" icon="close" (click)="cancel()"></kv-button>
+          <kv-button label="Recortar" severity="primary" icon="crop" (click)="cropImage()" class="ml-2"></kv-button>
+        </div>
+
+      </div>
+
+
+
+  `, isInline: true, styles: ["img{border-style:solid;border-width:2px;border-radius:50%;object-fit:cover}i{font-size:22px}.botao-alterar-foto{border-style:none;width:max-content;background-color:#002542;color:#000;font-weight:700;cursor:pointer;padding:7px 9px}.botao-alterar-foto i{color:#fff}.botao-excluir-foto{border-style:none;width:max-content;background-color:#002542;color:#000;font-weight:700;cursor:pointer;padding:7px 9px}.botao-excluir-foto i{color:#fff}.btn{position:absolute;top:87%;left:87%;transform:translate(-50%,-50%)}.image-container{display:inline-block;position:relative}.modal-content{position:relative;background-color:#fefefe;margin:1% auto;padding:20px;width:80%;max-width:fit-content;text-align:center;border-radius:12px}.crop-container{display:flex;justify-content:center;align-items:center}.crop-canvas{border:1px solid #d1d5db;border-radius:12px;width:100%;height:auto}.crop-border{position:absolute;border:2px dashed #9ca3af;pointer-events:none}.zoom-container{padding-top:20px;padding-bottom:20px}.button-container{display:flex;align-items:center;justify-content:flex-end;flex-direction:row;margin-top:24px}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: KvModalModule }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i2$2.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: KvButtonModule }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["label", "icon", "loading", "disabled", "severity", "size", "fullWidth"], outputs: ["onClick"] }, { kind: "ngmodule", type: KvLabelModule }, { kind: "component", type: KvLabelComponent, selector: "kv-label", inputs: ["componentId", "label"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SimpleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-simple-component', template: `
+      <div class="modal-content">
+        <div class="crop-container">
+          <canvas #cropCanvas class="crop-canvas"></canvas>
+          <div #cropBorder class="crop-border"></div>
+        </div>
+
+        <div class="w-full mt-2">
+          <kv-label label="Zoom" style="text-align: left;" />
+          <p-slider [(ngModel)]="this.scaleFactorModel" [step]="0.000001"  [max]="3"  (onChange)="onZoomChange($event)"></p-slider>
+        </div>
+
+          <div class="button-container">
+          <kv-button label="Cancelar" severity="tertiary" icon="close" (click)="cancel()"></kv-button>
+          <kv-button label="Recortar" severity="primary" icon="crop" (click)="cropImage()" class="ml-2"></kv-button>
+        </div>
+
+      </div>
+
+
+
+  `, standalone: true, imports: [
+                        DialogModule,
+                        KvModalModule,
+                        SliderModule,
+                        CommonModule,
+                        ButtonModule,
+                        FileUploadModule,
+                        SliderModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KvButtonModule,
+                        KvLabelModule,
+                    ], styles: ["img{border-style:solid;border-width:2px;border-radius:50%;object-fit:cover}i{font-size:22px}.botao-alterar-foto{border-style:none;width:max-content;background-color:#002542;color:#000;font-weight:700;cursor:pointer;padding:7px 9px}.botao-alterar-foto i{color:#fff}.botao-excluir-foto{border-style:none;width:max-content;background-color:#002542;color:#000;font-weight:700;cursor:pointer;padding:7px 9px}.botao-excluir-foto i{color:#fff}.btn{position:absolute;top:87%;left:87%;transform:translate(-50%,-50%)}.image-container{display:inline-block;position:relative}.modal-content{position:relative;background-color:#fefefe;margin:1% auto;padding:20px;width:80%;max-width:fit-content;text-align:center;border-radius:12px}.crop-container{display:flex;justify-content:center;align-items:center}.crop-canvas{border:1px solid #d1d5db;border-radius:12px;width:100%;height:auto}.crop-border{position:absolute;border:2px dashed #9ca3af;pointer-events:none}.zoom-container{padding-top:20px;padding-bottom:20px}.button-container{display:flex;align-items:center;justify-content:flex-end;flex-direction:row;margin-top:24px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.DynamicDialogRef }, { type: i1$3.DialogService }], propDecorators: { cropCanvas: [{
+                type: ViewChild,
+                args: ['cropCanvas']
+            }], cropBorder: [{
+                type: ViewChild,
+                args: ['cropBorder']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class KvAvatarComponent {
+    constructor(imageService, notificationService, imageCutterService) {
+        this.imageService = imageService;
+        this.notificationService = notificationService;
+        this.imageCutterService = imageCutterService;
+        this.borderColor = '#002542';
+        this.btnsColor = '#002542';
+        this.width = 135;
+        this.height = 135;
+        this.btnAlterarFoto = false;
+        this.imageUrlChange = new EventEmitter();
+        this.removerFotoEvent = new EventEmitter();
+        this.file = null;
+        this.existeLogo = false;
+        this.selectedImage = '';
+        this.imageUrl = input(this.imageService.userDefaultImage());
+        this.imageSource = signal(this.imageService.userDefaultImage());
+        this.imageLoaded = signal(false);
+    }
+    ngOnInit() {
+        this.imageSource.set(this.imageUrl());
+        this.carregaImagemInicial();
+    }
+    carregaImagemInicial() {
+        const imageUrl = this.imageUrl();
+        if (imageUrl && (imageUrl.startsWith('data:image') || imageUrl.startsWith('http') || imageUrl.startsWith('https'))) {
+            this.existeLogo = true;
+        }
+        else if (imageUrl && imageUrl.length > 0) {
+            this.existeLogo = true;
+            this.imageSource.set('data:image/jpg;base64,' + imageUrl);
+        }
+        else {
+            this.existeLogo = false;
+            this.imageSource.set(this.imageService.userDefaultImage());
         }
     }
-    updateCanvasSize() {
-        if (this.cropCanvas && this.cropCanvas.nativeElement) {
-            const canvas = this.cropCanvas.nativeElement;
-            const ctx = canvas.getContext('2d');
-            const img = new Image();
-            img.src = this.selectedImage;
-            this.imgCanva.set(img);
-            img.onload = () => {
-                this.imageLoaded = true;
-                canvas.width = this.retornaTamanhoCanvas();
-                canvas.height = 400;
-                this.imageX = (canvas.width - img.width * this.scaleFactor) / 2;
-                this.imageY = 0; // A imagem começa no topo do canvas
-                this.canvasWidth.set(canvas.width);
-                this.canvasHeight.set(canvas.height);
-                this.redrawCanvas(ctx, img);
-            };
+    onImageLoad() {
+        this.imageLoaded.set(true);
+    }
+    openFile() {
+        const inputElement = document.getElementById('fotoEscolhida');
+        if (inputElement) {
+            inputElement.click();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvAvatarComponent, deps: [{ token: ImagensService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.8", type: KvAvatarComponent, selector: "kv-avatar", inputs: { borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: false, isRequired: false, transformFunction: null }, btnsColor: { classPropertyName: "btnsColor", publicName: "btnsColor", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, btnAlterarFoto: { classPropertyName: "btnAlterarFoto", publicName: "btnAlterarFoto", isSignal: false, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUrlChange: "imageUrlChange", onModalOpen: "onModalOpen", removerFotoEvent: "removerFotoEvent" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "cropCanvas", first: true, predicate: ["cropCanvas"], descendants: true }, { propertyName: "cropBorder", first: true, predicate: ["cropBorder"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"image-container\">\r\n  <img [src]=\"imageSource()\" alt=\"Foto\" class=\"container-foto\" [style.border-color]=\"borderColor\" [style.width.px]=\"width\" [style.height.px]=\"height\" (error)=\"handleImageError($event)\">\r\n  <div class=\"btn\">\r\n    <input #fileInput *ngIf=\"btnAlterarFoto\" id=\"fotoEscolhida\" type=\"file\" accept=\"image/*\" style=\"display:none\" (change)=\"selectFotoSelecionada($any($event))\">\r\n    <button *ngIf=\"btnAlterarFoto && !existeLogo\" class=\"botao-alterar-foto border-circle\" [style.background-color]=\"btnsColor\" (click)=\"openFile()\">\r\n      <i class=\"material-symbols-outlined\">photo_camera</i>\r\n    </button>\r\n    \r\n    <button *ngIf=\"btnAlterarFoto && existeLogo\" [style.background-color]=\"btnsColor\"\r\n     class=\"botao-excluir-foto border-circle\r\n            hover:shadow-3\r\n            active:shadow-5\"\r\n     (click)=\"questionRemoverFoto()\">\r\n      <i class=\"material-symbols-outlined\">delete</i>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"showCropModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div class=\"crop-container\">\r\n      <canvas #cropCanvas class=\"crop-canvas\"></canvas>\r\n      <div #cropBorder class=\"crop-border\"></div>\r\n    </div>\r\n\r\n    <div class=\"w-full mt-2\">\r\n      <kv-label label=\"Zoom\" style=\"text-align: left;\"/>\r\n      <p-slider [(ngModel)]=\"valueZoom\" (onChange)=\"onZoomChange($event)\"></p-slider>\r\n    </div>\r\n      \r\n    <div class=\"button-container\">  \r\n      <kv-button label=\"Cancelar\" severity=\"tertiary\" icon=\"close\" (click)=\"closeCropModal()\"></kv-button>\r\n      <kv-button label=\"Recortar\" severity=\"primary\" icon=\"crop\" (click)=\"cropImage()\" class=\"ml-2\"></kv-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:35px}:root{--kv-primary-color: #29b92d, --kv-secondary-color: #002542, --kv-terciary-color: #f2f3f5, --kv-primary-hover-color: #249a29, --kv-secondary-hover-color: #002038, --kv-terciary-hover-color: #d9dadb, --kv-primary-active-color: #1c801f, --kv-secondary-active-color: #001729, --kv-terciary-active-color: #c0c1c2, --kv-primary-disable-color: #1c801f, --kv-secondary-disable-color: #001729, --kv-terciary-disable-color: #c0c1c2, }::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}img{border-style:solid;border-width:2px;border-radius:50%;object-fit:cover}i{font-size:22px}.botao-alterar-foto{border-style:none;width:max-content;background-color:#002542;color:#000;font-weight:700;cursor:pointer;padding:7px 9px}.botao-alterar-foto i{color:#fff}.botao-excluir-foto{border-style:none;width:max-content;background-color:#002542;color:#000;font-weight:700;cursor:pointer;padding:7px 9px}.botao-excluir-foto i{color:#fff}.btn{position:absolute;top:87%;left:87%;transform:translate(-50%,-50%)}.image-container{display:inline-block;position:relative}.modal{display:block;position:absolute;z-index:9999;left:0;top:0;width:100vw;height:100vh;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:1% auto;padding:20px;border:1px solid #888;width:80%;max-width:fit-content;text-align:center;border-radius:12px}.crop-container{display:flex;justify-content:center;align-items:center}.crop-canvas{border:1px solid black;border-radius:12px;width:100%;height:auto}.crop-border{position:absolute;border:2px solid black;border-radius:50%;pointer-events:none}.zoom-container{padding-top:20px;padding-bottom:20px}.button-container{display:flex;align-items:center;justify-content:flex-end;flex-direction:row;margin-top:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["label", "icon", "loading", "disabled", "severity", "size", "fullWidth"], outputs: ["onClick"] }, { kind: "component", type: KvLabelComponent, selector: "kv-label", inputs: ["componentId", "label"] }] }); }
+    changeImage(event) {
+        const file = event.target.files[0];
+        if (file.type.startsWith('image/')) {
+            if (this.btnAlterarFoto == true) {
+                this.file = file;
+                const reader = new FileReader();
+                reader.onload = async () => {
+                    try {
+                        const result = await this.imageCutterService.cut(reader.result?.toString() ?? '', this.width, this.height, true);
+                        this.existeLogo = true;
+                        this.imageSource.set(result);
+                        this.selectedImage = result;
+                        this.imageUrlChange.emit(this.imageSource());
+                    }
+                    catch (error) {
+                        this.removerFoto();
+                    }
+                };
+                reader.readAsDataURL(file);
+            }
+            else {
+                // ?! Comportamneto padrão --> Preservar <-- !!!
+                this.file = file;
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    this.imageSource.set(reader.result + '');
+                };
+                reader.readAsDataURL(file);
+                this.imageUrlChange.emit(this.imageSource());
+            }
+        }
+        else {
+            this.notificationService.toastError('Apenas arquivos de imagem são permitidos.');
+        }
+    }
+    questionRemoverFoto() {
+        const msg = '<h3>Você tem certeza que deseja retirar a foto desse usuário?</h3>';
+        this.notificationService.question({
+            type: 'question',
+            message: msg,
+            accept: (data) => {
+                this.removerFoto();
+            },
+            reject: (data) => {
+            }
+        });
+    }
+    removerFoto() {
+        this.imageSource.set('');
+        this.removerFotoEvent.emit();
+        this.existeLogo = false;
+        this.imageUrlChange.emit(this.imageSource());
+        this.fileInput.nativeElement.value = '';
+    }
+    handleImageError(event) {
+        this.imageLoaded.set(true);
+        event.target.src = this.imageService.userDefaultImage();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvAvatarComponent, deps: [{ token: ImagensService }, { token: NotificationService }, { token: ImageCutterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.8", type: KvAvatarComponent, selector: "kv-avatar", inputs: { borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: false, isRequired: false, transformFunction: null }, btnsColor: { classPropertyName: "btnsColor", publicName: "btnsColor", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, btnAlterarFoto: { classPropertyName: "btnAlterarFoto", publicName: "btnAlterarFoto", isSignal: false, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageUrlChange: "imageUrlChange", removerFotoEvent: "removerFotoEvent" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"image-container\" [style.width.px]=\"width\" [style.height.px]=\"height\" >\r\n\r\n  <img\r\n    [src]=\"imageSource()\"\r\n    (load)=\"onImageLoad()\"\r\n    (error)=\"handleImageError($event)\"\r\n    alt=\"Foto\"\r\n    class=\"container-foto\"\r\n    [style.border-color]=\"borderColor\"\r\n    [style.width.px]=\"width\"\r\n    [style.height.px]=\"height\"\r\n    >\r\n\r\n  <div class=\"btn\">\r\n    <input #fileInput *ngIf=\"btnAlterarFoto\" id=\"fotoEscolhida\" type=\"file\" accept=\"image/*\" style=\"display:none\" (change)=\"changeImage($any($event))\">\r\n\r\n    <button *ngIf=\"btnAlterarFoto && !existeLogo\"\r\n      class=\"botao-alterar-foto border-circle\"\r\n      [style.background-color]=\"btnsColor\" (click)=\"openFile()\">\r\n      <i class=\"material-symbols-outlined\">photo_camera</i>\r\n    </button>\r\n\r\n    <button *ngIf=\"btnAlterarFoto && existeLogo\" [style.background-color]=\"btnsColor\"\r\n        class=\"botao-excluir-foto border-circle\r\n                hover:shadow-3\r\n                active:shadow-5\"\r\n        (click)=\"questionRemoverFoto()\">\r\n      <i class=\"material-symbols-outlined\">delete</i>\r\n    </button>\r\n  </div>\r\n\r\n  <ngx-loading [show]=\"!imageLoaded()\" full class=\"container-foto\" [config]=\"{backdropBorderRadius: '100%', fullScreenBackdrop: false }\"></ngx-loading>\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:35px}:root{--kv-primary-color: #29b92d, --kv-secondary-color: #002542, --kv-terciary-color: #f2f3f5, --kv-primary-hover-color: #249a29, --kv-secondary-hover-color: #002038, --kv-terciary-hover-color: #d9dadb, --kv-primary-active-color: #1c801f, --kv-secondary-active-color: #001729, --kv-terciary-active-color: #c0c1c2, --kv-primary-disable-color: #1c801f, --kv-secondary-disable-color: #001729, --kv-terciary-disable-color: #c0c1c2, }::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}img{border-style:solid;border-width:2px;border-radius:50%;object-fit:cover}i{font-size:22px}.botao-alterar-foto{border-style:none;width:max-content;background-color:#002542;color:#000;font-weight:700;cursor:pointer;padding:7px 9px}.botao-alterar-foto i{color:#fff}.botao-excluir-foto{border-style:none;width:max-content;background-color:#002542;color:#000;font-weight:700;cursor:pointer;padding:7px 9px}.botao-excluir-foto i{color:#fff}.btn{position:absolute;top:87%;left:87%;transform:translate(-50%,-50%)}.image-container{display:inline-block;position:relative}.modal{display:block;position:absolute;z-index:9999;left:0;top:0;width:100vw;height:100vh;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:1% auto;padding:20px;border:1px solid #888;width:80%;max-width:fit-content;text-align:center;border-radius:12px}.crop-container{display:flex;justify-content:center;align-items:center}.crop-canvas{border:1px solid black;border-radius:12px;width:100%;height:auto}.crop-border{position:absolute;border:2px solid black;border-radius:50%;pointer-events:none}.zoom-container{padding-top:20px;padding-bottom:20px}.button-container{display:flex;align-items:center;justify-content:flex-end;flex-direction:row;margin-top:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$5.NgxLoadingComponent, selector: "ngx-loading", inputs: ["show", "config", "template"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-avatar', template: "<div class=\"image-container\">\r\n  <img [src]=\"imageSource()\" alt=\"Foto\" class=\"container-foto\" [style.border-color]=\"borderColor\" [style.width.px]=\"width\" [style.height.px]=\"height\" (error)=\"handleImageError($event)\">\r\n  <div class=\"btn\">\r\n    <input #fileInput *ngIf=\"btnAlterarFoto\" id=\"fotoEscolhida\" type=\"file\" accept=\"image/*\" style=\"display:none\" (change)=\"selectFotoSelecionada($any($event))\">\r\n    <button *ngIf=\"btnAlterarFoto && !existeLogo\" class=\"botao-alterar-foto border-circle\" [style.background-color]=\"btnsColor\" (click)=\"openFile()\">\r\n      <i class=\"material-symbols-outlined\">photo_camera</i>\r\n    </button>\r\n    \r\n    <button *ngIf=\"btnAlterarFoto && existeLogo\" [style.background-color]=\"btnsColor\"\r\n     class=\"botao-excluir-foto border-circle\r\n            hover:shadow-3\r\n            active:shadow-5\"\r\n     (click)=\"questionRemoverFoto()\">\r\n      <i class=\"material-symbols-outlined\">delete</i>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"showCropModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n    <div class=\"crop-container\">\r\n      <canvas #cropCanvas class=\"crop-canvas\"></canvas>\r\n      <div #cropBorder class=\"crop-border\"></div>\r\n    </div>\r\n\r\n    <div class=\"w-full mt-2\">\r\n      <kv-label label=\"Zoom\" style=\"text-align: left;\"/>\r\n      <p-slider [(ngModel)]=\"valueZoom\" (onChange)=\"onZoomChange($event)\"></p-slider>\r\n    </div>\r\n      \r\n    <div class=\"button-container\">  \r\n      <kv-button label=\"Cancelar\" severity=\"tertiary\" icon=\"close\" (click)=\"closeCropModal()\"></kv-button>\r\n      <kv-button label=\"Recortar\" severity=\"primary\" icon=\"crop\" (click)=\"cropImage()\" class=\"ml-2\"></kv-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:35px}:root{--kv-primary-color: #29b92d, --kv-secondary-color: #002542, --kv-terciary-color: #f2f3f5, --kv-primary-hover-color: #249a29, --kv-secondary-hover-color: #002038, --kv-terciary-hover-color: #d9dadb, --kv-primary-active-color: #1c801f, --kv-secondary-active-color: #001729, --kv-terciary-active-color: #c0c1c2, --kv-primary-disable-color: #1c801f, --kv-secondary-disable-color: #001729, --kv-terciary-disable-color: #c0c1c2, }::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}img{border-style:solid;border-width:2px;border-radius:50%;object-fit:cover}i{font-size:22px}.botao-alterar-foto{border-style:none;width:max-content;background-color:#002542;color:#000;font-weight:700;cursor:pointer;padding:7px 9px}.botao-alterar-foto i{color:#fff}.botao-excluir-foto{border-style:none;width:max-content;background-color:#002542;color:#000;font-weight:700;cursor:pointer;padding:7px 9px}.botao-excluir-foto i{color:#fff}.btn{position:absolute;top:87%;left:87%;transform:translate(-50%,-50%)}.image-container{display:inline-block;position:relative}.modal{display:block;position:absolute;z-index:9999;left:0;top:0;width:100vw;height:100vh;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:1% auto;padding:20px;border:1px solid #888;width:80%;max-width:fit-content;text-align:center;border-radius:12px}.crop-container{display:flex;justify-content:center;align-items:center}.crop-canvas{border:1px solid black;border-radius:12px;width:100%;height:auto}.crop-border{position:absolute;border:2px solid black;border-radius:50%;pointer-events:none}.zoom-container{padding-top:20px;padding-bottom:20px}.button-container{display:flex;align-items:center;justify-content:flex-end;flex-direction:row;margin-top:24px}\n"] }]
-        }], ctorParameters: () => [{ type: ImagensService }, { type: NotificationService }], propDecorators: { borderColor: [{
+            args: [{ selector: 'kv-avatar', template: "<div class=\"image-container\" [style.width.px]=\"width\" [style.height.px]=\"height\" >\r\n\r\n  <img\r\n    [src]=\"imageSource()\"\r\n    (load)=\"onImageLoad()\"\r\n    (error)=\"handleImageError($event)\"\r\n    alt=\"Foto\"\r\n    class=\"container-foto\"\r\n    [style.border-color]=\"borderColor\"\r\n    [style.width.px]=\"width\"\r\n    [style.height.px]=\"height\"\r\n    >\r\n\r\n  <div class=\"btn\">\r\n    <input #fileInput *ngIf=\"btnAlterarFoto\" id=\"fotoEscolhida\" type=\"file\" accept=\"image/*\" style=\"display:none\" (change)=\"changeImage($any($event))\">\r\n\r\n    <button *ngIf=\"btnAlterarFoto && !existeLogo\"\r\n      class=\"botao-alterar-foto border-circle\"\r\n      [style.background-color]=\"btnsColor\" (click)=\"openFile()\">\r\n      <i class=\"material-symbols-outlined\">photo_camera</i>\r\n    </button>\r\n\r\n    <button *ngIf=\"btnAlterarFoto && existeLogo\" [style.background-color]=\"btnsColor\"\r\n        class=\"botao-excluir-foto border-circle\r\n                hover:shadow-3\r\n                active:shadow-5\"\r\n        (click)=\"questionRemoverFoto()\">\r\n      <i class=\"material-symbols-outlined\">delete</i>\r\n    </button>\r\n  </div>\r\n\r\n  <ngx-loading [show]=\"!imageLoaded()\" full class=\"container-foto\" [config]=\"{backdropBorderRadius: '100%', fullScreenBackdrop: false }\"></ngx-loading>\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:35px}:root{--kv-primary-color: #29b92d, --kv-secondary-color: #002542, --kv-terciary-color: #f2f3f5, --kv-primary-hover-color: #249a29, --kv-secondary-hover-color: #002038, --kv-terciary-hover-color: #d9dadb, --kv-primary-active-color: #1c801f, --kv-secondary-active-color: #001729, --kv-terciary-active-color: #c0c1c2, --kv-primary-disable-color: #1c801f, --kv-secondary-disable-color: #001729, --kv-terciary-disable-color: #c0c1c2, }::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}img{border-style:solid;border-width:2px;border-radius:50%;object-fit:cover}i{font-size:22px}.botao-alterar-foto{border-style:none;width:max-content;background-color:#002542;color:#000;font-weight:700;cursor:pointer;padding:7px 9px}.botao-alterar-foto i{color:#fff}.botao-excluir-foto{border-style:none;width:max-content;background-color:#002542;color:#000;font-weight:700;cursor:pointer;padding:7px 9px}.botao-excluir-foto i{color:#fff}.btn{position:absolute;top:87%;left:87%;transform:translate(-50%,-50%)}.image-container{display:inline-block;position:relative}.modal{display:block;position:absolute;z-index:9999;left:0;top:0;width:100vw;height:100vh;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:1% auto;padding:20px;border:1px solid #888;width:80%;max-width:fit-content;text-align:center;border-radius:12px}.crop-container{display:flex;justify-content:center;align-items:center}.crop-canvas{border:1px solid black;border-radius:12px;width:100%;height:auto}.crop-border{position:absolute;border:2px solid black;border-radius:50%;pointer-events:none}.zoom-container{padding-top:20px;padding-bottom:20px}.button-container{display:flex;align-items:center;justify-content:flex-end;flex-direction:row;margin-top:24px}\n"] }]
+        }], ctorParameters: () => [{ type: ImagensService }, { type: NotificationService }, { type: ImageCutterService }], propDecorators: { borderColor: [{
                 type: Input
             }], btnsColor: [{
                 type: Input
@@ -4173,71 +4704,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 type: Input
             }], height: [{
                 type: Input
+            }], btnAlterarFoto: [{
+                type: Input
             }], imageUrlChange: [{
                 type: Output
-            }], onModalOpen: [{
-                type: Output
             }], removerFotoEvent: [{
                 type: Output
-            }], btnAlterarFoto: [{
-                type: Input
-            }], cropCanvas: [{
-                type: ViewChild,
-                args: ['cropCanvas']
-            }], cropBorder: [{
-                type: ViewChild,
-                args: ['cropBorder']
             }], fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
-            }], onWindowResize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
             }] } });
 
-class KvButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvButtonModule, declarations: [KvButtonComponent], imports: [CommonModule,
-            PrimeNgModule], exports: [KvButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvButtonModule, imports: [CommonModule,
-            PrimeNgModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        KvButtonComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        PrimeNgModule
-                    ],
-                    exports: [
-                        KvButtonComponent
-                    ]
-                }]
-        }] });
-
-class KvLabelModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvLabelModule, declarations: [KvLabelComponent], imports: [CommonModule], exports: [KvLabelComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLabelModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLabelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        KvLabelComponent
-                    ],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [
-                        KvLabelComponent
-                    ]
-                }]
-        }] });
-
 class KvAvatarModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvAvatarModule, declarations: [KvAvatarComponent], imports: [CommonModule,
@@ -4247,7 +4724,8 @@ class KvAvatarModule {
             FormsModule,
             ReactiveFormsModule,
             KvButtonModule,
-            KvLabelModule], exports: [KvAvatarComponent] }); }
+            KvLabelModule,
+            NgxLoadingModule], exports: [KvAvatarComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvAvatarModule, imports: [CommonModule,
             ButtonModule,
             FileUploadModule,
@@ -4255,7 +4733,8 @@ class KvAvatarModule {
             FormsModule,
             ReactiveFormsModule,
             KvButtonModule,
-            KvLabelModule] }); }
+            KvLabelModule,
+            NgxLoadingModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvAvatarModule, decorators: [{
             type: NgModule,
@@ -4272,6 +4751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                         ReactiveFormsModule,
                         KvButtonModule,
                         KvLabelModule,
+                        NgxLoadingModule
                     ],
                     exports: [
                         KvAvatarComponent
@@ -4399,7 +4879,7 @@ class KvCarouselComponent {
         window.open(link, '_blank');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.8", type: KvCarouselComponent, selector: "kv-carousel", inputs: { heightCarousel: { classPropertyName: "heightCarousel", publicName: "heightCarousel", isSignal: true, isRequired: false, transformFunction: null }, carouselData: { classPropertyName: "carouselData", publicName: "carouselData", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "carouselContainer", first: true, predicate: Carousel, descendants: true, isSignal: true }], ngImport: i0, template: "<p-carousel\r\n  [value]=\"carouselData\"\r\n  [indicatorStyleClass]=\"'carousel-indicator'\"\r\n  [autoplayInterval]=\"5000\"\r\n  [showIndicators]=\"true\"\r\n  [showNavigators]=\"false\"\r\n  [numVisible]=\"1\"\r\n  [numScroll]=\"1\"\r\n  [circular]=\"true\"\r\n  styleClass=\"h-full\"\r\n>\r\n  >\r\n  <ng-template\r\n    pTemplate=\"item\"\r\n    let-banner\r\n    class=\"justify-content-center align-items-center\"\r\n  >\r\n    <img\r\n      [src]=\"banner.img\"\r\n      class=\"w-full border-round-banner\"\r\n      [style.height.px]=\"heightComputed()\"\r\n      (click)=\"navigateToLink(banner.link)\"\r\n    />\r\n  </ng-template>\r\n</p-carousel>\r\n", styles: ["::ng-deep .p-carousel-indicators{position:absolute;left:50%;transform:translate(-50%);bottom:-1rem}::ng-deep .carousel-indicator{width:15px!important;height:4px!important;margin:-3px!important;padding:0!important;background-color:#eeeeeed0}::ng-deep .carousel-indicator:hover{background-color:#efefef}button.p-carousel-indicator.p-link{background-color:#f0f8ff!important}::ng-deep .p-carousel .p-carousel-content{overflow:hidden!important;position:relative}::ng-deep .border-round-banner{border-radius:20px!important;max-height:500px}\n"], dependencies: [{ kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$2.Carousel, selector: "p-carousel", inputs: ["page", "numVisible", "numScroll", "responsiveOptions", "orientation", "verticalViewPortHeight", "contentClass", "indicatorsContentClass", "indicatorsContentStyle", "indicatorStyleClass", "indicatorStyle", "value", "circular", "showIndicators", "showNavigators", "autoplayInterval", "style", "styleClass"], outputs: ["onPage"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.8", type: KvCarouselComponent, selector: "kv-carousel", inputs: { heightCarousel: { classPropertyName: "heightCarousel", publicName: "heightCarousel", isSignal: true, isRequired: false, transformFunction: null }, carouselData: { classPropertyName: "carouselData", publicName: "carouselData", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "carouselContainer", first: true, predicate: Carousel, descendants: true, isSignal: true }], ngImport: i0, template: "<p-carousel\r\n  [value]=\"carouselData\"\r\n  [indicatorStyleClass]=\"'carousel-indicator'\"\r\n  [autoplayInterval]=\"5000\"\r\n  [showIndicators]=\"true\"\r\n  [showNavigators]=\"false\"\r\n  [numVisible]=\"1\"\r\n  [numScroll]=\"1\"\r\n  [circular]=\"true\"\r\n  styleClass=\"h-full\"\r\n>\r\n  >\r\n  <ng-template\r\n    pTemplate=\"item\"\r\n    let-banner\r\n    class=\"justify-content-center align-items-center\"\r\n  >\r\n    <img\r\n      [src]=\"banner.img\"\r\n      class=\"w-full border-round-banner\"\r\n      [style.height.px]=\"heightComputed()\"\r\n      (click)=\"navigateToLink(banner.link)\"\r\n    />\r\n  </ng-template>\r\n</p-carousel>\r\n", styles: ["::ng-deep .p-carousel-indicators{position:absolute;left:50%;transform:translate(-50%);bottom:-1rem}::ng-deep .carousel-indicator{width:15px!important;height:4px!important;margin:-3px!important;padding:0!important;background-color:#eeeeeed0}::ng-deep .carousel-indicator:hover{background-color:#efefef}button.p-carousel-indicator.p-link{background-color:#f0f8ff!important}::ng-deep .p-carousel .p-carousel-content{overflow:hidden!important;position:relative}::ng-deep .border-round-banner{border-radius:20px!important;max-height:500px}\n"], dependencies: [{ kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$3.Carousel, selector: "p-carousel", inputs: ["page", "numVisible", "numScroll", "responsiveOptions", "orientation", "verticalViewPortHeight", "contentClass", "indicatorsContentClass", "indicatorsContentStyle", "indicatorStyleClass", "indicatorStyle", "value", "circular", "showIndicators", "showNavigators", "autoplayInterval", "style", "styleClass"], outputs: ["onPage"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvCarouselComponent, decorators: [{
             type: Component,
@@ -4998,7 +5478,7 @@ class KvSelectButtonComponent {
         this.optionClick.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvSelectButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvSelectButtonComponent, selector: "kv-select-button", inputs: { formGroup: "formGroup", formControlName: "formControlName", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", mutiple: "mutiple", disabled: "disabled", value: "value" }, outputs: { onSelectionChange: "onSelectionChange", optionClick: "optionClick" }, ngImport: i0, template: "@if(value) {\r\n<p-selectButton\r\n    [options]=\"options\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [optionValue]=\"optionValue\"\r\n    (onChange)=\"selectionChange($event)\"\r\n    (onOptionClick)=\"onOptionClick($event)\"\r\n    [multiple]=\"mutiple\"\r\n    [disabled]=\"disabled\"\r\n    [(ngModel)]=\"value\"\r\n/>\r\n} @else {\r\n<div [formGroup]=\"formGroup\">\r\n    <p-selectButton\r\n        [options]=\"options\"\r\n        [optionLabel]=\"optionLabel\"\r\n        [optionValue]=\"optionValue\"\r\n        (onChange)=\"selectionChange($event)\"\r\n        (onOptionClick)=\"onOptionClick($event)\"\r\n        [multiple]=\"mutiple\"\r\n        [disabled]=\"disabled\"\r\n        [formControlName]=\"formControlName\"\r\n        [(ngModel)]=\"value\"\r\n    />\r\n</div>\r\n}", styles: [":host ::ng-deep .p-selectbutton .p-button.p-highlight{background:#183462!important;border:#183462;box-shadow:0 4px 10px #00000008,0 0 2px #0000000f,0 2px 6px #0000001f}\n"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvSelectButtonComponent, selector: "kv-select-button", inputs: { formGroup: "formGroup", formControlName: "formControlName", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", mutiple: "mutiple", disabled: "disabled", value: "value" }, outputs: { onSelectionChange: "onSelectionChange", optionClick: "optionClick" }, ngImport: i0, template: "@if(value) {\r\n<p-selectButton\r\n    [options]=\"options\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [optionValue]=\"optionValue\"\r\n    (onChange)=\"selectionChange($event)\"\r\n    (onOptionClick)=\"onOptionClick($event)\"\r\n    [multiple]=\"mutiple\"\r\n    [disabled]=\"disabled\"\r\n    [(ngModel)]=\"value\"\r\n/>\r\n} @else {\r\n<div [formGroup]=\"formGroup\">\r\n    <p-selectButton\r\n        [options]=\"options\"\r\n        [optionLabel]=\"optionLabel\"\r\n        [optionValue]=\"optionValue\"\r\n        (onChange)=\"selectionChange($event)\"\r\n        (onOptionClick)=\"onOptionClick($event)\"\r\n        [multiple]=\"mutiple\"\r\n        [disabled]=\"disabled\"\r\n        [formControlName]=\"formControlName\"\r\n        [(ngModel)]=\"value\"\r\n    />\r\n</div>\r\n}", styles: [":host ::ng-deep .p-selectbutton .p-button.p-highlight{background:#183462!important;border:#183462;box-shadow:0 4px 10px #00000008,0 0 2px #0000000f,0 2px 6px #0000001f}\n"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$4.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvSelectButtonComponent, decorators: [{
             type: Component,
@@ -5589,112 +6069,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 }]
         }] });
 
-class KvModalComponent {
-    constructor(dynamicDialogRef) {
-        this.dynamicDialogRef = dynamicDialogRef;
-        /**
-         * Ações do Dialog
-         */
-        this.actions = [];
-        this.actionsPosition = 'right';
-        this.justify_content = 'justify-content-start';
-    }
-    ngOnInit() {
-        this.addSubTitle();
-        this.setMarginBottom();
-        this.defPositionButtons();
-    }
-    onWindowResize() {
-        this.setMarginBottom();
-    }
-    /**
-     * Adiciona sub-título à tela
-     */
-    addSubTitle() {
-        if (this.subtitle) {
-            const headerElement = document.querySelector('.p-dialog .p-dialog-header');
-            if (headerElement) {
-                const subtitleElement = document.createElement('span');
-                subtitleElement.textContent = this.subtitle;
-                subtitleElement.style.fontSize = '0.75rem';
-                subtitleElement.style.width = '100%';
-                subtitleElement.style.marginLeft = '2px';
-                headerElement.appendChild(subtitleElement);
-            }
-            if (this.subHeader) {
-                const headerElement = document.querySelector('.p-dialog .p-dialog-header');
-                const subHeader = this.subHeader.nativeElement;
-                if (headerElement && this.subHeader) {
-                    subHeader.style.width = '100%';
-                    subHeader.style.marginLeft = '2px';
-                    headerElement.appendChild(this.subHeader.nativeElement);
-                }
-            }
-        }
-    }
-    defPositionButtons() {
-        if (this.actionsPosition === 'right') {
-            this.justify_content = 'justify-content-end';
-        }
-        if (this.actionsPosition === 'center') {
-            this.justify_content = 'justify-content-center';
-        }
-        if (this.actionsPosition === 'left') {
-            this.justify_content = 'justify-content-start';
-        }
-    }
-    setMarginBottom() {
-        let actionsFieldHeight = document.getElementById('actions-field')?.offsetHeight;
-        let divBox = document.getElementById('content-modal');
-        if (divBox) {
-            if (actionsFieldHeight) {
-                divBox.style.marginBottom = `${actionsFieldHeight + 30}px`;
-            }
-            else {
-                divBox.style.marginBottom = `50px`;
-            }
-        }
-    }
-    clickExecute(action) {
-        if (action.command) {
-            action.command();
-            if (action.closeAfterClick != false)
-                this.dynamicDialogRef.close();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvModalComponent, deps: [{ token: i1$3.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvModalComponent, selector: "kv-modal", inputs: { actions: "actions", actionsPosition: "actionsPosition", subtitle: "subtitle", subHeader: "subHeader" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, ngImport: i0, template: "<!-- RENDERIZA\u00C7\u00C3O DO MODAL -->\r\n<div class=\"col-12 mb-4\" id=\"content-modal\">\r\n    <!-- COLOCAR UM COMPONENTE SUBHEADER AQUI -->\r\n\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- RENDERIZA\u00C7\u00C3O DOS BOT\u00D5ES -->\r\n\r\n<div class=\"bg-white flex flex-row flex-wrap gap-2 p-2 modal-barra-acoes {{justify_content}}\" *ngIf=\"actions\" id=\"actions-field\">\r\n    <kv-button\r\n        *ngFor=\" let action of actions\"\r\n        [ngClass]=\"action.visible==false?'hidden':''\"\r\n        icon=\"{{action.icon}}\"\r\n        label=\"{{action.label}}\"\r\n        [disabled]=\"action.disabled || false\"\r\n        (onClick)=\"clickExecute(action)\"\r\n        [severity]=\"action.severity ||'primary'\"\r\n    />\r\n</div>\r\n", styles: ["*{padding-bottom:0rem;padding-top:0rem}.barra-acoes{position:fixed;bottom:0;left:0;right:0;background-color:#fff;padding:10px;z-index:999}#page-form-container{padding-bottom:40px}@media screen and (max-width: 991px){#page-form-container{padding-bottom:100px}}.modal-barra-acoes{position:fixed;bottom:0;left:0;right:0;z-index:999;margin-right:1.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["label", "icon", "loading", "disabled", "severity", "size", "fullWidth"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kv-modal', template: "<!-- RENDERIZA\u00C7\u00C3O DO MODAL -->\r\n<div class=\"col-12 mb-4\" id=\"content-modal\">\r\n    <!-- COLOCAR UM COMPONENTE SUBHEADER AQUI -->\r\n\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- RENDERIZA\u00C7\u00C3O DOS BOT\u00D5ES -->\r\n\r\n<div class=\"bg-white flex flex-row flex-wrap gap-2 p-2 modal-barra-acoes {{justify_content}}\" *ngIf=\"actions\" id=\"actions-field\">\r\n    <kv-button\r\n        *ngFor=\" let action of actions\"\r\n        [ngClass]=\"action.visible==false?'hidden':''\"\r\n        icon=\"{{action.icon}}\"\r\n        label=\"{{action.label}}\"\r\n        [disabled]=\"action.disabled || false\"\r\n        (onClick)=\"clickExecute(action)\"\r\n        [severity]=\"action.severity ||'primary'\"\r\n    />\r\n</div>\r\n", styles: ["*{padding-bottom:0rem;padding-top:0rem}.barra-acoes{position:fixed;bottom:0;left:0;right:0;background-color:#fff;padding:10px;z-index:999}#page-form-container{padding-bottom:40px}@media screen and (max-width: 991px){#page-form-container{padding-bottom:100px}}.modal-barra-acoes{position:fixed;bottom:0;left:0;right:0;z-index:999;margin-right:1.5rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.DynamicDialogRef }], propDecorators: { actions: [{
-                type: Input
-            }], actionsPosition: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }], subHeader: [{
-                type: Input
-            }], onWindowResize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
-            }] } });
-
-class KvModalModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: KvModalModule, declarations: [KvModalComponent], imports: [CommonModule, PrimeNgModule, KvButtonModule], exports: [KvModalComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvModalModule, imports: [CommonModule, PrimeNgModule, KvButtonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvModalModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [KvModalComponent],
-                    imports: [CommonModule, PrimeNgModule, KvButtonModule],
-                    exports: [KvModalComponent],
-                }]
-        }] });
-
 class KvOrgchartComponent {
     constructor(renderer) {
         this.renderer = renderer;
@@ -7128,12 +7502,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
         }] });
 
 class KvImageUploadComponent {
-    constructor(notificationService) {
+    constructor(notificationService, imageCutterService) {
         this.notificationService = notificationService;
+        this.imageCutterService = imageCutterService;
         this.file = null;
         this.fileSrc = null;
         this.widthComponent = '400px';
         this.heightComponent = 'auto';
+        this.cutImage = input(false);
+        this.cutWidth = input(0);
+        this.cutHeight = input(0);
+        this.cutCircle = input(false);
         this.maxHeightImage = '400px';
         this.fileEmit = new EventEmitter();
         this.deleteEmit = new EventEmitter();
@@ -7164,13 +7543,31 @@ class KvImageUploadComponent {
     }
     handleFile(file) {
         if (file.type.startsWith('image/')) {
-            this.file = file;
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                this.fileSrc = reader.result;
-            };
-            reader.readAsDataURL(file);
-            this.fileEmit.emit(file);
+            if (this.cutImage() == true) {
+                this.file = file;
+                const reader = new FileReader();
+                reader.onload = async () => {
+                    try {
+                        const result = await this.imageCutterService.cut(reader.result?.toString() ?? '', this.cutWidth(), this.cutHeight(), this.cutCircle());
+                        this.fileSrc = result;
+                        this.fileEmit.emit(result);
+                    }
+                    catch (error) {
+                        this.deleteImage();
+                    }
+                };
+                reader.readAsDataURL(file);
+            }
+            else {
+                // ?! Comportamneto padrão --> Preservar <-- !!!
+                this.file = file;
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    this.fileSrc = reader.result;
+                };
+                reader.readAsDataURL(file);
+                this.fileEmit.emit(file);
+            }
         }
         else {
             this.notificationService.toastError('Apenas arquivos de imagem são permitidos.');
@@ -7187,15 +7584,18 @@ class KvImageUploadComponent {
     deleteImage() {
         this.file = null;
         this.fileSrc = null;
+        if (this.fileInput) {
+            this.fileInput.nativeElement.value = '';
+        }
         this.deleteEmit.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvImageUploadComponent, deps: [{ token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvImageUploadComponent, selector: "kv-image-upload", inputs: { fileSrc: "fileSrc", widthComponent: "widthComponent", heightComponent: "heightComponent", maxHeightImage: "maxHeightImage", description: "description" }, outputs: { fileEmit: "fileEmit", deleteEmit: "deleteEmit" }, ngImport: i0, template: "<div\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    class=\"relative overflow-hidden border-dashed border-2 border-round-lg border-gray-400 flex justify-content-end\"\r\n    [style.width]=\"widthComponent\"\r\n    [style.height]=\"heightComponent\"\r\n>\r\n\r\n    <div\r\n        class=\"w-full flex align-items-center justify-content-center\"\r\n        style=\"cursor: pointer;\"\r\n        (click)=\"fileInput.click()\"\r\n    >\r\n        <input\r\n            type=\"file\"\r\n            (change)=\"onFileSelected($event)\"\r\n            #fileInput\r\n            hidden\r\n            accept=\"image/*\"\r\n        >\r\n        <div\r\n            *ngIf=\"!fileSrc\"\r\n            class=\"flex flex-column align-items-center justify-content-center\"\r\n        >\r\n            <span\r\n                class=\"material-symbols-outlined mt-2\"\r\n                style=\"font-size: 3rem;\"\r\n            >\r\n                cloud_upload\r\n            </span>\r\n\r\n            @if(description) {\r\n            <p class=\"font-semibold\">{{description}}</p>\r\n            } @else {\r\n            <p class=\"font-semibold\">Arraste e solte uma imagem aqui, ou</p>\r\n            <p class=\"font-semibold\">clique para selecion\u00E1-la</p>\r\n            }\r\n\r\n        </div>\r\n        <div *ngIf=\"fileSrc || file\">\r\n            <img\r\n                [src]=\"fileSrc\"\r\n                [alt]=\"file?.name\"\r\n                class=\"w-full\"\r\n                [style.maxHeight]=\"maxHeightImage\"\r\n            >\r\n        </div>\r\n    </div>\r\n\r\n    @if(fileSrc || file) {\r\n        <button\r\n            style=\"background-color: transparent;\"\r\n            pButton\r\n            (click)=\"deleteImage()\"\r\n            class=\"absolute transition-colors transition-duration-500 text-red-700 hover:text-red-500 w-2rem h-2rem\"\r\n            [text]=\"true\"\r\n            [icon]=\"'pi pi-trash'\"\r\n        >\r\n        </button>\r\n        }\r\n    \r\n\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvImageUploadComponent, deps: [{ token: NotificationService }, { token: ImageCutterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvImageUploadComponent, selector: "kv-image-upload", inputs: { fileSrc: { classPropertyName: "fileSrc", publicName: "fileSrc", isSignal: false, isRequired: false, transformFunction: null }, widthComponent: { classPropertyName: "widthComponent", publicName: "widthComponent", isSignal: false, isRequired: false, transformFunction: null }, heightComponent: { classPropertyName: "heightComponent", publicName: "heightComponent", isSignal: false, isRequired: false, transformFunction: null }, cutImage: { classPropertyName: "cutImage", publicName: "cutImage", isSignal: true, isRequired: false, transformFunction: null }, cutWidth: { classPropertyName: "cutWidth", publicName: "cutWidth", isSignal: true, isRequired: false, transformFunction: null }, cutHeight: { classPropertyName: "cutHeight", publicName: "cutHeight", isSignal: true, isRequired: false, transformFunction: null }, cutCircle: { classPropertyName: "cutCircle", publicName: "cutCircle", isSignal: true, isRequired: false, transformFunction: null }, maxHeightImage: { classPropertyName: "maxHeightImage", publicName: "maxHeightImage", isSignal: false, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { fileEmit: "fileEmit", deleteEmit: "deleteEmit" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    class=\"relative overflow-hidden border-dashed border-2 border-round-lg border-gray-400 flex justify-content-end\"\r\n    [style.width]=\"widthComponent\"\r\n    [style.height]=\"heightComponent\"\r\n>\r\n\r\n    <div\r\n        class=\"w-full flex align-items-center justify-content-center\"\r\n        style=\"cursor: pointer;\"\r\n        (click)=\"fileInput.click()\"\r\n    >\r\n        <input\r\n            type=\"file\"\r\n            (change)=\"onFileSelected($event)\"\r\n            #fileInput\r\n            hidden\r\n            accept=\"image/*\"\r\n        >\r\n        <div\r\n            *ngIf=\"!fileSrc\"\r\n            class=\"flex flex-column align-items-center justify-content-center\"\r\n        >\r\n            <span\r\n                class=\"material-symbols-outlined mt-2\"\r\n                style=\"font-size: 3rem;\"\r\n            >\r\n                cloud_upload\r\n            </span>\r\n\r\n            @if(description) {\r\n            <p class=\"font-semibold\">{{description}}</p>\r\n            } @else {\r\n            <p class=\"font-semibold\">Arraste e solte uma imagem aqui, ou</p>\r\n            <p class=\"font-semibold\">clique para selecion\u00E1-la</p>\r\n            }\r\n\r\n        </div>\r\n        <div *ngIf=\"fileSrc || file\">\r\n            <img\r\n                [src]=\"fileSrc\"\r\n                [alt]=\"file?.name\"\r\n                class=\"w-full\"\r\n                [style.maxHeight]=\"maxHeightImage\"\r\n            >\r\n        </div>\r\n    </div>\r\n\r\n    @if(fileSrc || file) {\r\n        <button\r\n            style=\"background-color: transparent;\"\r\n            pButton\r\n            (click)=\"deleteImage()\"\r\n            class=\"absolute transition-colors transition-duration-500 text-red-700 hover:text-red-500 w-2rem h-2rem\"\r\n            [text]=\"true\"\r\n            [icon]=\"'pi pi-trash'\"\r\n        >\r\n        </button>\r\n        }\r\n\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvImageUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-image-upload', template: "<div\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    class=\"relative overflow-hidden border-dashed border-2 border-round-lg border-gray-400 flex justify-content-end\"\r\n    [style.width]=\"widthComponent\"\r\n    [style.height]=\"heightComponent\"\r\n>\r\n\r\n    <div\r\n        class=\"w-full flex align-items-center justify-content-center\"\r\n        style=\"cursor: pointer;\"\r\n        (click)=\"fileInput.click()\"\r\n    >\r\n        <input\r\n            type=\"file\"\r\n            (change)=\"onFileSelected($event)\"\r\n            #fileInput\r\n            hidden\r\n            accept=\"image/*\"\r\n        >\r\n        <div\r\n            *ngIf=\"!fileSrc\"\r\n            class=\"flex flex-column align-items-center justify-content-center\"\r\n        >\r\n            <span\r\n                class=\"material-symbols-outlined mt-2\"\r\n                style=\"font-size: 3rem;\"\r\n            >\r\n                cloud_upload\r\n            </span>\r\n\r\n            @if(description) {\r\n            <p class=\"font-semibold\">{{description}}</p>\r\n            } @else {\r\n            <p class=\"font-semibold\">Arraste e solte uma imagem aqui, ou</p>\r\n            <p class=\"font-semibold\">clique para selecion\u00E1-la</p>\r\n            }\r\n\r\n        </div>\r\n        <div *ngIf=\"fileSrc || file\">\r\n            <img\r\n                [src]=\"fileSrc\"\r\n                [alt]=\"file?.name\"\r\n                class=\"w-full\"\r\n                [style.maxHeight]=\"maxHeightImage\"\r\n            >\r\n        </div>\r\n    </div>\r\n\r\n    @if(fileSrc || file) {\r\n        <button\r\n            style=\"background-color: transparent;\"\r\n            pButton\r\n            (click)=\"deleteImage()\"\r\n            class=\"absolute transition-colors transition-duration-500 text-red-700 hover:text-red-500 w-2rem h-2rem\"\r\n            [text]=\"true\"\r\n            [icon]=\"'pi pi-trash'\"\r\n        >\r\n        </button>\r\n        }\r\n    \r\n\r\n</div>" }]
-        }], ctorParameters: () => [{ type: NotificationService }], propDecorators: { fileSrc: [{
+            args: [{ selector: 'kv-image-upload', template: "<div\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    class=\"relative overflow-hidden border-dashed border-2 border-round-lg border-gray-400 flex justify-content-end\"\r\n    [style.width]=\"widthComponent\"\r\n    [style.height]=\"heightComponent\"\r\n>\r\n\r\n    <div\r\n        class=\"w-full flex align-items-center justify-content-center\"\r\n        style=\"cursor: pointer;\"\r\n        (click)=\"fileInput.click()\"\r\n    >\r\n        <input\r\n            type=\"file\"\r\n            (change)=\"onFileSelected($event)\"\r\n            #fileInput\r\n            hidden\r\n            accept=\"image/*\"\r\n        >\r\n        <div\r\n            *ngIf=\"!fileSrc\"\r\n            class=\"flex flex-column align-items-center justify-content-center\"\r\n        >\r\n            <span\r\n                class=\"material-symbols-outlined mt-2\"\r\n                style=\"font-size: 3rem;\"\r\n            >\r\n                cloud_upload\r\n            </span>\r\n\r\n            @if(description) {\r\n            <p class=\"font-semibold\">{{description}}</p>\r\n            } @else {\r\n            <p class=\"font-semibold\">Arraste e solte uma imagem aqui, ou</p>\r\n            <p class=\"font-semibold\">clique para selecion\u00E1-la</p>\r\n            }\r\n\r\n        </div>\r\n        <div *ngIf=\"fileSrc || file\">\r\n            <img\r\n                [src]=\"fileSrc\"\r\n                [alt]=\"file?.name\"\r\n                class=\"w-full\"\r\n                [style.maxHeight]=\"maxHeightImage\"\r\n            >\r\n        </div>\r\n    </div>\r\n\r\n    @if(fileSrc || file) {\r\n        <button\r\n            style=\"background-color: transparent;\"\r\n            pButton\r\n            (click)=\"deleteImage()\"\r\n            class=\"absolute transition-colors transition-duration-500 text-red-700 hover:text-red-500 w-2rem h-2rem\"\r\n            [text]=\"true\"\r\n            [icon]=\"'pi pi-trash'\"\r\n        >\r\n        </button>\r\n        }\r\n\r\n\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: NotificationService }, { type: ImageCutterService }], propDecorators: { fileSrc: [{
                 type: Input
             }], widthComponent: [{
                 type: Input
@@ -7209,6 +7609,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 type: Output
             }], deleteEmit: [{
                 type: Output
+            }], fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
             }] } });
 
 class KvImageUploadModule {
@@ -7866,7 +8269,7 @@ class KvFilterFieldsetComponent {
         this.collapsedEvent.emit(this.isCollapsed);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvFilterFieldsetComponent, selector: "kv-filter-fieldset", inputs: { isExpandable: "isExpandable" }, outputs: { collapsedEvent: "collapsedEvent" }, ngImport: i0, template: "<p-fieldset styleClass=\"p-0 mb-2\" >\r\n  <ng-template pTemplate=\"header\">\r\n    @if(isExpandable) {\r\n    <div\r\n      class=\"flex flex-row align-items-center justify-content-center p-1 cursor-pointer\"\r\n      (click)=\"toggleField()\"\r\n    >\r\n      <span\r\n        class=\"material-symbols-outlined flex align-items-center justify-content-center mr-2\"\r\n        style=\"font-size: 1.4rem\"\r\n      >\r\n        {{ isCollapsed ? \"remove\" : \"add\" }}\r\n      </span>\r\n\r\n      <span class=\"text-sm\"> Filtros Avan\u00E7ados </span>\r\n    </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-content></ng-content>\r\n</p-fieldset>\r\n", styles: ["::ng-deep .p-fieldset .p-fieldset-legend{padding:.3rem;margin-left:1rem}::ng-deep .p-fieldset .p-fieldset-legend{background-color:#fff;border:none}::ng-deep .p-fieldset .p-fieldset-legend:hover{background-color:#f5f5f5}::ng-deep .p-fieldset .p-fieldset-legend:active{background-color:#e0e0e0}::ng-deep .p-fieldset .p-fieldset-content{padding-top:0rem}\n"], dependencies: [{ kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$4.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvFilterFieldsetComponent, selector: "kv-filter-fieldset", inputs: { isExpandable: "isExpandable" }, outputs: { collapsedEvent: "collapsedEvent" }, ngImport: i0, template: "<p-fieldset styleClass=\"p-0 mb-2\" >\r\n  <ng-template pTemplate=\"header\">\r\n    @if(isExpandable) {\r\n    <div\r\n      class=\"flex flex-row align-items-center justify-content-center p-1 cursor-pointer\"\r\n      (click)=\"toggleField()\"\r\n    >\r\n      <span\r\n        class=\"material-symbols-outlined flex align-items-center justify-content-center mr-2\"\r\n        style=\"font-size: 1.4rem\"\r\n      >\r\n        {{ isCollapsed ? \"remove\" : \"add\" }}\r\n      </span>\r\n\r\n      <span class=\"text-sm\"> Filtros Avan\u00E7ados </span>\r\n    </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-content></ng-content>\r\n</p-fieldset>\r\n", styles: ["::ng-deep .p-fieldset .p-fieldset-legend{padding:.3rem;margin-left:1rem}::ng-deep .p-fieldset .p-fieldset-legend{background-color:#fff;border:none}::ng-deep .p-fieldset .p-fieldset-legend:hover{background-color:#f5f5f5}::ng-deep .p-fieldset .p-fieldset-legend:active{background-color:#e0e0e0}::ng-deep .p-fieldset .p-fieldset-content{padding-top:0rem}\n"], dependencies: [{ kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$5.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterFieldsetComponent, decorators: [{
             type: Component,
@@ -8554,5 +8957,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseApiService, BaseChartComponent, BaseComponent, BaseComponentButton, BaseComponentCrud, BaseComponentCrudForm, BaseComponentCrudList, BaseComponentDropDown, BaseComponentDropDownExternal, BaseComponentInput, BaseComponentMultiSelect, BasecomponentTable, BreadcrumbsService, CapitalizePipe, ChatService, ComponentProviders, ComponentService, CpfCnpjPipe, DocsService, DragDirective, DynamicInputDirective, FormService, ImagensService, KeevoComponentsModule, KeevoValidators, KvAvatarComponent, KvAvatarModule, KvButtonComponent, KvButtonModule, KvButtonPersonalizeComponent, KvButtonPopupComponent, KvButtonSecondaryComponent, KvButtonSuccessComponent, KvButtonsModule, KvCarouselComponent, KvCarouselModule, KvChartComponent, KvChartModule, KvCheckComponent, KvDropdownComponent, KvEditorComponent, KvErrorComponent, KvFileUploadComponent, KvFileUploadModule, KvFileViewerComponent, KvFileViewerModule, KvFilterCardComponent, KvFilterCardModule, KvFilterFieldsetComponent, KvFilterFieldsetModule, KvGIconComponent, KvGIconModule, KvHomeCardComponent, KvHomeCardModule, KvImageUploadComponent, KvImageUploadModule, KvInputCalendarComponent, KvInputMaskComponent, KvInputNumberComponent, KvInputPasswordComponent, KvInputTextCheckboxComponent, KvInputTextComponent, KvInputTextareaComponent, KvInputTimeComponent, KvInputsModule, KvLayoutComponent, KvLayoutModule, KvLoaderComponent, KvLoaderModule, KvLoaderService, KvLoginComponent, KvLoginModule, KvModalComponent, KvModalModule, KvMultiSelectComponent, KvOrgchartComponent, KvOrgchartModule, KvPageFormComponent, KvPageFormModule, KvPageStepperComponent, KvPageStepperodule, KvPickListComponent, KvPickListModule, KvProgressBarModule, KvRadioGroupComponent, KvReportComponent, KvReportModule, KvSelectButtonComponent, KvSelectButtonsComponent, KvStepperComponent, KvStepperModule, KvSwitchComponent, KvTableComponent, KvTableEditComponent, KvTableEditModule, KvTableExpandableComponent, KvTableExpandableModule, KvTableModule, KvTreeViewComponent, KvTreetableComponent, KvTreetableModule, KvWorkspaceModule, KvtreeViewModule, MaskPipe, NotificationService, ObjectService, PeriodosChart, PipesModule, PrimeNgModule, ProgressBarComponent, TablePaginate, TelefonePipe, TemplateDirective, TranslatePrimeng, WorkspaceComponent, getOrExecute, kvErrorModule, loading, mapToMenuItem };
+export { BaseApiService, BaseChartComponent, BaseComponent, BaseComponentButton, BaseComponentCrud, BaseComponentCrudForm, BaseComponentCrudList, BaseComponentDropDown, BaseComponentDropDownExternal, BaseComponentInput, BaseComponentMultiSelect, BasecomponentTable, BreadcrumbsService, CapitalizePipe, ChatService, ComponentProviders, ComponentService, CpfCnpjPipe, DocsService, DragDirective, DynamicInputDirective, FormService, ImageCutterService, ImagensService, KeevoComponentsModule, KeevoValidators, KvAvatarComponent, KvAvatarModule, KvButtonComponent, KvButtonModule, KvButtonPersonalizeComponent, KvButtonPopupComponent, KvButtonSecondaryComponent, KvButtonSuccessComponent, KvButtonsModule, KvCarouselComponent, KvCarouselModule, KvChartComponent, KvChartModule, KvCheckComponent, KvDropdownComponent, KvEditorComponent, KvErrorComponent, KvFileUploadComponent, KvFileUploadModule, KvFileViewerComponent, KvFileViewerModule, KvFilterCardComponent, KvFilterCardModule, KvFilterFieldsetComponent, KvFilterFieldsetModule, KvGIconComponent, KvGIconModule, KvHomeCardComponent, KvHomeCardModule, KvImageUploadComponent, KvImageUploadModule, KvInputCalendarComponent, KvInputMaskComponent, KvInputNumberComponent, KvInputPasswordComponent, KvInputTextCheckboxComponent, KvInputTextComponent, KvInputTextareaComponent, KvInputTimeComponent, KvInputsModule, KvLayoutComponent, KvLayoutModule, KvLoaderComponent, KvLoaderModule, KvLoaderService, KvLoginComponent, KvLoginModule, KvModalComponent, KvModalModule, KvMultiSelectComponent, KvOrgchartComponent, KvOrgchartModule, KvPageFormComponent, KvPageFormModule, KvPageStepperComponent, KvPageStepperodule, KvPickListComponent, KvPickListModule, KvProgressBarModule, KvRadioGroupComponent, KvReportComponent, KvReportModule, KvSelectButtonComponent, KvSelectButtonsComponent, KvStepperComponent, KvStepperModule, KvSwitchComponent, KvTableComponent, KvTableEditComponent, KvTableEditModule, KvTableExpandableComponent, KvTableExpandableModule, KvTableModule, KvTreeViewComponent, KvTreetableComponent, KvTreetableModule, KvWorkspaceModule, KvtreeViewModule, MaskPipe, NotificationService, ObjectService, PeriodosChart, PipesModule, PrimeNgModule, ProgressBarComponent, TablePaginate, TelefonePipe, TemplateDirective, TranslatePrimeng, WorkspaceComponent, getOrExecute, kvErrorModule, loading, mapToMenuItem };
 //# sourceMappingURL=keevo-components.mjs.map