keevo-components 1.8.457 → 1.8.459

package/fesm2022/keevo-components.mjs

@@ -48,16 +48,14 @@ 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 { ImageCropperComponent } from 'ngx-image-cropper';
 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$3 from 'primeng/carousel';
+import * as i2$2 from 'primeng/carousel';
 import { CarouselModule, Carousel } from 'primeng/carousel';
 import { ChipModule } from 'primeng/chip';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
@@ -65,8 +63,9 @@ import * as i7$3 from 'primeng/contextmenu';
 import { ContextMenuModule } from 'primeng/contextmenu';
 import { DataViewModule } from 'primeng/dataview';
 import { EditorModule } from 'primeng/editor';
-import * as i2$5 from 'primeng/fieldset';
+import * as i2$4 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';
@@ -107,7 +106,7 @@ 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$4 from 'primeng/selectbutton';
+import * as i2$3 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import * as i3$2 from 'primeng/stepper';
 import { StepperModule } from 'primeng/stepper';
@@ -115,6 +114,7 @@ import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import * as i7$2 from 'primeng/treeselect';
 import { TreeSelectModule } from 'primeng/treeselect';
+import { SliderModule } from 'primeng/slider';
 import * as i1$5 from 'ngx-loading';
 import { NgxLoadingModule } from 'ngx-loading';
 import Quill from 'quill';
