@sapphire-ion/framework 1.0.13 → 1.0.16

package/fesm2022/sapphire-ion-framework.mjs

@@ -573,6 +573,12 @@ class InputStringConfiguration {
     }
 }
 
+class InputCpfCnpjConfiguration {
+    constructor(type = 'CPFCNPJ') {
+        this.type = type;
+    }
+}
+
 const EnvironmentInjectionToken = new InjectionToken('Environment');
 class SapphireIonFrameworkModule {
     static forRoot(config) {
@@ -1199,6 +1205,15 @@ class TableField {
             if (TableField.dateTypes.includes(type)) {
                 this.configuration = new InputDateConfiguration();
             }
+            else if (type == InputType.CpfCnpj) {
+                this.configuration = new InputCpfCnpjConfiguration("CPFCNPJ");
+            }
+            else if (type == InputType.Cpf) {
+                this.configuration = new InputCpfCnpjConfiguration("CPF");
+            }
+            else if (type == InputType.Cnpj) {
+                this.configuration = new InputCpfCnpjConfiguration("CNPJ");
+            }
             else if (type == InputType.File) {
                 this.configuration = new InputFileConfiguration();
             }
@@ -1436,6 +1451,10 @@ class AuthService {
         if (this.isTokenValid(Token)) {
             this.currentToken = await this.JWToken();
         }
+        else {
+            this.Loggout();
+            return;
+        }
         if (TokenAdmin && this.isTokenValid(TokenAdmin)) {
             this._isAdmin = true;
         }
@@ -2434,8 +2453,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class SIonPopoverComponent {
-    constructor(viewContainerRef) {
+    constructor(viewContainerRef, ngZone) {
         this.viewContainerRef = viewContainerRef;
+        this.ngZone = ngZone;
         this.fill = 'blur';
         this.arrow = true;
         this.flip = true;
@@ -2515,13 +2535,29 @@ class SIonPopoverComponent {
         document.body.appendChild(this.popoverInstance);
         this.popoverInstance.style.setProperty('display', 'none');
     }
-    HandleClicks(event) {
-        if (this.popoverInstance &&
-            !this.popoverInstance.contains(event.target) &&
+    onClick(event) {
+        if (!this.popoverInstance) {
+            return;
+        }
+        console.log('Click detected in popover', !this.anchor.contains(event.target), this.anchor);
+        if (!this.popoverInstance.contains(event.target) &&
             !this.anchor.contains(event.target)) {
             this.dismiss();
         }
     }
+    ngOnInit() {
+        //TODO: Use Renderer2 to add event listeners for better Angular compatibility when updating to Angular 19
+        this.ngZone.runOutsideAngular(() => {
+            this.documentClickListener = (event) => {
+                // Run back inside Angular's zone when handling the event
+                this.ngZone.run(() => {
+                    this.onClick(event);
+                });
+            };
+            // Use the native DOM API directly with capture phase
+            document.addEventListener('click', this.documentClickListener, true);
+        });
+    }
     async dismiss() {
         this.onWillDismiss.emit();
         if (this.cleanupAutoUpdate) {
@@ -2538,15 +2574,18 @@ class SIonPopoverComponent {
         this.onDidDismiss.emit();
     }
     ngOnDestroy() {
+        if (this.documentClickListener) {
+            document.removeEventListener('click', this.documentClickListener, true);
+        }
         this.dismiss();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SIonPopoverComponent, selector: "sion-popover", inputs: { fill: "fill", arrow: "arrow", flip: "flip", placement: "placement", height: "height", width: "width", anchor: "anchor" }, outputs: { onWillPresent: "onWillPresent", onDidPresent: "onDidPresent", onWillDismiss: "onWillDismiss", onDidDismiss: "onDidDismiss", isVisibleChange: "isVisibleChange" }, host: { listeners: { "document:click": "HandleClicks($event)" } }, queries: [{ propertyName: "contentChildren", predicate: ["*"], descendants: true }], viewQueries: [{ propertyName: "popoverTemplate", first: true, predicate: ["popoverTemplate"], descendants: true, static: true }, { propertyName: "contentContainer", first: true, predicate: ["popoverWrapper"], descendants: true }, { propertyName: "arrowElement", first: true, predicate: ["popoverArrow"], descendants: true }], ngImport: i0, template: "<ng-template #popoverTemplate>\r\n  <div #popoverWrapper class=\"popover-wrapper translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n        'visible-anim'    : isVisible,\r\n        'invisible-anim'  : !isVisible,\r\n      }\"\r\n    [style.height]=\"height\"\r\n    [style.width]=\"width\"\r\n  >\r\n  <!-- 'solid' | 'outline' | 'blur' | 'clear' -->\r\n    @if(arrow){\r\n      <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n        [ngClass]=\"{\r\n          'bg-light'        : fill == 'solid',\r\n          'bg-transparent'  : fill == 'outline',\r\n          'backdrop-blur-md': fill == 'blur',\r\n          'visible-anim'    : isVisible,\r\n          'invisible-anim'  : !isVisible,\r\n      }\"\r\n      ></div>\r\n    }\r\n    <ng-content #content></ng-content>\r\n  </div>\r\n</ng-template>", styles: [".popover-wrapper{z-index:50;border-radius:.75rem;width:max-content;position:absolute;will-change:left,top,bottom,right,transform,opacity,filter;transition:opacity,transform,filter .2s ease-in-out;display:none}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.visible-anim{animation:visible .2s ease-in-out forwards}.invisible-anim{pointer-events:none;animation:invisible .2s ease-in-out forwards;opacity:0}@keyframes visible{0%{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}to{opacity:1!important;filter:grayscale(0);transform:scale(1)}}@keyframes invisible{0%{opacity:1;filter:grayscale(0);transform:scale(1)}to{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SIonPopoverComponent, selector: "sion-popover", inputs: { fill: "fill", arrow: "arrow", flip: "flip", placement: "placement", height: "height", width: "width", anchor: "anchor" }, outputs: { onWillPresent: "onWillPresent", onDidPresent: "onDidPresent", onWillDismiss: "onWillDismiss", onDidDismiss: "onDidDismiss", isVisibleChange: "isVisibleChange" }, queries: [{ propertyName: "contentChildren", predicate: ["*"], descendants: true }], viewQueries: [{ propertyName: "popoverTemplate", first: true, predicate: ["popoverTemplate"], descendants: true, static: true }, { propertyName: "contentContainer", first: true, predicate: ["popoverWrapper"], descendants: true }, { propertyName: "arrowElement", first: true, predicate: ["popoverArrow"], descendants: true }], ngImport: i0, template: "<ng-template #popoverTemplate>\r\n  <div #popoverWrapper class=\"popover-wrapper translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n        'visible-anim'    : isVisible,\r\n        'invisible-anim'  : !isVisible,\r\n      }\"\r\n    [style.height]=\"height\"\r\n    [style.width]=\"width\"\r\n  >\r\n  <!-- 'solid' | 'outline' | 'blur' | 'clear' -->\r\n    @if(arrow){\r\n      <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n        [ngClass]=\"{\r\n          'bg-light'        : fill == 'solid',\r\n          'bg-transparent'  : fill == 'outline',\r\n          'backdrop-blur-md': fill == 'blur',\r\n          'visible-anim'    : isVisible,\r\n          'invisible-anim'  : !isVisible,\r\n      }\"\r\n      ></div>\r\n    }\r\n    <ng-content #content></ng-content>\r\n  </div>\r\n</ng-template>", styles: [".popover-wrapper{z-index:50;border-radius:.75rem;width:max-content;position:absolute;will-change:left,top,bottom,right,transform,opacity,filter;transition:opacity,transform,filter .2s ease-in-out;display:none}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.visible-anim{animation:visible .2s ease-in-out forwards}.invisible-anim{pointer-events:none;animation:invisible .2s ease-in-out forwards;opacity:0}@keyframes visible{0%{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}to{opacity:1!important;filter:grayscale(0);transform:scale(1)}}@keyframes invisible{0%{opacity:1;filter:grayscale(0);transform:scale(1)}to{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sion-popover', template: "<ng-template #popoverTemplate>\r\n  <div #popoverWrapper class=\"popover-wrapper translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n        'visible-anim'    : isVisible,\r\n        'invisible-anim'  : !isVisible,\r\n      }\"\r\n    [style.height]=\"height\"\r\n    [style.width]=\"width\"\r\n  >\r\n  <!-- 'solid' | 'outline' | 'blur' | 'clear' -->\r\n    @if(arrow){\r\n      <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n        [ngClass]=\"{\r\n          'bg-light'        : fill == 'solid',\r\n          'bg-transparent'  : fill == 'outline',\r\n          'backdrop-blur-md': fill == 'blur',\r\n          'visible-anim'    : isVisible,\r\n          'invisible-anim'  : !isVisible,\r\n      }\"\r\n      ></div>\r\n    }\r\n    <ng-content #content></ng-content>\r\n  </div>\r\n</ng-template>", styles: [".popover-wrapper{z-index:50;border-radius:.75rem;width:max-content;position:absolute;will-change:left,top,bottom,right,transform,opacity,filter;transition:opacity,transform,filter .2s ease-in-out;display:none}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.visible-anim{animation:visible .2s ease-in-out forwards}.invisible-anim{pointer-events:none;animation:invisible .2s ease-in-out forwards;opacity:0}@keyframes visible{0%{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}to{opacity:1!important;filter:grayscale(0);transform:scale(1)}}@keyframes invisible{0%{opacity:1;filter:grayscale(0);transform:scale(1)}to{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { fill: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.NgZone }], propDecorators: { fill: [{
                 type: Input
             }], arrow: [{
                 type: Input
@@ -2582,9 +2621,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['*', { descendants: true }]
             }], isVisibleChange: [{
                 type: Output
-            }], HandleClicks: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }] } });
 const staticSides = {
     top: "bottom",
@@ -3195,11 +3231,11 @@ class InputSelectComponent extends CustomInput {
         return Array.isArray(obj);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputSelectComponent, selector: "input-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { listeners: { "document:keydown": "HandleKeyboardEvent($event)" } }, providers: [...InputProviderFactory.GetProviders(InputSelectComponent)], queries: [{ propertyName: "labelTemplate", first: true, predicate: SIonLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optionTemplate", first: true, predicate: SIonOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: SIonPlaceholderTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "inputSelectLabel", first: true, predicate: ["inputSelectLabel"], descendants: true }, { propertyName: "inputSearchBar", first: true, predicate: ["inputSearchBar"], descendants: true }, { propertyName: "selectContent", first: true, predicate: ["selectContent"], descendants: true }, { propertyName: "popover", first: true, predicate: SIonPopoverComponent, descendants: true }, { propertyName: "modal", first: true, predicate: IonModal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event); Present($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.manual-focus]=\"floatingVisible\"\r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n  [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\"  #inputSelectLabel tabindex=\"0\">\r\n    @if (!configuration().multiple && currentLabel){\r\n      @if(labelTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"labelTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n      }\r\n    }\r\n    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n      <div class=\"w-full\">\r\n        <div class=\"overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n          @for (item of currentItems; track $index) {\r\n            <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n              @if(labelTemplate){\r\n                <ng-container \r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n                </ng-container>\r\n              }\r\n              @else {\r\n                <span class=\"input-select-label\"> {{item.label}} </span>\r\n              }\r\n            \r\n              <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </div>\r\n              <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </ion-button> -->\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if(placeholderTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"placeholderTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n    <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n    <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n  </div>\r\n  @if(configuration().clearable){\r\n    <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n      <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n  } \r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>\r\n\r\n<ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n  <ng-template>\r\n    <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n<sion-popover \r\n    #popover \r\n    [width]=\"inputContainer.offsetWidth + 'px'\" \r\n    (onWillPresent)=\"OnPresent()\" \r\n    (onDidDismiss)=\"OnDismiss()\" \r\n    [anchor]=\"inputContainer\" \r\n    [placement]=\"configuration().popoverConfiguration.placement\" \r\n    [flip]=\"configuration().popoverConfiguration.flip\"\r\n  >\r\n  <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n</sion-popover>\r\n\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n  <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      @if(floatingVisible){\r\n        @for (item of lstOptions; track item.value) { \r\n            <ng-container \r\n              [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n            </ng-container>\r\n          }\r\n        }\r\n    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "isVisibleChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputSelectComponent, selector: "input-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { listeners: { "document:keydown": "HandleKeyboardEvent($event)" } }, providers: [...InputProviderFactory.GetProviders(InputSelectComponent)], queries: [{ propertyName: "labelTemplate", first: true, predicate: SIonLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optionTemplate", first: true, predicate: SIonOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: SIonPlaceholderTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "inputSelectLabel", first: true, predicate: ["inputSelectLabel"], descendants: true }, { propertyName: "inputSearchBar", first: true, predicate: ["inputSearchBar"], descendants: true }, { propertyName: "selectContent", first: true, predicate: ["selectContent"], descendants: true }, { propertyName: "popover", first: true, predicate: SIonPopoverComponent, descendants: true }, { propertyName: "modal", first: true, predicate: IonModal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event); Present($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.manual-focus]=\"floatingVisible\"\r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n  [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\"  #inputSelectLabel tabindex=\"0\">\r\n    @if (!configuration().multiple && currentLabel){\r\n      @if(labelTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"labelTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n      }\r\n    }\r\n    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n      <div class=\"w-full min-h-6 overflow-hidden relative\">\r\n        <div class=\"absolute left-0 top-0 overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n          @for (item of currentItems; track $index) {\r\n            <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n              @if(labelTemplate){\r\n                <ng-container \r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n                </ng-container>\r\n              }\r\n              @else {\r\n                <span class=\"input-select-label\"> {{item.label}} </span>\r\n              }\r\n            \r\n              <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </div>\r\n              <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </ion-button> -->\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if(placeholderTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"placeholderTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n    <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n    <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n  </div>\r\n  @if(configuration().clearable){\r\n    <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n      <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n  } \r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>\r\n\r\n<ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n  <ng-template>\r\n    <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n<sion-popover \r\n    #popover \r\n    [width]=\"inputContainer.offsetWidth + 'px'\" \r\n    (onWillPresent)=\"OnPresent()\" \r\n    (onDidDismiss)=\"OnDismiss()\" \r\n    [anchor]=\"inputContainer\" \r\n    [placement]=\"configuration().popoverConfiguration.placement\" \r\n    [flip]=\"configuration().popoverConfiguration.flip\"\r\n  >\r\n  <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n</sion-popover>\r\n\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n  <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      @if(floatingVisible){\r\n        @for (item of lstOptions; track item.value) { \r\n            <ng-container \r\n              [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n            </ng-container>\r\n          }\r\n        }\r\n    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "isVisibleChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-select', providers: [...InputProviderFactory.GetProviders(InputSelectComponent)], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event); Present($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.manual-focus]=\"floatingVisible\"\r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n  [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\"  #inputSelectLabel tabindex=\"0\">\r\n    @if (!configuration().multiple && currentLabel){\r\n      @if(labelTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"labelTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n      }\r\n    }\r\n    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n      <div class=\"w-full\">\r\n        <div class=\"overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n          @for (item of currentItems; track $index) {\r\n            <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n              @if(labelTemplate){\r\n                <ng-container \r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n                </ng-container>\r\n              }\r\n              @else {\r\n                <span class=\"input-select-label\"> {{item.label}} </span>\r\n              }\r\n            \r\n              <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </div>\r\n              <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </ion-button> -->\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if(placeholderTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"placeholderTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n    <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n    <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n  </div>\r\n  @if(configuration().clearable){\r\n    <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n      <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n  } \r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>\r\n\r\n<ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n  <ng-template>\r\n    <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n<sion-popover \r\n    #popover \r\n    [width]=\"inputContainer.offsetWidth + 'px'\" \r\n    (onWillPresent)=\"OnPresent()\" \r\n    (onDidDismiss)=\"OnDismiss()\" \r\n    [anchor]=\"inputContainer\" \r\n    [placement]=\"configuration().popoverConfiguration.placement\" \r\n    [flip]=\"configuration().popoverConfiguration.flip\"\r\n  >\r\n  <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n</sion-popover>\r\n\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n  <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      @if(floatingVisible){\r\n        @for (item of lstOptions; track item.value) { \r\n            <ng-container \r\n              [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n            </ng-container>\r\n          }\r\n        }\r\n    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
+            args: [{ selector: 'input-select', providers: [...InputProviderFactory.GetProviders(InputSelectComponent)], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event); Present($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.manual-focus]=\"floatingVisible\"\r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n  [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\"  #inputSelectLabel tabindex=\"0\">\r\n    @if (!configuration().multiple && currentLabel){\r\n      @if(labelTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"labelTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n      }\r\n    }\r\n    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n      <div class=\"w-full min-h-6 overflow-hidden relative\">\r\n        <div class=\"absolute left-0 top-0 overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n          @for (item of currentItems; track $index) {\r\n            <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n              @if(labelTemplate){\r\n                <ng-container \r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n                </ng-container>\r\n              }\r\n              @else {\r\n                <span class=\"input-select-label\"> {{item.label}} </span>\r\n              }\r\n            \r\n              <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </div>\r\n              <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </ion-button> -->\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if(placeholderTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"placeholderTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n    <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n    <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n  </div>\r\n  @if(configuration().clearable){\r\n    <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n      <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n  } \r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>\r\n\r\n<ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n  <ng-template>\r\n    <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n<sion-popover \r\n    #popover \r\n    [width]=\"inputContainer.offsetWidth + 'px'\" \r\n    (onWillPresent)=\"OnPresent()\" \r\n    (onDidDismiss)=\"OnDismiss()\" \r\n    [anchor]=\"inputContainer\" \r\n    [placement]=\"configuration().popoverConfiguration.placement\" \r\n    [flip]=\"configuration().popoverConfiguration.flip\"\r\n  >\r\n  <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n</sion-popover>\r\n\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n  <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      @if(floatingVisible){\r\n        @for (item of lstOptions; track item.value) { \r\n            <ng-container \r\n              [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n            </ng-container>\r\n          }\r\n        }\r\n    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { labelTemplate: [{
                 type: ContentChild,
                 args: [SIonLabelTemplateDirective, { read: TemplateRef }]
@@ -4515,12 +4551,6 @@ function RGBToHex(rgb, alpha = 1) {
 const HEXDigitRegex = /[0-9a-f]+/i;
 const HEXMask = ['#', HEXDigitRegex, HEXDigitRegex, HEXDigitRegex, HEXDigitRegex, HEXDigitRegex, HEXDigitRegex, HEXDigitRegex];
 
-class InputCpfCnpjConfiguration {
-    constructor(type = 'CPFCNPJ') {
-        this.type = type;
-    }
-}
-
 class InputCpfCnpjComponent extends CustomInput {
     focus(event) {
         if (this.input && event.target == this.inputContainer.nativeElement) {
@@ -10354,7 +10384,7 @@ class DefaultDrawerEndComponent {
     }
     Loggout() { this.authService.Loggout(); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultDrawerEndComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DefaultDrawerEndComponent, isStandalone: true, selector: "default-drawer-end", inputs: { colapsed: "colapsed" }, ngImport: i0, template: "<div class=\"mt-1 w-full default-transition flex p-3\" [ngClass]=\"{'!w-16': colapsed}\">\r\n  <div class=\"w-10 shrink-0 aspect-square rounded-2xl flex items-center justify-center default-transition\" style=\"background-color: var(--ion-color-primary);\">\r\n    <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n  </div>\r\n  <div class=\"grow min-w-10 p-2 justify-center items-center whitespace-nowrap text-ellipsis overflow-hidden block default-transition\" [ngClass]=\"{'opacity-0 w-0': colapsed}\">\r\n    <span>{{Token ? Token.Nome : ''}}</span>\r\n  </div>\r\n\r\n  <ion-button (click)=\"Loggout()\" class=\"size-10 shrink-0\" size=\"small\" color=\"danger\">\r\n    <ion-icon slot=\"icon-only\" name=\"exit-outline\"></ion-icon> \r\n  </ion-button>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DefaultDrawerEndComponent, isStandalone: true, selector: "default-drawer-end", inputs: { colapsed: "colapsed" }, ngImport: i0, template: "<div class=\"w-full default-transition flex\" [ngClass]=\"{'!w-16': colapsed}\">\r\n  <div class=\"w-10 shrink-0 aspect-square rounded-2xl flex items-center justify-center default-transition\" style=\"background-color: var(--ion-color-primary);\">\r\n    <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n  </div>\r\n  <div class=\"grow min-w-10 p-2 justify-center items-center whitespace-nowrap text-ellipsis overflow-hidden block default-transition\" [ngClass]=\"{'opacity-0 w-0': colapsed}\">\r\n    <span>{{Token ? Token.Nome : ''}}</span>\r\n  </div>\r\n\r\n  <ion-button (click)=\"Loggout()\" class=\"size-10 shrink-0\" size=\"small\" color=\"danger\">\r\n    <ion-icon slot=\"icon-only\" name=\"exit-outline\"></ion-icon> \r\n  </ion-button>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultDrawerEndComponent, decorators: [{
             type: Component,
@@ -10362,7 +10392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CommonModule,
                         IonicModule,
                         RouterLinkWithHref,
-                    ], selector: 'default-drawer-end', template: "<div class=\"mt-1 w-full default-transition flex p-3\" [ngClass]=\"{'!w-16': colapsed}\">\r\n  <div class=\"w-10 shrink-0 aspect-square rounded-2xl flex items-center justify-center default-transition\" style=\"background-color: var(--ion-color-primary);\">\r\n    <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n  </div>\r\n  <div class=\"grow min-w-10 p-2 justify-center items-center whitespace-nowrap text-ellipsis overflow-hidden block default-transition\" [ngClass]=\"{'opacity-0 w-0': colapsed}\">\r\n    <span>{{Token ? Token.Nome : ''}}</span>\r\n  </div>\r\n\r\n  <ion-button (click)=\"Loggout()\" class=\"size-10 shrink-0\" size=\"small\" color=\"danger\">\r\n    <ion-icon slot=\"icon-only\" name=\"exit-outline\"></ion-icon> \r\n  </ion-button>\r\n</div>" }]
+                    ], selector: 'default-drawer-end', template: "<div class=\"w-full default-transition flex\" [ngClass]=\"{'!w-16': colapsed}\">\r\n  <div class=\"w-10 shrink-0 aspect-square rounded-2xl flex items-center justify-center default-transition\" style=\"background-color: var(--ion-color-primary);\">\r\n    <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n  </div>\r\n  <div class=\"grow min-w-10 p-2 justify-center items-center whitespace-nowrap text-ellipsis overflow-hidden block default-transition\" [ngClass]=\"{'opacity-0 w-0': colapsed}\">\r\n    <span>{{Token ? Token.Nome : ''}}</span>\r\n  </div>\r\n\r\n  <ion-button (click)=\"Loggout()\" class=\"size-10 shrink-0\" size=\"small\" color=\"danger\">\r\n    <ion-icon slot=\"icon-only\" name=\"exit-outline\"></ion-icon> \r\n  </ion-button>\r\n</div>" }]
         }], ctorParameters: () => [{ type: AuthService }], propDecorators: { colapsed: [{
                 type: Input
             }] } });
