@sapphire-ion/framework 1.0.1 → 1.0.3

package/fesm2022/sapphire-ion-framework.mjs

@@ -3,7 +3,7 @@ import { IonicModule, IonDatetime, IonModal, IonBackButton, IonCheckbox, IonTogg
 import { FilePicker } from '@capawesome/capacitor-file-picker';
 import { CameraSource } from '@capacitor/camera';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, NgModule, Inject, signal, model, Component, Input, Pipe, input, computed, effect, contentChildren, output, forwardRef, ContentChildren, EventEmitter, Output, HostListener, Directive, inject, ViewChild, Injector, TemplateRef, ContentChild, ElementRef, HostBinding, ViewChildren, ViewContainerRef } from '@angular/core';
+import { Injectable, InjectionToken, NgModule, Inject, signal, model, Component, Input, Pipe, input, computed, effect, contentChildren, output, forwardRef, ContentChildren, EventEmitter, Output, HostListener, Directive, inject, ViewChild, TemplateRef, ContentChild, ElementRef, HostBinding, ViewChildren, 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 from '@angular/common/http';
@@ -867,12 +867,9 @@ class HttpService {
         for (const [key, value] of Object.entries(object)) {
             if (lstTableFieldsView.find(p => p.index == key && p.type == InputType.File)) {
                 if (value && typeof (value) != "string") {
-                    var lstFiles = value;
-                    for (const fileData of lstFiles) {
-                        const file = fileData;
-                        const name = `file-${lstFiles.indexOf(fileData)}-${key}`;
-                        formData.append(name, fileData, fileData.name);
-                    }
+                    const file = value;
+                    const name = `file-${key}`;
+                    formData.append(name, file, file.name);
                     object[key] = "";
                 }
             }
@@ -1047,14 +1044,16 @@ class InputSelectDataLoader {
             this.items = [...items || []];
             this._isLoaded = true;
             for (const component of this.lstComponents) {
-                component.items.set([...this.items]);
+                if (!component.destroyed)
+                    component.items.set([...this.items]);
             }
         }
         try {
             await this.Load();
             this._isLoaded = true;
             for (const component of this.lstComponents) {
-                component.items.set([...this.items]);
+                if (!component.destroyed)
+                    component.items.set([...this.items]);
             }
         }
         finally {
@@ -1066,7 +1065,8 @@ class InputSelectDataLoader {
     async Load() {
         if (this._isLoaded) {
             for (const component of this.lstComponents) {
-                component.items.set([...this.items]);
+                if (!component.destroyed)
+                    component.items.set([...this.items]);
             }
             return;
         }
@@ -1074,7 +1074,8 @@ class InputSelectDataLoader {
         if (this.configuration.loadFromArray != undefined && this.configuration.loadFromArray.length) {
             this.items = [...this.configuration.loadFromArray];
             for (const component of this.lstComponents) {
-                component.items.set([...this.items]);
+                if (!component.destroyed)
+                    component.items.set([...this.items]);
             }
             return;
         }
@@ -1090,7 +1091,8 @@ class InputSelectDataLoader {
             }
             this.items = lstDados;
             for (const component of this.lstComponents) {
-                component.items.set([...this.items]);
+                if (!component.destroyed)
+                    component.items.set([...this.items]);
             }
             ;
         }
@@ -2420,8 +2422,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class SIonPopoverComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
         this.fill = 'blur';
         this.arrow = true;
         this.flip = true;
@@ -2433,26 +2435,29 @@ class SIonPopoverComponent {
         this.onWillDismiss = new EventEmitter();
         this.onDidDismiss = new EventEmitter();
         this.anchor = undefined;
-        this.visible = false;
-        this.visibleChange = new EventEmitter();
-        this.clearPopperInstance = undefined;
+        this.isVisible = false;
+        this.isVisibleChange = new EventEmitter();
     }
     async present(event) {
+        if (this.isVisible) {
+            return;
+        }
         this.onWillPresent.emit();
-        // this.sionPopoverService.HandlePresent(this);
+        this.CreatePopoverInBody();
+        await Timeout(0);
         const refEl = this.anchor ? this.anchor : event.target;
-        const popEl = this.wrapperElement.nativeElement;
-        const arrowEl = this.arrowElement.nativeElement;
-        this.clearPopperInstance = autoUpdate(refEl, popEl, async () => {
-            const computePositionRetrun = await computePosition(refEl, popEl, {
-                placement: this.placement,
-                middleware: [
-                    offset(10),
-                    this.flip ? flip() : undefined,
-                    shift({ limiter: limitShift(), padding: 5 }),
-                    this.arrow ? arrow({ element: arrowEl, padding: 10 }) : undefined,
-                ].filter(p => p),
-            });
+        const popEl = this.popoverInstance;
+        const arrowEl = this.popoverInstance.querySelector('.popover-arrow');
+        const computePositionRetrun = await this.GetComputePositionReturn(refEl, popEl, arrowEl);
+        Object.assign(this.popoverInstance.style, {
+            left: `${computePositionRetrun.x}px`,
+            top: `${computePositionRetrun.y}px`,
+            width: this.width,
+            height: this.height,
+            position: 'absolute',
+        });
+        this.cleanupAutoUpdate = autoUpdate(refEl, popEl, async () => {
+            const computePositionRetrun = await this.GetComputePositionReturn(refEl, popEl, arrowEl);
             Object.assign(popEl.style, {
                 left: `${computePositionRetrun.x}px`,
                 top: `${computePositionRetrun.y}px`,
@@ -2472,34 +2477,64 @@ class SIonPopoverComponent {
             }
         });
         await Timeout(50);
-        this.visible = true;
-        this.visibleChange.emit(this.visible);
+        this.isVisible = true;
+        this.popoverInstance.style.setProperty('display', 'block');
+        this.isVisibleChange.emit(this.isVisible);
         await Timeout(200);
         this.onDidPresent.emit();
     }
+    async GetComputePositionReturn(refEl, popEl, arrowEl) {
+        return await computePosition(refEl, popEl, {
+            placement: this.placement,
+            middleware: [
+                offset(10),
+                this.flip ? flip({ crossAxis: false }) : undefined,
+                shift({ limiter: limitShift(), padding: 5 }),
+                this.arrow ? arrow({ element: arrowEl, padding: 10 }) : undefined,
+            ].filter(p => p),
+        });
+    }
+    CreatePopoverInBody() {
+        // Create a container for the template
+        const embeddedView = this.popoverTemplate.createEmbeddedView({});
+        this.viewContainerRef.insert(embeddedView);
+        // Get the popover element and append to body
+        this.popoverInstance = embeddedView.rootNodes[0];
+        document.body.appendChild(this.popoverInstance);
+        this.popoverInstance.style.setProperty('display', 'none');
+    }
     HandleClicks(event) {
-        if (this.visible && !this.wrapperElement.nativeElement.contains(event.target)) {
+        if (this.popoverInstance &&
+            !this.popoverInstance.contains(event.target) &&
+            !this.anchor.contains(event.target)) {
             this.dismiss();
         }
     }
     async dismiss() {
         this.onWillDismiss.emit();
-        if (this.clearPopperInstance) {
-            this.clearPopperInstance();
-            this.clearPopperInstance = undefined;
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = undefined;
         }
-        this.visible = false;
-        this.visibleChange.emit(this.visible);
+        this.isVisible = false;
+        this.isVisibleChange.emit(this.isVisible);
         await Timeout(200);
+        if (this.popoverInstance) {
+            document.body.removeChild(this.popoverInstance);
+            this.popoverInstance = undefined;
+        }
         this.onDidDismiss.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SIonPopoverComponent, selector: "sion-popover", inputs: { fill: "fill", arrow: "arrow", flip: "flip", placement: "placement", height: "height", width: "width", anchor: "anchor" }, outputs: { onWillPresent: "onWillPresent", onDidPresent: "onDidPresent", onWillDismiss: "onWillDismiss", onDidDismiss: "onDidDismiss", visibleChange: "visibleChange" }, host: { listeners: { "document:click": "HandleClicks($event)" } }, viewQueries: [{ propertyName: "wrapperElement", first: true, predicate: ["popoverWrapper"], descendants: true }, { propertyName: "arrowElement", first: true, predicate: ["popoverArrow"], descendants: true }], ngImport: i0, template: "<div #popoverWrapper class=\"popover-wrapper translucid-border\"\r\n    [ngClass]=\"{\r\n      'bg-light'        : fill == 'solid',\r\n      'bg-transparent'  : fill == 'outline',\r\n      'backdrop-blur-md bg-light/80': fill == 'blur',\r\n      '!border-0'       : fill == 'clear',\r\n      'visible-anim'    : visible,\r\n      'invisible-anim'  : !visible,\r\n    }\"\r\n  [style.height]=\"height\"\r\n  [style.width]=\"width\"\r\n>\r\n<!-- 'solid' | 'outline' | 'blur' | 'clear' -->\r\n  @if(arrow){\r\n    <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md': fill == 'blur',\r\n        'visible-anim'    : visible,\r\n        'invisible-anim'  : !visible,\r\n    }\"\r\n    ></div>\r\n  }\r\n  <ng-content #content></ng-content>\r\n</div>", styles: [".popover-wrapper{z-index:50;border-radius:.75rem;width:max-content;position:absolute;will-change:left,top,bottom,right,transform,opacity,filter;transition:opacity,transform,filter .2s ease-in-out;top:0;left:0;display:block}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.visible-anim{animation:visible .2s ease-in-out forwards}.invisible-anim{pointer-events:none;animation:invisible .2s ease-in-out forwards;opacity:0}@keyframes visible{0%{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}to{opacity:1!important;filter:grayscale(0);transform:scale(1)}}@keyframes invisible{0%{opacity:1;filter:grayscale(0);transform:scale(1)}to{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    ngOnDestroy() {
+        this.dismiss();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SIonPopoverComponent, selector: "sion-popover", inputs: { fill: "fill", arrow: "arrow", flip: "flip", placement: "placement", height: "height", width: "width", anchor: "anchor" }, outputs: { onWillPresent: "onWillPresent", onDidPresent: "onDidPresent", onWillDismiss: "onWillDismiss", onDidDismiss: "onDidDismiss", isVisibleChange: "isVisibleChange" }, host: { listeners: { "document:click": "HandleClicks($event)" } }, queries: [{ propertyName: "contentChildren", predicate: ["*"], descendants: true }], viewQueries: [{ propertyName: "popoverTemplate", first: true, predicate: ["popoverTemplate"], descendants: true, static: true }, { propertyName: "contentContainer", first: true, predicate: ["popoverWrapper"], descendants: true }, { propertyName: "arrowElement", first: true, predicate: ["popoverArrow"], descendants: true }], ngImport: i0, template: "<ng-template #popoverTemplate>\r\n  <div #popoverWrapper class=\"popover-wrapper translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n        'visible-anim'    : isVisible,\r\n        'invisible-anim'  : !isVisible,\r\n      }\"\r\n    [style.height]=\"height\"\r\n    [style.width]=\"width\"\r\n  >\r\n  <!-- 'solid' | 'outline' | 'blur' | 'clear' -->\r\n    @if(arrow){\r\n      <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n        [ngClass]=\"{\r\n          'bg-light'        : fill == 'solid',\r\n          'bg-transparent'  : fill == 'outline',\r\n          'backdrop-blur-md': fill == 'blur',\r\n          'visible-anim'    : isVisible,\r\n          'invisible-anim'  : !isVisible,\r\n      }\"\r\n      ></div>\r\n    }\r\n    <ng-content #content></ng-content>\r\n  </div>\r\n</ng-template>", styles: [".popover-wrapper{z-index:50;border-radius:.75rem;width:max-content;position:absolute;will-change:left,top,bottom,right,transform,opacity,filter;transition:opacity,transform,filter .2s ease-in-out;display:none}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.visible-anim{animation:visible .2s ease-in-out forwards}.invisible-anim{pointer-events:none;animation:invisible .2s ease-in-out forwards;opacity:0}@keyframes visible{0%{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}to{opacity:1!important;filter:grayscale(0);transform:scale(1)}}@keyframes invisible{0%{opacity:1;filter:grayscale(0);transform:scale(1)}to{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sion-popover', template: "<div #popoverWrapper class=\"popover-wrapper translucid-border\"\r\n    [ngClass]=\"{\r\n      'bg-light'        : fill == 'solid',\r\n      'bg-transparent'  : fill == 'outline',\r\n      'backdrop-blur-md bg-light/80': fill == 'blur',\r\n      '!border-0'       : fill == 'clear',\r\n      'visible-anim'    : visible,\r\n      'invisible-anim'  : !visible,\r\n    }\"\r\n  [style.height]=\"height\"\r\n  [style.width]=\"width\"\r\n>\r\n<!-- 'solid' | 'outline' | 'blur' | 'clear' -->\r\n  @if(arrow){\r\n    <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md': fill == 'blur',\r\n        'visible-anim'    : visible,\r\n        'invisible-anim'  : !visible,\r\n    }\"\r\n    ></div>\r\n  }\r\n  <ng-content #content></ng-content>\r\n</div>", styles: [".popover-wrapper{z-index:50;border-radius:.75rem;width:max-content;position:absolute;will-change:left,top,bottom,right,transform,opacity,filter;transition:opacity,transform,filter .2s ease-in-out;top:0;left:0;display:block}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.visible-anim{animation:visible .2s ease-in-out forwards}.invisible-anim{pointer-events:none;animation:invisible .2s ease-in-out forwards;opacity:0}@keyframes visible{0%{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}to{opacity:1!important;filter:grayscale(0);transform:scale(1)}}@keyframes invisible{0%{opacity:1;filter:grayscale(0);transform:scale(1)}to{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { fill: [{
+            args: [{ selector: 'sion-popover', template: "<ng-template #popoverTemplate>\r\n  <div #popoverWrapper class=\"popover-wrapper translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n        'visible-anim'    : isVisible,\r\n        'invisible-anim'  : !isVisible,\r\n      }\"\r\n    [style.height]=\"height\"\r\n    [style.width]=\"width\"\r\n  >\r\n  <!-- 'solid' | 'outline' | 'blur' | 'clear' -->\r\n    @if(arrow){\r\n      <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n        [ngClass]=\"{\r\n          'bg-light'        : fill == 'solid',\r\n          'bg-transparent'  : fill == 'outline',\r\n          'backdrop-blur-md': fill == 'blur',\r\n          'visible-anim'    : isVisible,\r\n          'invisible-anim'  : !isVisible,\r\n      }\"\r\n      ></div>\r\n    }\r\n    <ng-content #content></ng-content>\r\n  </div>\r\n</ng-template>", styles: [".popover-wrapper{z-index:50;border-radius:.75rem;width:max-content;position:absolute;will-change:left,top,bottom,right,transform,opacity,filter;transition:opacity,transform,filter .2s ease-in-out;display:none}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.visible-anim{animation:visible .2s ease-in-out forwards}.invisible-anim{pointer-events:none;animation:invisible .2s ease-in-out forwards;opacity:0}@keyframes visible{0%{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}to{opacity:1!important;filter:grayscale(0);transform:scale(1)}}@keyframes invisible{0%{opacity:1;filter:grayscale(0);transform:scale(1)}to{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { fill: [{
                 type: Input
             }], arrow: [{
                 type: Input
@@ -2521,13 +2556,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }], anchor: [{
                 type: Input
-            }], wrapperElement: [{
+            }], popoverTemplate: [{
+                type: ViewChild,
+                args: ['popoverTemplate', { static: true }]
+            }], contentContainer: [{
                 type: ViewChild,
                 args: ['popoverWrapper']
             }], arrowElement: [{
                 type: ViewChild,
                 args: ['popoverArrow']
-            }], visibleChange: [{
+            }], contentChildren: [{
+                type: ContentChildren,
+                args: ['*', { descendants: true }]
+            }], isVisibleChange: [{
                 type: Output
             }], HandleClicks: [{
                 type: HostListener,
@@ -2626,7 +2667,7 @@ class NewInputDateComponent extends CustomInput {
         this.SetValue(v.toString(), true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewInputDateComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NewInputDateComponent, selector: "input-date, input-date-time, input-time", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [...InputProviderFactory.GetProviders(NewInputDateComponent)], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "datetime", first: true, predicate: IonDatetime, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\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  <input #input\r\n    [ngModel]=\"dtValue\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [maskito]=\"options\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  \r\n  <ion-button tabindex=\"-1\" class=\"absolute right-1 bottom-1\" (click)=\"Present(modal, popover, $event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n    <ion-icon [name]=\"presentation == 'time' ? 'time' : 'calendar'\" slot=\"icon-only\"></ion-icon>\r\n  </ion-button>\r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>\r\n\r\n<sion-popover\r\n  [anchor]=\"inputContainer\"\r\n  #popover \r\n  [class.time]=\"presentation == 'time'\" \r\n  [class.date]=\"presentation == 'date'\" \r\n  [class.datetime]=\"presentation == 'date-time'\"\r\n>\r\n  <ng-container *ngTemplateOutlet=\"datetimeTemplate; context: { $implicit: popover }\"></ng-container>\r\n</sion-popover>\r\n\r\n<ion-modal \r\n  #modal\r\n  [class.time]=\"presentation == 'time'\" \r\n  [class.date]=\"presentation == 'date'\" \r\n  [class.datetime]=\"presentation == 'date-time'\"\r\n>\r\n  <ng-template>\r\n    <ng-container *ngTemplateOutlet=\"datetimeTemplate; context: { $implicit: modal }\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n\r\n<ng-template #datetimeTemplate let-parent>\r\n  <div class=\"flex items-center justify-center bg-[--ion-color-light] rounded-xl\" tabindex=\"-1\">\r\n    @if(presentation.includes('date')) {\r\n      <ion-datetime tabindex=\"-1\" [ngModel]=\"value()\" class=\"date\" presentation=\"date\" (ionChange)=\"ChangeDate($event.target.value);\"></ion-datetime>\r\n    }\r\n    @if(presentation == 'date-time') {\r\n      <div class=\"flex flex-col items-center justify-center py-12 h-[21rem]\">\r\n        <div class=\"h-full border-r-2 border-primary mask-y/30\"></div>\r\n      </div>\r\n    }\r\n    @if(presentation.includes('time')) {\r\n      <div class=\"h-[21rem] flex flex-col items-center justify-center gap-2\">\r\n        <ion-icon class=\"text-2xl\" name=\"alarm\"></ion-icon>\r\n        <ion-datetime tabindex=\"-1\" [ngModel]=\"value()\" class=\"time\" presentation=\"time\" hourCycle=\"h24\" (ionChange)=\"ChangeDate($event.target.value)\"></ion-datetime>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>", styles: [".input-container{position:relative!important}.input-container input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}ion-popover{--height: auto}ion-popover.time{--width: 8rem}ion-popover.date{--width: 21.5rem}ion-popover.datetime{--width: 29rem}ion-modal{--height: auto}ion-modal.time{--width: 8rem}ion-modal.date{--width: 21.5rem}ion-modal.datetime{--width: 29rem}ion-datetime{--wheel-highlight-background: var(--ion-color-primary) !important}ion-datetime.date{width:21.5rem}ion-datetime.time{width:8rem}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "visibleChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NewInputDateComponent, selector: "input-date, input-date-time, input-time", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [...InputProviderFactory.GetProviders(NewInputDateComponent)], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "datetime", first: true, predicate: IonDatetime, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\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  <input #input\r\n    [ngModel]=\"dtValue\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [maskito]=\"options\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  \r\n  <ion-button tabindex=\"-1\" class=\"absolute right-1 bottom-1\" (click)=\"Present(modal, popover, $event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n    <ion-icon [name]=\"presentation == 'time' ? 'time' : 'calendar'\" slot=\"icon-only\"></ion-icon>\r\n  </ion-button>\r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>\r\n\r\n<sion-popover\r\n  [anchor]=\"inputContainer\"\r\n  #popover \r\n  [class.time]=\"presentation == 'time'\" \r\n  [class.date]=\"presentation == 'date'\" \r\n  [class.datetime]=\"presentation == 'date-time'\"\r\n>\r\n  <ng-container *ngTemplateOutlet=\"datetimeTemplate; context: { $implicit: popover }\"></ng-container>\r\n</sion-popover>\r\n\r\n<ion-modal \r\n  #modal\r\n  [class.time]=\"presentation == 'time'\" \r\n  [class.date]=\"presentation == 'date'\" \r\n  [class.datetime]=\"presentation == 'date-time'\"\r\n>\r\n  <ng-template>\r\n    <ng-container *ngTemplateOutlet=\"datetimeTemplate; context: { $implicit: modal }\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n\r\n<ng-template #datetimeTemplate let-parent>\r\n  <div class=\"flex items-center justify-center bg-[--ion-color-light] rounded-xl\" tabindex=\"-1\">\r\n    @if(presentation.includes('date')) {\r\n      <ion-datetime tabindex=\"-1\" [ngModel]=\"value()\" class=\"date\" presentation=\"date\" (ionChange)=\"ChangeDate($event.target.value);\"></ion-datetime>\r\n    }\r\n    @if(presentation == 'date-time') {\r\n      <div class=\"flex flex-col items-center justify-center py-12 h-[21rem]\">\r\n        <div class=\"h-full border-r-2 border-primary mask-y/30\"></div>\r\n      </div>\r\n    }\r\n    @if(presentation.includes('time')) {\r\n      <div class=\"h-[21rem] flex flex-col items-center justify-center gap-2\">\r\n        <ion-icon class=\"text-2xl\" name=\"alarm\"></ion-icon>\r\n        <ion-datetime tabindex=\"-1\" [ngModel]=\"value()\" class=\"time\" presentation=\"time\" hourCycle=\"h24\" (ionChange)=\"ChangeDate($event.target.value)\"></ion-datetime>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>", styles: [".input-container{position:relative!important}.input-container input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}ion-popover{--height: auto}ion-popover.time{--width: 8rem}ion-popover.date{--width: 21.5rem}ion-popover.datetime{--width: 29rem}ion-modal{--height: auto}ion-modal.time{--width: 8rem}ion-modal.date{--width: 21.5rem}ion-modal.datetime{--width: 29rem}ion-datetime{--wheel-highlight-background: var(--ion-color-primary) !important}ion-datetime.date{width:21.5rem}ion-datetime.time{width:8rem}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "isVisibleChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewInputDateComponent, decorators: [{
             type: Component,
@@ -2917,12 +2958,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class NewInputSelectComponent extends CustomInput {
     SetCurrentItemLabel() {
         if (this.configuration().multiple) {
-            this.currentLabel = this.lstOptions.filter(p => p.selected).map(p => p.label).join(', ');
-            this.currentItems = this.lstOptions.filter(p => p.selected);
+            this.currentLabel = this.lstOptionsItemValue().filter(p => p.selected).map(p => p.label).join(', ');
+            this.currentItems = this.lstOptionsItemValue().filter(p => p.selected);
         }
         else {
-            this.currentLabel = this.lstOptions.find(p => p.selected)?.label;
-            this.currentItems = this.lstOptions.find(p => p.selected);
+            this.currentLabel = this.lstOptionsItemValue().find(p => p.selected)?.label;
+            this.currentItems = this.lstOptionsItemValue().find(p => p.selected);
         }
     }
     UpdateLstOptions(search) {
@@ -2959,7 +3000,8 @@ class NewInputSelectComponent extends CustomInput {
         this.lstOptionsItemValue = computed(() => {
             const bindLabel = BindLabelFactory(this.configuration());
             const bindValue = BindValueFactory(this.configuration());
-            return this.items().filter(p => this.somenteAtivos() && this.isServiceAtivo() ? p.ativo : true).map(p => {
+            console.log("lstOptionsItemValue", this.items(), this.label());
+            return this.items().filter(p => (this.somenteAtivos() && this.isServiceAtivo()) ? p.ativo : true).map(p => {
                 const item = new ItemValue();
                 item.label = bindLabel(p);
                 item.value = bindValue(p);
@@ -2977,7 +3019,7 @@ class NewInputSelectComponent extends CustomInput {
         this.searchValue = signal("");
         this.searchBarSubscription = null;
         this.destroy$ = new Subject();
-        this.injector = inject(Injector);
+        this.destroyed = false;
         this.floatingVisible = false;
         effect(() => {
             this.UpdateLstOptions(this.searchValue());
@@ -3051,6 +3093,7 @@ class NewInputSelectComponent extends CustomInput {
         });
     }
     ClearSearchBar() {
+        this.destroyed = true;
         this.destroy$.next();
         this.destroy$.complete();
         if (this.searchBarSubscription) {
@@ -3141,11 +3184,11 @@ class NewInputSelectComponent extends CustomInput {
         return Array.isArray(obj);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewInputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NewInputSelectComponent, selector: "input-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { listeners: { "document:keydown": "HandleKeyboardEvent($event)" } }, providers: [...InputProviderFactory.GetProviders(NewInputSelectComponent)], queries: [{ propertyName: "labelTemplate", first: true, predicate: SIonLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optionTemplate", first: true, predicate: SIonOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: SIonPlaceholderTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "inputSelectLabel", first: true, predicate: ["inputSelectLabel"], descendants: true }, { propertyName: "inputSearchBar", first: true, predicate: ["inputSearchBar"], descendants: true }, { propertyName: "selectContent", first: true, predicate: ["selectContent"], descendants: true }, { propertyName: "popover", first: true, predicate: SIonPopoverComponent, descendants: true }, { propertyName: "modal", first: true, predicate: IonModal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event); Present($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.manual-focus]=\"floatingVisible\"\r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n  [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\"  #inputSelectLabel tabindex=\"0\">\r\n    @if (!configuration().multiple && currentLabel){\r\n      @if(labelTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"labelTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n      }\r\n    }\r\n    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n      <div class=\"w-full\">\r\n        <div class=\"overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n          @for (item of currentItems; track $index) {\r\n            <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n              @if(labelTemplate){\r\n                <ng-container \r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n                </ng-container>\r\n              }\r\n              @else {\r\n                <span class=\"input-select-label\"> {{item.label}} </span>\r\n              }\r\n            \r\n              <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item.value); $event.stopPropagation()\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </div>\r\n              <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </ion-button> -->\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if(placeholderTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"placeholderTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n    <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n    <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n  </div>\r\n  @if(configuration().clearable){\r\n    <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n      <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n  } \r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>\r\n\r\n<ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n  <ng-template>\r\n    <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n<sion-popover \r\n    #popover \r\n    [width]=\"inputContainer.offsetWidth + 'px'\" \r\n    (onWillPresent)=\"OnPresent()\" \r\n    (onDidDismiss)=\"OnDismiss()\" \r\n    [anchor]=\"inputContainer\" \r\n    [placement]=\"configuration().popoverConfiguration.placement\" \r\n    [flip]=\"configuration().popoverConfiguration.flip\"\r\n  >\r\n  <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n</sion-popover>\r\n\r\n<ng-template #selectContentTemplate>\r\n  <div #selectContent class=\"select-content\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      @if(floatingVisible){\r\n        @for (item of lstOptions; track item.value) { \r\n            <ng-container \r\n              [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n            </ng-container>\r\n          }\r\n        }\r\n    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "visibleChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NewInputSelectComponent, selector: "input-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { listeners: { "document:keydown": "HandleKeyboardEvent($event)" } }, providers: [...InputProviderFactory.GetProviders(NewInputSelectComponent)], queries: [{ propertyName: "labelTemplate", first: true, predicate: SIonLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optionTemplate", first: true, predicate: SIonOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: SIonPlaceholderTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "inputSelectLabel", first: true, predicate: ["inputSelectLabel"], descendants: true }, { propertyName: "inputSearchBar", first: true, predicate: ["inputSearchBar"], descendants: true }, { propertyName: "selectContent", first: true, predicate: ["selectContent"], descendants: true }, { propertyName: "popover", first: true, predicate: SIonPopoverComponent, descendants: true }, { propertyName: "modal", first: true, predicate: IonModal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event); Present($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.manual-focus]=\"floatingVisible\"\r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n  [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\"  #inputSelectLabel tabindex=\"0\">\r\n    @if (!configuration().multiple && currentLabel){\r\n      @if(labelTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"labelTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n      }\r\n    }\r\n    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n      <div class=\"w-full\">\r\n        <div class=\"overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n          @for (item of currentItems; track $index) {\r\n            <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n              @if(labelTemplate){\r\n                <ng-container \r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n                </ng-container>\r\n              }\r\n              @else {\r\n                <span class=\"input-select-label\"> {{item.label}} </span>\r\n              }\r\n            \r\n              <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </div>\r\n              <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </ion-button> -->\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if(placeholderTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"placeholderTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n    <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n    <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n  </div>\r\n  @if(configuration().clearable){\r\n    <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n      <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n  } \r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>\r\n\r\n<ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n  <ng-template>\r\n    <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n<sion-popover \r\n    #popover \r\n    [width]=\"inputContainer.offsetWidth + 'px'\" \r\n    (onWillPresent)=\"OnPresent()\" \r\n    (onDidDismiss)=\"OnDismiss()\" \r\n    [anchor]=\"inputContainer\" \r\n    [placement]=\"configuration().popoverConfiguration.placement\" \r\n    [flip]=\"configuration().popoverConfiguration.flip\"\r\n  >\r\n  <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n</sion-popover>\r\n\r\n<ng-template #selectContentTemplate>\r\n  <div #selectContent class=\"select-content\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      @if(floatingVisible){\r\n        @for (item of lstOptions; track item.value) { \r\n            <ng-container \r\n              [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n            </ng-container>\r\n          }\r\n        }\r\n    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "isVisibleChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewInputSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-select', providers: [...InputProviderFactory.GetProviders(NewInputSelectComponent)], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event); Present($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.manual-focus]=\"floatingVisible\"\r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n  [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\"  #inputSelectLabel tabindex=\"0\">\r\n    @if (!configuration().multiple && currentLabel){\r\n      @if(labelTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"labelTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n      }\r\n    }\r\n    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n      <div class=\"w-full\">\r\n        <div class=\"overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n          @for (item of currentItems; track $index) {\r\n            <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n              @if(labelTemplate){\r\n                <ng-container \r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n                </ng-container>\r\n              }\r\n              @else {\r\n                <span class=\"input-select-label\"> {{item.label}} </span>\r\n              }\r\n            \r\n              <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item.value); $event.stopPropagation()\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </div>\r\n              <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </ion-button> -->\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if(placeholderTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"placeholderTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n    <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n    <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n  </div>\r\n  @if(configuration().clearable){\r\n    <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n      <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n  } \r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>\r\n\r\n<ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n  <ng-template>\r\n    <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n<sion-popover \r\n    #popover \r\n    [width]=\"inputContainer.offsetWidth + 'px'\" \r\n    (onWillPresent)=\"OnPresent()\" \r\n    (onDidDismiss)=\"OnDismiss()\" \r\n    [anchor]=\"inputContainer\" \r\n    [placement]=\"configuration().popoverConfiguration.placement\" \r\n    [flip]=\"configuration().popoverConfiguration.flip\"\r\n  >\r\n  <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n</sion-popover>\r\n\r\n<ng-template #selectContentTemplate>\r\n  <div #selectContent class=\"select-content\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      @if(floatingVisible){\r\n        @for (item of lstOptions; track item.value) { \r\n            <ng-container \r\n              [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n            </ng-container>\r\n          }\r\n        }\r\n    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
+            args: [{ selector: 'input-select', providers: [...InputProviderFactory.GetProviders(NewInputSelectComponent)], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event); Present($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.manual-focus]=\"floatingVisible\"\r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n  [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\"  #inputSelectLabel tabindex=\"0\">\r\n    @if (!configuration().multiple && currentLabel){\r\n      @if(labelTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"labelTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n      }\r\n    }\r\n    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n      <div class=\"w-full\">\r\n        <div class=\"overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n          @for (item of currentItems; track $index) {\r\n            <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n              @if(labelTemplate){\r\n                <ng-container \r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n                </ng-container>\r\n              }\r\n              @else {\r\n                <span class=\"input-select-label\"> {{item.label}} </span>\r\n              }\r\n            \r\n              <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </div>\r\n              <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </ion-button> -->\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if(placeholderTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"placeholderTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n    <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n    <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n  </div>\r\n  @if(configuration().clearable){\r\n    <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n      <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n  } \r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>\r\n\r\n<ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n  <ng-template>\r\n    <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n<sion-popover \r\n    #popover \r\n    [width]=\"inputContainer.offsetWidth + 'px'\" \r\n    (onWillPresent)=\"OnPresent()\" \r\n    (onDidDismiss)=\"OnDismiss()\" \r\n    [anchor]=\"inputContainer\" \r\n    [placement]=\"configuration().popoverConfiguration.placement\" \r\n    [flip]=\"configuration().popoverConfiguration.flip\"\r\n  >\r\n  <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n</sion-popover>\r\n\r\n<ng-template #selectContentTemplate>\r\n  <div #selectContent class=\"select-content\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      @if(floatingVisible){\r\n        @for (item of lstOptions; track item.value) { \r\n            <ng-container \r\n              [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n            </ng-container>\r\n          }\r\n        }\r\n    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { labelTemplate: [{
                 type: ContentChild,
                 args: [SIonLabelTemplateDirective, { read: TemplateRef }]
@@ -3363,7 +3406,7 @@ class ThFilterComponent {
         return;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ThFilterComponent, selector: "th-filter", inputs: { field: "field" }, outputs: { changeEmitter: "change" }, ngImport: i0, template: "<div #anchor class=\"h-5 aspect-square mr-1 flex items-center justify-center cursor-pointer\">\r\n  <ion-icon name=\"filter-circle\" (click)=\"popover.present($event)\" class=\"text-xl align-sub size-full\" [color]=\"isFilterActive ? 'secondary' : 'medium' \"></ion-icon>\r\n</div>\r\n\r\n<sion-popover fill=\"solid\" #popover [anchor]=\"anchor\" triggerAction=\"click\">\r\n  <div class=\"w-72 flex flex-col gap-2 p-2\" >\r\n    @if(!['Select', 'Bool', 'String', 'TextArea'].includes(field.type)){\r\n      <ion-label class=\"w-full flex items-center justify-center\">  Filtro - {{field.header}} </ion-label>\r\n    }\r\n    @switch (field.type) {\r\n      @case ('String') {\r\n        <input-string [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" (blur)=\"Change()\"></input-string>\r\n      }\r\n      @case ('Number') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-number (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-number>\r\n          <input-number (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-number>\r\n        </div>\r\n      }\r\n      @case ('Decimal') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-decimal>\r\n          <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-decimal>\r\n        </div>\r\n      }\r\n      @case ('Currency') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-currency>\r\n          <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-currency>\r\n        </div>\r\n      }\r\n      @case ('Select') {\r\n        <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" [configuration]=\"configuration\"></input-select>\r\n      }\r\n      @case ('TextArea') {\r\n        <input-string (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\"></input-string>\r\n      }\r\n      @case ('Bool') {\r\n        <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" placeholder=\"\" [configuration]=\"configuration\"></input-select>\r\n      }\r\n      @case ('Date') {\r\n        <div class=\"size-full grid grid-cols-1 gap-2\">\r\n          <input-date (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date>\r\n          <input-date (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date>\r\n        </div>\r\n      }\r\n      @case ('DateTime') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date-time>\r\n          <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date-time>\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n  <!-- <ion-card class=\"m-0 !border-0 bg-primary/30 w-72\">\r\n    <ion-card-header class=\"bg-transparent\">\r\n      <ion-card-title class=\"text-center text-sm\">\r\n        Filtro - {{field.header}}\r\n      </ion-card-title>\r\n    </ion-card-header>\r\n    <ion-card-content [ngClass]=\"{'!p-0': ['Select', 'Bool', 'String', 'TextArea'].includes(field.type)}\" class=\"!p-2 bg-light rounded-t-2xl\">\r\n      @switch (field.type) {\r\n        @case ('String') {\r\n          <input-string [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" (blur)=\"Change()\"></input-string>\r\n        }\r\n        @case ('Number') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-number (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-number>\r\n            <input-number (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-number>\r\n          </div>\r\n        }\r\n        @case ('Decimal') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-decimal>\r\n            <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-decimal>\r\n          </div>\r\n        }\r\n        @case ('Currency') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-currency>\r\n            <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-currency>\r\n          </div>\r\n        }\r\n        @case ('Select') {\r\n          <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" [configuration]=\"configuration\"></input-select>\r\n        }\r\n        @case ('TextArea') {\r\n          <input-string (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\"></input-string>\r\n        }\r\n        @case ('Bool') {\r\n          <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" placeholder=\"\" [configuration]=\"configuration\"></input-select>\r\n        }\r\n        @case ('Date') {\r\n          <div class=\"size-full grid grid-cols-1 gap-2\">\r\n            <input-date (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date>\r\n            <input-date (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date>\r\n          </div>\r\n        }\r\n        @case ('DateTime') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date-time>\r\n            <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date-time>\r\n          </div>\r\n        }\r\n      }\r\n    </ion-card-content>\r\n  </ion-card> -->\r\n</sion-popover>\r\n", styles: [".th-select{border-radius:0!important}.th-select ion-card{--border-radius: 0 !important;--border-width: 0 !important;border-radius:0!important;border-width:0!important}.th-select ion-card ion-item{--border-radius: 0 !important;--border-width: 0 !important;border-radius:0!important;border-width:0!important}.th-select ion-card div.w-12 ion-button{--border-width: 1px !important;--border-radius: 0rem 0rem 1rem 0rem !important}\n"], dependencies: [{ kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: NewInputDateComponent, selector: "input-date, input-date-time, input-time", inputs: ["configuration"] }, { kind: "component", type: NewInputDecimalComponent, selector: "input-decimal, input-number, input-currency, input-percentage", inputs: ["configuration"], outputs: ["configurationChange"] }, { kind: "component", type: NewInputSelectComponent, selector: "input-select", inputs: ["items", "configuration"], outputs: ["itemsChange"] }, { kind: "component", type: NewInputStringComponent, selector: "input-string", inputs: ["configuration"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "visibleChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ThFilterComponent, selector: "th-filter", inputs: { field: "field" }, outputs: { changeEmitter: "change" }, ngImport: i0, template: "<div #anchor class=\"h-5 aspect-square mr-1 flex items-center justify-center cursor-pointer\">\r\n  <ion-icon name=\"filter-circle\" (click)=\"popover.present($event)\" class=\"text-xl align-sub size-full\" [color]=\"isFilterActive ? 'secondary' : 'medium' \"></ion-icon>\r\n</div>\r\n\r\n<sion-popover fill=\"solid\" #popover [anchor]=\"anchor\" triggerAction=\"click\">\r\n  <div class=\"w-72 flex flex-col gap-2 p-2\" >\r\n    @if(!['Select', 'Bool', 'String', 'TextArea'].includes(field.type)){\r\n      <ion-label class=\"w-full flex items-center justify-center\">  Filtro - {{field.header}} </ion-label>\r\n    }\r\n    @switch (field.type) {\r\n      @case ('String') {\r\n        <input-string [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" (blur)=\"Change()\"></input-string>\r\n      }\r\n      @case ('Number') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-number (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-number>\r\n          <input-number (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-number>\r\n        </div>\r\n      }\r\n      @case ('Decimal') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-decimal>\r\n          <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-decimal>\r\n        </div>\r\n      }\r\n      @case ('Currency') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-currency>\r\n          <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-currency>\r\n        </div>\r\n      }\r\n      @case ('Select') {\r\n        <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" [configuration]=\"configuration\"></input-select>\r\n      }\r\n      @case ('TextArea') {\r\n        <input-string (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\"></input-string>\r\n      }\r\n      @case ('Bool') {\r\n        <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" placeholder=\"\" [configuration]=\"configuration\"></input-select>\r\n      }\r\n      @case ('Date') {\r\n        <div class=\"size-full grid grid-cols-1 gap-2\">\r\n          <input-date (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date>\r\n          <input-date (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date>\r\n        </div>\r\n      }\r\n      @case ('DateTime') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date-time>\r\n          <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date-time>\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n  <!-- <ion-card class=\"m-0 !border-0 bg-primary/30 w-72\">\r\n    <ion-card-header class=\"bg-transparent\">\r\n      <ion-card-title class=\"text-center text-sm\">\r\n        Filtro - {{field.header}}\r\n      </ion-card-title>\r\n    </ion-card-header>\r\n    <ion-card-content [ngClass]=\"{'!p-0': ['Select', 'Bool', 'String', 'TextArea'].includes(field.type)}\" class=\"!p-2 bg-light rounded-t-2xl\">\r\n      @switch (field.type) {\r\n        @case ('String') {\r\n          <input-string [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" (blur)=\"Change()\"></input-string>\r\n        }\r\n        @case ('Number') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-number (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-number>\r\n            <input-number (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-number>\r\n          </div>\r\n        }\r\n        @case ('Decimal') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-decimal>\r\n            <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-decimal>\r\n          </div>\r\n        }\r\n        @case ('Currency') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-currency>\r\n            <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-currency>\r\n          </div>\r\n        }\r\n        @case ('Select') {\r\n          <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" [configuration]=\"configuration\"></input-select>\r\n        }\r\n        @case ('TextArea') {\r\n          <input-string (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\"></input-string>\r\n        }\r\n        @case ('Bool') {\r\n          <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" placeholder=\"\" [configuration]=\"configuration\"></input-select>\r\n        }\r\n        @case ('Date') {\r\n          <div class=\"size-full grid grid-cols-1 gap-2\">\r\n            <input-date (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date>\r\n            <input-date (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date>\r\n          </div>\r\n        }\r\n        @case ('DateTime') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date-time>\r\n            <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date-time>\r\n          </div>\r\n        }\r\n      }\r\n    </ion-card-content>\r\n  </ion-card> -->\r\n</sion-popover>\r\n", styles: [".th-select{border-radius:0!important}.th-select ion-card{--border-radius: 0 !important;--border-width: 0 !important;border-radius:0!important;border-width:0!important}.th-select ion-card ion-item{--border-radius: 0 !important;--border-width: 0 !important;border-radius:0!important;border-width:0!important}.th-select ion-card div.w-12 ion-button{--border-width: 1px !important;--border-radius: 0rem 0rem 1rem 0rem !important}\n"], dependencies: [{ kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: NewInputDateComponent, selector: "input-date, input-date-time, input-time", inputs: ["configuration"] }, { kind: "component", type: NewInputDecimalComponent, selector: "input-decimal, input-number, input-currency, input-percentage", inputs: ["configuration"], outputs: ["configurationChange"] }, { kind: "component", type: NewInputSelectComponent, selector: "input-select", inputs: ["items", "configuration"], outputs: ["itemsChange"] }, { kind: "component", type: NewInputStringComponent, selector: "input-string", inputs: ["configuration"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "isVisibleChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThFilterComponent, decorators: [{
             type: Component,
@@ -4078,7 +4121,7 @@ class NewInputFileComponent extends CustomInput {
             this.valueString = "...";
             return;
         }
-        this.valueString = typeof this.value() == "string" ? this.value().toString() : this.value().name;
+        this.valueString = typeof this.value() == "string" ? StorageService.SanitizeFileName(this.value().toString()) : this.value().name;
         this.isImage = lstImage.includes(this.valueString.split('.').at(-1).toLowerCase());
         if (this.isImage && !this.isString) {
             this.objectURL = URL.createObjectURL(this.value());