keevo-components 1.8.243 → 1.8.245

package/fesm2022/keevo-components.mjs

@@ -108,11 +108,12 @@ import * as i5$8 from 'primeng/stepper';
 import { StepperModule } from 'primeng/stepper';
 import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import * as i4$2 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 { ProgressSpinnerModule } from 'primeng/progressspinner';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import { OrgChart } from 'd3-org-chart';
 import * as d3 from 'd3';
 import * as i7$2 from '@angular/cdk/drag-drop';
@@ -2188,12 +2189,14 @@ class KvDropdownComponent extends BaseComponentDropDown {
             this.value = this.dropDowValue;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvDropdownComponent, deps: [{ token: ComponentService }, { token: i1$3.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvDropdownComponent, selector: "kv-dropdown", inputs: { dropDowValue: "dropDowValue", itemTemplate: "itemTemplate", selectedItemTemplate: "selectedItemTemplate" }, providers: ComponentProviders(KvDropdownComponent), usesInheritance: true, ngImport: i0, template: "<span>\r\n  <kv-label\r\n    [componentId]=\"componentId\"\r\n    [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n  />\r\n  <p-dropdown\r\n    appendTo=\"body\"\r\n    scrollHeight=\"250px\"\r\n    styleClass=\"inputs\"\r\n    [(ngModel)]=\"value\"\r\n    [class]=\"baseInputClass\"\r\n    [disabled]=\"disabled\"\r\n    [emptyMessage]=\"emptyMessage()\"\r\n    [filter]=\"filter\"\r\n    [group]=\"group\"\r\n    [inputId]=\"componentId\"\r\n    [lazy]=\"lazy\"\r\n    [loading]=\"loading\"\r\n    [optionDisabled]=\"optionDisabled\"\r\n    [optionGroupChildren]=\"optionGroupChildren\"\r\n    [optionGroupLabel]=\"optionGroupLabel\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [options]=\"filteredOptions\"\r\n    [optionValue]=\"optionValue\"\r\n    [panelStyle]=\"{ width: widthField, overflow: 'auto' }\"\r\n    [showClear]=\"showClear\"\r\n    [style]=\"{'width':widthField}\"\r\n    (onBlur)=\"onInputBlur($event)\"\r\n    (onChange)=\"onInputChange($event)\"\r\n    (onClick)=\"onInputClick($event)\"\r\n    (onFilter)=\"onInputFilter($event)\"\r\n  >\r\n\r\n    <ng-template\r\n      *ngIf=\"showAddButton\"\r\n      pTemplate=\"footer\"\r\n    >\r\n      <p-divider></p-divider>\r\n      <div class=\"flex flex-wrap card-container p-1\">\r\n        <div class=\"flex justify-content-center\">\r\n          <button\r\n            pButton\r\n            label=\"Incluir\"\r\n            pTooltip=\"Clique aqui para incluir um novo registro\"\r\n            tooltipPosition=\"bottom\"\r\n            icon=\"pi pi-plus\"\r\n            class=\"p-button-rounded p-button-success mr-2\"\r\n            (click)=\"addClick($event)\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <!-- :: -->\r\n\r\n    <ng-template\r\n      let-item\r\n      pTemplate=\"item\"\r\n      *ngIf=\"itemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"itemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n\r\n    <ng-template\r\n      let-selectedItem\r\n      pTemplate=\"selectedItem\"\r\n      *ngIf=\"selectedItemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: selectedItem }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n    <!-- :: -->\r\n\r\n  </p-dropdown>\r\n\r\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: ["::ng-deep .p-dropdown .p-dropdown-label{display:flex;align-items:center}::ng-deep .p-dropdown{width:100%}@media only screen and (min-width: 700px){::ng-deep .p-dropdown-panel{max-width:700px}}@media only screen and (max-width: 700px){::ng-deep .p-dropdown-panel{max-width:400px}}\n", "@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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i4.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvDropdownComponent, selector: "kv-dropdown", inputs: { filterPlaceholder: "filterPlaceholder", dropDowValue: "dropDowValue", itemTemplate: "itemTemplate", selectedItemTemplate: "selectedItemTemplate" }, providers: ComponentProviders(KvDropdownComponent), usesInheritance: true, ngImport: i0, template: "<span>\r\n  <kv-label\r\n    [componentId]=\"componentId\"\r\n    [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n  />\r\n  <p-dropdown\r\n    appendTo=\"body\"\r\n    scrollHeight=\"250px\"\r\n    styleClass=\"inputs\"\r\n    [(ngModel)]=\"value\"\r\n    [class]=\"baseInputClass\"\r\n    [disabled]=\"disabled\"\r\n    [emptyMessage]=\"emptyMessage()\"\r\n    [filter]=\"filter\"\r\n    [group]=\"group\"\r\n    [inputId]=\"componentId\"\r\n    [lazy]=\"lazy\"\r\n    [loading]=\"loading\"\r\n    [optionDisabled]=\"optionDisabled\"\r\n    [optionGroupChildren]=\"optionGroupChildren\"\r\n    [optionGroupLabel]=\"optionGroupLabel\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [options]=\"filteredOptions\"\r\n    [optionValue]=\"optionValue\"\r\n    [panelStyle]=\"{ width: widthField, overflow: 'auto' }\"\r\n    [showClear]=\"showClear\"\r\n    [style]=\"{'width':widthField}\"\r\n    [filterPlaceholder]=\"filterPlaceholder\"\r\n    [placeholder]=\"placeholder\"\r\n    (onBlur)=\"onInputBlur($event)\"\r\n    (onChange)=\"onInputChange($event)\"\r\n    (onClick)=\"onInputClick($event)\"\r\n    (onFilter)=\"onInputFilter($event)\"\r\n  >\r\n\r\n    <ng-template\r\n      *ngIf=\"showAddButton\"\r\n      pTemplate=\"footer\"\r\n    >\r\n      <p-divider></p-divider>\r\n      <div class=\"flex flex-wrap card-container p-1\">\r\n        <div class=\"flex justify-content-center\">\r\n          <button\r\n            pButton\r\n            label=\"Incluir\"\r\n            pTooltip=\"Clique aqui para incluir um novo registro\"\r\n            tooltipPosition=\"bottom\"\r\n            icon=\"pi pi-plus\"\r\n            class=\"p-button-rounded p-button-success mr-2\"\r\n            (click)=\"addClick($event)\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <!-- :: -->\r\n\r\n    <ng-template\r\n      let-item\r\n      pTemplate=\"item\"\r\n      *ngIf=\"itemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"itemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n\r\n    <ng-template\r\n      let-selectedItem\r\n      pTemplate=\"selectedItem\"\r\n      *ngIf=\"selectedItemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: selectedItem }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n    <!-- :: -->\r\n\r\n  </p-dropdown>\r\n\r\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: ["::ng-deep .p-dropdown .p-dropdown-label{display:flex;align-items:center}::ng-deep .p-dropdown{width:100%}@media only screen and (min-width: 700px){::ng-deep .p-dropdown-panel{max-width:700px}}@media only screen and (max-width: 700px){::ng-deep .p-dropdown-panel{max-width:400px}}\n", "@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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i4.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-dropdown', providers: ComponentProviders(KvDropdownComponent), template: "<span>\r\n  <kv-label\r\n    [componentId]=\"componentId\"\r\n    [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n  />\r\n  <p-dropdown\r\n    appendTo=\"body\"\r\n    scrollHeight=\"250px\"\r\n    styleClass=\"inputs\"\r\n    [(ngModel)]=\"value\"\r\n    [class]=\"baseInputClass\"\r\n    [disabled]=\"disabled\"\r\n    [emptyMessage]=\"emptyMessage()\"\r\n    [filter]=\"filter\"\r\n    [group]=\"group\"\r\n    [inputId]=\"componentId\"\r\n    [lazy]=\"lazy\"\r\n    [loading]=\"loading\"\r\n    [optionDisabled]=\"optionDisabled\"\r\n    [optionGroupChildren]=\"optionGroupChildren\"\r\n    [optionGroupLabel]=\"optionGroupLabel\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [options]=\"filteredOptions\"\r\n    [optionValue]=\"optionValue\"\r\n    [panelStyle]=\"{ width: widthField, overflow: 'auto' }\"\r\n    [showClear]=\"showClear\"\r\n    [style]=\"{'width':widthField}\"\r\n    (onBlur)=\"onInputBlur($event)\"\r\n    (onChange)=\"onInputChange($event)\"\r\n    (onClick)=\"onInputClick($event)\"\r\n    (onFilter)=\"onInputFilter($event)\"\r\n  >\r\n\r\n    <ng-template\r\n      *ngIf=\"showAddButton\"\r\n      pTemplate=\"footer\"\r\n    >\r\n      <p-divider></p-divider>\r\n      <div class=\"flex flex-wrap card-container p-1\">\r\n        <div class=\"flex justify-content-center\">\r\n          <button\r\n            pButton\r\n            label=\"Incluir\"\r\n            pTooltip=\"Clique aqui para incluir um novo registro\"\r\n            tooltipPosition=\"bottom\"\r\n            icon=\"pi pi-plus\"\r\n            class=\"p-button-rounded p-button-success mr-2\"\r\n            (click)=\"addClick($event)\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <!-- :: -->\r\n\r\n    <ng-template\r\n      let-item\r\n      pTemplate=\"item\"\r\n      *ngIf=\"itemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"itemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n\r\n    <ng-template\r\n      let-selectedItem\r\n      pTemplate=\"selectedItem\"\r\n      *ngIf=\"selectedItemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: selectedItem }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n    <!-- :: -->\r\n\r\n  </p-dropdown>\r\n\r\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: ["::ng-deep .p-dropdown .p-dropdown-label{display:flex;align-items:center}::ng-deep .p-dropdown{width:100%}@media only screen and (min-width: 700px){::ng-deep .p-dropdown-panel{max-width:700px}}@media only screen and (max-width: 700px){::ng-deep .p-dropdown-panel{max-width:400px}}\n", "@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}\n"] }]
-        }], ctorParameters: () => [{ type: ComponentService }, { type: i1$3.DialogService }], propDecorators: { dropDowValue: [{
+            args: [{ selector: 'kv-dropdown', providers: ComponentProviders(KvDropdownComponent), template: "<span>\r\n  <kv-label\r\n    [componentId]=\"componentId\"\r\n    [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n  />\r\n  <p-dropdown\r\n    appendTo=\"body\"\r\n    scrollHeight=\"250px\"\r\n    styleClass=\"inputs\"\r\n    [(ngModel)]=\"value\"\r\n    [class]=\"baseInputClass\"\r\n    [disabled]=\"disabled\"\r\n    [emptyMessage]=\"emptyMessage()\"\r\n    [filter]=\"filter\"\r\n    [group]=\"group\"\r\n    [inputId]=\"componentId\"\r\n    [lazy]=\"lazy\"\r\n    [loading]=\"loading\"\r\n    [optionDisabled]=\"optionDisabled\"\r\n    [optionGroupChildren]=\"optionGroupChildren\"\r\n    [optionGroupLabel]=\"optionGroupLabel\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [options]=\"filteredOptions\"\r\n    [optionValue]=\"optionValue\"\r\n    [panelStyle]=\"{ width: widthField, overflow: 'auto' }\"\r\n    [showClear]=\"showClear\"\r\n    [style]=\"{'width':widthField}\"\r\n    [filterPlaceholder]=\"filterPlaceholder\"\r\n    [placeholder]=\"placeholder\"\r\n    (onBlur)=\"onInputBlur($event)\"\r\n    (onChange)=\"onInputChange($event)\"\r\n    (onClick)=\"onInputClick($event)\"\r\n    (onFilter)=\"onInputFilter($event)\"\r\n  >\r\n\r\n    <ng-template\r\n      *ngIf=\"showAddButton\"\r\n      pTemplate=\"footer\"\r\n    >\r\n      <p-divider></p-divider>\r\n      <div class=\"flex flex-wrap card-container p-1\">\r\n        <div class=\"flex justify-content-center\">\r\n          <button\r\n            pButton\r\n            label=\"Incluir\"\r\n            pTooltip=\"Clique aqui para incluir um novo registro\"\r\n            tooltipPosition=\"bottom\"\r\n            icon=\"pi pi-plus\"\r\n            class=\"p-button-rounded p-button-success mr-2\"\r\n            (click)=\"addClick($event)\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <!-- :: -->\r\n\r\n    <ng-template\r\n      let-item\r\n      pTemplate=\"item\"\r\n      *ngIf=\"itemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"itemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n\r\n    <ng-template\r\n      let-selectedItem\r\n      pTemplate=\"selectedItem\"\r\n      *ngIf=\"selectedItemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: selectedItem }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n    <!-- :: -->\r\n\r\n  </p-dropdown>\r\n\r\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: ["::ng-deep .p-dropdown .p-dropdown-label{display:flex;align-items:center}::ng-deep .p-dropdown{width:100%}@media only screen and (min-width: 700px){::ng-deep .p-dropdown-panel{max-width:700px}}@media only screen and (max-width: 700px){::ng-deep .p-dropdown-panel{max-width:400px}}\n", "@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}\n"] }]
+        }], ctorParameters: () => [{ type: ComponentService }, { type: i1$3.DialogService }], propDecorators: { filterPlaceholder: [{
+                type: Input
+            }], dropDowValue: [{
                 type: Input
             }], itemTemplate: [{
                 type: Input
@@ -3395,6 +3398,15 @@ class KvAvatarComponent {
         this.removerFotoEvent = new EventEmitter();
         this.existeLogo = false;
         this.btnAlterarFoto = false;
+        this.showCropModal = false;
+        this.imageLoaded = false;
+        this.imageX = 0;
+        this.imageY = 0;
+        this.startX = 0;
+        this.startY = 0;
+        this.valueZoom = 50;
+        this.scaleFactor = 1;
+        this.selectedImage = '';
     }
     getImageSrc() {
         if (this.imageUrl && (this.imageUrl.startsWith('data:image') || this.imageUrl.startsWith('http') || this.imageUrl.startsWith('https'))) {
@@ -3422,9 +3434,9 @@ class KvAvatarComponent {
             const reader = new FileReader();
             reader.readAsDataURL(file);
             reader.onload = () => {
-                this.imageUrl = reader.result;
+                this.selectedImage = reader.result;
                 this.existeLogo = true;
-                this.imageUrlChange.emit(this.imageUrl);
+                this.openCropModal();
             };
         }
     }
@@ -3450,12 +3462,119 @@ class KvAvatarComponent {
     handleImageError(event) {
         event.target.src = this.imageService.userDefaultImage();
     }
+    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;
+                this.imageX = (canvas.width - img.width * this.scaleFactor) / 2;
+                this.imageY = (canvas.height - img.height * this.scaleFactor) / 2;
+                canvas.width = 500;
+                canvas.height = 500;
+                ctx?.clearRect(0, 0, canvas.width, canvas.height);
+                ctx?.drawImage(img, this.imageX, this.imageY, img.width * this.scaleFactor, img.height * this.scaleFactor);
+                this.drawCropArea(ctx);
+                this.initializeImageMove(canvas, ctx, img);
+                this.initializeMouseWheel(canvas, ctx, img);
+            };
+        }, 0);
+    }
+    drawCropArea(ctx) {
+        if (ctx) {
+            const centerX = ctx.canvas.width / 2;
+            const centerY = ctx.canvas.height / 2;
+            const radius = 100; // Raio da área de recorte
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
+            ctx.strokeStyle = 'transparent';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+            ctx.closePath();
+        }
+    }
+    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.onmousemove = (e) => {
+            if (isDragging) {
+                this.imageX = e.offsetX - this.startX;
+                this.imageY = e.offsetY - this.startY;
+                ctx?.clearRect(0, 0, canvas.width, canvas.height);
+                ctx?.drawImage(img, this.imageX, this.imageY, img.width * this.scaleFactor, img.height * this.scaleFactor);
+                this.drawCropArea(ctx);
+            }
+        };
+        canvas.onmouseup = () => {
+            isDragging = false;
+            canvas.style.cursor = 'grab';
+        };
+        canvas.onmouseout = () => {
+            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
+            ctx?.clearRect(0, 0, canvas.width, canvas.height);
+            ctx?.drawImage(img, this.imageX, this.imageY, img.width * this.scaleFactor, img.height * this.scaleFactor);
+            this.drawCropArea(ctx);
+            this.valueZoom = this.scaleFactor * 50;
+        };
+    }
+    cropImage() {
+        const canvas = this.cropCanvas.nativeElement;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+            const centerX = canvas.width / 2;
+            const centerY = canvas.height / 2;
+            const radius = 100;
+            const imageData = ctx.getImageData(centerX - radius, centerY - radius, radius * 2, radius * 2);
+            const newCanvas = document.createElement('canvas');
+            const newCtx = newCanvas.getContext('2d');
+            newCanvas.width = radius * 2;
+            newCanvas.height = radius * 2;
+            newCtx?.putImageData(imageData, 0, 0);
+            this.imageUrl = newCanvas.toDataURL();
+            this.imageUrlChange.emit(this.imageUrl);
+            this.closeCropModal();
+        }
+    }
+    onZoomChange(event) {
+        const canvas = this.cropCanvas.nativeElement;
+        const ctx = canvas.getContext('2d');
+        const img = new Image();
+        img.src = this.selectedImage;
+        img.onload = () => {
+            ctx?.clearRect(0, 0, canvas.width, canvas.height);
+            this.scaleFactor = event.value / 50;
+            ctx?.drawImage(img, this.imageX, this.imageY, img.width * this.scaleFactor, img.height * this.scaleFactor);
+            this.drawCropArea(ctx);
+        };
+    }
+    closeCropModal() {
+        this.showCropModal = false;
+        this.valueZoom = 50;
+        this.imageLoaded = false;
+    }
     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: "14.0.0", version: "17.3.8", type: KvAvatarComponent, selector: "kv-avatar", inputs: { imageUrl: "imageUrl", borderColor: "borderColor", width: "width", height: "height", btnAlterarFoto: "btnAlterarFoto" }, outputs: { imageUrlChange: "imageUrlChange", removerFotoEvent: "removerFotoEvent" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"image-container\">\r\n  <img [src]=\"getImageSrc() || imageService.userDefaultImage()\" 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\" (click)=\"openFile()\">\r\n      <i class=\"material-symbols-outlined\">photo_camera</i>\r\n    </button>\r\n    \r\n    <button *ngIf=\"btnAlterarFoto && existeLogo\" class=\"botao-excluir-foto border-circle\" (click)=\"questionRemoverFoto()\">\r\n      <i class=\"material-symbols-outlined\">delete</i>\r\n    </button>\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:4px;border-radius:50%;object-fit:cover}.botao-alterar-foto{border-style:none;width:max-content;background-color:#5289b4;color:#000;font-weight:700;cursor:pointer;padding:10px 12px}.botao-alterar-foto i{color:#fff}.botao-excluir-foto{border-style:none;width:max-content;background-color:#5289b4;color:#000;font-weight:700;cursor:pointer;padding:10px 12px}.botao-excluir-foto i{color:#fff}.btn{position:absolute;top:87%;left:87%;transform:translate(-50%,-50%)}.image-container{display:inline-block;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvAvatarComponent, selector: "kv-avatar", inputs: { imageUrl: "imageUrl", borderColor: "borderColor", width: "width", height: "height", btnAlterarFoto: "btnAlterarFoto" }, outputs: { imageUrlChange: "imageUrlChange", removerFotoEvent: "removerFotoEvent" }, viewQueries: [{ propertyName: "cropCanvas", first: true, predicate: ["cropCanvas"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"image-container\">\r\n  <img [src]=\"getImageSrc() || imageService.userDefaultImage()\" alt=\"Foto\" class=\"container-foto\" [style.border-color]=\"borderColor\" [style.width.px]=\"width\" [style.height.px]=\"height\" (error)=\"handleImageError($event)\" (click)=\"openFile()\">\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\" (click)=\"openFile()\">\r\n      <i class=\"material-symbols-outlined\">photo_camera</i>\r\n    </button>\r\n    \r\n    <button *ngIf=\"btnAlterarFoto && existeLogo\" class=\"botao-excluir-foto border-circle\" (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 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\r\n\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:4px;border-radius:50%;object-fit:cover}.botao-alterar-foto{border-style:none;width:max-content;background-color:#5289b4;color:#000;font-weight:700;cursor:pointer;padding:10px 12px}.botao-alterar-foto i{color:#fff}.botao-excluir-foto{border-style:none;width:max-content;background-color:#5289b4;color:#000;font-weight:700;cursor:pointer;padding:10px 12px}.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:1;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:600px;text-align:center;border-radius:12px}.crop-container{display:flex;justify-content:center;align-items:center}.crop-canvas{border:1px solid black;width:100%;max-width:600px;height:auto;border-radius:12px}.crop-border{position:absolute;width:225px;height:225px;border:2px solid black;border-radius:50%;pointer-events:none}.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$2.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"], outputs: ["onClick"] }, { kind: "component", type: KvLabelComponent, selector: "kv-label", inputs: ["componentId", "label"] }] }); }
 }
 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]=\"getImageSrc() || imageService.userDefaultImage()\" 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\" (click)=\"openFile()\">\r\n      <i class=\"material-symbols-outlined\">photo_camera</i>\r\n    </button>\r\n    \r\n    <button *ngIf=\"btnAlterarFoto && existeLogo\" class=\"botao-excluir-foto border-circle\" (click)=\"questionRemoverFoto()\">\r\n      <i class=\"material-symbols-outlined\">delete</i>\r\n    </button>\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:4px;border-radius:50%;object-fit:cover}.botao-alterar-foto{border-style:none;width:max-content;background-color:#5289b4;color:#000;font-weight:700;cursor:pointer;padding:10px 12px}.botao-alterar-foto i{color:#fff}.botao-excluir-foto{border-style:none;width:max-content;background-color:#5289b4;color:#000;font-weight:700;cursor:pointer;padding:10px 12px}.botao-excluir-foto i{color:#fff}.btn{position:absolute;top:87%;left:87%;transform:translate(-50%,-50%)}.image-container{display:inline-block;position:relative}\n"] }]
