@sapphire-ion/framework 1.0.46 → 1.2.1

package/fesm2022/sapphire-ion-framework.mjs

@@ -3,7 +3,7 @@ import { NavController, IonicModule, IonDatetime, IonModal, IonAlert, IonActionS
 import { FilePicker } from '@capawesome/capacitor-file-picker';
 import { CameraSource } from '@capacitor/camera';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, NgModule, Inject, inject, signal, model, Component, Input, Pipe, input, computed, effect, contentChildren, output, forwardRef, ContentChildren, EventEmitter, Output, HostListener, ViewChild, Directive, ElementRef, TemplateRef, ContentChild, ViewChildren, HostBinding, ViewContainerRef } from '@angular/core';
+import { Injectable, InjectionToken, NgModule, Inject, inject, signal, model, Component, Input, Pipe, input, computed, effect, contentChildren, output, forwardRef, ContentChildren, EventEmitter, Output, HostListener, ViewChild, Directive, ElementRef, TemplateRef, ChangeDetectionStrategy, ContentChild, ViewChildren, HostBinding, ViewContainerRef } from '@angular/core';
 import moment from 'moment';
 import { BehaviorSubject, firstValueFrom, from, switchMap, Subject, takeUntil, distinctUntilChanged, debounceTime, lastValueFrom, Observable, tap, finalize, share, catchError } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