@@ -2570,8 +2570,7 @@ class BaseComponentDropDown extends BaseComponentInput {
     }
     onInputFilter(event) {
         if (event) {
-            if (event.filter == '')
-                this.onFilter.emit(event.filter);
+            this.onFilter.emit(event.filter);
             if (event.filter) {
                 if (event.filter.length > 2) {
                     let fil = { termoPesquisa: event.filter };
@@ -4261,158 +4260,39 @@ class ImageCutterService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ImageCutterService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            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.imageChangedEvent = null;
+        this.croppedImage = '';
+        //#region Variáveis de controle
         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;
-        //? Fator de escala da imagem e zoom
-        this.scaleFactorReadOnly = computed(() => {
-            return Math.min(this.scaleFactor(), this.scaleFactorInicial() + 5);
-        });
-        this.scaleFactorInicial = signal(null);
-        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);
-        //#endregion
-        //#region handlers de eventos
-        this.comparadorOnZoomChange = this.scaleFactorInicial();
-        this.atualizaTamanhoTela();
-    }
-    setScaleFactorModel(valor) {
-        this.scaleFactorModel = valor - this.scaleFactorInicial();
-        this.scaleFactor.set(valor);
+        this.aspectRatio = signal(1 / 1);
     }
-    onWindowResize() {
-        this.atualizaTamanhoTela();
-        this.updateCanvasSize();
-        this.atualizaCutBorder();
+    fileChangeEvent(event) {
+        this.imageChangedEvent = event;
     }
-    atualizaTamanhoTela() {
-        this.widthTela.set(window.innerWidth);
-        this.heigthTela.set(window.innerHeight);
+    imageCropped(event) {
+        this.croppedImage = event.base64;
     }
-    ngAfterViewInit() {
+    imageLoaded(image) { }
+    cropperReady() { }
+    loadImageFailed() { }
+    //#endregion
+    ngAfterContentInit() {
         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());
-        };
+        this.recuperaInstanciaDialog();
+        this.setAspectRatio();
     }
-    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.scaleFactorInicial.set(scaleFactor);
-            this.setScaleFactorModel(scaleFactor);
-        }
-        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.scaleFactorInicial.set(scaleFactor);
-            this.setScaleFactorModel(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());
+    setAspectRatio(width = this._variaviesDialog()?.width, height = this._variaviesDialog()?.height) {
+        const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));
+        const divisor = gcd(width, height);
+        const aspectWidth = width / divisor;
+        const aspectHeight = height / divisor;
+        this.aspectRatio.set(aspectWidth / aspectHeight);
     }
     //#region Métodos de recuperação de dados
     recuperaInstanciaDialog() {
@@ -4428,273 +4308,13 @@ class SimpleComponent {
         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 {
-            ctx.rect(cropX, cropY, this.cutWidth(), this.cutHeight());
-        }
-        ctx.stroke();
-    }
-    //? 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);
-        }
-        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();
-    }
-    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';
-            }
-        }
-    }
-    onZoomChange(e) {
-        const prevZoom = this.comparadorOnZoomChange;
-        const zoomValue = e.value;
-        this.comparadorOnZoomChange = e.value;
-        const direction = prevZoom < zoomValue ? 'up' : 'down';
-        this.ajustarZoom(direction, e.value);
-    }
-    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);
-        };
-    }
-    ajustarZoom(direction, value) {
-        const prevScaleFactor = this.scaleFactorReadOnly();
-        const delta = direction == 'down' ? -0.015 : 0.015;
-        let scaleFactor = prevScaleFactor + (delta * 1.4);
-        if (value)
-            scaleFactor = value + this.scaleFactorInicial();
-        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);
-            }
-        }
-        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 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;
-        canvas.style.cursor = 'grab';
-        canvas.onmousedown = (e) => {
-            isDragging = true;
-            canvas.style.cursor = 'grabbing';
-            this.startX = e.offsetX - this.imageX;
-            this.startY = e.offsetY - this.imageY;
-        };
-        canvas.onmouseup = () => {
-            isDragging = false;
-            canvas.style.cursor = 'grab';
-        };
-        canvas.onmouseout = () => {
-            isDragging = false;
-            canvas.style.cursor = 'grab';
-        };
-        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);
-            }
-        };
-    }
-    moveImage(dx, dy) {
-        this.imageX = (dx ?? this.imageX);
-        this.imageY = (dy ?? this.imageY);
-    }
-    //#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();
-                }
-            }
-        }
+        window.dispatchEvent(new CustomEvent('cropImage', { detail: {
+                result: this.croppedImage,
+                status: true
+            } }));
+        this.closeCropModal();
     }
     closeCropModal() {
         this.dialogInstance.close();
@@ -4707,75 +4327,75 @@ class SimpleComponent {
         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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SimpleComponent, isStandalone: true, selector: "app-simple-component", 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.0001"  [max]="5"  (onChange)="onZoomChange($event)"></p-slider>
-        </div>
+          <image-cropper
+            [imageBase64]="_variaviesDialog()?.imagem"
+            (imageCropped)="imageCropped($event)"
+            [aspectRatio]="aspectRatio()"
+            (imageLoaded)="imageLoaded($event)"
+            (cropperReady)="cropperReady()"
+            (loadImageFailed)="loadImageFailed()"
+            [roundCropper]="this._variaviesDialog()?.indCircle"
+            [maintainAspectRatio]="true"
+            [imageQuality]="100"
+            format="jpeg"
+            output='base64'
+            alignImage="center"
+          />
 
-          <div class="button-container">
+          
+        </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: ["fullWidth", "type", "loading", "severity", "size", "icon", "label", "disabled"], outputs: ["onClick"] }, { kind: "ngmodule", type: KvLabelModule }, { kind: "component", type: KvLabelComponent, selector: "kv-label", inputs: ["componentId", "label"] }] }); }
+  `, 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{height:60vh;position:relative;background-color:#fefefe;margin:1% auto;padding:20px;width:80%;max-width:fit-content;text-align:center;border-radius:12px;display:flex;align-items:center;justify-content:center}.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;position:fixed;bottom:0;background:#fff;width:90%;padding:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: KvModalModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: KvButtonModule }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "label", "disabled"], outputs: ["onClick"] }, { kind: "ngmodule", type: KvLabelModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }] }); }
 }
 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.0001"  [max]="5"  (onChange)="onZoomChange($event)"></p-slider>
-        </div>
+          <image-cropper
+            [imageBase64]="_variaviesDialog()?.imagem"
+            (imageCropped)="imageCropped($event)"
+            [aspectRatio]="aspectRatio()"
+            (imageLoaded)="imageLoaded($event)"
+            (cropperReady)="cropperReady()"
+            (loadImageFailed)="loadImageFailed()"
+            [roundCropper]="this._variaviesDialog()?.indCircle"
+            [maintainAspectRatio]="true"
+            [imageQuality]="100"
+            format="jpeg"
+            output='base64'
+            alignImage="center"
+          />
 
-          <div class="button-container">
+          
+        </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: [
+                        CommonModule,
                         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']]
-            }] } });
+                        ImageCropperComponent
+                    ], 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{height:60vh;position:relative;background-color:#fefefe;margin:1% auto;padding:20px;width:80%;max-width:fit-content;text-align:center;border-radius:12px;display:flex;align-items:center;justify-content:center}.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;position:fixed;bottom:0;background:#fff;width:90%;padding:15px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.DynamicDialogRef }, { type: i1$3.DialogService }] });
 
 class KvAvatarComponent {
     constructor(imageService, notificationService, imageCutterService) {
@@ -5071,7 +4691,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 }, autoplayInterval: { classPropertyName: "autoplayInterval", publicName: "autoplayInterval", 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]=\"autoplayInterval\"\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"] }] }); }
+    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 }, autoplayInterval: { classPropertyName: "autoplayInterval", publicName: "autoplayInterval", 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]=\"autoplayInterval\"\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvCarouselComponent, decorators: [{
             type: Component,
@@ -5749,7 +5369,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$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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvSelectButtonComponent, decorators: [{
             type: Component,
@@ -5840,11 +5460,11 @@ class KvTreeMultiSelectComponent extends BaseComponentMultiSelect {
         this.handleChips();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvTreeMultiSelectComponent, deps: [{ token: ComponentService }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvTreeMultiSelectComponent, selector: "kv-tree-multi-select", inputs: { appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, itemTemplates: { classPropertyName: "itemTemplates", publicName: "itemTemplates", isSignal: false, isRequired: false, transformFunction: null }, propagateSelectionDown: { classPropertyName: "propagateSelectionDown", publicName: "propagateSelectionDown", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionUp: { classPropertyName: "propagateSelectionUp", publicName: "propagateSelectionUp", isSignal: true, isRequired: false, transformFunction: null } }, providers: ComponentProviders(KvTreeMultiSelectComponent), usesInheritance: true, ngImport: i0, template: "<span>\r\n  <kv-label\r\n    [componentId]=\"componentId\"\r\n    [label]=\"label && label + (showAsterisk ? '*' : '')\"\r\n  />\r\n\r\n  <p-treeSelect\r\n    inputId=\"tree-multi-select\"\r\n    [class]=\"baseInputClass\"\r\n    [disabled]=\"disabled\"\r\n    [options]=\"options\"\r\n    [filter]=\"filter\"\r\n    [showClear]=\"showClear\"\r\n    [(ngModel)]=\"value\"\r\n    (onNodeSelect)=\"selectionChange($event)\"\r\n    (onNodeUnselect)=\"selectionChange($event)\"\r\n    (onPanelHide)=\"panelHide($event)\"\r\n    [appendTo]=\"appendTo\"\r\n    [metaKeySelection]=\"false\"\r\n    styleClass=\"inputs\"\r\n    containerStyleClass=\"inputs\"\r\n    selectionMode=\"checkbox\"\r\n    display=\"chip\"\r\n    [propagateSelectionDown]=\"propagateSelectionDown()\"\r\n    [propagateSelectionUp]=\"propagateSelectionUp()\"\r\n  >\r\n    <ng-template let-value pTemplate=\"value\" class=\"w-full\">\r\n      <div\r\n        class=\"p-multiselect p-multiselect-chip p-multiselect-label w-full flex flex-nowrap\"\r\n      >\r\n        <div\r\n          #token\r\n          *ngFor=\"let chip of chips; let i = index\"\r\n          class=\"p-multiselect-token\"\r\n        >\r\n          <span class=\"p-multiselect-token-label\">{{ chip.label }}</span>\r\n\r\n          <TimesCircleIcon\r\n            [styleClass]=\"'p-multiselect-token-icon'\"\r\n            (click)=\"removerChip(chip, $event)\"\r\n            [attr.data-pc-section]=\"'clearicon'\"\r\n            [attr.aria-hidden]=\"true\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    @for (templateItem of itemTemplates; track $index) {\r\n    <ng-template let-node [pTemplate]=\"templateItem.type\">\r\n      @if(templateItem.template) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"templateItem.template\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: node }\"\r\n      >\r\n      </ng-container>\r\n      }\r\n    </ng-template>\r\n\r\n    }\r\n\r\n    <ng-template let-node pTemplate=\"default\">\r\n      {{ node.label }}\r\n    </ng-template>\r\n  </p-treeSelect>\r\n\r\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: [":host ::ng-deep .disable .p-treeselect.p-treeselect-chip .p-treeselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-treeselect.p-treeselect-chip .p-treeselect-token{padding:.1rem .4rem}::ng-deep .p-treeselect-label{padding:0rem;display:flex}::ng-deep .p-treeselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-treeselect{width:100%}::ng-deep p-treeselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-treeselect-items-wrapper .p-treeselect-items{padding:.75rem}::ng-deep .p-treeselect-filter{height:1.875rem}::ng-deep .p-treeselect-panel .p-treeselect-items .p-treeselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-treeselect-panel .p-treeselect-header{padding:.5rem}:host ::ng-deep .p-chips .p-chips-multiple-container .p-chips-token{padding:.1rem .4rem;transform:translateY(-3px)}:host ::ng-deep .p-chips .p-chips-multiple-container{border:none}:host ::ng-deep .p-chip{background:red;padding:.1rem .4rem;font-size:.875rem;margin-right:.5rem;background:#e5e7eb;color:#4b5563;border-radius:16px;height:15px}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}:host ::ng-deep .p-multiselect.p-multiselect-chip.p-multiselect-label{border:none}:host ::ng-deep .p-treeselect-label,:host ::ng-deep .p-multiselect-label{width:100%;padding:.09rem .4rem;display:flex}:host ::ng-deep .p-multiselect-token{max-width:max-content}\n", "@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\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.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:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::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}::ng-deep .p-tooltip{font-size:.825rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "component", type: KvLabelComponent, selector: "kv-label", inputs: ["componentId", "label"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$2.TreeSelect, selector: "p-treeSelect", inputs: ["inputId", "scrollHeight", "disabled", "metaKeySelection", "variant", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "appendTo", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autofocus", "options", "showTransitionOptions", "hideTransitionOptions", "loading"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }, { kind: "component", type: i8$3.TimesCircleIcon, selector: "TimesCircleIcon" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvTreeMultiSelectComponent, selector: "kv-tree-multi-select", inputs: { appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, itemTemplates: { classPropertyName: "itemTemplates", publicName: "itemTemplates", isSignal: false, isRequired: false, transformFunction: null }, propagateSelectionDown: { classPropertyName: "propagateSelectionDown", publicName: "propagateSelectionDown", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionUp: { classPropertyName: "propagateSelectionUp", publicName: "propagateSelectionUp", isSignal: true, isRequired: false, transformFunction: null } }, providers: ComponentProviders(KvTreeMultiSelectComponent), usesInheritance: true, ngImport: i0, template: "<span>\n  <kv-label\n    [componentId]=\"componentId\"\n    [label]=\"label && label + (showAsterisk ? '*' : '')\"\n  />\n\n  <p-treeSelect\n    inputId=\"tree-multi-select\"\n    [class]=\"baseInputClass\"\n    [disabled]=\"disabled\"\n    [options]=\"options\"\n    [filter]=\"filter\"\n    [showClear]=\"showClear\"\n    [(ngModel)]=\"value\"\n    (onNodeSelect)=\"selectionChange($event)\"\n    (onNodeUnselect)=\"selectionChange($event)\"\n    (onPanelHide)=\"panelHide($event)\"\n    [appendTo]=\"appendTo\"\n    [metaKeySelection]=\"false\"\n    styleClass=\"inputs\"\n    containerStyleClass=\"inputs\"\n    selectionMode=\"checkbox\"\n    display=\"chip\"\n    [propagateSelectionDown]=\"propagateSelectionDown()\"\n    [propagateSelectionUp]=\"propagateSelectionUp()\"\n  >\n    <ng-template let-value pTemplate=\"value\" class=\"w-full\">\n      <div\n        class=\"p-multiselect p-multiselect-chip p-multiselect-label w-full flex flex-nowrap\"\n      >\n        <div\n          #token\n          *ngFor=\"let chip of chips; let i = index\"\n          class=\"p-multiselect-token\"\n        >\n          <span class=\"p-multiselect-token-label\">{{ chip.label }}</span>\n\n          <TimesCircleIcon\n            [styleClass]=\"'p-multiselect-token-icon'\"\n            (click)=\"removerChip(chip, $event)\"\n            [attr.data-pc-section]=\"'clearicon'\"\n            [attr.aria-hidden]=\"true\"\n          />\n        </div>\n      </div>\n    </ng-template>\n\n    @for (templateItem of itemTemplates; track $index) {\n    <ng-template let-node [pTemplate]=\"templateItem.type\">\n      @if(templateItem.template) {\n      <ng-container\n        [ngTemplateOutlet]=\"templateItem.template\"\n        [ngTemplateOutletContext]=\"{ $implicit: node }\"\n      >\n      </ng-container>\n      }\n    </ng-template>\n\n    }\n\n    <ng-template let-node pTemplate=\"default\">\n      {{ node.label }}\n    </ng-template>\n  </p-treeSelect>\n\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\n</span>\n<ng-content></ng-content>\n", styles: [":host ::ng-deep .disable .p-treeselect.p-treeselect-chip .p-treeselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-treeselect.p-treeselect-chip .p-treeselect-token{padding:.1rem .4rem}::ng-deep .p-treeselect-label{padding:0rem;display:flex}::ng-deep .p-treeselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-treeselect{width:100%}::ng-deep p-treeselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-treeselect-items-wrapper .p-treeselect-items{padding:.75rem}::ng-deep .p-treeselect-filter{height:1.875rem}::ng-deep .p-treeselect-panel .p-treeselect-items .p-treeselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-treeselect-panel .p-treeselect-header{padding:.5rem}:host ::ng-deep .p-chips .p-chips-multiple-container .p-chips-token{padding:.1rem .4rem;transform:translateY(-3px)}:host ::ng-deep .p-chips .p-chips-multiple-container{border:none}:host ::ng-deep .p-chip{background:red;padding:.1rem .4rem;font-size:.875rem;margin-right:.5rem;background:#e5e7eb;color:#4b5563;border-radius:16px;height:15px}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}:host ::ng-deep .p-multiselect.p-multiselect-chip.p-multiselect-label{border:none}:host ::ng-deep .p-treeselect-label,:host ::ng-deep .p-multiselect-label{width:100%;padding:.09rem .4rem;display:flex}:host ::ng-deep .p-multiselect-token{max-width:max-content}\n", "@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\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.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:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::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}::ng-deep .p-tooltip{font-size:.825rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "component", type: KvLabelComponent, selector: "kv-label", inputs: ["componentId", "label"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$2.TreeSelect, selector: "p-treeSelect", inputs: ["inputId", "scrollHeight", "disabled", "metaKeySelection", "variant", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "appendTo", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autofocus", "options", "showTransitionOptions", "hideTransitionOptions", "loading"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }, { kind: "component", type: i8$3.TimesCircleIcon, selector: "TimesCircleIcon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvTreeMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-tree-multi-select', providers: ComponentProviders(KvTreeMultiSelectComponent), template: "<span>\r\n  <kv-label\r\n    [componentId]=\"componentId\"\r\n    [label]=\"label && label + (showAsterisk ? '*' : '')\"\r\n  />\r\n\r\n  <p-treeSelect\r\n    inputId=\"tree-multi-select\"\r\n    [class]=\"baseInputClass\"\r\n    [disabled]=\"disabled\"\r\n    [options]=\"options\"\r\n    [filter]=\"filter\"\r\n    [showClear]=\"showClear\"\r\n    [(ngModel)]=\"value\"\r\n    (onNodeSelect)=\"selectionChange($event)\"\r\n    (onNodeUnselect)=\"selectionChange($event)\"\r\n    (onPanelHide)=\"panelHide($event)\"\r\n    [appendTo]=\"appendTo\"\r\n    [metaKeySelection]=\"false\"\r\n    styleClass=\"inputs\"\r\n    containerStyleClass=\"inputs\"\r\n    selectionMode=\"checkbox\"\r\n    display=\"chip\"\r\n    [propagateSelectionDown]=\"propagateSelectionDown()\"\r\n    [propagateSelectionUp]=\"propagateSelectionUp()\"\r\n  >\r\n    <ng-template let-value pTemplate=\"value\" class=\"w-full\">\r\n      <div\r\n        class=\"p-multiselect p-multiselect-chip p-multiselect-label w-full flex flex-nowrap\"\r\n      >\r\n        <div\r\n          #token\r\n          *ngFor=\"let chip of chips; let i = index\"\r\n          class=\"p-multiselect-token\"\r\n        >\r\n          <span class=\"p-multiselect-token-label\">{{ chip.label }}</span>\r\n\r\n          <TimesCircleIcon\r\n            [styleClass]=\"'p-multiselect-token-icon'\"\r\n            (click)=\"removerChip(chip, $event)\"\r\n            [attr.data-pc-section]=\"'clearicon'\"\r\n            [attr.aria-hidden]=\"true\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    @for (templateItem of itemTemplates; track $index) {\r\n    <ng-template let-node [pTemplate]=\"templateItem.type\">\r\n      @if(templateItem.template) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"templateItem.template\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: node }\"\r\n      >\r\n      </ng-container>\r\n      }\r\n    </ng-template>\r\n\r\n    }\r\n\r\n    <ng-template let-node pTemplate=\"default\">\r\n      {{ node.label }}\r\n    </ng-template>\r\n  </p-treeSelect>\r\n\r\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: [":host ::ng-deep .disable .p-treeselect.p-treeselect-chip .p-treeselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-treeselect.p-treeselect-chip .p-treeselect-token{padding:.1rem .4rem}::ng-deep .p-treeselect-label{padding:0rem;display:flex}::ng-deep .p-treeselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-treeselect{width:100%}::ng-deep p-treeselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-treeselect-items-wrapper .p-treeselect-items{padding:.75rem}::ng-deep .p-treeselect-filter{height:1.875rem}::ng-deep .p-treeselect-panel .p-treeselect-items .p-treeselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-treeselect-panel .p-treeselect-header{padding:.5rem}:host ::ng-deep .p-chips .p-chips-multiple-container .p-chips-token{padding:.1rem .4rem;transform:translateY(-3px)}:host ::ng-deep .p-chips .p-chips-multiple-container{border:none}:host ::ng-deep .p-chip{background:red;padding:.1rem .4rem;font-size:.875rem;margin-right:.5rem;background:#e5e7eb;color:#4b5563;border-radius:16px;height:15px}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}:host ::ng-deep .p-multiselect.p-multiselect-chip.p-multiselect-label{border:none}:host ::ng-deep .p-treeselect-label,:host ::ng-deep .p-multiselect-label{width:100%;padding:.09rem .4rem;display:flex}:host ::ng-deep .p-multiselect-token{max-width:max-content}\n", "@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\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.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:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::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}::ng-deep .p-tooltip{font-size:.825rem!important}\n"] }]
+            args: [{ selector: 'kv-tree-multi-select', providers: ComponentProviders(KvTreeMultiSelectComponent), template: "<span>\n  <kv-label\n    [componentId]=\"componentId\"\n    [label]=\"label && label + (showAsterisk ? '*' : '')\"\n  />\n\n  <p-treeSelect\n    inputId=\"tree-multi-select\"\n    [class]=\"baseInputClass\"\n    [disabled]=\"disabled\"\n    [options]=\"options\"\n    [filter]=\"filter\"\n    [showClear]=\"showClear\"\n    [(ngModel)]=\"value\"\n    (onNodeSelect)=\"selectionChange($event)\"\n    (onNodeUnselect)=\"selectionChange($event)\"\n    (onPanelHide)=\"panelHide($event)\"\n    [appendTo]=\"appendTo\"\n    [metaKeySelection]=\"false\"\n    styleClass=\"inputs\"\n    containerStyleClass=\"inputs\"\n    selectionMode=\"checkbox\"\n    display=\"chip\"\n    [propagateSelectionDown]=\"propagateSelectionDown()\"\n    [propagateSelectionUp]=\"propagateSelectionUp()\"\n  >\n    <ng-template let-value pTemplate=\"value\" class=\"w-full\">\n      <div\n        class=\"p-multiselect p-multiselect-chip p-multiselect-label w-full flex flex-nowrap\"\n      >\n        <div\n          #token\n          *ngFor=\"let chip of chips; let i = index\"\n          class=\"p-multiselect-token\"\n        >\n          <span class=\"p-multiselect-token-label\">{{ chip.label }}</span>\n\n          <TimesCircleIcon\n            [styleClass]=\"'p-multiselect-token-icon'\"\n            (click)=\"removerChip(chip, $event)\"\n            [attr.data-pc-section]=\"'clearicon'\"\n            [attr.aria-hidden]=\"true\"\n          />\n        </div>\n      </div>\n    </ng-template>\n\n    @for (templateItem of itemTemplates; track $index) {\n    <ng-template let-node [pTemplate]=\"templateItem.type\">\n      @if(templateItem.template) {\n      <ng-container\n        [ngTemplateOutlet]=\"templateItem.template\"\n        [ngTemplateOutletContext]=\"{ $implicit: node }\"\n      >\n      </ng-container>\n      }\n    </ng-template>\n\n    }\n\n    <ng-template let-node pTemplate=\"default\">\n      {{ node.label }}\n    </ng-template>\n  </p-treeSelect>\n\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\n</span>\n<ng-content></ng-content>\n", styles: [":host ::ng-deep .disable .p-treeselect.p-treeselect-chip .p-treeselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-treeselect.p-treeselect-chip .p-treeselect-token{padding:.1rem .4rem}::ng-deep .p-treeselect-label{padding:0rem;display:flex}::ng-deep .p-treeselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-treeselect{width:100%}::ng-deep p-treeselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-treeselect-items-wrapper .p-treeselect-items{padding:.75rem}::ng-deep .p-treeselect-filter{height:1.875rem}::ng-deep .p-treeselect-panel .p-treeselect-items .p-treeselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-treeselect-panel .p-treeselect-header{padding:.5rem}:host ::ng-deep .p-chips .p-chips-multiple-container .p-chips-token{padding:.1rem .4rem;transform:translateY(-3px)}:host ::ng-deep .p-chips .p-chips-multiple-container{border:none}:host ::ng-deep .p-chip{background:red;padding:.1rem .4rem;font-size:.875rem;margin-right:.5rem;background:#e5e7eb;color:#4b5563;border-radius:16px;height:15px}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}:host ::ng-deep .p-multiselect.p-multiselect-chip.p-multiselect-label{border:none}:host ::ng-deep .p-treeselect-label,:host ::ng-deep .p-multiselect-label{width:100%;padding:.09rem .4rem;display:flex}:host ::ng-deep .p-multiselect-token{max-width:max-content}\n", "@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\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.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:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::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}::ng-deep .p-tooltip{font-size:.825rem!important}\n"] }]
         }], ctorParameters: () => [{ type: ComponentService }, { type: i2$1.FormBuilder }], propDecorators: { appendTo: [{
                 type: Input
             }], options: [{
@@ -8967,7 +8587,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 {{\r\n        isExpandable && 'cursor-pointer'\r\n      }}\"\r\n      (click)=\"toggleField()\"\r\n    >\r\n      <span\r\n        class=\"material-symbols-outlined flex align-items-center justify-content-center mr-1\"\r\n        style=\"font-size: 1.2rem\"\r\n      >\r\n        {{ isCollapsed ? \"remove\" : \"add\" }}\r\n      </span>\r\n\r\n      <span class=\"text-xs\"> Filtros </span>\r\n    </div>\r\n    } @if(!isExpandable) {\r\n    <span class=\"text-xs\"> Filtros </span>\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:.1rem .1rem 0rem!important;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:0 .5rem .5rem}\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"] }] }); }
+    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 {{\r\n        isExpandable && 'cursor-pointer'\r\n      }}\"\r\n      (click)=\"toggleField()\"\r\n    >\r\n      <span\r\n        class=\"material-symbols-outlined flex align-items-center justify-content-center mr-1\"\r\n        style=\"font-size: 1.2rem\"\r\n      >\r\n        {{ isCollapsed ? \"remove\" : \"add\" }}\r\n      </span>\r\n\r\n      <span class=\"text-xs\"> Filtros </span>\r\n    </div>\r\n    } @if(!isExpandable) {\r\n    <span class=\"text-xs\"> Filtros </span>\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:.1rem .1rem 0rem!important;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:0 .5rem .5rem}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvFilterFieldsetComponent, decorators: [{
             type: Component,