+            args: [{ selector: 'kv-avatar', template: "<div class=\"image-container\">\r\n  <img [src]=\"getImageSrc() || imageService.userDefaultImage()\" alt=\"Foto\" class=\"container-foto\" [style.border-color]=\"borderColor\" [style.width.px]=\"width\" [style.height.px]=\"height\" (error)=\"handleImageError($event)\" (click)=\"openFile()\">\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\" (click)=\"openFile()\">\r\n      <i class=\"material-symbols-outlined\">photo_camera</i>\r\n    </button>\r\n    \r\n    <button *ngIf=\"btnAlterarFoto && existeLogo\" class=\"botao-excluir-foto border-circle\" (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 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\r\n\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:4px;border-radius:50%;object-fit:cover}.botao-alterar-foto{border-style:none;width:max-content;background-color:#5289b4;color:#000;font-weight:700;cursor:pointer;padding:10px 12px}.botao-alterar-foto i{color:#fff}.botao-excluir-foto{border-style:none;width:max-content;background-color:#5289b4;color:#000;font-weight:700;cursor:pointer;padding:10px 12px}.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:1;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:600px;text-align:center;border-radius:12px}.crop-container{display:flex;justify-content:center;align-items:center}.crop-canvas{border:1px solid black;width:100%;max-width:600px;height:auto;border-radius:12px}.crop-border{position:absolute;width:225px;height:225px;border:2px solid black;border-radius:50%;pointer-events:none}.button-container{display:flex;align-items:center;justify-content:flex-end;flex-direction:row;margin-top:24px}\n"] }]
         }], ctorParameters: () => [{ type: ImagensService }, { type: NotificationService }], propDecorators: { imageUrl: [{
                 type: Input
             }], borderColor: [{
@@ -3470,19 +3589,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 type: Output
             }], btnAlterarFoto: [{
                 type: Input
+            }], cropCanvas: [{
+                type: ViewChild,
+                args: ['cropCanvas']
             }], fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
             }] } });
 