@@ -2812,8 +2812,6 @@ class SIonPopoverComponent {
         this.state = POPOVER_STATE.IDLE;
     }
     ngAfterViewInit() {
-        this._instance = this.contentContainer.nativeElement;
-        document.body.appendChild(this._instance);
         //TODO: Use Renderer2 to add event listeners for better Angular compatibility when updating to Angular 19
         this.ngZone.runOutsideAngular(() => {
             this.documentClickListener = (event) => {
@@ -2832,6 +2830,9 @@ class SIonPopoverComponent {
             document.addEventListener('click', this.documentClickListener, true);
         });
     }
+    get _instance() {
+        return this.contentContainer?.nativeElement;
+    }
     get arrowEl() {
         return this._instance.querySelector('.popover-arrow');
     }
@@ -2839,6 +2840,7 @@ class SIonPopoverComponent {
         if (this.state != POPOVER_STATE.IDLE) {
             return;
         }
+        document.body.appendChild(this._instance);
         this.onWillPresent.emit();
         this.state = POPOVER_STATE.PRESENTING;
         const refEl = this.anchor ? this.anchor : event.target;
@@ -2865,6 +2867,7 @@ class SIonPopoverComponent {
         this.state = POPOVER_STATE.DISMISSING;
         this._instance.classList.remove('show');
         await Timeout(200);
+        this._instance?.remove();
         this.state = POPOVER_STATE.IDLE;
         this.onDidDismiss.emit();
     }
@@ -2892,8 +2895,7 @@ class SIonPopoverComponent {
     }
     ngOnDestroy() {
         if (this._instance) {
-            this._instance.remove();
-            this._instance = undefined;
+            this._instance?.remove();
         }
         if (this._embeddedView) {
             this._embeddedView.destroy();
@@ -2919,11 +2921,11 @@ class SIonPopoverComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["popoverWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div #popoverWrapper \r\n  class=\"popover-wrapper translucid-border\"\r\n  [style.height]=\"height\"\r\n  [style.width]=\"width\"\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    }\"\r\n> \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 bg-light/80': fill == 'blur',\r\n      '!border-0'       : fill == 'clear',\r\n    }\"\r\n  ></div>\r\n  <ng-content #content></ng-content>\r\n</div>", styles: [".popover-wrapper{border-radius:.75rem;width:max-content;position:fixed;will-change:left,top,bottom,right,auto,opacity,filter;opacity:0;transition:opacity .15s ease-in-out,transform .15s ease-in-out,filter .15s ease-in-out;min-width:2rem;min-height:2rem;filter:grayscale(.9);transform:scale(.95);pointer-events:auto!important;z-index:10001!important}.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%))}.show{filter:grayscale(0);transform:scale(1);opacity:1}.popover-wrapper:not(.show){pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["popoverWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div #popoverWrapper \r\n  class=\"popover-wrapper translucid-border\"\r\n  [style.height]=\"height\"\r\n  [style.width]=\"width\"\r\n  [ngClass]=\"{\r\n      'bg-light'        : fill == 'solid',\r\n      'bg-transparent'  : fill == 'outline',\r\n      'bg-light/90'     : fill == 'blur',\r\n      '!border-0'       : fill == 'clear',\r\n    }\"\r\n> \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      'bg-light/90'     : fill == 'blur',\r\n      '!border-0'       : fill == 'clear',\r\n    }\"\r\n  ></div>\r\n  <ng-content #content></ng-content>\r\n</div>", styles: [".popover-wrapper{border-radius:.75rem;width:max-content;position:fixed;will-change:left,top,bottom,right,auto,opacity,filter;opacity:0;transition:opacity .15s ease-in-out,transform .15s ease-in-out,filter .15s ease-in-out;min-width:2rem;min-height:2rem;filter:grayscale(.9);transform:scale(.95);pointer-events:auto!important;z-index:10001!important}.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%))}.show{filter:grayscale(0);transform:scale(1);opacity:1}.popover-wrapper:not(.show){pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.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: "<div #popoverWrapper \r\n  class=\"popover-wrapper translucid-border\"\r\n  [style.height]=\"height\"\r\n  [style.width]=\"width\"\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    }\"\r\n> \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 bg-light/80': fill == 'blur',\r\n      '!border-0'       : fill == 'clear',\r\n    }\"\r\n  ></div>\r\n  <ng-content #content></ng-content>\r\n</div>", styles: [".popover-wrapper{border-radius:.75rem;width:max-content;position:fixed;will-change:left,top,bottom,right,auto,opacity,filter;opacity:0;transition:opacity .15s ease-in-out,transform .15s ease-in-out,filter .15s ease-in-out;min-width:2rem;min-height:2rem;filter:grayscale(.9);transform:scale(.95);pointer-events:auto!important;z-index:10001!important}.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%))}.show{filter:grayscale(0);transform:scale(1);opacity:1}.popover-wrapper:not(.show){pointer-events:none!important}\n"] }]
+            args: [{ selector: 'sion-popover', template: "<div #popoverWrapper \r\n  class=\"popover-wrapper translucid-border\"\r\n  [style.height]=\"height\"\r\n  [style.width]=\"width\"\r\n  [ngClass]=\"{\r\n      'bg-light'        : fill == 'solid',\r\n      'bg-transparent'  : fill == 'outline',\r\n      'bg-light/90'     : fill == 'blur',\r\n      '!border-0'       : fill == 'clear',\r\n    }\"\r\n> \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      'bg-light/90'     : fill == 'blur',\r\n      '!border-0'       : fill == 'clear',\r\n    }\"\r\n  ></div>\r\n  <ng-content #content></ng-content>\r\n</div>", styles: [".popover-wrapper{border-radius:.75rem;width:max-content;position:fixed;will-change:left,top,bottom,right,auto,opacity,filter;opacity:0;transition:opacity .15s ease-in-out,transform .15s ease-in-out,filter .15s ease-in-out;min-width:2rem;min-height:2rem;filter:grayscale(.9);transform:scale(.95);pointer-events:auto!important;z-index:10001!important}.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%))}.show{filter:grayscale(0);transform:scale(1);opacity:1}.popover-wrapper:not(.show){pointer-events:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { fill: [{
                 type: Input
             }], arrow: [{
@@ -3359,6 +3361,17 @@ class InputSelectComponent extends CustomInput {
             this.currentItems = this.lstOptionsItemValue().find(p => p.selected);
         }
     }
+    onResize(event) {
+        this.windowSize.set(window.innerWidth);
+        this.SetInterface();
+    }
+    SetInterface() {
+        var _interface = this.configuration().interface;
+        if (_interface == SelectInterfaces.Dynamic) {
+            _interface = isPortrait() ? SelectInterfaces.ActionSheet : SelectInterfaces.Popover;
+        }
+        this.interface.set(_interface);
+    }
     AddPage(event) {
         this.infiniteScrollPage.set(this.infiniteScrollPage() + 1);
         event.target.complete();
@@ -3386,6 +3399,9 @@ class InputSelectComponent extends CustomInput {
                     text: 'Cancelar',
                     role: 'cancel',
                     data: { action: 'cancel', },
+                    handler() {
+                        this.renderInterface = false;
+                    },
                 }
             ];
         }
@@ -3408,8 +3424,9 @@ class InputSelectComponent extends CustomInput {
         }
         this.Present(event);
     }
-    constructor() {
+    constructor(cdr) {
         super();
+        this.cdr = cdr;
         this.SelectInterfaces = SelectInterfaces;
         /** Items disponíveis no select */
         this.items = model([]);
@@ -3431,6 +3448,8 @@ class InputSelectComponent extends CustomInput {
                 return item;
             });
         });
+        this.windowSize = signal(window.innerWidth);
+        this.interface = signal(undefined);
         this.lstOptions = [];
         this.lstOptionsAlert = [];
         this.lstButtonsAlert = [];
@@ -3445,13 +3464,16 @@ class InputSelectComponent extends CustomInput {
         this.destroy$ = new Subject();
         this.destroyed = false;
         this.floatingVisible = false;
+        this.renderInterface = false;
         effect(() => {
+            this.cdr.markForCheck();
             this.UpdateLstOptions(this.searchValue());
             this.UpdateSelected();
         }, { allowSignalWrites: true });
     }
     async ngOnInit() {
         await super.ngOnInit();
+        this.SetInterface();
         this.configuration().loader.AddComponent(this);
         this.configuration().loader.Refresh(this.items());
     }
@@ -3513,7 +3535,6 @@ class InputSelectComponent extends CustomInput {
         const observable = this.searchBarControl.valueChanges.pipe(takeUntil(this.destroy$), distinctUntilChanged(), debounceTime(200));
         //OnSearchChange
         this.searchBarSubscription = observable.subscribe(async (value) => {
-            await this.ionContent.scrollToTop();
             this.selectedIndex = undefined;
             this.searchValue.set(value);
         });
@@ -3576,27 +3597,20 @@ class InputSelectComponent extends CustomInput {
         }
     }
     async Present(event) {
-        if (this.configuration().interface == SelectInterfaces.Dynamic) {
-            if (isPortrait()) {
-                // Modal
-                await this.modal.present();
-                this.inputSearchBar.nativeElement.focus();
-                return;
-            }
-            // Popover
-            await this.popover.present(event);
-            this.inputSearchBar.nativeElement.focus();
-        }
-        else if (this.configuration().interface == SelectInterfaces.Modal) {
+        this.renderInterface = true;
+        this.cdr.markForCheck();
+        await Timeout(0); //Espera a renderização da interface
+        if (this.interface() == SelectInterfaces.Modal) {
             await this.modal.present();
             this.inputSearchBar.nativeElement.focus();
         }
-        else if (this.configuration().interface == SelectInterfaces.Popover) {
+        else if (this.interface() == SelectInterfaces.Popover) {
             await this.popover.present(event);
             this.inputSearchBar.nativeElement.focus();
         }
-        else if (this.configuration().interface == SelectInterfaces.ActionSheet) {
+        else if (this.interface() == SelectInterfaces.ActionSheet) {
             await this.actionSheet.present();
+            this.inputSearchBar?.nativeElement?.focus();
         }
     }
     async Dismiss() {
@@ -3615,6 +3629,7 @@ class InputSelectComponent extends CustomInput {
         }
     }
     OnDismiss() {
+        this.renderInterface = false;
         this.floatingVisible = false;
         this.searchValue.set('');
         this.searchBarControl.setValue('');
@@ -3625,19 +3640,22 @@ class InputSelectComponent extends CustomInput {
     isArray(obj) {
         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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], 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: { "window:resize": "onResize($event)", "document:keydown": "HandleKeyboardEvent($event)" } }, providers: [
             ...InputProviderFactory.GetProviders(InputSelectComponent),
             { provide: CustomInput, useExisting: forwardRef(() => 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 }, { propertyName: "alert", first: true, predicate: IonAlert, descendants: true }, { propertyName: "actionSheet", first: true, predicate: IonActionSheet, descendants: true }, { propertyName: "ionContent", first: true, predicate: ["scrollContent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"setFocus($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 class=\"error-container\" (click)=\"configuration().loader.Refresh()\" [class.active]=\"configuration().loader.error && !loadingFromLoader\">\r\n    <ion-icon class=\"text-xl\" color=\"danger\" name=\"refresh-circle\"></ion-icon>\r\n  </div>\r\n</div>\r\n\r\n@if(!disabled()){\r\n  @if(configuration().interface == SelectInterfaces.Popover || configuration().interface == SelectInterfaces.Dynamic){\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  @if(configuration().interface == SelectInterfaces.Modal || configuration().interface == SelectInterfaces.Dynamic){\r\n    <ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" [initialBreakpoint]=\"0.9\" [keepContentsMounted]=\"true\">\r\n      <ng-template>\r\n        <ion-header>\r\n          <ion-toolbar>\r\n            <ion-title class=\"text-center\">\r\n              {{label()}}\r\n            </ion-title>\r\n            <ion-buttons slot=\"end\">\r\n              <ion-button (click)=\"modal.dismiss()\">\r\n                <ion-icon name=\"close-circle\"></ion-icon>\r\n              </ion-button>\r\n            </ion-buttons>\r\n          </ion-toolbar>\r\n        </ion-header>\r\n  \r\n        <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n      </ng-template>\r\n    </ion-modal>\r\n  }\r\n\r\n  @if (configuration().interface == SelectInterfaces.ActionSheet ) {\r\n    <ion-action-sheet #actionSheet trigger=\"open-action-sheet\" [header]=\"label()\" [buttons]=\"lstOptionsActionSheet\"></ion-action-sheet>\r\n  }\r\n}\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      <ion-content #scrollContent class=\"size-full\" [scrollY]=\"true\">\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        @if(configuration().useInfiniteScroll){\r\n          <ion-infinite-scroll threshold=\"10px\" *ngIf=\"lstOptions.length && lstOptions.length != lstOptionsItemValue().length\" (ionInfinite)=\"AddPage($event)\">\r\n            <ion-infinite-scroll-content></ion-infinite-scroll-content>\r\n          </ion-infinite-scroll>\r\n        }\r\n      </ion-content>\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%}.error-container{pointer-events:none;position:absolute;bottom:0;left:0;z-index:200;display:flex;width:100%;height:100%;--tw-translate-y: -3rem;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));align-items:center;justify-content:center;opacity:0;will-change:opacity,auto;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.error-container.active{pointer-events:auto!important;--tw-translate-y: 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}\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 2px 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:auto;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: i1.IonActionSheet, selector: "ion-action-sheet", inputs: ["animated", "backdropDismiss", "buttons", "cssClass", "enterAnimation", "header", "htmlAttributes", "isOpen", "keyboardClose", "leaveAnimation", "mode", "subHeader", "translucent", "trigger"] }, { kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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"] }] }); }
+        ], 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 }, { propertyName: "alert", first: true, predicate: IonAlert, descendants: true }, { propertyName: "actionSheet", first: true, predicate: IonActionSheet, descendants: true }, { propertyName: "ionContent", first: true, predicate: ["scrollContent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"setFocus($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 class=\"error-container\" (click)=\"configuration().loader.Refresh()\" [class.active]=\"configuration().loader.error && !loadingFromLoader\">\r\n    <ion-icon class=\"text-xl\" color=\"danger\" name=\"refresh-circle\"></ion-icon>\r\n  </div>\r\n</div>\r\n\r\n@if(!disabled() && renderInterface){\r\n  @switch (interface()) {\r\n    @case (SelectInterfaces.Popover) {\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    @case (SelectInterfaces.Modal) {\r\n      <ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" [initialBreakpoint]=\"0.9\" [keepContentsMounted]=\"true\">\r\n        <ng-template>\r\n          <ion-header>\r\n            <ion-toolbar>\r\n              <ion-title class=\"text-center\">\r\n                {{label()}}\r\n              </ion-title>\r\n              <ion-buttons slot=\"end\">\r\n                <ion-button (click)=\"modal.dismiss()\">\r\n                  <ion-icon name=\"close-circle\"></ion-icon>\r\n                </ion-button>\r\n              </ion-buttons>\r\n            </ion-toolbar>\r\n          </ion-header>\r\n    \r\n          <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n        </ng-template>\r\n      </ion-modal>\r\n    }\r\n    @case (SelectInterfaces.ActionSheet) {\r\n      <ion-action-sheet #actionSheet trigger=\"open-action-sheet\" [header]=\"label()\" [buttons]=\"lstOptionsActionSheet\"></ion-action-sheet>\r\n    }\r\n  }\r\n}\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      <ion-content #scrollContent class=\"size-full\" [scrollY]=\"true\">\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        @if(configuration().useInfiniteScroll){\r\n          <ion-infinite-scroll threshold=\"10px\" *ngIf=\"lstOptions.length && lstOptions.length != lstOptionsItemValue().length\" (ionInfinite)=\"AddPage($event)\">\r\n            <ion-infinite-scroll-content></ion-infinite-scroll-content>\r\n          </ion-infinite-scroll>\r\n        }\r\n      </ion-content>\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%}.error-container{pointer-events:none;position:absolute;bottom:0;left:0;z-index:200;display:flex;width:100%;height:100%;--tw-translate-y: -3rem;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));align-items:center;justify-content:center;opacity:0;will-change:opacity,auto;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.error-container.active{pointer-events:auto!important;--tw-translate-y: 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}\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 2px 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:auto;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: i1.IonActionSheet, selector: "ion-action-sheet", inputs: ["animated", "backdropDismiss", "buttons", "cssClass", "enterAnimation", "header", "htmlAttributes", "isOpen", "keyboardClose", "leaveAnimation", "mode", "subHeader", "translucent", "trigger"] }, { kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-select', providers: [
+            args: [{ selector: 'input-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         ...InputProviderFactory.GetProviders(InputSelectComponent),
                         { provide: CustomInput, useExisting: forwardRef(() => InputSelectComponent) },
-                    ], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"setFocus($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 class=\"error-container\" (click)=\"configuration().loader.Refresh()\" [class.active]=\"configuration().loader.error && !loadingFromLoader\">\r\n    <ion-icon class=\"text-xl\" color=\"danger\" name=\"refresh-circle\"></ion-icon>\r\n  </div>\r\n</div>\r\n\r\n@if(!disabled()){\r\n  @if(configuration().interface == SelectInterfaces.Popover || configuration().interface == SelectInterfaces.Dynamic){\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  @if(configuration().interface == SelectInterfaces.Modal || configuration().interface == SelectInterfaces.Dynamic){\r\n    <ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" [initialBreakpoint]=\"0.9\" [keepContentsMounted]=\"true\">\r\n      <ng-template>\r\n        <ion-header>\r\n          <ion-toolbar>\r\n            <ion-title class=\"text-center\">\r\n              {{label()}}\r\n            </ion-title>\r\n            <ion-buttons slot=\"end\">\r\n              <ion-button (click)=\"modal.dismiss()\">\r\n                <ion-icon name=\"close-circle\"></ion-icon>\r\n              </ion-button>\r\n            </ion-buttons>\r\n          </ion-toolbar>\r\n        </ion-header>\r\n  \r\n        <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n      </ng-template>\r\n    </ion-modal>\r\n  }\r\n\r\n  @if (configuration().interface == SelectInterfaces.ActionSheet ) {\r\n    <ion-action-sheet #actionSheet trigger=\"open-action-sheet\" [header]=\"label()\" [buttons]=\"lstOptionsActionSheet\"></ion-action-sheet>\r\n  }\r\n}\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      <ion-content #scrollContent class=\"size-full\" [scrollY]=\"true\">\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        @if(configuration().useInfiniteScroll){\r\n          <ion-infinite-scroll threshold=\"10px\" *ngIf=\"lstOptions.length && lstOptions.length != lstOptionsItemValue().length\" (ionInfinite)=\"AddPage($event)\">\r\n            <ion-infinite-scroll-content></ion-infinite-scroll-content>\r\n          </ion-infinite-scroll>\r\n        }\r\n      </ion-content>\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%}.error-container{pointer-events:none;position:absolute;bottom:0;left:0;z-index:200;display:flex;width:100%;height:100%;--tw-translate-y: -3rem;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));align-items:center;justify-content:center;opacity:0;will-change:opacity,auto;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.error-container.active{pointer-events:auto!important;--tw-translate-y: 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}\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 2px 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:auto;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: [{
+                    ], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"setFocus($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 class=\"error-container\" (click)=\"configuration().loader.Refresh()\" [class.active]=\"configuration().loader.error && !loadingFromLoader\">\r\n    <ion-icon class=\"text-xl\" color=\"danger\" name=\"refresh-circle\"></ion-icon>\r\n  </div>\r\n</div>\r\n\r\n@if(!disabled() && renderInterface){\r\n  @switch (interface()) {\r\n    @case (SelectInterfaces.Popover) {\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    @case (SelectInterfaces.Modal) {\r\n      <ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" [initialBreakpoint]=\"0.9\" [keepContentsMounted]=\"true\">\r\n        <ng-template>\r\n          <ion-header>\r\n            <ion-toolbar>\r\n              <ion-title class=\"text-center\">\r\n                {{label()}}\r\n              </ion-title>\r\n              <ion-buttons slot=\"end\">\r\n                <ion-button (click)=\"modal.dismiss()\">\r\n                  <ion-icon name=\"close-circle\"></ion-icon>\r\n                </ion-button>\r\n              </ion-buttons>\r\n            </ion-toolbar>\r\n          </ion-header>\r\n    \r\n          <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n        </ng-template>\r\n      </ion-modal>\r\n    }\r\n    @case (SelectInterfaces.ActionSheet) {\r\n      <ion-action-sheet #actionSheet trigger=\"open-action-sheet\" [header]=\"label()\" [buttons]=\"lstOptionsActionSheet\"></ion-action-sheet>\r\n    }\r\n  }\r\n}\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      <ion-content #scrollContent class=\"size-full\" [scrollY]=\"true\">\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        @if(configuration().useInfiniteScroll){\r\n          <ion-infinite-scroll threshold=\"10px\" *ngIf=\"lstOptions.length && lstOptions.length != lstOptionsItemValue().length\" (ionInfinite)=\"AddPage($event)\">\r\n            <ion-infinite-scroll-content></ion-infinite-scroll-content>\r\n          </ion-infinite-scroll>\r\n        }\r\n      </ion-content>\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%}.error-container{pointer-events:none;position:absolute;bottom:0;left:0;z-index:200;display:flex;width:100%;height:100%;--tw-translate-y: -3rem;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));align-items:center;justify-content:center;opacity:0;will-change:opacity,auto;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.error-container.active{pointer-events:auto!important;--tw-translate-y: 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}\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 2px 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:auto;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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }], labelTemplate: [{
                 type: ContentChild,
                 args: [SIonLabelTemplateDirective, { read: TemplateRef }]
             }], optionTemplate: [{
@@ -10533,11 +10551,13 @@ class DefaultPage {
         };
         this.title = this.coreService.environment.applicationName;
         this.lstMenu = [];
-        this.configuration = null;
+        this.lstImage = null;
     }
     async ngOnInit() {
         this.loading = true;
-        this.configuration = await firstValueFrom(this.route.data);
+        const conf = await firstValueFrom(this.route.data);
+        this.lstImage = Array.isArray(conf.image) ? conf.image :
+            conf.image ? [conf.image] : undefined;
         this.lstMenu = await firstValueFrom(this.routeProviderService.GetData());
         this.loading = false;
     }
@@ -10545,7 +10565,7 @@ class DefaultPage {
         this.genericService.SetTitle(item.title);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultPage, deps: [{ token: i2$2.ActivatedRoute }, { token: EnvironmentService }, { token: GenericService }, { token: RouteProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DefaultPage, isStandalone: true, selector: "app-default", ngImport: i0, template: "<ion-content [fullscreen]=\"true\">\r\n  <div class=\"wrapper\">\r\n    <ion-breadcrumbs>\r\n      <ion-breadcrumb [routerLink]=\"[null]\">\r\n        <ion-icon slot=\"start\" name=\"home\"></ion-icon> Inicio\r\n      </ion-breadcrumb>\r\n    </ion-breadcrumbs>\r\n  \r\n    <ion-card>\r\n      <ion-card-content class=\"flex flex-col items-center justify-center !p-8\">\r\n        <div class=\"w-full shrink-0 text-center\">\r\n          @if(configuration?.image){\r\n            <ion-img [class]=\"configuration.image.classes\" [src]=\"configuration.image.src\" (ion-error)=\"configuration.image = null\"></ion-img>\r\n          }\r\n          @else {\r\n            <ion-text class=\"text-8xl font-poppins w-full\"> {{title}} </ion-text>\r\n          }\r\n        </div>\r\n        <div class=\"!overflow-y-auto w-full portrait:grow relative\">\r\n          <loading [type]=\"3\" [loading]=\"loading\"></loading>\r\n          <div class=\"flex flex-wrap items-start justify-start mt-4 portrait:!grid portrait:!grid-cols-1\"> \r\n            @for (item of lstMenu; track item; let i = $index) {\r\n              @if(item.type == \"Menu\"){\r\n                <ion-button fill=\"outline\" class=\"mx-1 mt-2 flex-grow shrink-0\" [routerLink]=\"[item.route]\">\r\n                  <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon> \r\n                  {{useTranslation ? (TranslationModule.Permissao + item.id | translate) : item.title}}\r\n                </ion-button>\r\n              }\r\n              @if(item.type == \"MenuGroup\"){\r\n                <ion-button fill=\"outline\" class=\"mx-1 mt-2 flex-grow shrink-0\" (click)=\"popover.present($event)\">\r\n                  <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon> \r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n                </ion-button>\r\n                <ion-popover #popover class=\"overflow-y-auto\" [dismissOnSelect]=\"true\" triggerAction=\"click\">\r\n                  <ng-template>\r\n                    <ion-list class=\"no-outer-border\">\r\n                      <ion-item class=\"bg-transparent\" (click)=\"SetTitle(menu)\" *ngFor=\"let menu of item.lstMenu\" [routerLink]=\"['./' + menu.route]\" lines=\"none\" detail=\"false\" routerLinkActive=\"selected\">\r\n                        <ion-icon [name]=\"menu.icon\" slot=\"start\"></ion-icon> \r\n                        <ion-label> \r\n                          {{useTranslation ? (TranslationModule.Permissao + menu.id | translate) : menu.title}}  \r\n                        </ion-label>\r\n                      </ion-item>\r\n                    </ion-list>\r\n                  </ng-template>\r\n                </ion-popover>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      </ion-card-content>\r\n    </ion-card>\r\n  </div>\r\n</ion-content>", styles: ["ion-popover::part(content){overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonBreadcrumb, selector: "ion-breadcrumb", inputs: ["active", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "separator", "target"] }, { kind: "component", type: i1.IonBreadcrumbs, selector: "ion-breadcrumbs", inputs: ["color", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "mode"] }, { kind: "component", type: i1.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: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: RouterLinkWithHref, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LoadingComponent, selector: "loading", inputs: ["text", "type", "loading"] }, { 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: DefaultPage, isStandalone: true, selector: "app-default", ngImport: i0, template: "<ion-content [fullscreen]=\"true\">\r\n  <div class=\"wrapper\">\r\n    <ion-breadcrumbs>\r\n      <ion-breadcrumb [routerLink]=\"[null]\">\r\n        <ion-icon slot=\"start\" name=\"home\"></ion-icon> Inicio\r\n      </ion-breadcrumb>\r\n    </ion-breadcrumbs>\r\n  \r\n    <ion-card>\r\n      <ion-card-content class=\"flex flex-col items-center justify-center !p-6\">\r\n        <div class=\"w-full shrink-0 text-center\">\r\n          @if(lstImage){\r\n            @for (item of lstImage; track $index) {\r\n              <ion-img [class]=\"item.classes\" [src]=\"item.src\" (ion-error)=\"lstImage\"></ion-img>\r\n            }\r\n          }\r\n          @else {\r\n            <ion-text class=\"text-8xl font-poppins w-full\"> {{title}} </ion-text>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"overflow-hidden p-2 w-full relative\">\r\n          <loading [type]=\"3\" [loading]=\"loading\"></loading>\r\n          <div class=\"size-full flex flex-wrap portrait:!grid gap-2\">\r\n            @for (item of lstMenu; track item; let i = $index) {\r\n              @if(item.type == \"Menu\"){\r\n                <ion-button fill=\"outline\" class=\"grow min-w-fit\" [routerLink]=\"[item.route]\">\r\n                  <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon> \r\n                  {{useTranslation ? (TranslationModule.Permissao + item.id | translate) : item.title}}\r\n                </ion-button>\r\n              }\r\n              @if(item.type == \"MenuGroup\"){\r\n                <ion-button fill=\"outline\" class=\"grow min-w-fit\" (click)=\"popover.present($event)\">\r\n                  <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon> \r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n                </ion-button>\r\n\r\n                <ion-popover #popover class=\"overflow-y-auto\" [dismissOnSelect]=\"true\" triggerAction=\"click\">\r\n                  <ng-template>\r\n                    <ion-list class=\"no-outer-border\">\r\n                      <ion-item class=\"bg-transparent\" (click)=\"SetTitle(menu)\" *ngFor=\"let menu of item.lstMenu\" [routerLink]=\"['./' + menu.route]\" lines=\"none\" detail=\"false\" routerLinkActive=\"selected\">\r\n                        <ion-icon [name]=\"menu.icon\" slot=\"start\"></ion-icon> \r\n                        <ion-label> \r\n                          {{useTranslation ? (TranslationModule.Permissao + menu.id | translate) : menu.title}}  \r\n                        </ion-label>\r\n                      </ion-item>\r\n                    </ion-list>\r\n                  </ng-template>\r\n                </ion-popover>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- <div class=\"!overflow-y-auto w-full portrait:grow relative\">\r\n          <loading [type]=\"3\" [loading]=\"loading\"></loading>\r\n          <div class=\"flex flex-wrap items-start justify-start mt-4 portrait:!grid portrait:!grid-cols-1\"> \r\n          </div>\r\n        </div> -->\r\n      </ion-card-content>\r\n    </ion-card>\r\n  </div>\r\n</ion-content>", styles: ["ion-popover::part(content){overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonBreadcrumb, selector: "ion-breadcrumb", inputs: ["active", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "separator", "target"] }, { kind: "component", type: i1.IonBreadcrumbs, selector: "ion-breadcrumbs", inputs: ["color", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "mode"] }, { kind: "component", type: i1.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: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: RouterLinkWithHref, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LoadingComponent, selector: "loading", inputs: ["text", "type", "loading"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultPage, decorators: [{
             type: Component,
@@ -10557,7 +10577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         RouterLinkWithHref,
                         LoadingComponent,
                         TranslateModule,
-                    ], template: "<ion-content [fullscreen]=\"true\">\r\n  <div class=\"wrapper\">\r\n    <ion-breadcrumbs>\r\n      <ion-breadcrumb [routerLink]=\"[null]\">\r\n        <ion-icon slot=\"start\" name=\"home\"></ion-icon> Inicio\r\n      </ion-breadcrumb>\r\n    </ion-breadcrumbs>\r\n  \r\n    <ion-card>\r\n      <ion-card-content class=\"flex flex-col items-center justify-center !p-8\">\r\n        <div class=\"w-full shrink-0 text-center\">\r\n          @if(configuration?.image){\r\n            <ion-img [class]=\"configuration.image.classes\" [src]=\"configuration.image.src\" (ion-error)=\"configuration.image = null\"></ion-img>\r\n          }\r\n          @else {\r\n            <ion-text class=\"text-8xl font-poppins w-full\"> {{title}} </ion-text>\r\n          }\r\n        </div>\r\n        <div class=\"!overflow-y-auto w-full portrait:grow relative\">\r\n          <loading [type]=\"3\" [loading]=\"loading\"></loading>\r\n          <div class=\"flex flex-wrap items-start justify-start mt-4 portrait:!grid portrait:!grid-cols-1\"> \r\n            @for (item of lstMenu; track item; let i = $index) {\r\n              @if(item.type == \"Menu\"){\r\n                <ion-button fill=\"outline\" class=\"mx-1 mt-2 flex-grow shrink-0\" [routerLink]=\"[item.route]\">\r\n                  <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon> \r\n                  {{useTranslation ? (TranslationModule.Permissao + item.id | translate) : item.title}}\r\n                </ion-button>\r\n              }\r\n              @if(item.type == \"MenuGroup\"){\r\n                <ion-button fill=\"outline\" class=\"mx-1 mt-2 flex-grow shrink-0\" (click)=\"popover.present($event)\">\r\n                  <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon> \r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n                </ion-button>\r\n                <ion-popover #popover class=\"overflow-y-auto\" [dismissOnSelect]=\"true\" triggerAction=\"click\">\r\n                  <ng-template>\r\n                    <ion-list class=\"no-outer-border\">\r\n                      <ion-item class=\"bg-transparent\" (click)=\"SetTitle(menu)\" *ngFor=\"let menu of item.lstMenu\" [routerLink]=\"['./' + menu.route]\" lines=\"none\" detail=\"false\" routerLinkActive=\"selected\">\r\n                        <ion-icon [name]=\"menu.icon\" slot=\"start\"></ion-icon> \r\n                        <ion-label> \r\n                          {{useTranslation ? (TranslationModule.Permissao + menu.id | translate) : menu.title}}  \r\n                        </ion-label>\r\n                      </ion-item>\r\n                    </ion-list>\r\n                  </ng-template>\r\n                </ion-popover>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n      </ion-card-content>\r\n    </ion-card>\r\n  </div>\r\n</ion-content>", styles: ["ion-popover::part(content){overflow-y:auto}\n"] }]
+                    ], template: "<ion-content [fullscreen]=\"true\">\r\n  <div class=\"wrapper\">\r\n    <ion-breadcrumbs>\r\n      <ion-breadcrumb [routerLink]=\"[null]\">\r\n        <ion-icon slot=\"start\" name=\"home\"></ion-icon> Inicio\r\n      </ion-breadcrumb>\r\n    </ion-breadcrumbs>\r\n  \r\n    <ion-card>\r\n      <ion-card-content class=\"flex flex-col items-center justify-center !p-6\">\r\n        <div class=\"w-full shrink-0 text-center\">\r\n          @if(lstImage){\r\n            @for (item of lstImage; track $index) {\r\n              <ion-img [class]=\"item.classes\" [src]=\"item.src\" (ion-error)=\"lstImage\"></ion-img>\r\n            }\r\n          }\r\n          @else {\r\n            <ion-text class=\"text-8xl font-poppins w-full\"> {{title}} </ion-text>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"overflow-hidden p-2 w-full relative\">\r\n          <loading [type]=\"3\" [loading]=\"loading\"></loading>\r\n          <div class=\"size-full flex flex-wrap portrait:!grid gap-2\">\r\n            @for (item of lstMenu; track item; let i = $index) {\r\n              @if(item.type == \"Menu\"){\r\n                <ion-button fill=\"outline\" class=\"grow min-w-fit\" [routerLink]=\"[item.route]\">\r\n                  <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon> \r\n                  {{useTranslation ? (TranslationModule.Permissao + item.id | translate) : item.title}}\r\n                </ion-button>\r\n              }\r\n              @if(item.type == \"MenuGroup\"){\r\n                <ion-button fill=\"outline\" class=\"grow min-w-fit\" (click)=\"popover.present($event)\">\r\n                  <ion-icon slot=\"start\" [name]=\"item.icon\"></ion-icon> \r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n                </ion-button>\r\n\r\n                <ion-popover #popover class=\"overflow-y-auto\" [dismissOnSelect]=\"true\" triggerAction=\"click\">\r\n                  <ng-template>\r\n                    <ion-list class=\"no-outer-border\">\r\n                      <ion-item class=\"bg-transparent\" (click)=\"SetTitle(menu)\" *ngFor=\"let menu of item.lstMenu\" [routerLink]=\"['./' + menu.route]\" lines=\"none\" detail=\"false\" routerLinkActive=\"selected\">\r\n                        <ion-icon [name]=\"menu.icon\" slot=\"start\"></ion-icon> \r\n                        <ion-label> \r\n                          {{useTranslation ? (TranslationModule.Permissao + menu.id | translate) : menu.title}}  \r\n                        </ion-label>\r\n                      </ion-item>\r\n                    </ion-list>\r\n                  </ng-template>\r\n                </ion-popover>\r\n              }\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- <div class=\"!overflow-y-auto w-full portrait:grow relative\">\r\n          <loading [type]=\"3\" [loading]=\"loading\"></loading>\r\n          <div class=\"flex flex-wrap items-start justify-start mt-4 portrait:!grid portrait:!grid-cols-1\"> \r\n          </div>\r\n        </div> -->\r\n      </ion-card-content>\r\n    </ion-card>\r\n  </div>\r\n</ion-content>", styles: ["ion-popover::part(content){overflow-y:auto}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.ActivatedRoute }, { type: EnvironmentService }, { type: GenericService }, { type: RouteProviderService }] });
 class DefaultPageConfiguration {
     constructor(image = null, useTranslation = false) {
@@ -11464,11 +11484,11 @@ class SionCardComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SionCardComponent, isStandalone: true, selector: "sion-card", inputs: { background: "background", backdrop: "backdrop", justify: "justify" }, ngImport: i0, template: "<ion-card class=\"m-0\">\r\n  <ion-card-content class=\"size-full p-0\">\r\n    <div class=\"size-full {{backdrop}} flex flex-col overflow-hidden\">\r\n      <div class=\"flex items-center {{justify}} p-2 min-h-8\">\r\n        <ng-content select=\"[slot=header]\"></ng-content>\r\n      </div>\r\n      <div class=\"{{background}} rounded-t-2xl\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </ion-card-content>\r\n</ion-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SionCardComponent, isStandalone: true, selector: "sion-card", inputs: { background: "background", backdrop: "backdrop", justify: "justify" }, ngImport: i0, template: "<ion-card class=\"m-0 size-full\">\r\n  <ion-card-content class=\"size-full p-0\">\r\n    <div class=\"size-full {{backdrop}} flex flex-col overflow-hidden\">\r\n      <div class=\"flex items-center {{justify}} p-2 min-h-8 shrink-0\">\r\n        <ng-content select=\"[slot=header]\"></ng-content>\r\n      </div>\r\n      <div class=\"{{background}} size-full rounded-t-2xl overflow-hidden\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </ion-card-content>\r\n</ion-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SionCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sion-card', standalone: true, imports: [CommonModule, IonicModule], template: "<ion-card class=\"m-0\">\r\n  <ion-card-content class=\"size-full p-0\">\r\n    <div class=\"size-full {{backdrop}} flex flex-col overflow-hidden\">\r\n      <div class=\"flex items-center {{justify}} p-2 min-h-8\">\r\n        <ng-content select=\"[slot=header]\"></ng-content>\r\n      </div>\r\n      <div class=\"{{background}} rounded-t-2xl\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </ion-card-content>\r\n</ion-card>" }]
+            args: [{ selector: 'sion-card', standalone: true, imports: [CommonModule, IonicModule], template: "<ion-card class=\"m-0 size-full\">\r\n  <ion-card-content class=\"size-full p-0\">\r\n    <div class=\"size-full {{backdrop}} flex flex-col overflow-hidden\">\r\n      <div class=\"flex items-center {{justify}} p-2 min-h-8 shrink-0\">\r\n        <ng-content select=\"[slot=header]\"></ng-content>\r\n      </div>\r\n      <div class=\"{{background}} size-full rounded-t-2xl overflow-hidden\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </ion-card-content>\r\n</ion-card>" }]
         }], ctorParameters: () => [], propDecorators: { background: [{
                 type: Input
             }], backdrop: [{