@@ -10393,7 +10423,12 @@ class DrawerGroupComponent {
         };
     }
     ngOnInit() { }
-    HandleNav(item) {
+    HandleNav(item, event) {
+        if (event.ctrlKey || event.metaKey) {
+            window.open(window.origin + '/' + item.route, '_blank');
+            event.preventDefault();
+            return;
+        }
         this.SetTitle(item);
         this.navController.navigateRoot('/' + item.route);
     }
@@ -10401,11 +10436,11 @@ class DrawerGroupComponent {
         this.genericService.SetTitle(item.title);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerGroupComponent, deps: [{ token: i2$2.Router }, { token: i3.NavController }, { token: GenericService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DrawerGroupComponent, isStandalone: true, selector: "drawer-group", inputs: { MenuGroup: "MenuGroup", colapsed: "colapsed", useTranslation: "useTranslation" }, viewQueries: [{ propertyName: "lstIonAcordionGroup", predicate: IonAccordionGroup, descendants: true }], ngImport: i0, template: "<div class=\"w-full text-center mb-2\">\r\n  <ion-item class=\"bg-inactive bg-active\" lines=\"none\" style=\"--border-radius: 1rem\">\r\n    <ion-label class=\"text-center\">\r\n      <ion-icon class=\"text-2xl\" [name]=\"MenuGroup.icon\"></ion-icon> <br>\r\n      <ion-text class=\"text-lg\">\r\n        {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} \r\n      </ion-text>\r\n    </ion-label>\r\n  </ion-item>\r\n</div>\r\n\r\n<div class=\"grid gap-2 w-full overflow-hidden\">\r\n  @for (mGroup of MenuGroup.lstMenu; track $index) {\r\n    <!-- Menu -->\r\n    @if(mGroup.type == \"Menu\"){\r\n      <ion-item \r\n        class=\"bg-inactive\" lines=\"none\" \r\n        (click)=\"HandleNav(mGroup)\"\r\n        [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mGroup.route, false)}\">\r\n        <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n        <ion-label class=\"ion-text-nowrap\">\r\n          {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          \r\n        </ion-label>\r\n      </ion-item>\r\n    } \r\n    @else if (mGroup.type == \"MenuGroup\") {\r\n      <!-- MenuGroup -->\r\n      <div class=\"w-full overflow-hidden\">\r\n        <ion-accordion-group class=\"ion-text-nowrap w-full\">\r\n          <ion-accordion class=\"bg-transparent\" [value]=\"mGroup\">\r\n            <ion-item slot=\"header\" color=\"light\" class=\"ion-text-nowrap bg-inactive\" style=\"--ion-color-base: var(--background) !important\">\r\n              <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n              <ion-label>\r\n                {{useTranslation ? (TranslationModule.PermissaoGrupo + mGroup.id | translate) : mGroup.title}}\r\n              </ion-label>\r\n            </ion-item>\r\n            <div slot=\"content\">\r\n              <div class=\"pl-8\">\r\n                <div class=\"w-full border-l-2 border-solid rounded-bl-2xl grid gap-2 pl-2 py-2\" style=\"border-color: color-mix(in srgb, var(--ion-color-primary) 30%, transparent 70%)\">\r\n                  @for (mMenu of mGroup.lstMenu; track $index) {\r\n                    @if (mMenu.type == \"Menu\") {\r\n                      <ion-item \r\n                        class=\"bg-inactive\" lines=\"none\" \r\n                        (click)=\"HandleNav(mMenu)\"\r\n                        [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mMenu.route, false)}\">\r\n                        <ion-icon slot=\"start\" [name]=\"mMenu.icon\"></ion-icon>\r\n                        <ion-label class=\"ion-text-nowrap\">\r\n                          {{useTranslation ? (TranslationModule.Permissao + mMenu.id | translate) : mMenu.title}}\r\n                        </ion-label>\r\n                      </ion-item>\r\n                    }\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ion-accordion>\r\n        </ion-accordion-group>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".bg-active{--background: color-mix(in srgb, var(--ion-color-secondary) 70%, transparent 30%) !important}.bg-inactive{cursor:pointer;--border-radius: 1rem;--background: color-mix(in srgb, var(--ion-color-light-shade) 50%, transparent 50%)}.bg-inactive::part(native){transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bg-inactive:hover{--background: color-mix(in srgb, var(--ion-color-light-shade) 70%, transparent 30%)}@media (prefers-color-scheme: dark){.bg-inactive{--background: color-mix(in srgb, var(--ion-color-light-tint) 70%, transparent 30%)}.bg-inactive:hover{--background: var(--ion-color-light-tint)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: i3.IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DrawerGroupComponent, isStandalone: true, selector: "drawer-group", inputs: { MenuGroup: "MenuGroup", colapsed: "colapsed", useTranslation: "useTranslation" }, viewQueries: [{ propertyName: "lstIonAcordionGroup", predicate: IonAccordionGroup, descendants: true }], ngImport: i0, template: "<div class=\"size-full flex flex-col  verflow-hidden\">\r\n  <div class=\"w-full text-center\">\r\n    <!-- <ion-item class=\"bg-inactive bg-active\" lines=\"none\" style=\"--border-radius: 1rem\">\r\n      <ion-label class=\"text-center\">\r\n        <ion-icon class=\"text-2xl\" [name]=\"MenuGroup.icon\"></ion-icon> <br>\r\n        <ion-text class=\"text-lg\">\r\n          {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} \r\n        </ion-text>\r\n      </ion-label>\r\n    </ion-item> -->\r\n    <div class=\"gradient-background header flex flex-col gap-1 p-2 text-center items-center justify-center rounded-xl\">\r\n      <ion-icon class=\"text-2xl\" [name]=\"MenuGroup.icon\"></ion-icon>\r\n      <ion-text class=\"text-dark\">\r\n        {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} \r\n      </ion-text>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex flex-col gap-2 w-full pt-2 mask-y overflow-y-auto\">\r\n    @for (mGroup of MenuGroup.lstMenu; track $index) {\r\n      <!-- Menu -->\r\n      @if(mGroup.type == \"Menu\"){\r\n        <div (click)=\"HandleNav(mGroup, $event)\" \r\n          class=\"bg-inactive gradient-background menu\"\r\n          [routerLink]=\"[mGroup.route]\"\r\n          [class.bg-active]=\"router.isActive('/' + mGroup.route, false)\"\r\n        >\r\n          <div class=\"content\">\r\n            <ion-icon class=\"shrink-0\" [name]=\"mGroup.icon\"></ion-icon>\r\n            <ion-label class=\"shrink\">\r\n              {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          \r\n            </ion-label>\r\n          </div>\r\n        </div>\r\n        <!-- <ion-item \r\n          class=\"bg-inactive shrink-0\" lines=\"none\" \r\n          (click)=\"HandleNav(mGroup)\"\r\n          [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mGroup.route, false)}\">\r\n          <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n          <ion-label class=\"ion-text-nowrap\">\r\n            {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          \r\n          </ion-label>\r\n        </ion-item> -->\r\n      } \r\n      @else if (mGroup.type == \"MenuGroup\") {\r\n        <!-- MenuGroup -->\r\n        <!-- <div class=\"w-full overflow-hidden shrink-0\">\r\n          <ion-accordion-group class=\"ion-text-nowrap w-full\">\r\n            <ion-accordion class=\"bg-transparent\" [value]=\"mGroup\">\r\n              <ion-item slot=\"header\" color=\"light\" class=\"ion-text-nowrap bg-inactive\" style=\"--ion-color-base: var(--background) !important\">\r\n                <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n                <ion-label>\r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + mGroup.id | translate) : mGroup.title}}\r\n                </ion-label>\r\n              </ion-item>\r\n              <div slot=\"content\">\r\n                <div class=\"pl-8\">\r\n                  <div class=\"w-full border-l-2 border-solid rounded-bl-2xl grid gap-2 pl-2 py-2\" style=\"border-color: color-mix(in srgb, var(--ion-color-primary) 30%, transparent 70%)\">\r\n                    @for (mMenu of mGroup.lstMenu; track $index) {\r\n                      @if (mMenu.type == \"Menu\") {\r\n                        <ion-item \r\n                          class=\"bg-inactive\" lines=\"none\" \r\n                          (click)=\"HandleNav(mMenu)\"\r\n                          [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mMenu.route, false)}\">\r\n                          <ion-icon slot=\"start\" [name]=\"mMenu.icon\"></ion-icon>\r\n                          <ion-label class=\"ion-text-nowrap\">\r\n                            {{useTranslation ? (TranslationModule.Permissao + mMenu.id | translate) : mMenu.title}}\r\n                          </ion-label>\r\n                        </ion-item>\r\n                      }\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ion-accordion>\r\n          </ion-accordion-group>\r\n        </div> -->\r\n      }\r\n    }\r\n  </div>\r\n</div>", styles: [".menu{display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:flex-start;overflow:hidden;border-radius:.75rem;padding:.375rem;transition:--color-primary,--step-1-opacity,--step-2-opacity .2s ease-in-out;--inset: var(--color-primary) 0px 1.75px 1px 0px inset;box-shadow:var(--inset)}.menu .content{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.menu.bg-active:after{content:\"\";position:absolute;top:50%;right:0;width:.375rem;height:75%;transform:translateY(-50%);border-radius:inherit;background-color:color-mix(in srgb,var(--ion-color-primary) 70%,transparent);opacity:1!important;filter:drop-shadow(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0px 0px 3px)}.menu.bg-active:before{content:\"\";position:absolute;top:50%;right:-2.3rem;width:5rem;height:7rem;transform:translateY(-50%);border-radius:inherit;opacity:.5!important;background:radial-gradient(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0%,transparent 66%)}.menu.bg-inactive{--color-primary: var(--ion-color-step-250);--step-1-opacity: .5;--step-2-opacity: .4;--step-3-opacity: .8;position:relative}.menu.bg-inactive:after{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.menu.bg-inactive:before{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.header{--color-primary: var(--ion-color-primary) !important;--step-1-opacity: .7 !important;--step-2-opacity: .3 !important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: RouterLinkWithHref, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerGroupComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, IonicModule, NgVarDirective, TranslateModule], selector: 'drawer-group', template: "<div class=\"w-full text-center mb-2\">\r\n  <ion-item class=\"bg-inactive bg-active\" lines=\"none\" style=\"--border-radius: 1rem\">\r\n    <ion-label class=\"text-center\">\r\n      <ion-icon class=\"text-2xl\" [name]=\"MenuGroup.icon\"></ion-icon> <br>\r\n      <ion-text class=\"text-lg\">\r\n        {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} \r\n      </ion-text>\r\n    </ion-label>\r\n  </ion-item>\r\n</div>\r\n\r\n<div class=\"grid gap-2 w-full overflow-hidden\">\r\n  @for (mGroup of MenuGroup.lstMenu; track $index) {\r\n    <!-- Menu -->\r\n    @if(mGroup.type == \"Menu\"){\r\n      <ion-item \r\n        class=\"bg-inactive\" lines=\"none\" \r\n        (click)=\"HandleNav(mGroup)\"\r\n        [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mGroup.route, false)}\">\r\n        <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n        <ion-label class=\"ion-text-nowrap\">\r\n          {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          \r\n        </ion-label>\r\n      </ion-item>\r\n    } \r\n    @else if (mGroup.type == \"MenuGroup\") {\r\n      <!-- MenuGroup -->\r\n      <div class=\"w-full overflow-hidden\">\r\n        <ion-accordion-group class=\"ion-text-nowrap w-full\">\r\n          <ion-accordion class=\"bg-transparent\" [value]=\"mGroup\">\r\n            <ion-item slot=\"header\" color=\"light\" class=\"ion-text-nowrap bg-inactive\" style=\"--ion-color-base: var(--background) !important\">\r\n              <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n              <ion-label>\r\n                {{useTranslation ? (TranslationModule.PermissaoGrupo + mGroup.id | translate) : mGroup.title}}\r\n              </ion-label>\r\n            </ion-item>\r\n            <div slot=\"content\">\r\n              <div class=\"pl-8\">\r\n                <div class=\"w-full border-l-2 border-solid rounded-bl-2xl grid gap-2 pl-2 py-2\" style=\"border-color: color-mix(in srgb, var(--ion-color-primary) 30%, transparent 70%)\">\r\n                  @for (mMenu of mGroup.lstMenu; track $index) {\r\n                    @if (mMenu.type == \"Menu\") {\r\n                      <ion-item \r\n                        class=\"bg-inactive\" lines=\"none\" \r\n                        (click)=\"HandleNav(mMenu)\"\r\n                        [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mMenu.route, false)}\">\r\n                        <ion-icon slot=\"start\" [name]=\"mMenu.icon\"></ion-icon>\r\n                        <ion-label class=\"ion-text-nowrap\">\r\n                          {{useTranslation ? (TranslationModule.Permissao + mMenu.id | translate) : mMenu.title}}\r\n                        </ion-label>\r\n                      </ion-item>\r\n                    }\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ion-accordion>\r\n        </ion-accordion-group>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".bg-active{--background: color-mix(in srgb, var(--ion-color-secondary) 70%, transparent 30%) !important}.bg-inactive{cursor:pointer;--border-radius: 1rem;--background: color-mix(in srgb, var(--ion-color-light-shade) 50%, transparent 50%)}.bg-inactive::part(native){transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bg-inactive:hover{--background: color-mix(in srgb, var(--ion-color-light-shade) 70%, transparent 30%)}@media (prefers-color-scheme: dark){.bg-inactive{--background: color-mix(in srgb, var(--ion-color-light-tint) 70%, transparent 30%)}.bg-inactive:hover{--background: var(--ion-color-light-tint)}}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, IonicModule, RouterLinkWithHref, TranslateModule], selector: 'drawer-group', template: "<div class=\"size-full flex flex-col  verflow-hidden\">\r\n  <div class=\"w-full text-center\">\r\n    <!-- <ion-item class=\"bg-inactive bg-active\" lines=\"none\" style=\"--border-radius: 1rem\">\r\n      <ion-label class=\"text-center\">\r\n        <ion-icon class=\"text-2xl\" [name]=\"MenuGroup.icon\"></ion-icon> <br>\r\n        <ion-text class=\"text-lg\">\r\n          {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} \r\n        </ion-text>\r\n      </ion-label>\r\n    </ion-item> -->\r\n    <div class=\"gradient-background header flex flex-col gap-1 p-2 text-center items-center justify-center rounded-xl\">\r\n      <ion-icon class=\"text-2xl\" [name]=\"MenuGroup.icon\"></ion-icon>\r\n      <ion-text class=\"text-dark\">\r\n        {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} \r\n      </ion-text>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex flex-col gap-2 w-full pt-2 mask-y overflow-y-auto\">\r\n    @for (mGroup of MenuGroup.lstMenu; track $index) {\r\n      <!-- Menu -->\r\n      @if(mGroup.type == \"Menu\"){\r\n        <div (click)=\"HandleNav(mGroup, $event)\" \r\n          class=\"bg-inactive gradient-background menu\"\r\n          [routerLink]=\"[mGroup.route]\"\r\n          [class.bg-active]=\"router.isActive('/' + mGroup.route, false)\"\r\n        >\r\n          <div class=\"content\">\r\n            <ion-icon class=\"shrink-0\" [name]=\"mGroup.icon\"></ion-icon>\r\n            <ion-label class=\"shrink\">\r\n              {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          \r\n            </ion-label>\r\n          </div>\r\n        </div>\r\n        <!-- <ion-item \r\n          class=\"bg-inactive shrink-0\" lines=\"none\" \r\n          (click)=\"HandleNav(mGroup)\"\r\n          [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mGroup.route, false)}\">\r\n          <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n          <ion-label class=\"ion-text-nowrap\">\r\n            {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          \r\n          </ion-label>\r\n        </ion-item> -->\r\n      } \r\n      @else if (mGroup.type == \"MenuGroup\") {\r\n        <!-- MenuGroup -->\r\n        <!-- <div class=\"w-full overflow-hidden shrink-0\">\r\n          <ion-accordion-group class=\"ion-text-nowrap w-full\">\r\n            <ion-accordion class=\"bg-transparent\" [value]=\"mGroup\">\r\n              <ion-item slot=\"header\" color=\"light\" class=\"ion-text-nowrap bg-inactive\" style=\"--ion-color-base: var(--background) !important\">\r\n                <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n                <ion-label>\r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + mGroup.id | translate) : mGroup.title}}\r\n                </ion-label>\r\n              </ion-item>\r\n              <div slot=\"content\">\r\n                <div class=\"pl-8\">\r\n                  <div class=\"w-full border-l-2 border-solid rounded-bl-2xl grid gap-2 pl-2 py-2\" style=\"border-color: color-mix(in srgb, var(--ion-color-primary) 30%, transparent 70%)\">\r\n                    @for (mMenu of mGroup.lstMenu; track $index) {\r\n                      @if (mMenu.type == \"Menu\") {\r\n                        <ion-item \r\n                          class=\"bg-inactive\" lines=\"none\" \r\n                          (click)=\"HandleNav(mMenu)\"\r\n                          [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mMenu.route, false)}\">\r\n                          <ion-icon slot=\"start\" [name]=\"mMenu.icon\"></ion-icon>\r\n                          <ion-label class=\"ion-text-nowrap\">\r\n                            {{useTranslation ? (TranslationModule.Permissao + mMenu.id | translate) : mMenu.title}}\r\n                          </ion-label>\r\n                        </ion-item>\r\n                      }\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ion-accordion>\r\n          </ion-accordion-group>\r\n        </div> -->\r\n      }\r\n    }\r\n  </div>\r\n</div>", styles: [".menu{display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:flex-start;overflow:hidden;border-radius:.75rem;padding:.375rem;transition:--color-primary,--step-1-opacity,--step-2-opacity .2s ease-in-out;--inset: var(--color-primary) 0px 1.75px 1px 0px inset;box-shadow:var(--inset)}.menu .content{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.menu.bg-active:after{content:\"\";position:absolute;top:50%;right:0;width:.375rem;height:75%;transform:translateY(-50%);border-radius:inherit;background-color:color-mix(in srgb,var(--ion-color-primary) 70%,transparent);opacity:1!important;filter:drop-shadow(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0px 0px 3px)}.menu.bg-active:before{content:\"\";position:absolute;top:50%;right:-2.3rem;width:5rem;height:7rem;transform:translateY(-50%);border-radius:inherit;opacity:.5!important;background:radial-gradient(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0%,transparent 66%)}.menu.bg-inactive{--color-primary: var(--ion-color-step-250);--step-1-opacity: .5;--step-2-opacity: .4;--step-3-opacity: .8;position:relative}.menu.bg-inactive:after{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.menu.bg-inactive:before{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.header{--color-primary: var(--ion-color-primary) !important;--step-1-opacity: .7 !important;--step-2-opacity: .3 !important}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.Router }, { type: i3.NavController }, { type: GenericService }], propDecorators: { MenuGroup: [{
                 type: Input
             }], colapsed: [{
@@ -10418,8 +10453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class DrawerComponent {
-    constructor(genericService) {
-        this.genericService = genericService;
+    constructor() {
         this.TranslationModule = {
             Permissao: 'Entities.Permissao.',
             PermissaoGrupo: 'Entities.PermissaoGrupo.'
@@ -10461,8 +10495,8 @@ class DrawerComponent {
             this.colapsedChange.emit(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerComponent, deps: [{ token: GenericService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DrawerComponent, isStandalone: true, selector: "drawer", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, lstMenu: { classPropertyName: "lstMenu", publicName: "lstMenu", isSignal: true, isRequired: false, transformFunction: null }, colapsed: { classPropertyName: "colapsed", publicName: "colapsed", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, useTranslation: { classPropertyName: "useTranslation", publicName: "useTranslation", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { colapsedChange: "colapsedChange" }, ngImport: i0, template: "<div class=\"absolute left-0 top-0 h-full w-[19rem] flex flex-col bg-light\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <div class=\"w-full px-2 h-14 pt-2 flex justify-between items-center text-3xl text-center\">\r\n    <ion-button id=\"drawer-button\" class=\"shrink-0 portrait:hidden aspect-square h-12 z-10 default-transition m-0\" size=\"small\" fill=\"outline\" color=\"dark\" style=\"--border-radius: 999rem; --border-width: 0;\" (click)=\"ToggleCollapsed()\"> \r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n    <div class=\"size-full\">\r\n      @if (!ref.children.length) {\r\n        <ion-text class=\"size-full flex items-center justify-center default-transition z-0\" [ngClass]=\"{'opacity-0 -translate-x-1/2': colapsed }\"> \r\n          {{title}}\r\n        </ion-text>\r\n      }\r\n      <div #ref class=\"size-full flex items-center justify-center\">\r\n        <ng-content select=\"[slot=logo]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"menu-conteiner\" class=\"mask-y flex flex-col relative\">\r\n    <loading [type]=\"3\" [loading]=\"loading\" text=\"\"></loading>\r\n    <div class=\"size-full shrink flex\">\r\n      <div class=\"h-full w-16 p-2 shrink-0\">\r\n        <div class=\"grid gap-2\">\r\n          @for (item of lstMenu(); track $index) {\r\n            <ion-item \r\n              id=\"group-menu\" [title]=\"item.title\" class=\"bg-inactive relative overflow-visible\" lines=\"none\" style=\"--padding-start: 0;\"\r\n              (click)=\"CurrentGroupActive = item\" \r\n              [ngClass]=\"{'bg-active': CurrentGroupActive == item}\"\r\n            >\r\n              <div id=\"tooltip\" class=\"opacity-0 !pointer-events-none -translate-x-4 absolute top-0 bottom-0 default-transition left-14 px-2 my-auto text-nowrap h-8 bg-[var(--ion-color-secondary)] -z-30 rounded-xl flex items-center justify-center\">\r\n                <div class=\"absolute -left-1 top-0 rounded bottom-0 my-auto rotate-45 h-4 aspect-square bg-[var(--ion-color-secondary)]\"></div>\r\n                <ion-icon class=\"z-50 mr-2\" [name]=\"item.icon\"></ion-icon>\r\n                <ion-text class=\"z-50\"> \r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n                </ion-text>\r\n              </div>\r\n              <div class=\"absolute top-0 size-full flex items-center justify-center overflow-visible\">\r\n                <ion-icon class=\"text-2xl\" [name]=\"item.icon\"></ion-icon>\r\n              </div>\r\n            </ion-item>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"h-full w-full border-dashed border-l relative\" style=\"border-color: color-mix(in srgb, var(--ion-color-dark) 20%, transparent 80%);\">\r\n        @for (mGroup of lstMenu(); track $index) {\r\n          <div class=\"absolute top-0 left-0 px-2 py-2 size-full default-transition opacity-0 translate-x-full z-0 mask-y overflow-y-auto\" [ngClass]=\"{'opacity-100 !translate-x-0': CurrentGroupActive == mGroup}\">\r\n            <drawer-group [MenuGroup]=\"mGroup\" [useTranslation]=\"useTranslation\" [colapsed]=\"colapsed\"></drawer-group>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div> \r\n\r\n    <div class=\"shrink-0 w-full\">\r\n      <ng-content select=\"[slot=drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#drawer-button{border-radius:9999px}#drawer-button:hover{background-color:color-mix(in srgb,var(--ion-color-dark-tint) 50%,transparent 50%)}#drawer-button:hover ion-icon{color:var(--ion-color-light)}#menu-conteiner{width:100%;height:100%;overflow-y:auto;overflow-x:hidden}#group-menu{--min-height: 3rem;--min-width: 3rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#group-menu:hover #tooltip{width:fit-content!important;--tw-translate-x: 0px !important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important;opacity:1!important}.bg-active{--background: color-mix(in srgb, var(--ion-color-secondary) 70%, transparent 30%) !important}.bg-inactive{cursor:pointer;--border-radius: 1rem;--background: color-mix(in srgb, var(--ion-color-light-shade) 50%, transparent 50%) }.bg-inactive::part(native){transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bg-inactive:hover{--background: color-mix(in srgb, var(--ion-color-light-shade) 70%, transparent 30%) }@media (prefers-color-scheme: dark){.bg-inactive{--background: color-mix(in srgb, var(--ion-color-light-tint) 70%, transparent 30%)}.bg-inactive:hover{--background: var(--ion-color-light-tint)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: LoadingComponent, selector: "loading", inputs: ["text", "type", "loading"] }, { kind: "component", type: DrawerGroupComponent, selector: "drawer-group", inputs: ["MenuGroup", "colapsed", "useTranslation"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DrawerComponent, isStandalone: true, selector: "drawer", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, lstMenu: { classPropertyName: "lstMenu", publicName: "lstMenu", isSignal: true, isRequired: false, transformFunction: null }, colapsed: { classPropertyName: "colapsed", publicName: "colapsed", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, useTranslation: { classPropertyName: "useTranslation", publicName: "useTranslation", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { colapsedChange: "colapsedChange" }, ngImport: i0, template: "<!-- <div class=\"absolute left-0 top-0 h-full w-[19rem] flex flex-col bg-light\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <div class=\"w-full px-2 h-14 pt-2 flex justify-between items-center text-3xl text-center\">\r\n    <ion-button id=\"drawer-button\" class=\"shrink-0 portrait:hidden aspect-square h-12 z-10 default-transition m-0\" size=\"small\" fill=\"outline\" color=\"dark\" style=\"--border-radius: 999rem; --border-width: 0;\" (click)=\"ToggleCollapsed()\"> \r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n    <div class=\"size-full\">\r\n      @if (!ref.children.length) {\r\n        <ion-text class=\"size-full flex items-center justify-center default-transition z-0\" [ngClass]=\"{'opacity-0 -translate-x-1/2': colapsed }\"> \r\n          {{title}}\r\n        </ion-text>\r\n      }\r\n      <div #ref class=\"size-full flex items-center justify-center\">\r\n        <ng-content select=\"[slot=logo]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"menu-conteiner\" class=\"mask-y flex flex-col relative\">\r\n    <loading [type]=\"3\" [loading]=\"loading\" text=\"\"></loading>\r\n    <div class=\"size-full shrink flex\">\r\n      <div class=\"h-full w-16 p-2 shrink-0\">\r\n        <div class=\"grid gap-2\">\r\n          @for (item of lstMenu(); track $index) {\r\n            <ion-item \r\n              id=\"group-menu\" [title]=\"item.title\" class=\"bg-inactive relative overflow-visible\" lines=\"none\" style=\"--padding-start: 0;\"\r\n              (click)=\"CurrentGroupActive = item\" \r\n              [ngClass]=\"{'bg-active': CurrentGroupActive == item}\"\r\n            >\r\n              <div id=\"tooltip\" class=\"opacity-0 !pointer-events-none -translate-x-4 absolute top-0 bottom-0 default-transition left-14 px-2 my-auto text-nowrap h-8 bg-[var(--ion-color-secondary)] -z-30 rounded-xl flex items-center justify-center\">\r\n                <div class=\"absolute -left-1 top-0 rounded bottom-0 my-auto rotate-45 h-4 aspect-square bg-[var(--ion-color-secondary)]\"></div>\r\n                <ion-icon class=\"z-50 mr-2\" [name]=\"item.icon\"></ion-icon>\r\n                <ion-text class=\"z-50\"> \r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n                </ion-text>\r\n              </div>\r\n              <div class=\"absolute top-0 size-full flex items-center justify-center overflow-visible\">\r\n                <ion-icon class=\"text-2xl\" [name]=\"item.icon\"></ion-icon>\r\n              </div>\r\n            </ion-item>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"h-full w-full border-dashed border-l relative\" style=\"border-color: color-mix(in srgb, var(--ion-color-dark) 20%, transparent 80%);\">\r\n        @for (mGroup of lstMenu(); track $index) {\r\n          <div class=\"absolute top-0 left-0 px-2 py-2 size-full default-transition opacity-0 translate-x-full z-0 mask-y overflow-y-auto\" [ngClass]=\"{'opacity-100 !translate-x-0': CurrentGroupActive == mGroup}\">\r\n            <drawer-group [MenuGroup]=\"mGroup\" [useTranslation]=\"useTranslation\" [colapsed]=\"colapsed\"></drawer-group>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div> \r\n\r\n    <div class=\"shrink-0 w-full\">\r\n      <ng-content select=\"[slot=drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n<div class=\"absolute left-0 top-0 h-full bg-light size-full flex flex-col p-2 !pr-0 w-[19rem] overflow-hidden\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <!-- [ Header ] -->\r\n  <div class=\"shrink-0 w-full flex justify-between items-center\">\r\n    <div #anchor\r\n      (click)=\"ToggleCollapsed()\" \r\n      class=\"toggle size-10 aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu\"\r\n    >\r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </div>\r\n    <!-- <ion-button class=\"size-10 shrink-0 aspect-square\" size=\"small\" color=\"medium\" (click)=\"ToggleCollapsed()\">\r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button> -->\r\n\r\n    <div class=\"size-full shrink\">\r\n      @if (!ref.children.length) {\r\n        <ion-text class=\"size-full flex items-center justify-center default-transition z-0\" [ngClass]=\"{'opacity-0 -translate-x-1/2 pointer-events-none': colapsed }\"> \r\n          {{title}}\r\n        </ion-text>\r\n      }\r\n      <div #ref class=\"size-full flex items-center justify-center\">\r\n        <ng-content select=\"[slot=logo]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- [ Content ] -->\r\n  <div class=\"size-full shrink flex flex-col relative overflow-hidden\">\r\n    <loading [type]=\"3\" [loading]=\"loading\" text=\"\"></loading>\r\n    <div class=\"size-full shrink flex gap-2\">\r\n      <div class=\"h-full supports-[selector(::-webkit-scrollbar-thumb)]:!w-[3.375rem] w-12 pr-2 py-2 mask-y shrink-0 flex flex-col gap-2 overflow-y-auto border-dashed border-r border-r-medium/30\">\r\n        @for (item of lstMenu(); track $index) {\r\n          <div>\r\n            <div\r\n              [class.bg-active]=\"CurrentGroupActive == item\"\r\n              #anchor (mouseenter)=\"popover.present($event)\" \r\n              (mouseleave)=\"popover.dismiss()\" \r\n              (click)=\"CurrentGroupActive = item\" \r\n              class=\"w-full aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu\"\r\n            >\r\n              <ion-icon [name]=\"item.icon\"></ion-icon>\r\n            </div>\r\n            <sion-popover #popover [anchor]=\"anchor\" [flip]=\"false\" placement=\"right\" fill=\"solid\">\r\n              <div class=\"p-1\">\r\n                {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n              </div>\r\n            </sion-popover>\r\n          </div>\r\n          <!-- <ion-button class=\"w-full aspect-square shrink-0\" size=\"small\" color=\"secondary\" (click)=\"CurrentGroupActive = item\"> \r\n            <ion-icon [name]=\"item.icon\" slot=\"icon-only\"></ion-icon>\r\n          </ion-button> -->\r\n        }\r\n\r\n      </div>\r\n      <div class=\"size-full shrink relative\">\r\n        @for (mGroup of lstMenu(); track $index) {\r\n          <div class=\"absolute top-0 left-0 size-full py-2 default-transition opacity-0 translate-x-full z-0 overflow-hidden\" [ngClass]=\"{'opacity-100 !translate-x-0': CurrentGroupActive == mGroup}\">\r\n            <drawer-group [MenuGroup]=\"mGroup\" [useTranslation]=\"useTranslation\" [colapsed]=\"colapsed\"></drawer-group>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- [ End ] -->\r\n  <div class=\"shrink-0 w-full\">\r\n    <ng-content select=\"[slot=drawer]\"></ng-content>\r\n  </div>\r\n</div>", styles: [".bg-active{--color-primary: var(--ion-color-primary) !important;--step-1-opacity: .7 !important;--step-2-opacity: .3 !important}.bg-inactive{--color-primary: var(--ion-color-step-250);--step-1-opacity: .5;--step-2-opacity: .4;--step-3-opacity: .8}.menu{display:flex;cursor:pointer;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;padding:.5rem;transition:--color-primary,--step-1-opacity,--step-2-opacity .2s ease-in-out;--inset: var(--color-primary) 0px 1.75px 1px 0px inset;box-shadow:var(--inset)}.toggle:hover{--color-primary: var(--ion-color-step-500) !important;transition:--color-primary .2s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: LoadingComponent, selector: "loading", inputs: ["text", "type", "loading"] }, { kind: "component", type: DrawerGroupComponent, selector: "drawer-group", inputs: ["MenuGroup", "colapsed", "useTranslation"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SIonPopoverModule }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "isVisibleChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
@@ -10471,9 +10505,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         IonicModule,
                         LoadingComponent,
                         DrawerGroupComponent,
-                        TranslateModule
-                    ], selector: 'drawer', template: "<div class=\"absolute left-0 top-0 h-full w-[19rem] flex flex-col bg-light\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <div class=\"w-full px-2 h-14 pt-2 flex justify-between items-center text-3xl text-center\">\r\n    <ion-button id=\"drawer-button\" class=\"shrink-0 portrait:hidden aspect-square h-12 z-10 default-transition m-0\" size=\"small\" fill=\"outline\" color=\"dark\" style=\"--border-radius: 999rem; --border-width: 0;\" (click)=\"ToggleCollapsed()\"> \r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n    <div class=\"size-full\">\r\n      @if (!ref.children.length) {\r\n        <ion-text class=\"size-full flex items-center justify-center default-transition z-0\" [ngClass]=\"{'opacity-0 -translate-x-1/2': colapsed }\"> \r\n          {{title}}\r\n        </ion-text>\r\n      }\r\n      <div #ref class=\"size-full flex items-center justify-center\">\r\n        <ng-content select=\"[slot=logo]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"menu-conteiner\" class=\"mask-y flex flex-col relative\">\r\n    <loading [type]=\"3\" [loading]=\"loading\" text=\"\"></loading>\r\n    <div class=\"size-full shrink flex\">\r\n      <div class=\"h-full w-16 p-2 shrink-0\">\r\n        <div class=\"grid gap-2\">\r\n          @for (item of lstMenu(); track $index) {\r\n            <ion-item \r\n              id=\"group-menu\" [title]=\"item.title\" class=\"bg-inactive relative overflow-visible\" lines=\"none\" style=\"--padding-start: 0;\"\r\n              (click)=\"CurrentGroupActive = item\" \r\n              [ngClass]=\"{'bg-active': CurrentGroupActive == item}\"\r\n            >\r\n              <div id=\"tooltip\" class=\"opacity-0 !pointer-events-none -translate-x-4 absolute top-0 bottom-0 default-transition left-14 px-2 my-auto text-nowrap h-8 bg-[var(--ion-color-secondary)] -z-30 rounded-xl flex items-center justify-center\">\r\n                <div class=\"absolute -left-1 top-0 rounded bottom-0 my-auto rotate-45 h-4 aspect-square bg-[var(--ion-color-secondary)]\"></div>\r\n                <ion-icon class=\"z-50 mr-2\" [name]=\"item.icon\"></ion-icon>\r\n                <ion-text class=\"z-50\"> \r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n                </ion-text>\r\n              </div>\r\n              <div class=\"absolute top-0 size-full flex items-center justify-center overflow-visible\">\r\n                <ion-icon class=\"text-2xl\" [name]=\"item.icon\"></ion-icon>\r\n              </div>\r\n            </ion-item>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"h-full w-full border-dashed border-l relative\" style=\"border-color: color-mix(in srgb, var(--ion-color-dark) 20%, transparent 80%);\">\r\n        @for (mGroup of lstMenu(); track $index) {\r\n          <div class=\"absolute top-0 left-0 px-2 py-2 size-full default-transition opacity-0 translate-x-full z-0 mask-y overflow-y-auto\" [ngClass]=\"{'opacity-100 !translate-x-0': CurrentGroupActive == mGroup}\">\r\n            <drawer-group [MenuGroup]=\"mGroup\" [useTranslation]=\"useTranslation\" [colapsed]=\"colapsed\"></drawer-group>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div> \r\n\r\n    <div class=\"shrink-0 w-full\">\r\n      <ng-content select=\"[slot=drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#drawer-button{border-radius:9999px}#drawer-button:hover{background-color:color-mix(in srgb,var(--ion-color-dark-tint) 50%,transparent 50%)}#drawer-button:hover ion-icon{color:var(--ion-color-light)}#menu-conteiner{width:100%;height:100%;overflow-y:auto;overflow-x:hidden}#group-menu{--min-height: 3rem;--min-width: 3rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#group-menu:hover #tooltip{width:fit-content!important;--tw-translate-x: 0px !important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important;opacity:1!important}.bg-active{--background: color-mix(in srgb, var(--ion-color-secondary) 70%, transparent 30%) !important}.bg-inactive{cursor:pointer;--border-radius: 1rem;--background: color-mix(in srgb, var(--ion-color-light-shade) 50%, transparent 50%) }.bg-inactive::part(native){transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bg-inactive:hover{--background: color-mix(in srgb, var(--ion-color-light-shade) 70%, transparent 30%) }@media (prefers-color-scheme: dark){.bg-inactive{--background: color-mix(in srgb, var(--ion-color-light-tint) 70%, transparent 30%)}.bg-inactive:hover{--background: var(--ion-color-light-tint)}}\n"] }]
-        }], ctorParameters: () => [{ type: GenericService }], propDecorators: { loading: [{
+                        TranslateModule,
+                        SIonPopoverModule
+                    ], selector: 'drawer', template: "<!-- <div class=\"absolute left-0 top-0 h-full w-[19rem] flex flex-col bg-light\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <div class=\"w-full px-2 h-14 pt-2 flex justify-between items-center text-3xl text-center\">\r\n    <ion-button id=\"drawer-button\" class=\"shrink-0 portrait:hidden aspect-square h-12 z-10 default-transition m-0\" size=\"small\" fill=\"outline\" color=\"dark\" style=\"--border-radius: 999rem; --border-width: 0;\" (click)=\"ToggleCollapsed()\"> \r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n    <div class=\"size-full\">\r\n      @if (!ref.children.length) {\r\n        <ion-text class=\"size-full flex items-center justify-center default-transition z-0\" [ngClass]=\"{'opacity-0 -translate-x-1/2': colapsed }\"> \r\n          {{title}}\r\n        </ion-text>\r\n      }\r\n      <div #ref class=\"size-full flex items-center justify-center\">\r\n        <ng-content select=\"[slot=logo]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"menu-conteiner\" class=\"mask-y flex flex-col relative\">\r\n    <loading [type]=\"3\" [loading]=\"loading\" text=\"\"></loading>\r\n    <div class=\"size-full shrink flex\">\r\n      <div class=\"h-full w-16 p-2 shrink-0\">\r\n        <div class=\"grid gap-2\">\r\n          @for (item of lstMenu(); track $index) {\r\n            <ion-item \r\n              id=\"group-menu\" [title]=\"item.title\" class=\"bg-inactive relative overflow-visible\" lines=\"none\" style=\"--padding-start: 0;\"\r\n              (click)=\"CurrentGroupActive = item\" \r\n              [ngClass]=\"{'bg-active': CurrentGroupActive == item}\"\r\n            >\r\n              <div id=\"tooltip\" class=\"opacity-0 !pointer-events-none -translate-x-4 absolute top-0 bottom-0 default-transition left-14 px-2 my-auto text-nowrap h-8 bg-[var(--ion-color-secondary)] -z-30 rounded-xl flex items-center justify-center\">\r\n                <div class=\"absolute -left-1 top-0 rounded bottom-0 my-auto rotate-45 h-4 aspect-square bg-[var(--ion-color-secondary)]\"></div>\r\n                <ion-icon class=\"z-50 mr-2\" [name]=\"item.icon\"></ion-icon>\r\n                <ion-text class=\"z-50\"> \r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n                </ion-text>\r\n              </div>\r\n              <div class=\"absolute top-0 size-full flex items-center justify-center overflow-visible\">\r\n                <ion-icon class=\"text-2xl\" [name]=\"item.icon\"></ion-icon>\r\n              </div>\r\n            </ion-item>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"h-full w-full border-dashed border-l relative\" style=\"border-color: color-mix(in srgb, var(--ion-color-dark) 20%, transparent 80%);\">\r\n        @for (mGroup of lstMenu(); track $index) {\r\n          <div class=\"absolute top-0 left-0 px-2 py-2 size-full default-transition opacity-0 translate-x-full z-0 mask-y overflow-y-auto\" [ngClass]=\"{'opacity-100 !translate-x-0': CurrentGroupActive == mGroup}\">\r\n            <drawer-group [MenuGroup]=\"mGroup\" [useTranslation]=\"useTranslation\" [colapsed]=\"colapsed\"></drawer-group>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div> \r\n\r\n    <div class=\"shrink-0 w-full\">\r\n      <ng-content select=\"[slot=drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n<div class=\"absolute left-0 top-0 h-full bg-light size-full flex flex-col p-2 !pr-0 w-[19rem] overflow-hidden\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <!-- [ Header ] -->\r\n  <div class=\"shrink-0 w-full flex justify-between items-center\">\r\n    <div #anchor\r\n      (click)=\"ToggleCollapsed()\" \r\n      class=\"toggle size-10 aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu\"\r\n    >\r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </div>\r\n    <!-- <ion-button class=\"size-10 shrink-0 aspect-square\" size=\"small\" color=\"medium\" (click)=\"ToggleCollapsed()\">\r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button> -->\r\n\r\n    <div class=\"size-full shrink\">\r\n      @if (!ref.children.length) {\r\n        <ion-text class=\"size-full flex items-center justify-center default-transition z-0\" [ngClass]=\"{'opacity-0 -translate-x-1/2 pointer-events-none': colapsed }\"> \r\n          {{title}}\r\n        </ion-text>\r\n      }\r\n      <div #ref class=\"size-full flex items-center justify-center\">\r\n        <ng-content select=\"[slot=logo]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- [ Content ] -->\r\n  <div class=\"size-full shrink flex flex-col relative overflow-hidden\">\r\n    <loading [type]=\"3\" [loading]=\"loading\" text=\"\"></loading>\r\n    <div class=\"size-full shrink flex gap-2\">\r\n      <div class=\"h-full supports-[selector(::-webkit-scrollbar-thumb)]:!w-[3.375rem] w-12 pr-2 py-2 mask-y shrink-0 flex flex-col gap-2 overflow-y-auto border-dashed border-r border-r-medium/30\">\r\n        @for (item of lstMenu(); track $index) {\r\n          <div>\r\n            <div\r\n              [class.bg-active]=\"CurrentGroupActive == item\"\r\n              #anchor (mouseenter)=\"popover.present($event)\" \r\n              (mouseleave)=\"popover.dismiss()\" \r\n              (click)=\"CurrentGroupActive = item\" \r\n              class=\"w-full aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu\"\r\n            >\r\n              <ion-icon [name]=\"item.icon\"></ion-icon>\r\n            </div>\r\n            <sion-popover #popover [anchor]=\"anchor\" [flip]=\"false\" placement=\"right\" fill=\"solid\">\r\n              <div class=\"p-1\">\r\n                {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n              </div>\r\n            </sion-popover>\r\n          </div>\r\n          <!-- <ion-button class=\"w-full aspect-square shrink-0\" size=\"small\" color=\"secondary\" (click)=\"CurrentGroupActive = item\"> \r\n            <ion-icon [name]=\"item.icon\" slot=\"icon-only\"></ion-icon>\r\n          </ion-button> -->\r\n        }\r\n\r\n      </div>\r\n      <div class=\"size-full shrink relative\">\r\n        @for (mGroup of lstMenu(); track $index) {\r\n          <div class=\"absolute top-0 left-0 size-full py-2 default-transition opacity-0 translate-x-full z-0 overflow-hidden\" [ngClass]=\"{'opacity-100 !translate-x-0': CurrentGroupActive == mGroup}\">\r\n            <drawer-group [MenuGroup]=\"mGroup\" [useTranslation]=\"useTranslation\" [colapsed]=\"colapsed\"></drawer-group>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- [ End ] -->\r\n  <div class=\"shrink-0 w-full\">\r\n    <ng-content select=\"[slot=drawer]\"></ng-content>\r\n  </div>\r\n</div>", styles: [".bg-active{--color-primary: var(--ion-color-primary) !important;--step-1-opacity: .7 !important;--step-2-opacity: .3 !important}.bg-inactive{--color-primary: var(--ion-color-step-250);--step-1-opacity: .5;--step-2-opacity: .4;--step-3-opacity: .8}.menu{display:flex;cursor:pointer;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;padding:.5rem;transition:--color-primary,--step-1-opacity,--step-2-opacity .2s ease-in-out;--inset: var(--color-primary) 0px 1.75px 1px 0px inset;box-shadow:var(--inset)}.toggle:hover{--color-primary: var(--ion-color-step-500) !important;transition:--color-primary .2s ease-in-out}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { loading: [{
                 type: Input
             }], colapsed: [{
                 type: Input
@@ -10957,6 +10992,9 @@ class DefaultLoginComponent {
         if ($event && $event.key != 'Enter') {
             return;
         }
+        if ($event && !this.loginContainer.contains(document.activeElement)) {
+            return; // Prevent login if the active element is not within the login container
+        }
         this.submitted = true;
         this.loading = true;
         if (!this.frm.valid) {
@@ -10982,7 +11020,7 @@ class DefaultLoginComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultLoginComponent, deps: [{ token: i2$1.FormBuilder }, { token: GenericService }, { token: i3.NavController }, { token: AuthService }, { token: ApiUrlProviderService }, { token: EnvironmentService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DefaultLoginComponent, isStandalone: true, selector: "login", outputs: { OnLogin: "OnLogin" }, host: { listeners: { "window:keydown": "Login($event)" } }, ngImport: i0, template: "<!-- <div class=\"size-full flex justify-center items-center relative\">\r\n  <div class=\"landscape:w-4/5 portrait:w-full landscape:h-2/3 portrait:h-full landscape:max-w-[60rem] translucid-border landscape:rounded-3xl landscape:backdrop-blur-xl overflow-hidden\">\r\n    <div class=\"size-full flex portrait:flex-col\" style=\"background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);\">\r\n      <div class=\"shrink-0 w-96 portrait:w-full portrait:h-32 h-full p-3\">\r\n        <div class=\"rounded-2xl size-full overflow-x-hidden\">\r\n          <ng-content class=\"size-full\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"grow flex items-center justify-center h-full py-3 pr-3 portrait:pl-3\">\r\n        <div class=\"w-96 h-full flex flex-col items-center justify-center gap-2\" *ngIf=\"frm\" [formGroup]=\"frm\">\r\n\r\n          <ion-text class=\"text-5xl my-10 portrait:mt-[-5rem]\"> Login </ion-text>\r\n\r\n          <ion-card class=\"w-full backdrop-blur-xl\">\r\n            <ion-card-content>\r\n              <ion-item lines=\"none\" label=\"Senha\" labelPlacement=\"stacked\" class=\"rounded-2xl my-3 w-full\">\r\n                <ion-icon name=\"person\" slot=\"start\"></ion-icon>\r\n                <ion-input placeholder=\"Usu\u00E1rio / User\" formControlName=\"apelido\"></ion-input>\r\n              </ion-item>\r\n            </ion-card-content>\r\n          </ion-card>\r\n\r\n          <ion-card class=\"w-full backdrop-blur-xl\"> \r\n            <ion-card-content>\r\n              <ion-item lines=\"none\" class=\"rounded-2xl my-3 w-full\">\r\n                <ion-icon name=\"lock-closed\" slot=\"start\"></ion-icon>\r\n                <ion-input type=\"password\" formControlName=\"senha\" placeholder=\"Senha / Password\">\r\n                  <ion-input-password-toggle slot=\"end\"></ion-input-password-toggle>\r\n                </ion-input>\r\n              </ion-item>\r\n            </ion-card-content>\r\n          </ion-card>\r\n\r\n          <div class=\"w-full\">\r\n            <a href=\"\">Esqueceu a senha?</a>\r\n          </div>\r\n\r\n          <div class=\"flex w-full\">\r\n            <ion-button class=\"rounded-2xl shadow-xl default-transition w-full\" expand=\"block\" (click)=\"Login()\" [disabled]=\"loading\">\r\n              <ion-spinner class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}\" slot=\"start\"></ion-spinner>\r\n              <ion-icon    class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0':  loading}\" name=\"enter-outline\" slot=\"start\" ></ion-icon>\r\n              <span class=\"default-transition\" > Login </span>\r\n            </ion-button>\r\n\r\n            <ion-button class=\"shrink-0 aspect-square ml-3\" color=\"dark\" hidden>\r\n              <svg class=\"size-8\" slot=\"icon-only\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 32 32\" width=\"64\" height=\"64\"><defs><path id=\"A\" d=\"M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z\"/></defs><clipPath id=\"B\"><use xlink:href=\"#A\"/></clipPath><g transform=\"matrix(.727273 0 0 .727273 -.954545 -1.45455)\"><path d=\"M0 37V11l17 13z\" clip-path=\"url(#B)\" fill=\"#fbbc05\"/><path d=\"M0 11l17 13 7-6.1L48 14V0H0z\" clip-path=\"url(#B)\" fill=\"#ea4335\"/><path d=\"M0 37l30-23 7.9 1L48 0v48H0z\" clip-path=\"url(#B)\" fill=\"#34a853\"/><path d=\"M48 48L17 24l-4-3 35-10z\" clip-path=\"url(#B)\" fill=\"#4285f4\"/></g></svg>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n\r\n<div class=\"size-full flex justify-center items-center relative portrait:p-4\">\r\n  <div class=\"landscape:w-4/5 landscape:h-2/3 landscape:xl:max-w-[60rem] portrait:size-full translucid-border backdrop-blur-xl rounded-3xl overflow-hidden\">\r\n    <div class=\"size-full flex portrait:flex-col\" style=\"background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);\">\r\n      <div class=\"shrink-0 w-96 portrait:w-full portrait:h-40 landscape:h-full p-2\">\r\n        <div class=\"size-full rounded-2xl overflow-hidden\">\r\n          <ng-content select=\"[slot=logo]\" class=\"size-full\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"shrink size-full flex flex-col items-center justify-center gap-3 px-10 relative\" *ngIf=\"frm\" [formGroup]=\"frm\">\r\n        <ion-text class=\"h-24 text-5xl\"> Login </ion-text>\r\n\r\n        <ion-card class=\"w-full backdrop-blur-xl\">\r\n          <ion-card-content>\r\n            <ion-item lines=\"none\" label=\"Senha\" labelPlacement=\"stacked\" class=\"rounded-2xl my-3 w-full\">\r\n              <ion-icon name=\"person\" slot=\"start\"></ion-icon>\r\n              <ion-input placeholder=\"Usu\u00E1rio / User\" formControlName=\"apelido\"></ion-input>\r\n            </ion-item>\r\n          </ion-card-content>\r\n        </ion-card>\r\n\r\n        <ion-card class=\"w-full backdrop-blur-xl\"> \r\n          <ion-card-content>\r\n            <ion-item lines=\"none\" class=\"rounded-2xl my-3 w-full\">\r\n              <ion-icon name=\"lock-closed\" slot=\"start\"></ion-icon>\r\n              <ion-input type=\"password\" formControlName=\"senha\" placeholder=\"Senha / Password\">\r\n                <ion-input-password-toggle slot=\"end\"></ion-input-password-toggle>\r\n              </ion-input>\r\n            </ion-item>\r\n          </ion-card-content>\r\n        </ion-card>\r\n\r\n        <div class=\"flex w-full\">\r\n          <ion-button class=\"transition-all rounded-2xl shadow-xl default-transition w-full\" expand=\"block\" (click)=\"Login()\" [disabled]=\"loading\">\r\n            <ion-spinner class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}\" slot=\"start\"></ion-spinner>\r\n            <ion-icon    class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0':  loading}\" name=\"enter-outline\" slot=\"start\" ></ion-icon>\r\n            <span class=\"default-transition\"> Login </span>\r\n          </ion-button>\r\n\r\n          <!-- <ion-button class=\"shrink-0 aspect-square ml-3\" color=\"dark\" hidden>\r\n            <svg class=\"size-8\" slot=\"icon-only\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 32 32\" width=\"64\" height=\"64\"><defs><path id=\"A\" d=\"M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z\"/></defs><clipPath id=\"B\"><use xlink:href=\"#A\"/></clipPath><g transform=\"matrix(.727273 0 0 .727273 -.954545 -1.45455)\"><path d=\"M0 37V11l17 13z\" clip-path=\"url(#B)\" fill=\"#fbbc05\"/><path d=\"M0 11l17 13 7-6.1L48 14V0H0z\" clip-path=\"url(#B)\" fill=\"#ea4335\"/><path d=\"M0 37l30-23 7.9 1L48 0v48H0z\" clip-path=\"url(#B)\" fill=\"#34a853\"/><path d=\"M48 48L17 24l-4-3 35-10z\" clip-path=\"url(#B)\" fill=\"#4285f4\"/></g></svg>\r\n          </ion-button> -->\r\n        </div>\r\n\r\n        <div class=\"w-full\">\r\n          <ng-content select=\"[slot=end]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["ion-card{margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:1rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);background:color-mix(in srgb,var(--ion-color-light) 15%,transparent 93%);border-bottom-color:var(--ion-color-medium);border-right-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-top-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-left-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-width:1px 1px 2px 1px}ion-card ion-card-content{padding:0}ion-card:hover{background:color-mix(in srgb,var(--ion-color-dark) 15%,transparent 93%)}ion-card.submitted.invalid{border-color:color-mix(in srgb,var(--ion-color-danger) 75%,transparent 25%)!important}ion-card ion-card-content{width:100%;height:100%;background-color:transparent;padding:0}ion-item{--background: transparent;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i3.IonInputPasswordToggle, selector: "ion-input-password-toggle", inputs: ["color", "hideIcon", "mode", "showIcon"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "18.2.13", type: DefaultLoginComponent, isStandalone: true, selector: "login", outputs: { OnLogin: "OnLogin" }, host: { listeners: { "window:keydown": "Login($event)" } }, viewQueries: [{ propertyName: "loginContainer", first: true, predicate: ["loginContainer"], descendants: true }], ngImport: i0, template: "<!-- <div class=\"size-full flex justify-center items-center relative\">\r\n  <div class=\"landscape:w-4/5 portrait:w-full landscape:h-2/3 portrait:h-full landscape:max-w-[60rem] translucid-border landscape:rounded-3xl landscape:backdrop-blur-xl overflow-hidden\">\r\n    <div class=\"size-full flex portrait:flex-col\" style=\"background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);\">\r\n      <div class=\"shrink-0 w-96 portrait:w-full portrait:h-32 h-full p-3\">\r\n        <div class=\"rounded-2xl size-full overflow-x-hidden\">\r\n          <ng-content class=\"size-full\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"grow flex items-center justify-center h-full py-3 pr-3 portrait:pl-3\">\r\n        <div class=\"w-96 h-full flex flex-col items-center justify-center gap-2\" *ngIf=\"frm\" [formGroup]=\"frm\">\r\n\r\n          <ion-text class=\"text-5xl my-10 portrait:mt-[-5rem]\"> Login </ion-text>\r\n\r\n          <ion-card class=\"w-full backdrop-blur-xl\">\r\n            <ion-card-content>\r\n              <ion-item lines=\"none\" label=\"Senha\" labelPlacement=\"stacked\" class=\"rounded-2xl my-3 w-full\">\r\n                <ion-icon name=\"person\" slot=\"start\"></ion-icon>\r\n                <ion-input placeholder=\"Usu\u00E1rio / User\" formControlName=\"apelido\"></ion-input>\r\n              </ion-item>\r\n            </ion-card-content>\r\n          </ion-card>\r\n\r\n          <ion-card class=\"w-full backdrop-blur-xl\"> \r\n            <ion-card-content>\r\n              <ion-item lines=\"none\" class=\"rounded-2xl my-3 w-full\">\r\n                <ion-icon name=\"lock-closed\" slot=\"start\"></ion-icon>\r\n                <ion-input type=\"password\" formControlName=\"senha\" placeholder=\"Senha / Password\">\r\n                  <ion-input-password-toggle slot=\"end\"></ion-input-password-toggle>\r\n                </ion-input>\r\n              </ion-item>\r\n            </ion-card-content>\r\n          </ion-card>\r\n\r\n          <div class=\"w-full\">\r\n            <a href=\"\">Esqueceu a senha?</a>\r\n          </div>\r\n\r\n          <div class=\"flex w-full\">\r\n            <ion-button class=\"rounded-2xl shadow-xl default-transition w-full\" expand=\"block\" (click)=\"Login()\" [disabled]=\"loading\">\r\n              <ion-spinner class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}\" slot=\"start\"></ion-spinner>\r\n              <ion-icon    class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0':  loading}\" name=\"enter-outline\" slot=\"start\" ></ion-icon>\r\n              <span class=\"default-transition\" > Login </span>\r\n            </ion-button>\r\n\r\n            <ion-button class=\"shrink-0 aspect-square ml-3\" color=\"dark\" hidden>\r\n              <svg class=\"size-8\" slot=\"icon-only\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 32 32\" width=\"64\" height=\"64\"><defs><path id=\"A\" d=\"M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z\"/></defs><clipPath id=\"B\"><use xlink:href=\"#A\"/></clipPath><g transform=\"matrix(.727273 0 0 .727273 -.954545 -1.45455)\"><path d=\"M0 37V11l17 13z\" clip-path=\"url(#B)\" fill=\"#fbbc05\"/><path d=\"M0 11l17 13 7-6.1L48 14V0H0z\" clip-path=\"url(#B)\" fill=\"#ea4335\"/><path d=\"M0 37l30-23 7.9 1L48 0v48H0z\" clip-path=\"url(#B)\" fill=\"#34a853\"/><path d=\"M48 48L17 24l-4-3 35-10z\" clip-path=\"url(#B)\" fill=\"#4285f4\"/></g></svg>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n\r\n<div #loginContainer class=\"size-full flex justify-center items-center relative portrait:p-4\">\r\n  <div class=\"landscape:w-4/5 landscape:h-2/3 landscape:xl:max-w-[60rem] portrait:size-full translucid-border backdrop-blur-xl rounded-3xl overflow-hidden\">\r\n    <div class=\"size-full flex portrait:flex-col\" style=\"background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);\">\r\n      <div class=\"shrink-0 w-96 portrait:w-full portrait:h-40 landscape:h-full p-2\">\r\n        <div class=\"size-full rounded-2xl overflow-hidden\">\r\n          <ng-content select=\"[slot=logo]\" class=\"size-full\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"shrink size-full flex flex-col items-center justify-center gap-3 px-10 relative\" *ngIf=\"frm\" [formGroup]=\"frm\">\r\n        <ion-text class=\"h-24 text-5xl\"> Login </ion-text>\r\n\r\n        <ion-card class=\"w-full backdrop-blur-xl\">\r\n          <ion-card-content>\r\n            <ion-item lines=\"none\" label=\"Senha\" labelPlacement=\"stacked\" class=\"rounded-2xl my-3 w-full\">\r\n              <ion-icon name=\"person\" slot=\"start\"></ion-icon>\r\n              <ion-input placeholder=\"Usu\u00E1rio / User\" formControlName=\"apelido\"></ion-input>\r\n            </ion-item>\r\n          </ion-card-content>\r\n        </ion-card>\r\n\r\n        <ion-card class=\"w-full backdrop-blur-xl\"> \r\n          <ion-card-content>\r\n            <ion-item lines=\"none\" class=\"rounded-2xl my-3 w-full\">\r\n              <ion-icon name=\"lock-closed\" slot=\"start\"></ion-icon>\r\n              <ion-input type=\"password\" formControlName=\"senha\" placeholder=\"Senha / Password\">\r\n                <ion-input-password-toggle slot=\"end\"></ion-input-password-toggle>\r\n              </ion-input>\r\n            </ion-item>\r\n          </ion-card-content>\r\n        </ion-card>\r\n\r\n        <div class=\"flex w-full\">\r\n          <ion-button class=\"transition-all rounded-2xl shadow-xl default-transition w-full\" expand=\"block\" (click)=\"Login()\" [disabled]=\"loading\">\r\n            <ion-spinner class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}\" slot=\"start\"></ion-spinner>\r\n            <ion-icon    class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0':  loading}\" name=\"enter-outline\" slot=\"start\" ></ion-icon>\r\n            <span class=\"default-transition\"> Login </span>\r\n          </ion-button>\r\n\r\n          <!-- <ion-button class=\"shrink-0 aspect-square ml-3\" color=\"dark\" hidden>\r\n            <svg class=\"size-8\" slot=\"icon-only\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 32 32\" width=\"64\" height=\"64\"><defs><path id=\"A\" d=\"M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z\"/></defs><clipPath id=\"B\"><use xlink:href=\"#A\"/></clipPath><g transform=\"matrix(.727273 0 0 .727273 -.954545 -1.45455)\"><path d=\"M0 37V11l17 13z\" clip-path=\"url(#B)\" fill=\"#fbbc05\"/><path d=\"M0 11l17 13 7-6.1L48 14V0H0z\" clip-path=\"url(#B)\" fill=\"#ea4335\"/><path d=\"M0 37l30-23 7.9 1L48 0v48H0z\" clip-path=\"url(#B)\" fill=\"#34a853\"/><path d=\"M48 48L17 24l-4-3 35-10z\" clip-path=\"url(#B)\" fill=\"#4285f4\"/></g></svg>\r\n          </ion-button> -->\r\n        </div>\r\n\r\n        <div class=\"w-full\">\r\n          <ng-content select=\"[slot=end]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["ion-card{margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:1rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);background:color-mix(in srgb,var(--ion-color-light) 15%,transparent 93%);border-bottom-color:var(--ion-color-medium);border-right-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-top-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-left-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-width:1px 1px 2px 1px}ion-card ion-card-content{padding:0}ion-card:hover{background:color-mix(in srgb,var(--ion-color-dark) 15%,transparent 93%)}ion-card.submitted.invalid{border-color:color-mix(in srgb,var(--ion-color-danger) 75%,transparent 25%)!important}ion-card ion-card-content{width:100%;height:100%;background-color:transparent;padding:0}ion-item{--background: transparent;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i3.IonInputPasswordToggle, selector: "ion-input-password-toggle", inputs: ["color", "hideIcon", "mode", "showIcon"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "18.2.13", ngImport: i0, type: DefaultLoginComponent, decorators: [{
             type: Component,
@@ -10991,9 +11029,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         IonicModule,
                         FormsModule,
                         ReactiveFormsModule,
-                    ], selector: 'login', template: "<!-- <div class=\"size-full flex justify-center items-center relative\">\r\n  <div class=\"landscape:w-4/5 portrait:w-full landscape:h-2/3 portrait:h-full landscape:max-w-[60rem] translucid-border landscape:rounded-3xl landscape:backdrop-blur-xl overflow-hidden\">\r\n    <div class=\"size-full flex portrait:flex-col\" style=\"background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);\">\r\n      <div class=\"shrink-0 w-96 portrait:w-full portrait:h-32 h-full p-3\">\r\n        <div class=\"rounded-2xl size-full overflow-x-hidden\">\r\n          <ng-content class=\"size-full\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"grow flex items-center justify-center h-full py-3 pr-3 portrait:pl-3\">\r\n        <div class=\"w-96 h-full flex flex-col items-center justify-center gap-2\" *ngIf=\"frm\" [formGroup]=\"frm\">\r\n\r\n          <ion-text class=\"text-5xl my-10 portrait:mt-[-5rem]\"> Login </ion-text>\r\n\r\n          <ion-card class=\"w-full backdrop-blur-xl\">\r\n            <ion-card-content>\r\n              <ion-item lines=\"none\" label=\"Senha\" labelPlacement=\"stacked\" class=\"rounded-2xl my-3 w-full\">\r\n                <ion-icon name=\"person\" slot=\"start\"></ion-icon>\r\n                <ion-input placeholder=\"Usu\u00E1rio / User\" formControlName=\"apelido\"></ion-input>\r\n              </ion-item>\r\n            </ion-card-content>\r\n          </ion-card>\r\n\r\n          <ion-card class=\"w-full backdrop-blur-xl\"> \r\n            <ion-card-content>\r\n              <ion-item lines=\"none\" class=\"rounded-2xl my-3 w-full\">\r\n                <ion-icon name=\"lock-closed\" slot=\"start\"></ion-icon>\r\n                <ion-input type=\"password\" formControlName=\"senha\" placeholder=\"Senha / Password\">\r\n                  <ion-input-password-toggle slot=\"end\"></ion-input-password-toggle>\r\n                </ion-input>\r\n              </ion-item>\r\n            </ion-card-content>\r\n          </ion-card>\r\n\r\n          <div class=\"w-full\">\r\n            <a href=\"\">Esqueceu a senha?</a>\r\n          </div>\r\n\r\n          <div class=\"flex w-full\">\r\n            <ion-button class=\"rounded-2xl shadow-xl default-transition w-full\" expand=\"block\" (click)=\"Login()\" [disabled]=\"loading\">\r\n              <ion-spinner class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}\" slot=\"start\"></ion-spinner>\r\n              <ion-icon    class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0':  loading}\" name=\"enter-outline\" slot=\"start\" ></ion-icon>\r\n              <span class=\"default-transition\" > Login </span>\r\n            </ion-button>\r\n\r\n            <ion-button class=\"shrink-0 aspect-square ml-3\" color=\"dark\" hidden>\r\n              <svg class=\"size-8\" slot=\"icon-only\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 32 32\" width=\"64\" height=\"64\"><defs><path id=\"A\" d=\"M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z\"/></defs><clipPath id=\"B\"><use xlink:href=\"#A\"/></clipPath><g transform=\"matrix(.727273 0 0 .727273 -.954545 -1.45455)\"><path d=\"M0 37V11l17 13z\" clip-path=\"url(#B)\" fill=\"#fbbc05\"/><path d=\"M0 11l17 13 7-6.1L48 14V0H0z\" clip-path=\"url(#B)\" fill=\"#ea4335\"/><path d=\"M0 37l30-23 7.9 1L48 0v48H0z\" clip-path=\"url(#B)\" fill=\"#34a853\"/><path d=\"M48 48L17 24l-4-3 35-10z\" clip-path=\"url(#B)\" fill=\"#4285f4\"/></g></svg>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n\r\n<div class=\"size-full flex justify-center items-center relative portrait:p-4\">\r\n  <div class=\"landscape:w-4/5 landscape:h-2/3 landscape:xl:max-w-[60rem] portrait:size-full translucid-border backdrop-blur-xl rounded-3xl overflow-hidden\">\r\n    <div class=\"size-full flex portrait:flex-col\" style=\"background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);\">\r\n      <div class=\"shrink-0 w-96 portrait:w-full portrait:h-40 landscape:h-full p-2\">\r\n        <div class=\"size-full rounded-2xl overflow-hidden\">\r\n          <ng-content select=\"[slot=logo]\" class=\"size-full\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"shrink size-full flex flex-col items-center justify-center gap-3 px-10 relative\" *ngIf=\"frm\" [formGroup]=\"frm\">\r\n        <ion-text class=\"h-24 text-5xl\"> Login </ion-text>\r\n\r\n        <ion-card class=\"w-full backdrop-blur-xl\">\r\n          <ion-card-content>\r\n            <ion-item lines=\"none\" label=\"Senha\" labelPlacement=\"stacked\" class=\"rounded-2xl my-3 w-full\">\r\n              <ion-icon name=\"person\" slot=\"start\"></ion-icon>\r\n              <ion-input placeholder=\"Usu\u00E1rio / User\" formControlName=\"apelido\"></ion-input>\r\n            </ion-item>\r\n          </ion-card-content>\r\n        </ion-card>\r\n\r\n        <ion-card class=\"w-full backdrop-blur-xl\"> \r\n          <ion-card-content>\r\n            <ion-item lines=\"none\" class=\"rounded-2xl my-3 w-full\">\r\n              <ion-icon name=\"lock-closed\" slot=\"start\"></ion-icon>\r\n              <ion-input type=\"password\" formControlName=\"senha\" placeholder=\"Senha / Password\">\r\n                <ion-input-password-toggle slot=\"end\"></ion-input-password-toggle>\r\n              </ion-input>\r\n            </ion-item>\r\n          </ion-card-content>\r\n        </ion-card>\r\n\r\n        <div class=\"flex w-full\">\r\n          <ion-button class=\"transition-all rounded-2xl shadow-xl default-transition w-full\" expand=\"block\" (click)=\"Login()\" [disabled]=\"loading\">\r\n            <ion-spinner class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}\" slot=\"start\"></ion-spinner>\r\n            <ion-icon    class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0':  loading}\" name=\"enter-outline\" slot=\"start\" ></ion-icon>\r\n            <span class=\"default-transition\"> Login </span>\r\n          </ion-button>\r\n\r\n          <!-- <ion-button class=\"shrink-0 aspect-square ml-3\" color=\"dark\" hidden>\r\n            <svg class=\"size-8\" slot=\"icon-only\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 32 32\" width=\"64\" height=\"64\"><defs><path id=\"A\" d=\"M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z\"/></defs><clipPath id=\"B\"><use xlink:href=\"#A\"/></clipPath><g transform=\"matrix(.727273 0 0 .727273 -.954545 -1.45455)\"><path d=\"M0 37V11l17 13z\" clip-path=\"url(#B)\" fill=\"#fbbc05\"/><path d=\"M0 11l17 13 7-6.1L48 14V0H0z\" clip-path=\"url(#B)\" fill=\"#ea4335\"/><path d=\"M0 37l30-23 7.9 1L48 0v48H0z\" clip-path=\"url(#B)\" fill=\"#34a853\"/><path d=\"M48 48L17 24l-4-3 35-10z\" clip-path=\"url(#B)\" fill=\"#4285f4\"/></g></svg>\r\n          </ion-button> -->\r\n        </div>\r\n\r\n        <div class=\"w-full\">\r\n          <ng-content select=\"[slot=end]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["ion-card{margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:1rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);background:color-mix(in srgb,var(--ion-color-light) 15%,transparent 93%);border-bottom-color:var(--ion-color-medium);border-right-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-top-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-left-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-width:1px 1px 2px 1px}ion-card ion-card-content{padding:0}ion-card:hover{background:color-mix(in srgb,var(--ion-color-dark) 15%,transparent 93%)}ion-card.submitted.invalid{border-color:color-mix(in srgb,var(--ion-color-danger) 75%,transparent 25%)!important}ion-card ion-card-content{width:100%;height:100%;background-color:transparent;padding:0}ion-item{--background: transparent;margin:0}\n"] }]
+                    ], selector: 'login', template: "<!-- <div class=\"size-full flex justify-center items-center relative\">\r\n  <div class=\"landscape:w-4/5 portrait:w-full landscape:h-2/3 portrait:h-full landscape:max-w-[60rem] translucid-border landscape:rounded-3xl landscape:backdrop-blur-xl overflow-hidden\">\r\n    <div class=\"size-full flex portrait:flex-col\" style=\"background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);\">\r\n      <div class=\"shrink-0 w-96 portrait:w-full portrait:h-32 h-full p-3\">\r\n        <div class=\"rounded-2xl size-full overflow-x-hidden\">\r\n          <ng-content class=\"size-full\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"grow flex items-center justify-center h-full py-3 pr-3 portrait:pl-3\">\r\n        <div class=\"w-96 h-full flex flex-col items-center justify-center gap-2\" *ngIf=\"frm\" [formGroup]=\"frm\">\r\n\r\n          <ion-text class=\"text-5xl my-10 portrait:mt-[-5rem]\"> Login </ion-text>\r\n\r\n          <ion-card class=\"w-full backdrop-blur-xl\">\r\n            <ion-card-content>\r\n              <ion-item lines=\"none\" label=\"Senha\" labelPlacement=\"stacked\" class=\"rounded-2xl my-3 w-full\">\r\n                <ion-icon name=\"person\" slot=\"start\"></ion-icon>\r\n                <ion-input placeholder=\"Usu\u00E1rio / User\" formControlName=\"apelido\"></ion-input>\r\n              </ion-item>\r\n            </ion-card-content>\r\n          </ion-card>\r\n\r\n          <ion-card class=\"w-full backdrop-blur-xl\"> \r\n            <ion-card-content>\r\n              <ion-item lines=\"none\" class=\"rounded-2xl my-3 w-full\">\r\n                <ion-icon name=\"lock-closed\" slot=\"start\"></ion-icon>\r\n                <ion-input type=\"password\" formControlName=\"senha\" placeholder=\"Senha / Password\">\r\n                  <ion-input-password-toggle slot=\"end\"></ion-input-password-toggle>\r\n                </ion-input>\r\n              </ion-item>\r\n            </ion-card-content>\r\n          </ion-card>\r\n\r\n          <div class=\"w-full\">\r\n            <a href=\"\">Esqueceu a senha?</a>\r\n          </div>\r\n\r\n          <div class=\"flex w-full\">\r\n            <ion-button class=\"rounded-2xl shadow-xl default-transition w-full\" expand=\"block\" (click)=\"Login()\" [disabled]=\"loading\">\r\n              <ion-spinner class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}\" slot=\"start\"></ion-spinner>\r\n              <ion-icon    class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0':  loading}\" name=\"enter-outline\" slot=\"start\" ></ion-icon>\r\n              <span class=\"default-transition\" > Login </span>\r\n            </ion-button>\r\n\r\n            <ion-button class=\"shrink-0 aspect-square ml-3\" color=\"dark\" hidden>\r\n              <svg class=\"size-8\" slot=\"icon-only\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 32 32\" width=\"64\" height=\"64\"><defs><path id=\"A\" d=\"M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z\"/></defs><clipPath id=\"B\"><use xlink:href=\"#A\"/></clipPath><g transform=\"matrix(.727273 0 0 .727273 -.954545 -1.45455)\"><path d=\"M0 37V11l17 13z\" clip-path=\"url(#B)\" fill=\"#fbbc05\"/><path d=\"M0 11l17 13 7-6.1L48 14V0H0z\" clip-path=\"url(#B)\" fill=\"#ea4335\"/><path d=\"M0 37l30-23 7.9 1L48 0v48H0z\" clip-path=\"url(#B)\" fill=\"#34a853\"/><path d=\"M48 48L17 24l-4-3 35-10z\" clip-path=\"url(#B)\" fill=\"#4285f4\"/></g></svg>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n\r\n<div #loginContainer class=\"size-full flex justify-center items-center relative portrait:p-4\">\r\n  <div class=\"landscape:w-4/5 landscape:h-2/3 landscape:xl:max-w-[60rem] portrait:size-full translucid-border backdrop-blur-xl rounded-3xl overflow-hidden\">\r\n    <div class=\"size-full flex portrait:flex-col\" style=\"background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);\">\r\n      <div class=\"shrink-0 w-96 portrait:w-full portrait:h-40 landscape:h-full p-2\">\r\n        <div class=\"size-full rounded-2xl overflow-hidden\">\r\n          <ng-content select=\"[slot=logo]\" class=\"size-full\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"shrink size-full flex flex-col items-center justify-center gap-3 px-10 relative\" *ngIf=\"frm\" [formGroup]=\"frm\">\r\n        <ion-text class=\"h-24 text-5xl\"> Login </ion-text>\r\n\r\n        <ion-card class=\"w-full backdrop-blur-xl\">\r\n          <ion-card-content>\r\n            <ion-item lines=\"none\" label=\"Senha\" labelPlacement=\"stacked\" class=\"rounded-2xl my-3 w-full\">\r\n              <ion-icon name=\"person\" slot=\"start\"></ion-icon>\r\n              <ion-input placeholder=\"Usu\u00E1rio / User\" formControlName=\"apelido\"></ion-input>\r\n            </ion-item>\r\n          </ion-card-content>\r\n        </ion-card>\r\n\r\n        <ion-card class=\"w-full backdrop-blur-xl\"> \r\n          <ion-card-content>\r\n            <ion-item lines=\"none\" class=\"rounded-2xl my-3 w-full\">\r\n              <ion-icon name=\"lock-closed\" slot=\"start\"></ion-icon>\r\n              <ion-input type=\"password\" formControlName=\"senha\" placeholder=\"Senha / Password\">\r\n                <ion-input-password-toggle slot=\"end\"></ion-input-password-toggle>\r\n              </ion-input>\r\n            </ion-item>\r\n          </ion-card-content>\r\n        </ion-card>\r\n\r\n        <div class=\"flex w-full\">\r\n          <ion-button class=\"transition-all rounded-2xl shadow-xl default-transition w-full\" expand=\"block\" (click)=\"Login()\" [disabled]=\"loading\">\r\n            <ion-spinner class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}\" slot=\"start\"></ion-spinner>\r\n            <ion-icon    class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0':  loading}\" name=\"enter-outline\" slot=\"start\" ></ion-icon>\r\n            <span class=\"default-transition\"> Login </span>\r\n          </ion-button>\r\n\r\n          <!-- <ion-button class=\"shrink-0 aspect-square ml-3\" color=\"dark\" hidden>\r\n            <svg class=\"size-8\" slot=\"icon-only\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 32 32\" width=\"64\" height=\"64\"><defs><path id=\"A\" d=\"M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z\"/></defs><clipPath id=\"B\"><use xlink:href=\"#A\"/></clipPath><g transform=\"matrix(.727273 0 0 .727273 -.954545 -1.45455)\"><path d=\"M0 37V11l17 13z\" clip-path=\"url(#B)\" fill=\"#fbbc05\"/><path d=\"M0 11l17 13 7-6.1L48 14V0H0z\" clip-path=\"url(#B)\" fill=\"#ea4335\"/><path d=\"M0 37l30-23 7.9 1L48 0v48H0z\" clip-path=\"url(#B)\" fill=\"#34a853\"/><path d=\"M48 48L17 24l-4-3 35-10z\" clip-path=\"url(#B)\" fill=\"#4285f4\"/></g></svg>\r\n          </ion-button> -->\r\n        </div>\r\n\r\n        <div class=\"w-full\">\r\n          <ng-content select=\"[slot=end]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["ion-card{margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:1rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);background:color-mix(in srgb,var(--ion-color-light) 15%,transparent 93%);border-bottom-color:var(--ion-color-medium);border-right-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-top-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-left-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-width:1px 1px 2px 1px}ion-card ion-card-content{padding:0}ion-card:hover{background:color-mix(in srgb,var(--ion-color-dark) 15%,transparent 93%)}ion-card.submitted.invalid{border-color:color-mix(in srgb,var(--ion-color-danger) 75%,transparent 25%)!important}ion-card ion-card-content{width:100%;height:100%;background-color:transparent;padding:0}ion-item{--background: transparent;margin:0}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.FormBuilder }, { type: GenericService }, { type: i3.NavController }, { type: AuthService }, { type: ApiUrlProviderService }, { type: EnvironmentService }, { type: i2$2.Router }], propDecorators: { OnLogin: [{
                 type: Output
+            }], loginContainer: [{
+                type: ViewChild,
+                args: ['loginContainer']
             }], Login: [{
                 type: HostListener,
                 args: ['window:keydown', ['$event']]
@@ -11005,12 +11046,35 @@ class MainContentComponent {
         this.backdrop = 'bg-primary/30';
         this.shadowColor = 'color-mix(in srgb, var(--ion-color-primary) 15%, transparent)';
         this.colapsed = false;
+        this.Theme = Theme.System;
     }
-    ngOnInit() {
-        this.authService.LoadToken().then((res) => {
-            this.Token = res;
+    async ngOnInit() {
+        this.Token = await this.authService.LoadToken();
+        this.Theme = Number((await Preferences.get({ key: 'theme' })).value);
+        this.SetTheme(this.Theme);
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            this.SetTheme(this.Theme);
         });
     }
+    async SetTheme(theme) {
+        this.Theme = theme;
+        await Preferences.set({ key: 'theme', value: this.Theme.toString() });
+        if (this.Theme === Theme.System) {
+            var matches = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            if (matches) {
+                document.body.classList.add('dark');
+            }
+            else {
+                document.body.classList.remove('dark');
+            }
+        }
+        else if (this.Theme === Theme.Light) {
+            document.body.classList.remove('dark');
+        }
+        else if (this.Theme === Theme.Dark) {
+            document.body.classList.add('dark');
+        }
+    }
     get fullScreen() {
         if (document.fullscreenElement != null) {
             return true;
@@ -11039,11 +11103,11 @@ class MainContentComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MainContentComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MainContentComponent, isStandalone: true, selector: "main-content", inputs: { backdrop: "backdrop", shadowColor: "shadowColor", colapsed: "colapsed", drawerComponent: "drawerComponent" }, viewQueries: [{ propertyName: "FullScreenConteiner", first: true, predicate: ["target"], descendants: true }], ngImport: i0, template: "<div class=\"size-full flex flex-col\" [ngClass]=\"{'bg-light/50': fullScreen}\" #target>\r\n  <div class=\"w-full h-14 relative shrink-0\">\r\n    <ion-card class=\"m-0 rounded-none size-full border-none\">\r\n      <ion-card-content class=\"p-0 px-2 size-full flex\">\r\n        <div class=\"w-1/2 h-full flex items-center justify-start\">\r\n          @if (!fullScreen) {\r\n            <ion-menu-button  [routerLink]=\"['/']\" [autoHide]=\"true\"></ion-menu-button>\r\n          }\r\n          <ng-content select=\"[slot=start]\"></ng-content>\r\n        </div>\r\n\r\n        <div class=\"w-1/2 h-full flex items-center justify-end gap-2\">\r\n          <ng-content select=\"[slot=end]\"></ng-content>\r\n         \r\n          <ion-button (click)=\"FullScreen()\" fill=\"outline\" color=\"dark\" size=\"small\" class=\"size-10 aspect-square  portrait:hidden\">\r\n            <ion-icon slot=\"icon-only\" name=\"expand\"></ion-icon>\r\n          </ion-button>\r\n\r\n          @if (!fullScreen) {\r\n            <ion-button (click)=\"userPopover.present($event)\" size=\"small\" class=\"size-10 aspect-square\">\r\n              <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n            </ion-button>\r\n            <ion-popover #userPopover [dismissOnSelect]=\"true\" triggerAction=\"click\">\r\n              <ng-template>\r\n                <ion-content>\r\n                  <div class=\"size-full\">\r\n                    <div class=\"w-full px-3 flex items-center\">\r\n                      <div class=\"size-10 shrink-0 aspect-square rounded-2xl text-sm flex items-center justify-center default-transition\" style=\"background-color: var(--ion-color-primary);\">\r\n                        <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n                      </div>\r\n                      <div class=\"grow min-w-10 p-2 justify-center items-center whitespace-nowrap text-ellipsis overflow-hidden block default-transition\" [ngClass]=\"{'opacity-0 w-0': colapsed}\">\r\n                        <span>{{Token ? Token.Nome : ''}}</span> <br>\r\n                        <ion-text color=\"secondary\" class=\"text-sm\">\r\n                          &#64;{{Token ? Token.Apelido : ''}}\r\n                        </ion-text>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-full\">\r\n                      <ng-content class=\"size-full\" select=\"[slot=user-popover]\"></ng-content>\r\n                    </div>\r\n                    <div class=\"w-full px-3 py-2 translucid-border !border-x-0 !border-b-0 flex items-center justify-between\">\r\n                      <ion-text> Log Out </ion-text>\r\n                      <ion-button (click)=\"authService.Loggout()\" class=\"size-10 shrink-0\" size=\"small\" color=\"danger\">\r\n                        <ion-icon slot=\"icon-only\" name=\"exit-outline\"></ion-icon> \r\n                      </ion-button>\r\n                    </div>\r\n                  </div>\r\n                </ion-content>\r\n              </ng-template>\r\n            </ion-popover>\r\n          }\r\n        </div>\r\n      </ion-card-content>\r\n    </ion-card>\r\n  </div>\r\n  <div class=\"size-full relative p-2 bg-light\">\r\n    <div class=\"size-full relative rounded-2xl content-shadow overflow-hidden {{backdrop}}\" style=\"--shadow-color: {{shadowColor}}\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["#popover-user{--width: 17rem}.content-shadow{--shadow-color: color-mix(in srgb, var(--ion-color-primary) 15%, transparent);box-shadow:0 0 0 1px var(--shadow-color),0 6px 10px -4px var(--shadow-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i3.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: RouterLinkWithHref, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MainContentComponent, isStandalone: true, selector: "main-content", inputs: { backdrop: "backdrop", shadowColor: "shadowColor", colapsed: "colapsed", drawerComponent: "drawerComponent" }, viewQueries: [{ propertyName: "FullScreenConteiner", first: true, predicate: ["target"], descendants: true }], ngImport: i0, template: "<div class=\"size-full flex flex-col\" [ngClass]=\"{'bg-light/50': fullScreen}\" #target>\r\n  <div class=\"w-full h-14 relative shrink-0\">\r\n    <ion-card class=\"m-0 rounded-none size-full border-none\">\r\n      <ion-card-content class=\"p-0 px-2 size-full flex\">\r\n        <div class=\"w-1/2 h-full flex items-center justify-start\">\r\n          @if (!fullScreen) {\r\n            <ion-menu-button  [routerLink]=\"['/']\" [autoHide]=\"true\"></ion-menu-button>\r\n          }\r\n          <ng-content select=\"[slot=start]\"></ng-content>\r\n        </div>\r\n\r\n        <div class=\"w-1/2 h-full flex items-center justify-end gap-2\">\r\n          <ng-content select=\"[slot=end]\"></ng-content>\r\n\r\n          <ion-button (click)=\"FullScreen()\" fill=\"outline\" color=\"dark\" size=\"small\" class=\"size-10 aspect-square  portrait:hidden\">\r\n            <ion-icon slot=\"icon-only\" name=\"expand\"></ion-icon>\r\n          </ion-button>\r\n\r\n\r\n          @if (!fullScreen) {\r\n            <div #anchor>\r\n              <ion-button (click)=\"userPopover.present($event)\" size=\"small\" class=\"size-10 aspect-square\">\r\n                <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n              </ion-button>\r\n            </div>\r\n            <sion-popover #userPopover [anchor]=\"anchor\" [flip]=\"false\" width=\"13rem\">\r\n              <div class=\"w-full flex flex-col overflow-hidden\">\r\n                <div class=\"w-full flex p-2 gap-2 overflow-hidden\">\r\n                  <div class=\"size-10 shrink-0 aspect-square rounded-2xl text-sm flex items-center justify-center bg-primary\">\r\n                    <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n                  </div>\r\n\r\n                  <div class=\"shrink-0 w-full flex flex-col justify-center items-start overflow-hidden text-sm\">\r\n                    <span class=\"truncate\"> {{Token ? Token.Nome : ''}} </span>\r\n                    <span class=\"truncate text-secondary\"> &#64;{{Token ? Token.Apelido : ''}} </span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"w-full\">\r\n                  <ng-content class=\"size-full\" select=\"[slot=user-popover]\"></ng-content>\r\n                </div>\r\n\r\n                <div class=\"w-full p-1 !pb-0 translucid-border !border-x-0 !border-b-0\">\r\n                  <div class=\"rounded-xl flex gap-2 items-center justify-start default-transition py-1 px-2\">\r\n                    <ion-icon name=\"contrast\"></ion-icon>\r\n                    <ion-text> Tema </ion-text>\r\n                  </div>\r\n\r\n                  <div class=\"flex flex-col pl-4\">\r\n                    <ion-radio-group alignment=\"start\" [allowEmptySelection]=\"false\" [value]=\"Theme\" (ionChange)=\"SetTheme($event.detail.value)\">\r\n                      <ion-item class=\"bg-transparent\" lines=\"full\">\r\n                        <ion-icon name=\"cog\" slot=\"start\"></ion-icon>\r\n                        <ion-radio class=\"w-full\" [value]=\"0\">Sistema</ion-radio>\r\n                      </ion-item>\r\n                      <ion-item class=\"bg-transparent\" lines=\"full\">\r\n                        <ion-icon name=\"sunny\" slot=\"start\"></ion-icon>\r\n                        <ion-radio class=\"w-full\" [value]=\"1\">Claro</ion-radio>\r\n                      </ion-item>\r\n                      <ion-item class=\"bg-transparent\" lines=\"none\">\r\n                        <ion-icon name=\"moon\" slot=\"start\"></ion-icon>\r\n                        <ion-radio class=\"w-full\" [value]=\"2\">Escuro</ion-radio>\r\n                      </ion-item>\r\n                    </ion-radio-group>\r\n\r\n\r\n                    <!-- <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden\">\r\n                      <div class=\"rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2\">\r\n                        <ion-checkbox [checked]=\"Theme == 0\" (ionChange)=\"SetTheme(0)\" ></ion-checkbox>\r\n                        <ion-icon name=\"cog\"></ion-icon>\r\n                        <ion-text> Sistema </ion-text>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden\">\r\n                      <div class=\"rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2\">\r\n                        <ion-checkbox [checked]=\"Theme == 1\" (ionChange)=\"SetTheme(1)\" ></ion-checkbox>\r\n                        <ion-icon name=\"sunny\"></ion-icon>\r\n                        <ion-text> Claro </ion-text>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden\">\r\n                      <div class=\"rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2\">\r\n                        <ion-checkbox [checked]=\"Theme == 2\" (ionChange)=\"SetTheme(2)\" ></ion-checkbox>\r\n                        <ion-icon name=\"moon\"></ion-icon>\r\n                        <ion-text> Escuro </ion-text>\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0\">\r\n                  <div (click)=\"authService.Loggout()\" class=\"rounded-xl flex gap-2 cursor-pointer items-center justify-start hover:bg-medium/10 default-transition py-1 px-2\">\r\n                    <ion-icon color=\"danger\" name=\"exit\"></ion-icon>\r\n                    <ion-text> Log Out </ion-text>\r\n                  </div>\r\n\r\n                  <!-- <ion-text> Log Out </ion-text>\r\n                  <ion-button (click)=\"authService.Loggout()\" class=\"size-8 shrink-0\" size=\"small\" fill=\"clear\" color=\"danger\">\r\n                    <ion-icon slot=\"icon-only\" name=\"exit-outline\"></ion-icon> \r\n                  </ion-button> -->\r\n                </div>\r\n              </div>\r\n\r\n              <!-- <div class=\"size-full\">\r\n                <div class=\"w-full p-1 flex items-center\">\r\n                  <div class=\"size-10 shrink-0 aspect-square rounded-2xl text-sm flex items-center justify-center default-transition\" style=\"background-color: var(--ion-color-primary);\">\r\n                    <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n                  </div>\r\n                  <div class=\"grow min-w-10 p-2 justify-center items-center whitespace-nowrap text-ellipsis overflow-hidden block default-transition\" [ngClass]=\"{'opacity-0 w-0': colapsed}\">\r\n                    <span>{{Token ? Token.Nome : ''}}</span> <br>\r\n                    <ion-text color=\"secondary\" class=\"text-sm\">\r\n                      &#64;{{Token ? Token.Apelido : ''}}\r\n                    </ion-text>\r\n                  </div>\r\n                </div>\r\n                <div class=\"w-full\">\r\n                  <ng-content class=\"size-full\" select=\"[slot=user-popover]\"></ng-content>\r\n                </div>\r\n                <div class=\"w-full p-1 px-2 translucid-border !border-x-0 !border-b-0 flex items-center justify-between\">\r\n                  <div class=\"hover:bg-medium/30 default-transition size-full\">\r\n                    <ion-button color=\"dark\" fill=\"clear\" size=\"small\" class=\"rounded-xl w-full text-left overflow-hidden\">\r\n                      <ion-icon slot=\"start\" name=\"contrast\"></ion-icon>\r\n                      <ion-label class=\"text-sm\">Tema</ion-label>\r\n                    </ion-button>\r\n                  </div>\r\n                </div>\r\n                <div class=\"w-full p-1 px-2 translucid-border !border-x-0 !border-b-0 flex items-center justify-between\">\r\n                  <ion-text> Log Out </ion-text>\r\n                  <ion-button (click)=\"authService.Loggout()\" class=\"size-8 shrink-0\" size=\"small\" fill=\"clear\" color=\"danger\">\r\n                    <ion-icon slot=\"icon-only\" name=\"exit-outline\"></ion-icon> \r\n                  </ion-button>\r\n                </div>\r\n              </div> -->\r\n            </sion-popover>\r\n          }\r\n        </div>\r\n      </ion-card-content>\r\n    </ion-card>\r\n  </div>\r\n  <div class=\"size-full relative p-2 pt-0 bg-light\">\r\n    <div class=\"size-full relative rounded-2xl content-shadow overflow-hidden {{backdrop}}\" style=\"--shadow-color: {{shadowColor}}\">\r\n      <ng-content></ng-content> \r\n    </div>\r\n  </div>\r\n</div>", styles: ["#popover-user{--width: 17rem}.content-shadow{--shadow-color: color-mix(in srgb, var(--ion-color-primary) 15%, transparent);box-shadow:0 0 0 1px var(--shadow-color),0 6px 10px -4px var(--shadow-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i3.IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: i3.IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i3.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: RouterLinkWithHref, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SIonPopoverModule }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "isVisibleChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MainContentComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, IonicModule, RouterLinkWithHref], selector: 'main-content', template: "<div class=\"size-full flex flex-col\" [ngClass]=\"{'bg-light/50': fullScreen}\" #target>\r\n  <div class=\"w-full h-14 relative shrink-0\">\r\n    <ion-card class=\"m-0 rounded-none size-full border-none\">\r\n      <ion-card-content class=\"p-0 px-2 size-full flex\">\r\n        <div class=\"w-1/2 h-full flex items-center justify-start\">\r\n          @if (!fullScreen) {\r\n            <ion-menu-button  [routerLink]=\"['/']\" [autoHide]=\"true\"></ion-menu-button>\r\n          }\r\n          <ng-content select=\"[slot=start]\"></ng-content>\r\n        </div>\r\n\r\n        <div class=\"w-1/2 h-full flex items-center justify-end gap-2\">\r\n          <ng-content select=\"[slot=end]\"></ng-content>\r\n         \r\n          <ion-button (click)=\"FullScreen()\" fill=\"outline\" color=\"dark\" size=\"small\" class=\"size-10 aspect-square  portrait:hidden\">\r\n            <ion-icon slot=\"icon-only\" name=\"expand\"></ion-icon>\r\n          </ion-button>\r\n\r\n          @if (!fullScreen) {\r\n            <ion-button (click)=\"userPopover.present($event)\" size=\"small\" class=\"size-10 aspect-square\">\r\n              <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n            </ion-button>\r\n            <ion-popover #userPopover [dismissOnSelect]=\"true\" triggerAction=\"click\">\r\n              <ng-template>\r\n                <ion-content>\r\n                  <div class=\"size-full\">\r\n                    <div class=\"w-full px-3 flex items-center\">\r\n                      <div class=\"size-10 shrink-0 aspect-square rounded-2xl text-sm flex items-center justify-center default-transition\" style=\"background-color: var(--ion-color-primary);\">\r\n                        <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n                      </div>\r\n                      <div class=\"grow min-w-10 p-2 justify-center items-center whitespace-nowrap text-ellipsis overflow-hidden block default-transition\" [ngClass]=\"{'opacity-0 w-0': colapsed}\">\r\n                        <span>{{Token ? Token.Nome : ''}}</span> <br>\r\n                        <ion-text color=\"secondary\" class=\"text-sm\">\r\n                          &#64;{{Token ? Token.Apelido : ''}}\r\n                        </ion-text>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-full\">\r\n                      <ng-content class=\"size-full\" select=\"[slot=user-popover]\"></ng-content>\r\n                    </div>\r\n                    <div class=\"w-full px-3 py-2 translucid-border !border-x-0 !border-b-0 flex items-center justify-between\">\r\n                      <ion-text> Log Out </ion-text>\r\n                      <ion-button (click)=\"authService.Loggout()\" class=\"size-10 shrink-0\" size=\"small\" color=\"danger\">\r\n                        <ion-icon slot=\"icon-only\" name=\"exit-outline\"></ion-icon> \r\n                      </ion-button>\r\n                    </div>\r\n                  </div>\r\n                </ion-content>\r\n              </ng-template>\r\n            </ion-popover>\r\n          }\r\n        </div>\r\n      </ion-card-content>\r\n    </ion-card>\r\n  </div>\r\n  <div class=\"size-full relative p-2 bg-light\">\r\n    <div class=\"size-full relative rounded-2xl content-shadow overflow-hidden {{backdrop}}\" style=\"--shadow-color: {{shadowColor}}\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["#popover-user{--width: 17rem}.content-shadow{--shadow-color: color-mix(in srgb, var(--ion-color-primary) 15%, transparent);box-shadow:0 0 0 1px var(--shadow-color),0 6px 10px -4px var(--shadow-color)}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, IonicModule, RouterLinkWithHref, SIonPopoverModule], selector: 'main-content', template: "<div class=\"size-full flex flex-col\" [ngClass]=\"{'bg-light/50': fullScreen}\" #target>\r\n  <div class=\"w-full h-14 relative shrink-0\">\r\n    <ion-card class=\"m-0 rounded-none size-full border-none\">\r\n      <ion-card-content class=\"p-0 px-2 size-full flex\">\r\n        <div class=\"w-1/2 h-full flex items-center justify-start\">\r\n          @if (!fullScreen) {\r\n            <ion-menu-button  [routerLink]=\"['/']\" [autoHide]=\"true\"></ion-menu-button>\r\n          }\r\n          <ng-content select=\"[slot=start]\"></ng-content>\r\n        </div>\r\n\r\n        <div class=\"w-1/2 h-full flex items-center justify-end gap-2\">\r\n          <ng-content select=\"[slot=end]\"></ng-content>\r\n\r\n          <ion-button (click)=\"FullScreen()\" fill=\"outline\" color=\"dark\" size=\"small\" class=\"size-10 aspect-square  portrait:hidden\">\r\n            <ion-icon slot=\"icon-only\" name=\"expand\"></ion-icon>\r\n          </ion-button>\r\n\r\n\r\n          @if (!fullScreen) {\r\n            <div #anchor>\r\n              <ion-button (click)=\"userPopover.present($event)\" size=\"small\" class=\"size-10 aspect-square\">\r\n                <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n              </ion-button>\r\n            </div>\r\n            <sion-popover #userPopover [anchor]=\"anchor\" [flip]=\"false\" width=\"13rem\">\r\n              <div class=\"w-full flex flex-col overflow-hidden\">\r\n                <div class=\"w-full flex p-2 gap-2 overflow-hidden\">\r\n                  <div class=\"size-10 shrink-0 aspect-square rounded-2xl text-sm flex items-center justify-center bg-primary\">\r\n                    <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n                  </div>\r\n\r\n                  <div class=\"shrink-0 w-full flex flex-col justify-center items-start overflow-hidden text-sm\">\r\n                    <span class=\"truncate\"> {{Token ? Token.Nome : ''}} </span>\r\n                    <span class=\"truncate text-secondary\"> &#64;{{Token ? Token.Apelido : ''}} </span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"w-full\">\r\n                  <ng-content class=\"size-full\" select=\"[slot=user-popover]\"></ng-content>\r\n                </div>\r\n\r\n                <div class=\"w-full p-1 !pb-0 translucid-border !border-x-0 !border-b-0\">\r\n                  <div class=\"rounded-xl flex gap-2 items-center justify-start default-transition py-1 px-2\">\r\n                    <ion-icon name=\"contrast\"></ion-icon>\r\n                    <ion-text> Tema </ion-text>\r\n                  </div>\r\n\r\n                  <div class=\"flex flex-col pl-4\">\r\n                    <ion-radio-group alignment=\"start\" [allowEmptySelection]=\"false\" [value]=\"Theme\" (ionChange)=\"SetTheme($event.detail.value)\">\r\n                      <ion-item class=\"bg-transparent\" lines=\"full\">\r\n                        <ion-icon name=\"cog\" slot=\"start\"></ion-icon>\r\n                        <ion-radio class=\"w-full\" [value]=\"0\">Sistema</ion-radio>\r\n                      </ion-item>\r\n                      <ion-item class=\"bg-transparent\" lines=\"full\">\r\n                        <ion-icon name=\"sunny\" slot=\"start\"></ion-icon>\r\n                        <ion-radio class=\"w-full\" [value]=\"1\">Claro</ion-radio>\r\n                      </ion-item>\r\n                      <ion-item class=\"bg-transparent\" lines=\"none\">\r\n                        <ion-icon name=\"moon\" slot=\"start\"></ion-icon>\r\n                        <ion-radio class=\"w-full\" [value]=\"2\">Escuro</ion-radio>\r\n                      </ion-item>\r\n                    </ion-radio-group>\r\n\r\n\r\n                    <!-- <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden\">\r\n                      <div class=\"rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2\">\r\n                        <ion-checkbox [checked]=\"Theme == 0\" (ionChange)=\"SetTheme(0)\" ></ion-checkbox>\r\n                        <ion-icon name=\"cog\"></ion-icon>\r\n                        <ion-text> Sistema </ion-text>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden\">\r\n                      <div class=\"rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2\">\r\n                        <ion-checkbox [checked]=\"Theme == 1\" (ionChange)=\"SetTheme(1)\" ></ion-checkbox>\r\n                        <ion-icon name=\"sunny\"></ion-icon>\r\n                        <ion-text> Claro </ion-text>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden\">\r\n                      <div class=\"rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2\">\r\n                        <ion-checkbox [checked]=\"Theme == 2\" (ionChange)=\"SetTheme(2)\" ></ion-checkbox>\r\n                        <ion-icon name=\"moon\"></ion-icon>\r\n                        <ion-text> Escuro </ion-text>\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0\">\r\n                  <div (click)=\"authService.Loggout()\" class=\"rounded-xl flex gap-2 cursor-pointer items-center justify-start hover:bg-medium/10 default-transition py-1 px-2\">\r\n                    <ion-icon color=\"danger\" name=\"exit\"></ion-icon>\r\n                    <ion-text> Log Out </ion-text>\r\n                  </div>\r\n\r\n                  <!-- <ion-text> Log Out </ion-text>\r\n                  <ion-button (click)=\"authService.Loggout()\" class=\"size-8 shrink-0\" size=\"small\" fill=\"clear\" color=\"danger\">\r\n                    <ion-icon slot=\"icon-only\" name=\"exit-outline\"></ion-icon> \r\n                  </ion-button> -->\r\n                </div>\r\n              </div>\r\n\r\n              <!-- <div class=\"size-full\">\r\n                <div class=\"w-full p-1 flex items-center\">\r\n                  <div class=\"size-10 shrink-0 aspect-square rounded-2xl text-sm flex items-center justify-center default-transition\" style=\"background-color: var(--ion-color-primary);\">\r\n                    <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n                  </div>\r\n                  <div class=\"grow min-w-10 p-2 justify-center items-center whitespace-nowrap text-ellipsis overflow-hidden block default-transition\" [ngClass]=\"{'opacity-0 w-0': colapsed}\">\r\n                    <span>{{Token ? Token.Nome : ''}}</span> <br>\r\n                    <ion-text color=\"secondary\" class=\"text-sm\">\r\n                      &#64;{{Token ? Token.Apelido : ''}}\r\n                    </ion-text>\r\n                  </div>\r\n                </div>\r\n                <div class=\"w-full\">\r\n                  <ng-content class=\"size-full\" select=\"[slot=user-popover]\"></ng-content>\r\n                </div>\r\n                <div class=\"w-full p-1 px-2 translucid-border !border-x-0 !border-b-0 flex items-center justify-between\">\r\n                  <div class=\"hover:bg-medium/30 default-transition size-full\">\r\n                    <ion-button color=\"dark\" fill=\"clear\" size=\"small\" class=\"rounded-xl w-full text-left overflow-hidden\">\r\n                      <ion-icon slot=\"start\" name=\"contrast\"></ion-icon>\r\n                      <ion-label class=\"text-sm\">Tema</ion-label>\r\n                    </ion-button>\r\n                  </div>\r\n                </div>\r\n                <div class=\"w-full p-1 px-2 translucid-border !border-x-0 !border-b-0 flex items-center justify-between\">\r\n                  <ion-text> Log Out </ion-text>\r\n                  <ion-button (click)=\"authService.Loggout()\" class=\"size-8 shrink-0\" size=\"small\" fill=\"clear\" color=\"danger\">\r\n                    <ion-icon slot=\"icon-only\" name=\"exit-outline\"></ion-icon> \r\n                  </ion-button>\r\n                </div>\r\n              </div> -->\r\n            </sion-popover>\r\n          }\r\n        </div>\r\n      </ion-card-content>\r\n    </ion-card>\r\n  </div>\r\n  <div class=\"size-full relative p-2 pt-0 bg-light\">\r\n    <div class=\"size-full relative rounded-2xl content-shadow overflow-hidden {{backdrop}}\" style=\"--shadow-color: {{shadowColor}}\">\r\n      <ng-content></ng-content> \r\n    </div>\r\n  </div>\r\n</div>", styles: ["#popover-user{--width: 17rem}.content-shadow{--shadow-color: color-mix(in srgb, var(--ion-color-primary) 15%, transparent);box-shadow:0 0 0 1px var(--shadow-color),0 6px 10px -4px var(--shadow-color)}\n"] }]
         }], ctorParameters: () => [{ type: AuthService }], propDecorators: { backdrop: [{
                 type: Input
             }], shadowColor: [{
@@ -11056,6 +11120,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: ViewChild,
                 args: ['target']
             }] } });
+var Theme;
+(function (Theme) {
+    Theme[Theme["System"] = 0] = "System";
+    Theme[Theme["Light"] = 1] = "Light";
+    Theme[Theme["Dark"] = 2] = "Dark";
+})(Theme || (Theme = {}));
 
 class StepComponent {
     constructor() {
@@ -11345,6 +11415,7 @@ class ErrorInterceptor {
             // }
             if (error.status == 401) {
                 this.auth.Loggout();
+                this.router.navigate(['/login'], { queryParams: { returnUrl: window.location.pathname } });
             }
             else if (error.status == 403) {
                 this.router.navigate(['/403']);