+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,
             ButtonModule,
-            FileUploadModule], exports: [KvAvatarComponent] }); }
+            FileUploadModule,
+            SliderModule,
+            FormsModule,
+            ReactiveFormsModule,
+            KvButtonModule,
+            KvLabelModule], exports: [KvAvatarComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvAvatarModule, imports: [CommonModule,
             ButtonModule,
-            FileUploadModule] }); }
+            FileUploadModule,
+            SliderModule,
+            FormsModule,
+            ReactiveFormsModule,
+            KvButtonModule,
+            KvLabelModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvAvatarModule, decorators: [{
             type: NgModule,
@@ -3493,7 +3668,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                     imports: [
                         CommonModule,
                         ButtonModule,
-                        FileUploadModule
+                        FileUploadModule,
+                        SliderModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KvButtonModule,
+                        KvLabelModule
                     ],
                     exports: [
                         KvAvatarComponent
@@ -4107,26 +4287,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 type: Input
             }] } });
 
-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 KvMultiSelectComponent extends BaseComponentMultiSelect {
     ngOnInit() {
         super.ngOnInit();
@@ -4498,7 +4658,7 @@ class DropdownMasterComponent extends BaseComponentDropDownExternal {
         return of(this.masters || []);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: DropdownMasterComponent, deps: [{ token: ComponentService }, { token: i1$3.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: DropdownMasterComponent, selector: "dropdown-master", inputs: { formControlName: "formControlName", masters: "masters" }, providers: ComponentProviders(DropdownMasterComponent), usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"formGroup\">\r\n  <kv-dropdown\r\n    componentId=\"idmaster\"\r\n    label=\"Licen\u00E7a\"\r\n    optionLabel=\"idmasternome\"\r\n    optionValue=\"idmaster\"\r\n    [options]=\"options\"\r\n    [filter]=\"true\"\r\n    [filteredOptions]=\"filteredOptions\"\r\n    [formControlName]=\"formControlName\"\r\n    [loading]=\"loading\"\r\n    [showClear]=\"false\"\r\n    (onSelectionChange)=\"onInputChange($event)\"\r\n    (onSelectionValue)=\"onInputChange($event)\">\r\n  </kv-dropdown>\r\n</div>", styles: [""], 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: "component", type: KvDropdownComponent, selector: "kv-dropdown", inputs: ["dropDowValue", "itemTemplate", "selectedItemTemplate"] }, { 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: "14.0.0", version: "17.3.8", type: DropdownMasterComponent, selector: "dropdown-master", inputs: { formControlName: "formControlName", masters: "masters" }, providers: ComponentProviders(DropdownMasterComponent), usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"formGroup\">\r\n  <kv-dropdown\r\n    componentId=\"idmaster\"\r\n    label=\"Licen\u00E7a\"\r\n    optionLabel=\"idmasternome\"\r\n    optionValue=\"idmaster\"\r\n    [options]=\"options\"\r\n    [filter]=\"true\"\r\n    [filteredOptions]=\"filteredOptions\"\r\n    [formControlName]=\"formControlName\"\r\n    [loading]=\"loading\"\r\n    [showClear]=\"false\"\r\n    (onSelectionChange)=\"onInputChange($event)\"\r\n    (onSelectionValue)=\"onInputChange($event)\">\r\n  </kv-dropdown>\r\n</div>", styles: [""], 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: "component", type: KvDropdownComponent, selector: "kv-dropdown", inputs: ["filterPlaceholder", "dropDowValue", "itemTemplate", "selectedItemTemplate"] }, { 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: DropdownMasterComponent, decorators: [{
             type: Component,
@@ -4675,31 +4835,11 @@ class KvLayoutComponent {
         return this.expandMenu ? 'expanded' : 'collapsed';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLayoutComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$1.FormBuilder }, { token: i3$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvLayoutComponent, selector: "kv-layout", inputs: { apps: "apps", breadCrumbItems: "breadCrumbItems", masters: "masters", menus: "menus", expandMenu: "expandMenu", logoMenuExpand: "logoMenuExpand", logoMenuHide: "logoMenuHide", selectedApp: "selectedApp", selectedEmpresa: "selectedEmpresa", selectedMaster: "selectedMaster", showButtonApps: "showButtonApps", showButtonUser: "showButtonUser", showExpandMenu: "showExpandMenu", showDropdownLicenca: "showDropdownLicenca", showMenu: "showMenu", showTrocaEmpresa: "showTrocaEmpresa", userName: "userName" }, outputs: { accessKeePassEmit: "accessKeePassEmit", changeEmpresaEmit: "changeEmpresaEmit", changeLicenseEmit: "changeLicenseEmit", expandMenuEmit: "expandMenuEmit", logoutEmit: "logoutEmit", selectAppEmit: "selectAppEmit", navigateToDefaultRouteEmit: "navigateToDefaultRouteEmit" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "meusDadosPanel", first: true, predicate: ["meusDadosPanel"], descendants: true }, { propertyName: "sidebarRef", first: true, predicate: ["sidebarRef"], descendants: true }, { propertyName: "sistemasPanel", first: true, predicate: ["sistemasPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n  @if (showMenu) {\r\n  <!-- <div [style]=\"{ minWidth: expandMenu ? '300px' : '60px' }\"></div> -->\r\n  } @if(showMenu) {\r\n  <p-sidebar\r\n    #sidebarRef\r\n    [visible]=\"true\"\r\n    [showCloseIcon]=\"false\"\r\n    [modal]=\"false\"\r\n    [style]=\"{ width: expandMenu ? '300px' : '60px' }\"\r\n    [@sidebarWidthTrigger]=\"getSidebarState()\"\r\n    class=\"sidebar-animation\"\r\n  >\r\n    <ng-template pTemplate=\"headless\">\r\n      <div class=\"flex flex-column mx-1\">\r\n        <div\r\n          class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2\"\r\n        >\r\n          <div\r\n            class=\"flex {{expandMenu ? 'flex-row' : 'flex-column'}} align-items-center {{\r\n              expandMenu ? 'justify-content-between' : 'justify-content-center'\r\n            }} py-3\"\r\n          >\r\n            <!-- Logo para o menu expandido -->\r\n            <img\r\n              *ngIf=\"expandMenu && logoMenuExpand\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuExpand\"\r\n              width=\"150\"\r\n              class=\"cursor-pointer\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Logo para o menu minimizado-->\r\n            <img\r\n              *ngIf=\"!expandMenu && logoMenuHide\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuHide\"\r\n              width=\"50\"\r\n              class=\"mb-2\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Toggle menu -->\r\n            <button\r\n              *ngIf=\"showExpandMenu\"\r\n              pButton\r\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n              (click)=\"toggleMenu()\"\r\n              [pTooltip]=\"expandMenu ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n              [tooltipPosition]=\"'right'\"\r\n            >\r\n              <i class=\"material-symbols-outlined\"> menu </i>\r\n            </button>\r\n          </div>\r\n\r\n          @if(showTrocaEmpresa){\r\n          <div\r\n            class=\"flex flex-row align-items-center {{\r\n              expandMenu ? 'justify-content-between' : 'justify-content-center'\r\n            }}\"\r\n          >\r\n            <div\r\n              class=\"flex flex-column cursor-pointer\"\r\n              *ngIf=\"expandMenu && selectedEmpresa\"\r\n              (click)=\"changeEmpresa($event)\"\r\n            >\r\n              <span\r\n                class=\"text-sm font-semibold mr-2\"\r\n                [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n                [tooltipPosition]=\"'right'\"\r\n              >\r\n                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n              </span>\r\n              <span class=\"text-sm mt-1\">{{\r\n                this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n              }}</span>\r\n            </div>\r\n\r\n            <button\r\n              pButton\r\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n              (click)=\"changeEmpresa($event)\"\r\n              [pTooltip]=\"'Trocar de empresa'\"\r\n              [tooltipPosition]=\"'right'\"\r\n            >\r\n              <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n            </button>\r\n          </div>\r\n          <p-divider type=\"solid\"></p-divider>\r\n          }\r\n        </div>\r\n\r\n        <div\r\n          class=\"list-none m-0  card-container {{ expandMenu ? 'mx-1' : '' }}\"\r\n          [style.max-height]=\"heightCard - 220 + 'px'\"\r\n          style=\"overflow-y: auto\"\r\n        >\r\n          <!-- menus -->\r\n          <li *ngFor=\"let menu of menus; let i = index\">\r\n            <!-- menu que n\u00E3o tem filho -->\r\n            <a\r\n              (mouseenter)=\"onMouseEnter(i)\"\r\n              (mouseleave)=\"onMouseLeave()\"\r\n              [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n              (click)=\"callRoute(menu.link)\"\r\n              *ngIf=\"\r\n                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n              \"\r\n              pRipple\r\n              [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\r\n              [tooltipPosition]=\"'right'\"\r\n              class=\"{{\r\n                verifySelectedPage(menu.link) ? 'bg-green-600' : ''\r\n              }} menu-option flex align-items-center no-underline {{\r\n                !expandMenu ? 'justify-content-center' : ''\r\n              }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\"\r\n            >\r\n              <i\r\n                class=\"material-symbols-outlined icon-menu {{\r\n                  expandMenu ? 'ml-1 mr-2' : ''\r\n                }}  icon-hover-color {{\r\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\r\n                }}\"\r\n                *ngIf=\"menu.icone\"\r\n              >\r\n                {{ menu.icone }}\r\n              </i>\r\n              <span\r\n                class=\"text-base text-blue-900 font-medium {{\r\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\r\n                }}\"\r\n                *ngIf=\"expandMenu\"\r\n                >{{ menu.descricaomenu }}</span\r\n              >\r\n            </a>\r\n            <!-- menu com filho -->\r\n            <div *ngIf=\"menu.indmenupai\">\r\n              <a\r\n                (mouseenter)=\"onMouseEnter(i)\"\r\n                (mouseleave)=\"onMouseLeave()\"\r\n                [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                pRipple\r\n                pStyleClass=\"@next\"\r\n                enterClass=\"hidden\"\r\n                enterActiveClass=\"slidedown\"\r\n                leaveToClass=\"hidden\"\r\n                leaveActiveClass=\"slideup\"\r\n                class=\"menu-option flex align-items-center {{\r\n                  !expandMenu\r\n                    ? 'justify-content-center'\r\n                    : 'justify-content-between'\r\n                }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\"\r\n                [tooltipPosition]=\"'right'\"\r\n                [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\r\n                (click)=\"!expandMenu ? (expandMenu = !expandMenu) : ''\"\r\n              >\r\n                <div class=\"flex flex-row align-items-center\">\r\n                  <i\r\n                    class=\"material-symbols-outlined icon-menu {{\r\n                      expandMenu ? 'ml-1 mr-2' : ''\r\n                    }} icon-hover-color\"\r\n                    *ngIf=\"menu.icone\"\r\n                    [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                  >\r\n                    {{ menu.icone }}\r\n                  </i>\r\n                  <span\r\n                    class=\"text-base text-blue-900 font-medium\"\r\n                    *ngIf=\"expandMenu\"\r\n                    >{{ menu.descricaomenu }}</span\r\n                  >\r\n                </div>\r\n                <i\r\n                  class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color\"\r\n                  *ngIf=\"expandMenu\"\r\n                  [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                ></i>\r\n              </a>\r\n\r\n              <!-- filhos -->\r\n              <div\r\n                class=\"list-none py-0 pl-3 pr-0 m-0 {{ !(menuSelecionado == menu.idmenu) && 'hidden'}} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n              >\r\n                <li\r\n                  *ngFor=\"\r\n                    let filho of returnMenuChild(menu.idmenu);\r\n                    let iFilho = index\r\n                  \"\r\n                >\r\n                  <a\r\n                    (mouseenter)=\"onMouseEnterChild(filho.idmenu)\"\r\n                    (mouseleave)=\"onMouseLeave()\"\r\n                    [ngClass]=\"{\r\n                      'hover-color': mouseOverFilhoIndex === filho.idmenu\r\n                    }\"\r\n                    *ngIf=\"expandMenu\"\r\n                    (click)=\"callRoute(filho.link)\"\r\n                    pRipple\r\n                    class=\"{{\r\n                      verifySelectedPage(filho.link, menu) ? 'bg-green-600' : ''\r\n                    }} menu-option flex align-items-center no-underline cursor-pointer border-round text-700 hover:bg-green-600 transition-duration-150 transition-colors p-ripple p-2\"\r\n                  >\r\n                    <i\r\n                      class=\"material-symbols-outlined icon-menu {{\r\n                        expandMenu ? 'ml-1 mr-2' : ''\r\n                      }} icon-hover-color\"\r\n                      *ngIf=\"filho.icone\"\r\n                      [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                    >\r\n                      {{ filho.icone }}\r\n                    </i>\r\n                    <span\r\n                      class=\"text-base text-blue-900 ml-4 {{\r\n                        verifySelectedPage(filho.link, menu) ? 'text-white' : ''\r\n                      }}\"\r\n                      *ngIf=\"expandMenu\"\r\n                      >{{ filho.descricaomenu }}</span\r\n                    >\r\n                  </a>\r\n                </li>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </p-sidebar>\r\n  }\r\n\r\n  <!-- Topbar -->\r\n  <div\r\n    class=\"w-auto h-screen page-content overflow-y-hidden\"\r\n    id=\"page-content\"\r\n    style=\"width: 100vw !important\"\r\n  >\r\n    <div class=\"flex flex-row align-items-center justify-content-between m-3\">\r\n\r\n      @if(!showMenu) {\r\n      <!-- Logo home -->\r\n      <div>\r\n        <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n      </div>\r\n      } \r\n      \r\n      @else {\r\n      <!-- Breadcrumbs -->\r\n      <div>\r\n        <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n          {{ breadCrumbItems[breadCrumbItems.length - 1]?.label }}\r\n        </p>\r\n        <p-breadcrumb\r\n          *ngIf=\"widthCard > 400\"\r\n          styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n          [model]=\"breadCrumbItems\"\r\n          [style]=\"{ backgroundColor: '#d4d3d3' }\"\r\n          (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n        ></p-breadcrumb>\r\n      </div>\r\n      }\r\n\r\n      <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n      <dropdown-master\r\n        *ngIf=\"showLicencas()\"\r\n        class=\"w-40rem\"\r\n        formControlName=\"idmaster\"\r\n        [formGroup]=\"formGroup\"\r\n        [masters]=\"masters\"\r\n        (onSelectionChange)=\"changeLicense($event)\"\r\n        (onSelectionValue)=\"changeLicense($event)\"\r\n      >\r\n      </dropdown-master>\r\n\r\n      <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n      <div class=\"w-auto flex flex-row align-items-center gap-2\">\r\n        <p-button\r\n          *ngIf=\"showButtonApps\"\r\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\r\n          icon=\"pi pi-th-large\"\r\n          [rounded]=\"true\"\r\n          [text]=\"true\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n        ></p-button>\r\n\r\n        <p-button\r\n          *ngIf=\"showButtonUser\"\r\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\r\n          icon=\"pi pi-user\"\r\n          [rounded]=\"true\"\r\n          [text]=\"true\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        ></p-button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Container -->\r\n    <p-card\r\n      styleClass=\"m-3 border-noround overflow-y-auto {{\r\n        !showMenu && 'sm:overflow-y-hidden'\r\n      }} card-container\"\r\n      [style]=\"{ height: heightCard - adjustHeightCard() + 'px' }\"\r\n    >\r\n      <div\r\n        class=\"{{ widthCard < 992 && 'card-container' }} w-full\"\r\n        [style]=\"{ width: widthCard + 'px' }\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </p-card>\r\n  </div>\r\n\r\n  <!-- Painel de aplicativos -->\r\n  <p-overlayPanel\r\n    #sistemasPanel\r\n    [showTransitionOptions]=\"'350ms ease-out'\"\r\n    [hideTransitionOptions]=\"'250ms ease-in'\"\r\n  >\r\n    <ng-template pTemplate=\"container\">\r\n      <p class=\"title-style mt-3\">Sistemas</p>\r\n      <div\r\n        class=\"flex flex-row flex-wrap gap-2 align-items-center justify-content-center mt-5 mb-3\"\r\n        style=\"width: 250px; height: 100%\"\r\n      >\r\n        <button\r\n          *ngFor=\"let aplicativo of apps\"\r\n          pButton\r\n          pRipple\r\n          class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n        >\r\n          {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n  </p-overlayPanel>\r\n\r\n  <!-- Painel do usu\u00E1rio -->\r\n  <p-overlayPanel\r\n    #meusDadosPanel\r\n    [showTransitionOptions]=\"'350ms ease-out'\"\r\n    [hideTransitionOptions]=\"'250ms ease-in'\"\r\n  >\r\n    <ng-template pTemplate=\"container\">\r\n      <p class=\"title-style mt-3\">\r\n        Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\r\n      </p>\r\n      <div class=\"mt-5 mb-3\"></div>\r\n\r\n      <p-button\r\n        icon=\"pi pi-lock\"\r\n        label=\"Acessar Keepass\"\r\n        (onClick)=\"accessKeePass($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n\r\n      <p-button\r\n        icon=\"pi pi-sign-out\"\r\n        label=\"Sair\"\r\n        (onClick)=\"logout($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n    </ng-template>\r\n  </p-overlayPanel>\r\n</div>\r\n", styles: [".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}::ng-deep .p-button:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}::ng-deep .p-overlaypanel .p-overlaypanel-content{padding:0}::ng-deep .hover-btn-cor-padrao.p-button:enabled:hover{background:#0c3e66;border-color:#002542}.p-button.p-button-icon-only.p-button-rounded{background:#0c3e66;border-color:#002542}::ng-deep .remove-focus:focus{border:none}::ng-deep .p-sidebar .p-sidebar-content{padding:0}::ng-deep .sidebar-header-sistema.p-sidebar .p-sidebar-header{padding-top:.5rem;padding-right:0;padding-bottom:0;padding-left:0;display:block}.btn-sistema{display:flex;align-items:center;justify-content:center;background-color:#0c3e66;font-size:20px}::ng-deep .p-sidebar .p-sidebar-header{padding:0rem!important}::ng-deep body{margin:0!important}::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron{position:relative;top:3px;color:#0c3e66!important}.page-content{background:linear-gradient(to bottom,#d4d3d3 16%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.9rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#f5f5f5;overflow:hidden}::ng-deep .page-style{overflow:auto!important}::ng-deep .card-container{overflow-x:hidden}::ng-deep .card-container::-webkit-scrollbar{width:6px}::ng-deep .card-container::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .card-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .card-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .card-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.title-style{position:relative;top:10px;margin-left:20px;font-size:25px;color:#002542;border-bottom:2px solid green;font-weight:600;display:inline}::ng-deep p-sidebar .p-sidebar-content{overflow-y:hidden}::ng-deep p-dialog .p-dialog-content{overflow-y:unset}.icon-menu{color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .padding-style{padding:15px!important}::ng-deep .menu-option{padding:15px 5px!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text{color:#183462!important;opacity:.95;font-weight:500;font-size:.8rem!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text:hover{opacity:.7}.pl-3{padding-left:0rem!important}::ng-deep svg.p-icon{width:.7rem;height:1rem}.hover-color .text-base,.hover-color .icon-hover-color{color:#fff!important}::ng-deep .p-card .p-card-body{padding:0rem!important}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:auto!important}\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: "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: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$7.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i10$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i2.Ripple, selector: "[pRipple]" }, { kind: "component", type: i12.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i13$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }, { 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"] }, { kind: "component", type: DropdownMasterComponent, selector: "dropdown-master", inputs: ["formControlName", "masters"] }, { kind: "pipe", type: CpfCnpjPipe, name: "cpfCnpj" }], animations: [
-            trigger('sidebarWidthTrigger', [
-                state('collapsed', style({
-                    width: '60px'
-                })),
-                state('expanded', style({
-                    width: '359px'
-                })),
-                transition('collapsed <=> expanded', animate('100ms ease-out'))
-            ])
-        ] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvLayoutComponent, selector: "kv-layout", inputs: { apps: "apps", breadCrumbItems: "breadCrumbItems", masters: "masters", menus: "menus", expandMenu: "expandMenu", logoMenuExpand: "logoMenuExpand", logoMenuHide: "logoMenuHide", selectedApp: "selectedApp", selectedEmpresa: "selectedEmpresa", selectedMaster: "selectedMaster", showButtonApps: "showButtonApps", showButtonUser: "showButtonUser", showExpandMenu: "showExpandMenu", showDropdownLicenca: "showDropdownLicenca", showMenu: "showMenu", showTrocaEmpresa: "showTrocaEmpresa", userName: "userName" }, outputs: { accessKeePassEmit: "accessKeePassEmit", changeEmpresaEmit: "changeEmpresaEmit", changeLicenseEmit: "changeLicenseEmit", expandMenuEmit: "expandMenuEmit", logoutEmit: "logoutEmit", selectAppEmit: "selectAppEmit", navigateToDefaultRouteEmit: "navigateToDefaultRouteEmit" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "meusDadosPanel", first: true, predicate: ["meusDadosPanel"], descendants: true }, { propertyName: "sidebarRef", first: true, predicate: ["sidebarRef"], descendants: true }, { propertyName: "sistemasPanel", first: true, predicate: ["sistemasPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n  @if (showMenu) {\r\n  <div [style]=\"{ minWidth: expandMenu ? '300px' : '60px' }\"></div>\r\n  } @if(showMenu) {\r\n  <p-sidebar\r\n    #sidebarRef\r\n    [visible]=\"true\"\r\n    [showCloseIcon]=\"false\"\r\n    [modal]=\"false\"\r\n    [style]=\"{ width: expandMenu ? '300px' : '60px' }\"\r\n    class=\"sidebar-animation\"\r\n  >\r\n    <ng-template pTemplate=\"headless\">\r\n      <div class=\"flex flex-column mx-1\">\r\n        <div\r\n          class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2\"\r\n        >\r\n          <div\r\n            class=\"flex {{expandMenu ? 'flex-row' : 'flex-column'}} align-items-center {{\r\n              expandMenu ? 'justify-content-between' : 'justify-content-center'\r\n            }} py-3\"\r\n          >\r\n            <!-- Logo para o menu expandido -->\r\n            <img\r\n              *ngIf=\"expandMenu && logoMenuExpand\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuExpand\"\r\n              width=\"150\"\r\n              class=\"cursor-pointer\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Logo para o menu minimizado-->\r\n            <img\r\n              *ngIf=\"!expandMenu && logoMenuHide\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuHide\"\r\n              width=\"50\"\r\n              class=\"mb-2\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Toggle menu -->\r\n            <button\r\n              *ngIf=\"showExpandMenu\"\r\n              pButton\r\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n              (click)=\"toggleMenu()\"\r\n              [pTooltip]=\"expandMenu ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n              [tooltipPosition]=\"'right'\"\r\n            >\r\n              <i class=\"material-symbols-outlined\"> menu </i>\r\n            </button>\r\n          </div>\r\n\r\n          @if(showTrocaEmpresa){\r\n          <div\r\n            class=\"flex flex-row align-items-center {{\r\n              expandMenu ? 'justify-content-between' : 'justify-content-center'\r\n            }}\"\r\n          >\r\n            <div\r\n              class=\"flex flex-column cursor-pointer\"\r\n              *ngIf=\"expandMenu && selectedEmpresa\"\r\n              (click)=\"changeEmpresa($event)\"\r\n            >\r\n              <span\r\n                class=\"text-sm font-semibold mr-2\"\r\n                [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n                [tooltipPosition]=\"'right'\"\r\n              >\r\n                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n              </span>\r\n              <span class=\"text-sm mt-1\">{{\r\n                this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n              }}</span>\r\n            </div>\r\n\r\n            <button\r\n              pButton\r\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n              (click)=\"changeEmpresa($event)\"\r\n              [pTooltip]=\"'Trocar de empresa'\"\r\n              [tooltipPosition]=\"'right'\"\r\n            >\r\n              <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n            </button>\r\n          </div>\r\n          <p-divider type=\"solid\"></p-divider>\r\n          }\r\n        </div>\r\n\r\n        <div\r\n          class=\"list-none m-0  card-container {{ expandMenu ? 'mx-1' : '' }}\"\r\n          [style.max-height]=\"heightCard - 220 + 'px'\"\r\n          style=\"overflow-y: auto\"\r\n        >\r\n          <!-- menus -->\r\n          <li *ngFor=\"let menu of menus; let i = index\">\r\n            <!-- menu que n\u00E3o tem filho -->\r\n            <a\r\n              (mouseenter)=\"onMouseEnter(i)\"\r\n              (mouseleave)=\"onMouseLeave()\"\r\n              [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n              (click)=\"callRoute(menu.link)\"\r\n              *ngIf=\"\r\n                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n              \"\r\n              pRipple\r\n              [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\r\n              [tooltipPosition]=\"'right'\"\r\n              class=\"{{\r\n                verifySelectedPage(menu.link) ? 'bg-green-600' : ''\r\n              }} menu-option flex align-items-center no-underline {{\r\n                !expandMenu ? 'justify-content-center' : ''\r\n              }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\"\r\n            >\r\n              <i\r\n                class=\"material-symbols-outlined icon-menu {{\r\n                  expandMenu ? 'ml-1 mr-2' : ''\r\n                }}  icon-hover-color {{\r\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\r\n                }}\"\r\n                *ngIf=\"menu.icone\"\r\n              >\r\n                {{ menu.icone }}\r\n              </i>\r\n              <span\r\n                class=\"text-base text-blue-900 font-medium {{\r\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\r\n                }}\"\r\n                *ngIf=\"expandMenu\"\r\n                >{{ menu.descricaomenu }}</span\r\n              >\r\n            </a>\r\n            <!-- menu com filho -->\r\n            <div *ngIf=\"menu.indmenupai\">\r\n              <a\r\n                (mouseenter)=\"onMouseEnter(i)\"\r\n                (mouseleave)=\"onMouseLeave()\"\r\n                [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                pRipple\r\n                pStyleClass=\"@next\"\r\n                enterClass=\"hidden\"\r\n                enterActiveClass=\"slidedown\"\r\n                leaveToClass=\"hidden\"\r\n                leaveActiveClass=\"slideup\"\r\n                class=\"menu-option flex align-items-center {{\r\n                  !expandMenu\r\n                    ? 'justify-content-center'\r\n                    : 'justify-content-between'\r\n                }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\"\r\n                [tooltipPosition]=\"'right'\"\r\n                [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\r\n                (click)=\"!expandMenu ? (expandMenu = !expandMenu) : ''\"\r\n              >\r\n                <div class=\"flex flex-row align-items-center\">\r\n                  <i\r\n                    class=\"material-symbols-outlined icon-menu {{\r\n                      expandMenu ? 'ml-1 mr-2' : ''\r\n                    }} icon-hover-color\"\r\n                    *ngIf=\"menu.icone\"\r\n                    [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                  >\r\n                    {{ menu.icone }}\r\n                  </i>\r\n                  <span\r\n                    class=\"text-base text-blue-900 font-medium\"\r\n                    *ngIf=\"expandMenu\"\r\n                    >{{ menu.descricaomenu }}</span\r\n                  >\r\n                </div>\r\n                <i\r\n                  class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color\"\r\n                  *ngIf=\"expandMenu\"\r\n                  [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                ></i>\r\n              </a>\r\n\r\n              <!-- filhos -->\r\n              <div\r\n                class=\"list-none py-0 pl-3 pr-0 m-0 {{ !(menuSelecionado == menu.idmenu) && 'hidden'}} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n              >\r\n                <li\r\n                  *ngFor=\"\r\n                    let filho of returnMenuChild(menu.idmenu);\r\n                    let iFilho = index\r\n                  \"\r\n                >\r\n                  <a\r\n                    (mouseenter)=\"onMouseEnterChild(filho.idmenu)\"\r\n                    (mouseleave)=\"onMouseLeave()\"\r\n                    [ngClass]=\"{\r\n                      'hover-color': mouseOverFilhoIndex === filho.idmenu\r\n                    }\"\r\n                    *ngIf=\"expandMenu\"\r\n                    (click)=\"callRoute(filho.link)\"\r\n                    pRipple\r\n                    class=\"{{\r\n                      verifySelectedPage(filho.link, menu) ? 'bg-green-600' : ''\r\n                    }} menu-option flex align-items-center no-underline cursor-pointer border-round text-700 hover:bg-green-600 transition-duration-150 transition-colors p-ripple p-2\"\r\n                  >\r\n                    <i\r\n                      class=\"material-symbols-outlined icon-menu {{\r\n                        expandMenu ? 'ml-1 mr-2' : ''\r\n                      }} icon-hover-color\"\r\n                      *ngIf=\"filho.icone\"\r\n                      [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                    >\r\n                      {{ filho.icone }}\r\n                    </i>\r\n                    <span\r\n                      class=\"text-base text-blue-900 ml-4 {{\r\n                        verifySelectedPage(filho.link, menu) ? 'text-white' : ''\r\n                      }}\"\r\n                      *ngIf=\"expandMenu\"\r\n                      >{{ filho.descricaomenu }}</span\r\n                    >\r\n                  </a>\r\n                </li>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </p-sidebar>\r\n  }\r\n\r\n  <!-- Topbar -->\r\n  <div\r\n    class=\"w-auto h-screen page-content overflow-y-hidden\"\r\n    id=\"page-content\"\r\n    style=\"width: 100vw !important\"\r\n  >\r\n    <div class=\"flex flex-row align-items-center justify-content-between m-3\">\r\n\r\n      @if(!showMenu) {\r\n      <!-- Logo home -->\r\n      <div>\r\n        <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n      </div>\r\n      } \r\n      \r\n      @else {\r\n      <!-- Breadcrumbs -->\r\n      <div>\r\n        <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n          {{ breadCrumbItems[breadCrumbItems.length - 1]?.label }}\r\n        </p>\r\n        <p-breadcrumb\r\n          *ngIf=\"widthCard > 400\"\r\n          styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n          [model]=\"breadCrumbItems\"\r\n          [style]=\"{ backgroundColor: '#d4d3d3' }\"\r\n          (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n        ></p-breadcrumb>\r\n      </div>\r\n      }\r\n\r\n      <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n      <dropdown-master\r\n        *ngIf=\"showLicencas()\"\r\n        class=\"w-40rem\"\r\n        formControlName=\"idmaster\"\r\n        [formGroup]=\"formGroup\"\r\n        [masters]=\"masters\"\r\n        (onSelectionChange)=\"changeLicense($event)\"\r\n        (onSelectionValue)=\"changeLicense($event)\"\r\n      >\r\n      </dropdown-master>\r\n\r\n      <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n      <div class=\"w-auto flex flex-row align-items-center gap-2\">\r\n        <p-button\r\n          *ngIf=\"showButtonApps\"\r\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\r\n          icon=\"pi pi-th-large\"\r\n          [rounded]=\"true\"\r\n          [text]=\"true\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n        ></p-button>\r\n\r\n        <p-button\r\n          *ngIf=\"showButtonUser\"\r\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\r\n          icon=\"pi pi-user\"\r\n          [rounded]=\"true\"\r\n          [text]=\"true\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        ></p-button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Container -->\r\n    <p-card\r\n      styleClass=\"m-3 border-noround overflow-y-auto {{\r\n        !showMenu && 'sm:overflow-y-hidden'\r\n      }} card-container\"\r\n      [style]=\"{ height: heightCard - adjustHeightCard() + 'px' }\"\r\n    >\r\n      <div\r\n        class=\"{{ widthCard < 992 && 'card-container' }} w-full\"\r\n        [style]=\"{ width: widthCard + 'px' }\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </p-card>\r\n  </div>\r\n\r\n  <!-- Painel de aplicativos -->\r\n  <p-overlayPanel\r\n    #sistemasPanel\r\n    [showTransitionOptions]=\"'350ms ease-out'\"\r\n    [hideTransitionOptions]=\"'250ms ease-in'\"\r\n  >\r\n    <ng-template pTemplate=\"container\">\r\n      <p class=\"title-style mt-3\">Sistemas</p>\r\n      <div\r\n        class=\"flex flex-row flex-wrap gap-2 align-items-center justify-content-center mt-5 mb-3\"\r\n        style=\"width: 250px; height: 100%\"\r\n      >\r\n        <button\r\n          *ngFor=\"let aplicativo of apps\"\r\n          pButton\r\n          pRipple\r\n          class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n        >\r\n          {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n  </p-overlayPanel>\r\n\r\n  <!-- Painel do usu\u00E1rio -->\r\n  <p-overlayPanel\r\n    #meusDadosPanel\r\n    [showTransitionOptions]=\"'350ms ease-out'\"\r\n    [hideTransitionOptions]=\"'250ms ease-in'\"\r\n  >\r\n    <ng-template pTemplate=\"container\">\r\n      <p class=\"title-style mt-3\">\r\n        Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\r\n      </p>\r\n      <div class=\"mt-5 mb-3\"></div>\r\n\r\n      <p-button\r\n        icon=\"pi pi-lock\"\r\n        label=\"Acessar Keepass\"\r\n        (onClick)=\"accessKeePass($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n\r\n      <p-button\r\n        icon=\"pi pi-sign-out\"\r\n        label=\"Sair\"\r\n        (onClick)=\"logout($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n    </ng-template>\r\n  </p-overlayPanel>\r\n</div>\r\n", styles: [".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}::ng-deep .p-button:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}::ng-deep .p-overlaypanel .p-overlaypanel-content{padding:0}::ng-deep .hover-btn-cor-padrao.p-button:enabled:hover{background:#0c3e66;border-color:#002542}.p-button.p-button-icon-only.p-button-rounded{background:#0c3e66;border-color:#002542}::ng-deep .remove-focus:focus{border:none}::ng-deep .p-sidebar .p-sidebar-content{padding:0}::ng-deep .sidebar-header-sistema.p-sidebar .p-sidebar-header{padding-top:.5rem;padding-right:0;padding-bottom:0;padding-left:0;display:block}.btn-sistema{display:flex;align-items:center;justify-content:center;background-color:#0c3e66;font-size:20px}::ng-deep .p-sidebar .p-sidebar-header{padding:0rem!important}::ng-deep body{margin:0!important}::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron{position:relative;top:3px;color:#0c3e66!important}.page-content{background:linear-gradient(to bottom,#d4d3d3 16%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.9rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#f5f5f5;overflow:hidden}::ng-deep .page-style{overflow:auto!important}::ng-deep .card-container{overflow-x:hidden}::ng-deep .card-container::-webkit-scrollbar{width:6px}::ng-deep .card-container::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .card-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .card-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .card-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.title-style{position:relative;top:10px;margin-left:20px;font-size:25px;color:#002542;border-bottom:2px solid green;font-weight:600;display:inline}::ng-deep p-sidebar .p-sidebar-content{overflow-y:hidden}::ng-deep p-dialog .p-dialog-content{overflow-y:unset}.icon-menu{color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .padding-style{padding:15px!important}::ng-deep .menu-option{padding:15px 5px!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text{color:#183462!important;opacity:.95;font-weight:500;font-size:.8rem!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text:hover{opacity:.7}.pl-3{padding-left:0rem!important}::ng-deep svg.p-icon{width:.7rem;height:1rem}.hover-color .text-base,.hover-color .icon-hover-color{color:#fff!important}::ng-deep .p-card .p-card-body{padding:0rem!important}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:auto!important}\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: "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: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5$7.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i8.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i10.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "component", type: i10$1.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i2.Ripple, selector: "[pRipple]" }, { kind: "component", type: i12.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i13$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }, { 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"] }, { kind: "component", type: DropdownMasterComponent, selector: "dropdown-master", inputs: ["formControlName", "masters"] }, { kind: "pipe", type: CpfCnpjPipe, name: "cpfCnpj" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-layout', animations: [
-                        trigger('sidebarWidthTrigger', [
-                            state('collapsed', style({
-                                width: '60px'
-                            })),
-                            state('expanded', style({
-                                width: '359px'
-                            })),
-                            transition('collapsed <=> expanded', animate('100ms ease-out'))
-                        ])
-                    ], template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n  @if (showMenu) {\r\n  <!-- <div [style]=\"{ minWidth: expandMenu ? '300px' : '60px' }\"></div> -->\r\n  } @if(showMenu) {\r\n  <p-sidebar\r\n    #sidebarRef\r\n    [visible]=\"true\"\r\n    [showCloseIcon]=\"false\"\r\n    [modal]=\"false\"\r\n    [style]=\"{ width: expandMenu ? '300px' : '60px' }\"\r\n    [@sidebarWidthTrigger]=\"getSidebarState()\"\r\n    class=\"sidebar-animation\"\r\n  >\r\n    <ng-template pTemplate=\"headless\">\r\n      <div class=\"flex flex-column mx-1\">\r\n        <div\r\n          class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2\"\r\n        >\r\n          <div\r\n            class=\"flex {{expandMenu ? 'flex-row' : 'flex-column'}} align-items-center {{\r\n              expandMenu ? 'justify-content-between' : 'justify-content-center'\r\n            }} py-3\"\r\n          >\r\n            <!-- Logo para o menu expandido -->\r\n            <img\r\n              *ngIf=\"expandMenu && logoMenuExpand\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuExpand\"\r\n              width=\"150\"\r\n              class=\"cursor-pointer\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Logo para o menu minimizado-->\r\n            <img\r\n              *ngIf=\"!expandMenu && logoMenuHide\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuHide\"\r\n              width=\"50\"\r\n              class=\"mb-2\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Toggle menu -->\r\n            <button\r\n              *ngIf=\"showExpandMenu\"\r\n              pButton\r\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n              (click)=\"toggleMenu()\"\r\n              [pTooltip]=\"expandMenu ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n              [tooltipPosition]=\"'right'\"\r\n            >\r\n              <i class=\"material-symbols-outlined\"> menu </i>\r\n            </button>\r\n          </div>\r\n\r\n          @if(showTrocaEmpresa){\r\n          <div\r\n            class=\"flex flex-row align-items-center {{\r\n              expandMenu ? 'justify-content-between' : 'justify-content-center'\r\n            }}\"\r\n          >\r\n            <div\r\n              class=\"flex flex-column cursor-pointer\"\r\n              *ngIf=\"expandMenu && selectedEmpresa\"\r\n              (click)=\"changeEmpresa($event)\"\r\n            >\r\n              <span\r\n                class=\"text-sm font-semibold mr-2\"\r\n                [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n                [tooltipPosition]=\"'right'\"\r\n              >\r\n                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n              </span>\r\n              <span class=\"text-sm mt-1\">{{\r\n                this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n              }}</span>\r\n            </div>\r\n\r\n            <button\r\n              pButton\r\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n              (click)=\"changeEmpresa($event)\"\r\n              [pTooltip]=\"'Trocar de empresa'\"\r\n              [tooltipPosition]=\"'right'\"\r\n            >\r\n              <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n            </button>\r\n          </div>\r\n          <p-divider type=\"solid\"></p-divider>\r\n          }\r\n        </div>\r\n\r\n        <div\r\n          class=\"list-none m-0  card-container {{ expandMenu ? 'mx-1' : '' }}\"\r\n          [style.max-height]=\"heightCard - 220 + 'px'\"\r\n          style=\"overflow-y: auto\"\r\n        >\r\n          <!-- menus -->\r\n          <li *ngFor=\"let menu of menus; let i = index\">\r\n            <!-- menu que n\u00E3o tem filho -->\r\n            <a\r\n              (mouseenter)=\"onMouseEnter(i)\"\r\n              (mouseleave)=\"onMouseLeave()\"\r\n              [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n              (click)=\"callRoute(menu.link)\"\r\n              *ngIf=\"\r\n                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n              \"\r\n              pRipple\r\n              [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\r\n              [tooltipPosition]=\"'right'\"\r\n              class=\"{{\r\n                verifySelectedPage(menu.link) ? 'bg-green-600' : ''\r\n              }} menu-option flex align-items-center no-underline {{\r\n                !expandMenu ? 'justify-content-center' : ''\r\n              }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\"\r\n            >\r\n              <i\r\n                class=\"material-symbols-outlined icon-menu {{\r\n                  expandMenu ? 'ml-1 mr-2' : ''\r\n                }}  icon-hover-color {{\r\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\r\n                }}\"\r\n                *ngIf=\"menu.icone\"\r\n              >\r\n                {{ menu.icone }}\r\n              </i>\r\n              <span\r\n                class=\"text-base text-blue-900 font-medium {{\r\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\r\n                }}\"\r\n                *ngIf=\"expandMenu\"\r\n                >{{ menu.descricaomenu }}</span\r\n              >\r\n            </a>\r\n            <!-- menu com filho -->\r\n            <div *ngIf=\"menu.indmenupai\">\r\n              <a\r\n                (mouseenter)=\"onMouseEnter(i)\"\r\n                (mouseleave)=\"onMouseLeave()\"\r\n                [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                pRipple\r\n                pStyleClass=\"@next\"\r\n                enterClass=\"hidden\"\r\n                enterActiveClass=\"slidedown\"\r\n                leaveToClass=\"hidden\"\r\n                leaveActiveClass=\"slideup\"\r\n                class=\"menu-option flex align-items-center {{\r\n                  !expandMenu\r\n                    ? 'justify-content-center'\r\n                    : 'justify-content-between'\r\n                }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\"\r\n                [tooltipPosition]=\"'right'\"\r\n                [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\r\n                (click)=\"!expandMenu ? (expandMenu = !expandMenu) : ''\"\r\n              >\r\n                <div class=\"flex flex-row align-items-center\">\r\n                  <i\r\n                    class=\"material-symbols-outlined icon-menu {{\r\n                      expandMenu ? 'ml-1 mr-2' : ''\r\n                    }} icon-hover-color\"\r\n                    *ngIf=\"menu.icone\"\r\n                    [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                  >\r\n                    {{ menu.icone }}\r\n                  </i>\r\n                  <span\r\n                    class=\"text-base text-blue-900 font-medium\"\r\n                    *ngIf=\"expandMenu\"\r\n                    >{{ menu.descricaomenu }}</span\r\n                  >\r\n                </div>\r\n                <i\r\n                  class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color\"\r\n                  *ngIf=\"expandMenu\"\r\n                  [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                ></i>\r\n              </a>\r\n\r\n              <!-- filhos -->\r\n              <div\r\n                class=\"list-none py-0 pl-3 pr-0 m-0 {{ !(menuSelecionado == menu.idmenu) && 'hidden'}} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n              >\r\n                <li\r\n                  *ngFor=\"\r\n                    let filho of returnMenuChild(menu.idmenu);\r\n                    let iFilho = index\r\n                  \"\r\n                >\r\n                  <a\r\n                    (mouseenter)=\"onMouseEnterChild(filho.idmenu)\"\r\n                    (mouseleave)=\"onMouseLeave()\"\r\n                    [ngClass]=\"{\r\n                      'hover-color': mouseOverFilhoIndex === filho.idmenu\r\n                    }\"\r\n                    *ngIf=\"expandMenu\"\r\n                    (click)=\"callRoute(filho.link)\"\r\n                    pRipple\r\n                    class=\"{{\r\n                      verifySelectedPage(filho.link, menu) ? 'bg-green-600' : ''\r\n                    }} menu-option flex align-items-center no-underline cursor-pointer border-round text-700 hover:bg-green-600 transition-duration-150 transition-colors p-ripple p-2\"\r\n                  >\r\n                    <i\r\n                      class=\"material-symbols-outlined icon-menu {{\r\n                        expandMenu ? 'ml-1 mr-2' : ''\r\n                      }} icon-hover-color\"\r\n                      *ngIf=\"filho.icone\"\r\n                      [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                    >\r\n                      {{ filho.icone }}\r\n                    </i>\r\n                    <span\r\n                      class=\"text-base text-blue-900 ml-4 {{\r\n                        verifySelectedPage(filho.link, menu) ? 'text-white' : ''\r\n                      }}\"\r\n                      *ngIf=\"expandMenu\"\r\n                      >{{ filho.descricaomenu }}</span\r\n                    >\r\n                  </a>\r\n                </li>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </p-sidebar>\r\n  }\r\n\r\n  <!-- Topbar -->\r\n  <div\r\n    class=\"w-auto h-screen page-content overflow-y-hidden\"\r\n    id=\"page-content\"\r\n    style=\"width: 100vw !important\"\r\n  >\r\n    <div class=\"flex flex-row align-items-center justify-content-between m-3\">\r\n\r\n      @if(!showMenu) {\r\n      <!-- Logo home -->\r\n      <div>\r\n        <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n      </div>\r\n      } \r\n      \r\n      @else {\r\n      <!-- Breadcrumbs -->\r\n      <div>\r\n        <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n          {{ breadCrumbItems[breadCrumbItems.length - 1]?.label }}\r\n        </p>\r\n        <p-breadcrumb\r\n          *ngIf=\"widthCard > 400\"\r\n          styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n          [model]=\"breadCrumbItems\"\r\n          [style]=\"{ backgroundColor: '#d4d3d3' }\"\r\n          (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n        ></p-breadcrumb>\r\n      </div>\r\n      }\r\n\r\n      <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n      <dropdown-master\r\n        *ngIf=\"showLicencas()\"\r\n        class=\"w-40rem\"\r\n        formControlName=\"idmaster\"\r\n        [formGroup]=\"formGroup\"\r\n        [masters]=\"masters\"\r\n        (onSelectionChange)=\"changeLicense($event)\"\r\n        (onSelectionValue)=\"changeLicense($event)\"\r\n      >\r\n      </dropdown-master>\r\n\r\n      <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n      <div class=\"w-auto flex flex-row align-items-center gap-2\">\r\n        <p-button\r\n          *ngIf=\"showButtonApps\"\r\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\r\n          icon=\"pi pi-th-large\"\r\n          [rounded]=\"true\"\r\n          [text]=\"true\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n        ></p-button>\r\n\r\n        <p-button\r\n          *ngIf=\"showButtonUser\"\r\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\r\n          icon=\"pi pi-user\"\r\n          [rounded]=\"true\"\r\n          [text]=\"true\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        ></p-button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Container -->\r\n    <p-card\r\n      styleClass=\"m-3 border-noround overflow-y-auto {{\r\n        !showMenu && 'sm:overflow-y-hidden'\r\n      }} card-container\"\r\n      [style]=\"{ height: heightCard - adjustHeightCard() + 'px' }\"\r\n    >\r\n      <div\r\n        class=\"{{ widthCard < 992 && 'card-container' }} w-full\"\r\n        [style]=\"{ width: widthCard + 'px' }\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </p-card>\r\n  </div>\r\n\r\n  <!-- Painel de aplicativos -->\r\n  <p-overlayPanel\r\n    #sistemasPanel\r\n    [showTransitionOptions]=\"'350ms ease-out'\"\r\n    [hideTransitionOptions]=\"'250ms ease-in'\"\r\n  >\r\n    <ng-template pTemplate=\"container\">\r\n      <p class=\"title-style mt-3\">Sistemas</p>\r\n      <div\r\n        class=\"flex flex-row flex-wrap gap-2 align-items-center justify-content-center mt-5 mb-3\"\r\n        style=\"width: 250px; height: 100%\"\r\n      >\r\n        <button\r\n          *ngFor=\"let aplicativo of apps\"\r\n          pButton\r\n          pRipple\r\n          class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n        >\r\n          {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n  </p-overlayPanel>\r\n\r\n  <!-- Painel do usu\u00E1rio -->\r\n  <p-overlayPanel\r\n    #meusDadosPanel\r\n    [showTransitionOptions]=\"'350ms ease-out'\"\r\n    [hideTransitionOptions]=\"'250ms ease-in'\"\r\n  >\r\n    <ng-template pTemplate=\"container\">\r\n      <p class=\"title-style mt-3\">\r\n        Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\r\n      </p>\r\n      <div class=\"mt-5 mb-3\"></div>\r\n\r\n      <p-button\r\n        icon=\"pi pi-lock\"\r\n        label=\"Acessar Keepass\"\r\n        (onClick)=\"accessKeePass($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n\r\n      <p-button\r\n        icon=\"pi pi-sign-out\"\r\n        label=\"Sair\"\r\n        (onClick)=\"logout($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n    </ng-template>\r\n  </p-overlayPanel>\r\n</div>\r\n", styles: [".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}::ng-deep .p-button:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}::ng-deep .p-overlaypanel .p-overlaypanel-content{padding:0}::ng-deep .hover-btn-cor-padrao.p-button:enabled:hover{background:#0c3e66;border-color:#002542}.p-button.p-button-icon-only.p-button-rounded{background:#0c3e66;border-color:#002542}::ng-deep .remove-focus:focus{border:none}::ng-deep .p-sidebar .p-sidebar-content{padding:0}::ng-deep .sidebar-header-sistema.p-sidebar .p-sidebar-header{padding-top:.5rem;padding-right:0;padding-bottom:0;padding-left:0;display:block}.btn-sistema{display:flex;align-items:center;justify-content:center;background-color:#0c3e66;font-size:20px}::ng-deep .p-sidebar .p-sidebar-header{padding:0rem!important}::ng-deep body{margin:0!important}::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron{position:relative;top:3px;color:#0c3e66!important}.page-content{background:linear-gradient(to bottom,#d4d3d3 16%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.9rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#f5f5f5;overflow:hidden}::ng-deep .page-style{overflow:auto!important}::ng-deep .card-container{overflow-x:hidden}::ng-deep .card-container::-webkit-scrollbar{width:6px}::ng-deep .card-container::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .card-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .card-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .card-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.title-style{position:relative;top:10px;margin-left:20px;font-size:25px;color:#002542;border-bottom:2px solid green;font-weight:600;display:inline}::ng-deep p-sidebar .p-sidebar-content{overflow-y:hidden}::ng-deep p-dialog .p-dialog-content{overflow-y:unset}.icon-menu{color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .padding-style{padding:15px!important}::ng-deep .menu-option{padding:15px 5px!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text{color:#183462!important;opacity:.95;font-weight:500;font-size:.8rem!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text:hover{opacity:.7}.pl-3{padding-left:0rem!important}::ng-deep svg.p-icon{width:.7rem;height:1rem}.hover-color .text-base,.hover-color .icon-hover-color{color:#fff!important}::ng-deep .p-card .p-card-body{padding:0rem!important}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:auto!important}\n"] }]
+            args: [{ selector: 'kv-layout', template: "<div class=\"flex flex-row overflow-y-hidden w- full-container\">\r\n  @if (showMenu) {\r\n  <div [style]=\"{ minWidth: expandMenu ? '300px' : '60px' }\"></div>\r\n  } @if(showMenu) {\r\n  <p-sidebar\r\n    #sidebarRef\r\n    [visible]=\"true\"\r\n    [showCloseIcon]=\"false\"\r\n    [modal]=\"false\"\r\n    [style]=\"{ width: expandMenu ? '300px' : '60px' }\"\r\n    class=\"sidebar-animation\"\r\n  >\r\n    <ng-template pTemplate=\"headless\">\r\n      <div class=\"flex flex-column mx-1\">\r\n        <div\r\n          class=\"flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2\"\r\n        >\r\n          <div\r\n            class=\"flex {{expandMenu ? 'flex-row' : 'flex-column'}} align-items-center {{\r\n              expandMenu ? 'justify-content-between' : 'justify-content-center'\r\n            }} py-3\"\r\n          >\r\n            <!-- Logo para o menu expandido -->\r\n            <img\r\n              *ngIf=\"expandMenu && logoMenuExpand\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuExpand\"\r\n              width=\"150\"\r\n              class=\"cursor-pointer\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Logo para o menu minimizado-->\r\n            <img\r\n              *ngIf=\"!expandMenu && logoMenuHide\"\r\n              alt=\"Card\"\r\n              [src]=\"logoMenuHide\"\r\n              width=\"50\"\r\n              class=\"mb-2\"\r\n              (click)=\"navigateToDefaultRoute()\"\r\n            />\r\n\r\n            <!-- Toggle menu -->\r\n            <button\r\n              *ngIf=\"showExpandMenu\"\r\n              pButton\r\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n              (click)=\"toggleMenu()\"\r\n              [pTooltip]=\"expandMenu ? 'Ocultar Menu' : 'Expandir Menu'\"\r\n              [tooltipPosition]=\"'right'\"\r\n            >\r\n              <i class=\"material-symbols-outlined\"> menu </i>\r\n            </button>\r\n          </div>\r\n\r\n          @if(showTrocaEmpresa){\r\n          <div\r\n            class=\"flex flex-row align-items-center {{\r\n              expandMenu ? 'justify-content-between' : 'justify-content-center'\r\n            }}\"\r\n          >\r\n            <div\r\n              class=\"flex flex-column cursor-pointer\"\r\n              *ngIf=\"expandMenu && selectedEmpresa\"\r\n              (click)=\"changeEmpresa($event)\"\r\n            >\r\n              <span\r\n                class=\"text-sm font-semibold mr-2\"\r\n                [pTooltip]=\"this.selectedEmpresa.razaosocial\"\r\n                [tooltipPosition]=\"'right'\"\r\n              >\r\n                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}\r\n              </span>\r\n              <span class=\"text-sm mt-1\">{{\r\n                this.selectedEmpresa.cpfcnpj | cpfCnpj\r\n              }}</span>\r\n            </div>\r\n\r\n            <button\r\n              pButton\r\n              class=\"p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu\"\r\n              (click)=\"changeEmpresa($event)\"\r\n              [pTooltip]=\"'Trocar de empresa'\"\r\n              [tooltipPosition]=\"'right'\"\r\n            >\r\n              <i class=\"material-symbols-outlined\"> sync_alt </i>\r\n            </button>\r\n          </div>\r\n          <p-divider type=\"solid\"></p-divider>\r\n          }\r\n        </div>\r\n\r\n        <div\r\n          class=\"list-none m-0  card-container {{ expandMenu ? 'mx-1' : '' }}\"\r\n          [style.max-height]=\"heightCard - 220 + 'px'\"\r\n          style=\"overflow-y: auto\"\r\n        >\r\n          <!-- menus -->\r\n          <li *ngFor=\"let menu of menus; let i = index\">\r\n            <!-- menu que n\u00E3o tem filho -->\r\n            <a\r\n              (mouseenter)=\"onMouseEnter(i)\"\r\n              (mouseleave)=\"onMouseLeave()\"\r\n              [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n              (click)=\"callRoute(menu.link)\"\r\n              *ngIf=\"\r\n                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)\r\n              \"\r\n              pRipple\r\n              [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\r\n              [tooltipPosition]=\"'right'\"\r\n              class=\"{{\r\n                verifySelectedPage(menu.link) ? 'bg-green-600' : ''\r\n              }} menu-option flex align-items-center no-underline {{\r\n                !expandMenu ? 'justify-content-center' : ''\r\n              }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\"\r\n            >\r\n              <i\r\n                class=\"material-symbols-outlined icon-menu {{\r\n                  expandMenu ? 'ml-1 mr-2' : ''\r\n                }}  icon-hover-color {{\r\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\r\n                }}\"\r\n                *ngIf=\"menu.icone\"\r\n              >\r\n                {{ menu.icone }}\r\n              </i>\r\n              <span\r\n                class=\"text-base text-blue-900 font-medium {{\r\n                  verifySelectedPage(menu.link) ? 'text-white' : ''\r\n                }}\"\r\n                *ngIf=\"expandMenu\"\r\n                >{{ menu.descricaomenu }}</span\r\n              >\r\n            </a>\r\n            <!-- menu com filho -->\r\n            <div *ngIf=\"menu.indmenupai\">\r\n              <a\r\n                (mouseenter)=\"onMouseEnter(i)\"\r\n                (mouseleave)=\"onMouseLeave()\"\r\n                [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                pRipple\r\n                pStyleClass=\"@next\"\r\n                enterClass=\"hidden\"\r\n                enterActiveClass=\"slidedown\"\r\n                leaveToClass=\"hidden\"\r\n                leaveActiveClass=\"slideup\"\r\n                class=\"menu-option flex align-items-center {{\r\n                  !expandMenu\r\n                    ? 'justify-content-center'\r\n                    : 'justify-content-between'\r\n                }} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple\"\r\n                [tooltipPosition]=\"'right'\"\r\n                [pTooltip]=\"!expandMenu ? menu.descricaomenu : ''\"\r\n                (click)=\"!expandMenu ? (expandMenu = !expandMenu) : ''\"\r\n              >\r\n                <div class=\"flex flex-row align-items-center\">\r\n                  <i\r\n                    class=\"material-symbols-outlined icon-menu {{\r\n                      expandMenu ? 'ml-1 mr-2' : ''\r\n                    }} icon-hover-color\"\r\n                    *ngIf=\"menu.icone\"\r\n                    [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                  >\r\n                    {{ menu.icone }}\r\n                  </i>\r\n                  <span\r\n                    class=\"text-base text-blue-900 font-medium\"\r\n                    *ngIf=\"expandMenu\"\r\n                    >{{ menu.descricaomenu }}</span\r\n                  >\r\n                </div>\r\n                <i\r\n                  class=\"pi pi-chevron-down text-blue-900 mr-1 icon-hover-color\"\r\n                  *ngIf=\"expandMenu\"\r\n                  [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                ></i>\r\n              </a>\r\n\r\n              <!-- filhos -->\r\n              <div\r\n                class=\"list-none py-0 pl-3 pr-0 m-0 {{ !(menuSelecionado == menu.idmenu) && 'hidden'}} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out\"\r\n              >\r\n                <li\r\n                  *ngFor=\"\r\n                    let filho of returnMenuChild(menu.idmenu);\r\n                    let iFilho = index\r\n                  \"\r\n                >\r\n                  <a\r\n                    (mouseenter)=\"onMouseEnterChild(filho.idmenu)\"\r\n                    (mouseleave)=\"onMouseLeave()\"\r\n                    [ngClass]=\"{\r\n                      'hover-color': mouseOverFilhoIndex === filho.idmenu\r\n                    }\"\r\n                    *ngIf=\"expandMenu\"\r\n                    (click)=\"callRoute(filho.link)\"\r\n                    pRipple\r\n                    class=\"{{\r\n                      verifySelectedPage(filho.link, menu) ? 'bg-green-600' : ''\r\n                    }} menu-option flex align-items-center no-underline cursor-pointer border-round text-700 hover:bg-green-600 transition-duration-150 transition-colors p-ripple p-2\"\r\n                  >\r\n                    <i\r\n                      class=\"material-symbols-outlined icon-menu {{\r\n                        expandMenu ? 'ml-1 mr-2' : ''\r\n                      }} icon-hover-color\"\r\n                      *ngIf=\"filho.icone\"\r\n                      [ngClass]=\"{ 'hover-color': mouseOverIndex === i }\"\r\n                    >\r\n                      {{ filho.icone }}\r\n                    </i>\r\n                    <span\r\n                      class=\"text-base text-blue-900 ml-4 {{\r\n                        verifySelectedPage(filho.link, menu) ? 'text-white' : ''\r\n                      }}\"\r\n                      *ngIf=\"expandMenu\"\r\n                      >{{ filho.descricaomenu }}</span\r\n                    >\r\n                  </a>\r\n                </li>\r\n              </div>\r\n            </div>\r\n          </li>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </p-sidebar>\r\n  }\r\n\r\n  <!-- Topbar -->\r\n  <div\r\n    class=\"w-auto h-screen page-content overflow-y-hidden\"\r\n    id=\"page-content\"\r\n    style=\"width: 100vw !important\"\r\n  >\r\n    <div class=\"flex flex-row align-items-center justify-content-between m-3\">\r\n\r\n      @if(!showMenu) {\r\n      <!-- Logo home -->\r\n      <div>\r\n        <img [src]=\"logoMenuExpand\" width=\"150\" />\r\n      </div>\r\n      } \r\n      \r\n      @else {\r\n      <!-- Breadcrumbs -->\r\n      <div>\r\n        <p class=\"text-xl font-semibold text-blue-900 breadcrumb-title\">\r\n          {{ breadCrumbItems[breadCrumbItems.length - 1]?.label }}\r\n        </p>\r\n        <p-breadcrumb\r\n          *ngIf=\"widthCard > 400\"\r\n          styleClass=\"border-none p-0 flex align-items-center h-2rem !important;\"\r\n          [model]=\"breadCrumbItems\"\r\n          [style]=\"{ backgroundColor: '#d4d3d3' }\"\r\n          (onItemClick)=\"callRoute($event.item.routerLink, true)\"\r\n        ></p-breadcrumb>\r\n      </div>\r\n      }\r\n\r\n      <!-- dropdown para sele\u00E7\u00E3o de empresa/licenca -->\r\n      <dropdown-master\r\n        *ngIf=\"showLicencas()\"\r\n        class=\"w-40rem\"\r\n        formControlName=\"idmaster\"\r\n        [formGroup]=\"formGroup\"\r\n        [masters]=\"masters\"\r\n        (onSelectionChange)=\"changeLicense($event)\"\r\n        (onSelectionValue)=\"changeLicense($event)\"\r\n      >\r\n      </dropdown-master>\r\n\r\n      <!-- Navega\u00E7\u00E3o de sistemas e usu\u00E1rios -->\r\n      <div class=\"w-auto flex flex-row align-items-center gap-2\">\r\n        <p-button\r\n          *ngIf=\"showButtonApps\"\r\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\r\n          icon=\"pi pi-th-large\"\r\n          [rounded]=\"true\"\r\n          [text]=\"true\"\r\n          (click)=\"sistemasPanel.toggle($event)\"\r\n          [pTooltip]=\"'Sistemas'\"\r\n          [tooltipPosition]=\"'left'\"\r\n        ></p-button>\r\n\r\n        <p-button\r\n          *ngIf=\"showButtonUser\"\r\n          styleClass=\"w-2rem h-2rem text-blue-900 hover:bg-green-600 hover:text-white\"\r\n          icon=\"pi pi-user\"\r\n          [rounded]=\"true\"\r\n          [text]=\"true\"\r\n          [pTooltip]=\"'Menu do Usu\u00E1rio'\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"meusDadosPanel.toggle($event)\"\r\n        ></p-button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Container -->\r\n    <p-card\r\n      styleClass=\"m-3 border-noround overflow-y-auto {{\r\n        !showMenu && 'sm:overflow-y-hidden'\r\n      }} card-container\"\r\n      [style]=\"{ height: heightCard - adjustHeightCard() + 'px' }\"\r\n    >\r\n      <div\r\n        class=\"{{ widthCard < 992 && 'card-container' }} w-full\"\r\n        [style]=\"{ width: widthCard + 'px' }\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </p-card>\r\n  </div>\r\n\r\n  <!-- Painel de aplicativos -->\r\n  <p-overlayPanel\r\n    #sistemasPanel\r\n    [showTransitionOptions]=\"'350ms ease-out'\"\r\n    [hideTransitionOptions]=\"'250ms ease-in'\"\r\n  >\r\n    <ng-template pTemplate=\"container\">\r\n      <p class=\"title-style mt-3\">Sistemas</p>\r\n      <div\r\n        class=\"flex flex-row flex-wrap gap-2 align-items-center justify-content-center mt-5 mb-3\"\r\n        style=\"width: 250px; height: 100%\"\r\n      >\r\n        <button\r\n          *ngFor=\"let aplicativo of apps\"\r\n          pButton\r\n          pRipple\r\n          class=\"btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem\"\r\n          [pTooltip]=\"aplicativo?.descricaoaplicativo\"\r\n          [tooltipPosition]=\"'left'\"\r\n          (click)=\"selectApp(aplicativo.idaplicativo)\"\r\n        >\r\n          {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n  </p-overlayPanel>\r\n\r\n  <!-- Painel do usu\u00E1rio -->\r\n  <p-overlayPanel\r\n    #meusDadosPanel\r\n    [showTransitionOptions]=\"'350ms ease-out'\"\r\n    [hideTransitionOptions]=\"'250ms ease-in'\"\r\n  >\r\n    <ng-template pTemplate=\"container\">\r\n      <p class=\"title-style mt-3\">\r\n        Ol\u00E1, {{ userName ? userName.split(\" \")[0] : \"Usu\u00E1rio\" }}!\r\n      </p>\r\n      <div class=\"mt-5 mb-3\"></div>\r\n\r\n      <p-button\r\n        icon=\"pi pi-lock\"\r\n        label=\"Acessar Keepass\"\r\n        (onClick)=\"accessKeePass($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n\r\n      <p-button\r\n        icon=\"pi pi-sign-out\"\r\n        label=\"Sair\"\r\n        (onClick)=\"logout($event)\"\r\n        styleClass=\"border-noround w-full text-blue-900\"\r\n        [text]=\"true\"\r\n      >\r\n      </p-button>\r\n    </ng-template>\r\n  </p-overlayPanel>\r\n</div>\r\n", styles: [".material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;display:inline-block;width:1em;height:1em;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}::ng-deep .p-button:focus{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}::ng-deep .p-overlaypanel .p-overlaypanel-content{padding:0}::ng-deep .hover-btn-cor-padrao.p-button:enabled:hover{background:#0c3e66;border-color:#002542}.p-button.p-button-icon-only.p-button-rounded{background:#0c3e66;border-color:#002542}::ng-deep .remove-focus:focus{border:none}::ng-deep .p-sidebar .p-sidebar-content{padding:0}::ng-deep .sidebar-header-sistema.p-sidebar .p-sidebar-header{padding-top:.5rem;padding-right:0;padding-bottom:0;padding-left:0;display:block}.btn-sistema{display:flex;align-items:center;justify-content:center;background-color:#0c3e66;font-size:20px}::ng-deep .p-sidebar .p-sidebar-header{padding:0rem!important}::ng-deep body{margin:0!important}::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron{position:relative;top:3px;color:#0c3e66!important}.page-content{background:linear-gradient(to bottom,#d4d3d3 16%,#fff 19%)}*{margin:0}p .item-menu{color:#0c3e66;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}span{font-size:.9rem!important}.breadcrumb-title{font-size:1rem!important;font-family:Inter var,Roboto,Arial,Helvetica,sans-serif!important}::ng-deep .home-style{background-color:#f5f5f5;overflow:hidden}::ng-deep .page-style{overflow:auto!important}::ng-deep .card-container{overflow-x:hidden}::ng-deep .card-container::-webkit-scrollbar{width:6px}::ng-deep .card-container::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .card-container::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .card-container:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .card-container::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}.title-style{position:relative;top:10px;margin-left:20px;font-size:25px;color:#002542;border-bottom:2px solid green;font-weight:600;display:inline}::ng-deep p-sidebar .p-sidebar-content{overflow-y:hidden}::ng-deep p-dialog .p-dialog-content{overflow-y:unset}.icon-menu{color:#002542;display:flex;justify-content:center;align-items:center}::ng-deep .padding-style{padding:15px!important}::ng-deep .menu-option{padding:15px 5px!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text{color:#183462!important;opacity:.95;font-weight:500;font-size:.8rem!important}::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text:hover{opacity:.7}.pl-3{padding-left:0rem!important}::ng-deep svg.p-icon{width:.7rem;height:1rem}.hover-color .text-base,.hover-color .icon-hover-color{color:#fff!important}::ng-deep .p-card .p-card-body{padding:0rem!important}::ng-deep .p-card .p-card-content{padding:0rem!important}::ng-deep .p-sidebar-left{z-index:auto!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$1.FormBuilder }, { type: i3$1.Router }], propDecorators: { apps: [{
                 type: Input
             }], breadCrumbItems: [{
@@ -4894,29 +5034,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 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 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] }); }