@sapphire-ion/framework 1.0.33 → 1.0.34

package/fesm2022/sapphire-ion-framework.mjs

@@ -969,6 +969,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 class InputSelectConfiguration {
+    static Create(options) {
+        const config = new InputSelectConfiguration(options.bindValue, options.bindLabel, options.clearable, options.searcheable, options.loadFrom, options.multiple, options.vFiltros || null, options.disableConditional || null);
+        if (options.placeholder) {
+            config.placeholder = options.placeholder;
+        }
+        if (options.noItensFoundText) {
+            config.noItensFoundText = options.noItensFoundText;
+        }
+        if (options.useInfiniteScroll != undefined) {
+            config.useInfiniteScroll = options.useInfiniteScroll;
+        }
+        return config;
+    }
+    ;
     constructor(
     /** Valor que será setado no formControl */
     bindValue = "id", 
@@ -1004,6 +1018,7 @@ class InputSelectConfiguration {
             placement: "bottom"
         };
         this.vFiltros = null;
+        this.useInfiniteScroll = false;
         this.clearable = clearable;
         this.searcheable = searcheable;
         this.multiple = multiple;
@@ -1789,7 +1804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: [ICarouselItem]
             }] } });
 
-const lstComponents$3 = [CarouselComponent, CarouselImageComponent, CarouselItemComponent];
+const lstComponents$2 = [CarouselComponent, CarouselImageComponent, CarouselItemComponent];
 class CarouselModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: CarouselModule, declarations: [CarouselComponent, CarouselImageComponent, CarouselItemComponent], imports: [CommonModule,
@@ -1802,8 +1817,8 @@ class CarouselModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CarouselModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...lstComponents$3],
-                    exports: [...lstComponents$3],
+                    declarations: [...lstComponents$2],
+                    exports: [...lstComponents$2],
                     imports: [
                         CommonModule,
                         IonicModule,
@@ -2707,130 +2722,143 @@ class SIonPopoverComponent {
         this.onWillDismiss = new EventEmitter();
         this.onDidDismiss = new EventEmitter();
         this.anchor = undefined;
-        this.isVisible = false;
-        this.isVisibleChange = new EventEmitter();
-        this.lock = false;
-    }
-    async present(event) {
-        if (this.isVisible) {
-            return;
-        }
-        await waitUntil(() => !this.lock);
-        this.lock = true;
-        this.onWillPresent.emit();
-        this.CreatePopoverInBody();
-        await Timeout(0);
-        const refEl = this.anchor ? this.anchor : event.target;
-        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`,
-            });
-            if (computePositionRetrun.middlewareData.arrow) {
-                const { x: arrowX, y: arrowY } = computePositionRetrun.middlewareData.arrow;
-                const position = computePositionRetrun.placement.split('-')[0];
-                const staticSide = staticSides[position];
-                Object.assign(arrowEl.style, {
-                    left: arrowX != null ? `${arrowX}px` : '',
-                    top: arrowY != null ? `${arrowY}px` : '',
-                    right: '',
-                    bottom: '',
-                    [staticSide]: `-7px`,
-                });
-                arrowEl.style.setProperty(`--rotation`, rotations[position]);
-            }
-        });
-        await Timeout(50);
-        this.isVisible = true;
-        this.popoverInstance.style.setProperty('display', 'block');
-        this.isVisibleChange.emit(this.isVisible);
-        await Timeout(200);
-        this.onDidPresent.emit();
-        this.lock = false;
-    }
-    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');
-    }
-    onClick(event) {
-        if (!this.popoverInstance) {
-            return;
-        }
-        if (!this.popoverInstance.contains(event.target) &&
-            !this.anchor.contains(event.target)) {
-            this.dismiss();
-        }
+        this.state = POPOVER_STATE.IDLE;
     }
     ngOnInit() {
+        this.CreateEmbeddedView();
+        this.CreateInstance();
         //TODO: Use Renderer2 to add event listeners for better Angular compatibility when updating to Angular 19
         this.ngZone.runOutsideAngular(() => {
             this.documentClickListener = (event) => {
                 // Run back inside Angular's zone when handling the event
                 this.ngZone.run(() => {
-                    this.onClick(event);
+                    if (!this._instance) {
+                        return;
+                    }
+                    if (!this._instance.contains(event.target) &&
+                        !this.anchor.contains(event.target)) {
+                        this.dismiss();
+                    }
                 });
             };
             // Use the native DOM API directly with capture phase
             document.addEventListener('click', this.documentClickListener, true);
         });
     }
+    CreateEmbeddedView() {
+        if (this._embeddedView) {
+            return;
+        }
+        this._embeddedView = this.popoverTemplate.createEmbeddedView({});
+        this.viewRef = this.viewContainerRef.insert(this._embeddedView);
+    }
+    CreateInstance() {
+        this._instance = this._embeddedView.rootNodes[0];
+        document.body.appendChild(this._instance);
+        // const style = {
+        //   "solid"  : ['bg-light'],
+        //   "outline": ['bg-transparent'],
+        //   "blur"   : ['backdrop-blur-md', 'bg-light/80'],
+        //   "clear"  : ['!border-0 bg-transparent'],
+        // }[this.fill];
+        // style.forEach(s => {
+        //   this._instance.classList.add(s);
+        //   this.arrowEl?.classList.add(s);
+        // });
+    }
+    get arrowEl() {
+        return this._instance.querySelector('.popover-arrow');
+    }
+    async present(event) {
+        if (this.state != POPOVER_STATE.IDLE) {
+            return;
+        }
+        this.onWillPresent.emit();
+        this.state = POPOVER_STATE.PRESENTING;
+        const refEl = this.anchor ? this.anchor : event.target;
+        const arrowEl = this.arrowEl;
+        await this.update(refEl, arrowEl);
+        this._instance.classList.add('show');
+        this.cleanupAutoUpdate = autoUpdate(refEl, this._instance, async () => this.update(refEl, arrowEl));
+        this.state = POPOVER_STATE.VISIBLE;
+        this.onDidPresent.emit();
+    }
+    async update(refEl, arrowEl) {
+        const computePositionReturn = await this.GetComputePositionReturn(refEl, this._instance, arrowEl);
+        this.HandleComputePositionReturn(computePositionReturn, arrowEl);
+    }
     async dismiss() {
-        await waitUntil(() => !this.lock);
-        this.lock = true;
-        this.onWillDismiss.emit();
+        if (this.state == POPOVER_STATE.IDLE) {
+            return;
+        }
         if (this.cleanupAutoUpdate) {
             this.cleanupAutoUpdate();
             this.cleanupAutoUpdate = undefined;
         }
-        this.isVisible = false;
-        this.isVisibleChange.emit(this.isVisible);
+        this.onWillDismiss.emit();
+        this.state = POPOVER_STATE.DISMISSING;
+        this._instance.classList.remove('show');
         await Timeout(200);
-        if (this.popoverInstance) {
-            document.body.removeChild(this.popoverInstance);
-            this.popoverInstance = undefined;
-        }
+        this.state = POPOVER_STATE.IDLE;
         this.onDidDismiss.emit();
-        this.lock = false;
+    }
+    HandleComputePositionReturn(computePositionReturn, arrowEl) {
+        Object.assign(this._instance.style, {
+            left: `${computePositionReturn.x}px`,
+            top: `${computePositionReturn.y}px`,
+            width: this.width,
+            height: this.height,
+            position: 'absolute',
+        });
+        if (computePositionReturn.middlewareData.arrow) {
+            const { x: arrowX, y: arrowY } = computePositionReturn.middlewareData.arrow;
+            const position = computePositionReturn.placement.split('-')[0];
+            const staticSide = STATIC_SIDES[position];
+            Object.assign(arrowEl.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+                right: '',
+                bottom: '',
+                [staticSide]: `-7px`,
+            });
+            arrowEl.style.setProperty(`--rotation`, ROTATIONS[position]);
+        }
     }
     ngOnDestroy() {
+        if (this._instance) {
+            document.body.removeChild(this._instance);
+            this._instance.remove();
+            this._instance = undefined;
+        }
+        if (this._embeddedView) {
+            this._embeddedView.destroy();
+            this._embeddedView = undefined;
+        }
         if (this.documentClickListener) {
             document.removeEventListener('click', this.documentClickListener, true);
         }
-        this.dismiss();
+        if (this.viewRef) {
+            this.viewRef.destroy();
+            this.viewRef = undefined;
+        }
+    }
+    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),
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SIonPopoverComponent, selector: "sion-popover", inputs: { fill: "fill", arrow: "arrow", flip: "flip", placement: "placement", height: "height", width: "width", anchor: "anchor" }, outputs: { onWillPresent: "onWillPresent", onDidPresent: "onDidPresent", onWillDismiss: "onWillDismiss", onDidDismiss: "onDidDismiss", isVisibleChange: "isVisibleChange" }, queries: [{ propertyName: "contentChildren", predicate: ["*"], descendants: true }], viewQueries: [{ propertyName: "popoverTemplate", first: true, predicate: ["popoverTemplate"], descendants: true, static: true }, { propertyName: "contentContainer", first: true, predicate: ["popoverWrapper"], descendants: true }, { propertyName: "arrowElement", first: true, predicate: ["popoverArrow"], descendants: true }], ngImport: i0, template: "<ng-template #popoverTemplate>\r\n  <div #popoverWrapper class=\"popover-wrapper translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n        'visible-anim'    : isVisible,\r\n        'invisible-anim'  : !isVisible,\r\n      }\"\r\n    [style.height]=\"height\"\r\n    [style.width]=\"width\"\r\n  >\r\n  <!-- 'solid' | 'outline' | 'blur' | 'clear' -->\r\n    @if(arrow){\r\n      <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n        [ngClass]=\"{\r\n          'bg-light'        : fill == 'solid',\r\n          'bg-transparent'  : fill == 'outline',\r\n          'backdrop-blur-md': fill == 'blur',\r\n          'visible-anim'    : isVisible,\r\n          'invisible-anim'  : !isVisible,\r\n      }\"\r\n      ></div>\r\n    }\r\n    <ng-content #content></ng-content>\r\n  </div>\r\n</ng-template>", styles: [".popover-wrapper{z-index:50;border-radius:.75rem;width:max-content;position:absolute;will-change:left,top,bottom,right,auto,opacity,filter;transition:opacity,transform,filter .2s ease-in-out;display:none}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.visible-anim{animation:visible .2s ease-in-out forwards}.invisible-anim{pointer-events:none;animation:invisible .2s ease-in-out forwards;opacity:0}@keyframes visible{0%{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}to{opacity:1!important;filter:grayscale(0);transform:scale(1)}}@keyframes invisible{0%{opacity:1;filter:grayscale(0);transform:scale(1)}to{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SIonPopoverComponent, selector: "sion-popover", inputs: { fill: "fill", arrow: "arrow", flip: "flip", placement: "placement", height: "height", width: "width", anchor: "anchor" }, outputs: { onWillPresent: "onWillPresent", onDidPresent: "onDidPresent", onWillDismiss: "onWillDismiss", onDidDismiss: "onDidDismiss" }, viewQueries: [{ propertyName: "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 \r\n    class=\"popover-wrapper translucid-border\"\r\n    [style.height]=\"height\"\r\n    [style.width]=\"width\"\r\n    [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n      }\"\r\n  > \r\n    <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n      }\"\r\n    ></div>\r\n\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,auto,opacity,filter;opacity:0;transition:opacity .15s ease-in-out,transform .15s ease-in-out,filter .15s ease-in-out;min-width:2rem;min-height:2rem;filter:grayscale(.9);transform:scale(.95)}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.show{filter:grayscale(0);transform:scale(1);opacity:1}.popover-wrapper:not(.show){pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sion-popover', template: "<ng-template #popoverTemplate>\r\n  <div #popoverWrapper class=\"popover-wrapper translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n        'visible-anim'    : isVisible,\r\n        'invisible-anim'  : !isVisible,\r\n      }\"\r\n    [style.height]=\"height\"\r\n    [style.width]=\"width\"\r\n  >\r\n  <!-- 'solid' | 'outline' | 'blur' | 'clear' -->\r\n    @if(arrow){\r\n      <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n        [ngClass]=\"{\r\n          'bg-light'        : fill == 'solid',\r\n          'bg-transparent'  : fill == 'outline',\r\n          'backdrop-blur-md': fill == 'blur',\r\n          'visible-anim'    : isVisible,\r\n          'invisible-anim'  : !isVisible,\r\n      }\"\r\n      ></div>\r\n    }\r\n    <ng-content #content></ng-content>\r\n  </div>\r\n</ng-template>", styles: [".popover-wrapper{z-index:50;border-radius:.75rem;width:max-content;position:absolute;will-change:left,top,bottom,right,auto,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"] }]
+            args: [{ selector: 'sion-popover', template: "<ng-template #popoverTemplate>\r\n  <div #popoverWrapper \r\n    class=\"popover-wrapper translucid-border\"\r\n    [style.height]=\"height\"\r\n    [style.width]=\"width\"\r\n    [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n      }\"\r\n  > \r\n    <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n      }\"\r\n    ></div>\r\n\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,auto,opacity,filter;opacity:0;transition:opacity .15s ease-in-out,transform .15s ease-in-out,filter .15s ease-in-out;min-width:2rem;min-height:2rem;filter:grayscale(.9);transform:scale(.95)}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.show{filter:grayscale(0);transform:scale(1);opacity:1}.popover-wrapper:not(.show){pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.NgZone }], propDecorators: { fill: [{
                 type: Input
             }], arrow: [{
@@ -2862,29 +2890,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], arrowElement: [{
                 type: ViewChild,
                 args: ['popoverArrow']
-            }], contentChildren: [{
-                type: ContentChildren,
-                args: ['*', { descendants: true }]
-            }], isVisibleChange: [{
-                type: Output
             }] } });
-const staticSides = {
+var POPOVER_STATE;
+(function (POPOVER_STATE) {
+    POPOVER_STATE[POPOVER_STATE["IDLE"] = 1] = "IDLE";
+    POPOVER_STATE[POPOVER_STATE["PRESENTING"] = 2] = "PRESENTING";
+    POPOVER_STATE[POPOVER_STATE["DISMISSING"] = 3] = "DISMISSING";
+    POPOVER_STATE[POPOVER_STATE["VISIBLE"] = 4] = "VISIBLE";
+})(POPOVER_STATE || (POPOVER_STATE = {}));
+const STATIC_SIDES = {
     top: "bottom",
     right: "left",
     bottom: "top",
     left: "right"
 };
-const rotations = {
+const ROTATIONS = {
     bottom: "135deg",
     top: "315deg",
     left: "225deg",
     right: "45deg",
 };
-async function waitUntil(condition, interval = 50) {
-    while (!condition()) {
-        await new Promise(resolve => setTimeout(resolve, interval));
-    }
-}
 
 class InputDateComponent extends CustomInput {
     setFocus(event) {
@@ -2969,14 +2994,14 @@ class InputDateComponent extends CustomInput {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputDateComponent, selector: "input-date, input-date-time, input-time", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             ...InputProviderFactory.GetProviders(InputDateComponent),
             { provide: CustomInput, useExisting: forwardRef(() => InputDateComponent) },
-        ], 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)=\"setFocus($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 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: 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", "showAdjacentDays", "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: i3$1.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"] }] }); }
+        ], 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)=\"setFocus($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\" [showAdjacentDays]=\"true\" 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 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: 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", "showAdjacentDays", "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: i3$1.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'input-date, input-date-time, input-time', providers: [
                         ...InputProviderFactory.GetProviders(InputDateComponent),
                         { provide: CustomInput, useExisting: forwardRef(() => InputDateComponent) },
-                    ], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"setFocus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.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 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
+                    ], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"setFocus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.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\" [showAdjacentDays]=\"true\" 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 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
@@ -3275,6 +3300,10 @@ class InputSelectComponent extends CustomInput {
             this.currentItems = this.lstOptionsItemValue().find(p => p.selected);
         }
     }
+    AddPage(event) {
+        this.infiniteScrollPage.set(this.infiniteScrollPage() + 1);
+        event.target.complete();
+    }
     UpdateLstOptions(search) {
         // Update the search 
         if (search) {
@@ -3283,6 +3312,9 @@ class InputSelectComponent extends CustomInput {
         else {
             this.lstOptions = this.lstOptionsItemValue();
         }
+        if (this.configuration().useInfiniteScroll) {
+            this.lstOptions = this.lstOptions.slice(0, this.infiniteScrollPage() * 25);
+        }
     }
     UpdateSelected() {
         if (this.configuration().multiple) {
@@ -3320,11 +3352,12 @@ class InputSelectComponent extends CustomInput {
                 item.value = bindValue(p);
                 item.item = p;
                 item.selected = this.value() == item.value;
-                item.disabled = p.disabled || false || (this.isServiceAtivo && p.ativo == false);
+                item.disabled = p.disabled || false || (this.isServiceAtivo() && p.ativo == false);
                 return item;
             });
         });
         this.lstOptions = [];
+        this.infiniteScrollPage = signal(1);
         this.isServiceAtivo = computed(() => { return this.configuration().loadFromService instanceof HttpServiceAtivo; });
         this.somenteAtivos = signal(true);
         this.selectedIndex = undefined;
@@ -3400,7 +3433,9 @@ class InputSelectComponent extends CustomInput {
     }
     ngAfterViewInit() {
         const observable = this.searchBarControl.valueChanges.pipe(takeUntil(this.destroy$), distinctUntilChanged(), debounceTime(200));
-        this.searchBarSubscription = observable.subscribe((value) => {
+        //OnSearchChange
+        this.searchBarSubscription = observable.subscribe(async (value) => {
+            await this.ionContent.scrollToTop();
             this.selectedIndex = undefined;
             this.searchValue.set(value);
         });
@@ -3484,6 +3519,9 @@ class InputSelectComponent extends CustomInput {
         if (this.inputSelectLabel?.nativeElement) {
             this.inputSelectLabel.nativeElement.focus();
         }
+        if (this.configuration().useInfiniteScroll) {
+            this.infiniteScrollPage.set(1);
+        }
     }
     OnDismiss() {
         this.floatingVisible = false;
@@ -3500,14 +3538,14 @@ class InputSelectComponent extends CustomInput {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputSelectComponent, selector: "input-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { listeners: { "document:keydown": "HandleKeyboardEvent($event)" } }, providers: [
             ...InputProviderFactory.GetProviders(InputSelectComponent),
             { provide: CustomInput, useExisting: forwardRef(() => InputSelectComponent) },
-        ], queries: [{ propertyName: "labelTemplate", first: true, predicate: SIonLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optionTemplate", first: true, predicate: SIonOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: SIonPlaceholderTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "inputSelectLabel", first: true, predicate: ["inputSelectLabel"], descendants: true }, { propertyName: "inputSearchBar", first: true, predicate: ["inputSearchBar"], descendants: true }, { propertyName: "selectContent", first: true, predicate: ["selectContent"], descendants: true }, { propertyName: "popover", first: true, predicate: SIonPopoverComponent, descendants: true }, { propertyName: "modal", first: true, predicate: IonModal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"setFocus($event);\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.manual-focus]=\"floatingVisible\"\r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n  [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\"  #inputSelectLabel tabindex=\"0\">\r\n    @if (!configuration().multiple && currentLabel){\r\n      @if(labelTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"labelTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n      }\r\n    }\r\n    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n      <div class=\"w-full min-h-6 overflow-hidden relative\">\r\n        <div class=\"absolute left-0 top-0 overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n          @for (item of currentItems; track $index) {\r\n            <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n              @if(labelTemplate){\r\n                <ng-container \r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n                </ng-container>\r\n              }\r\n              @else {\r\n                <span class=\"input-select-label\"> {{item.label}} </span>\r\n              }\r\n            \r\n              <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </div>\r\n              <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </ion-button> -->\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if(placeholderTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"placeholderTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n    <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n    <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n  </div>\r\n  @if(configuration().clearable){\r\n    <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n      <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n  } \r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n  <div class=\"error-container\" (click)=\"configuration().loader.Refresh()\" [class.active]=\"configuration().loader.error && !loadingFromLoader\">\r\n    <ion-icon class=\"text-xl\" color=\"danger\" name=\"refresh-circle\"></ion-icon>\r\n  </div>\r\n</div>\r\n\r\n@if(!disabled()){\r\n  <ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n    <ng-template>\r\n      <ion-header>\r\n        <ion-toolbar>\r\n          <ion-buttons slot=\"end\">\r\n            <ion-button (click)=\"modal.dismiss()\">\r\n              <ion-icon name=\"close-circle\"></ion-icon>\r\n            </ion-button>\r\n          </ion-buttons>\r\n        </ion-toolbar>\r\n      </ion-header>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n    </ng-template>\r\n  </ion-modal>\r\n\r\n  <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\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n  <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      @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    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}.error-container{pointer-events:none;position:absolute;bottom:0;left:0;z-index:200;display:flex;width:100%;height:100%;--tw-translate-y: -3rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;opacity:0;will-change:opacity,auto;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.error-container.active{pointer-events:auto!important;--tw-translate-y: 0px !important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important;opacity:1!important}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: 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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { 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.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { 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"] }] }); }
+        ], queries: [{ propertyName: "labelTemplate", first: true, predicate: SIonLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optionTemplate", first: true, predicate: SIonOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: SIonPlaceholderTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "inputSelectLabel", first: true, predicate: ["inputSelectLabel"], descendants: true }, { propertyName: "inputSearchBar", first: true, predicate: ["inputSearchBar"], descendants: true }, { propertyName: "selectContent", first: true, predicate: ["selectContent"], descendants: true }, { propertyName: "popover", first: true, predicate: SIonPopoverComponent, descendants: true }, { propertyName: "modal", first: true, predicate: IonModal, descendants: true }, { propertyName: "ionContent", first: true, predicate: ["scrollContent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"setFocus($event);\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.manual-focus]=\"floatingVisible\"\r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n  [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\"  #inputSelectLabel tabindex=\"0\">\r\n    @if (!configuration().multiple && currentLabel){\r\n      @if(labelTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"labelTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n      }\r\n    }\r\n    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n      <div class=\"w-full min-h-6 overflow-hidden relative\">\r\n        <div class=\"absolute left-0 top-0 overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n          @for (item of currentItems; track $index) {\r\n            <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n              @if(labelTemplate){\r\n                <ng-container \r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n                </ng-container>\r\n              }\r\n              @else {\r\n                <span class=\"input-select-label\"> {{item.label}} </span>\r\n              }\r\n            \r\n              <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </div>\r\n              <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </ion-button> -->\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if(placeholderTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"placeholderTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n    <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n    <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n  </div>\r\n  @if(configuration().clearable){\r\n    <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n      <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n  } \r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n  <div class=\"error-container\" (click)=\"configuration().loader.Refresh()\" [class.active]=\"configuration().loader.error && !loadingFromLoader\">\r\n    <ion-icon class=\"text-xl\" color=\"danger\" name=\"refresh-circle\"></ion-icon>\r\n  </div>\r\n</div>\r\n\r\n@if(!disabled()){\r\n  <ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n    <ng-template>\r\n      <ion-header>\r\n        <ion-toolbar>\r\n          <ion-buttons slot=\"end\">\r\n            <ion-button (click)=\"modal.dismiss()\">\r\n              <ion-icon name=\"close-circle\"></ion-icon>\r\n            </ion-button>\r\n          </ion-buttons>\r\n        </ion-toolbar>\r\n      </ion-header>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n    </ng-template>\r\n  </ion-modal>\r\n\r\n  <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\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n  <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      <ion-content #scrollContent class=\"size-full\" [scrollY]=\"true\">\r\n        @for (item of lstOptions; track item.value) { \r\n          <ng-container \r\n            [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n          </ng-container>\r\n        }\r\n        @if(configuration().useInfiniteScroll){\r\n          <ion-infinite-scroll threshold=\"10px\" *ngIf=\"lstOptions.length && lstOptions.length != lstOptionsItemValue().length\" (ionInfinite)=\"AddPage($event)\">\r\n            <ion-infinite-scroll-content></ion-infinite-scroll-content>\r\n          </ion-infinite-scroll>\r\n        }\r\n      </ion-content>\r\n    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}.error-container{pointer-events:none;position:absolute;bottom:0;left:0;z-index:200;display:flex;width:100%;height:100%;--tw-translate-y: -3rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;opacity:0;will-change:opacity,auto;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.error-container.active{pointer-events:auto!important;--tw-translate-y: 0px !important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important;opacity:1!important}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: 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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i3.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'input-select', providers: [
                         ...InputProviderFactory.GetProviders(InputSelectComponent),
                         { provide: CustomInput, useExisting: forwardRef(() => InputSelectComponent) },
-                    ], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"setFocus($event);\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.manual-focus]=\"floatingVisible\"\r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n  [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\"  #inputSelectLabel tabindex=\"0\">\r\n    @if (!configuration().multiple && currentLabel){\r\n      @if(labelTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"labelTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n      }\r\n    }\r\n    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n      <div class=\"w-full min-h-6 overflow-hidden relative\">\r\n        <div class=\"absolute left-0 top-0 overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n          @for (item of currentItems; track $index) {\r\n            <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n              @if(labelTemplate){\r\n                <ng-container \r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n                </ng-container>\r\n              }\r\n              @else {\r\n                <span class=\"input-select-label\"> {{item.label}} </span>\r\n              }\r\n            \r\n              <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </div>\r\n              <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </ion-button> -->\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if(placeholderTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"placeholderTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n    <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n    <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n  </div>\r\n  @if(configuration().clearable){\r\n    <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n      <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n  } \r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n  <div class=\"error-container\" (click)=\"configuration().loader.Refresh()\" [class.active]=\"configuration().loader.error && !loadingFromLoader\">\r\n    <ion-icon class=\"text-xl\" color=\"danger\" name=\"refresh-circle\"></ion-icon>\r\n  </div>\r\n</div>\r\n\r\n@if(!disabled()){\r\n  <ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n    <ng-template>\r\n      <ion-header>\r\n        <ion-toolbar>\r\n          <ion-buttons slot=\"end\">\r\n            <ion-button (click)=\"modal.dismiss()\">\r\n              <ion-icon name=\"close-circle\"></ion-icon>\r\n            </ion-button>\r\n          </ion-buttons>\r\n        </ion-toolbar>\r\n      </ion-header>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n    </ng-template>\r\n  </ion-modal>\r\n\r\n  <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\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n  <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      @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    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}.error-container{pointer-events:none;position:absolute;bottom:0;left:0;z-index:200;display:flex;width:100%;height:100%;--tw-translate-y: -3rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;opacity:0;will-change:opacity,auto;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.error-container.active{pointer-events:auto!important;--tw-translate-y: 0px !important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important;opacity:1!important}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
+                    ], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"setFocus($event);\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.manual-focus]=\"floatingVisible\"\r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n  [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\"  #inputSelectLabel tabindex=\"0\">\r\n    @if (!configuration().multiple && currentLabel){\r\n      @if(labelTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"labelTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n      }\r\n    }\r\n    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n      <div class=\"w-full min-h-6 overflow-hidden relative\">\r\n        <div class=\"absolute left-0 top-0 overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n          @for (item of currentItems; track $index) {\r\n            <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n              @if(labelTemplate){\r\n                <ng-container \r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n                </ng-container>\r\n              }\r\n              @else {\r\n                <span class=\"input-select-label\"> {{item.label}} </span>\r\n              }\r\n            \r\n              <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </div>\r\n              <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </ion-button> -->\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if(placeholderTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"placeholderTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n    <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n    <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n  </div>\r\n  @if(configuration().clearable){\r\n    <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n      <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n  } \r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n  <div class=\"error-container\" (click)=\"configuration().loader.Refresh()\" [class.active]=\"configuration().loader.error && !loadingFromLoader\">\r\n    <ion-icon class=\"text-xl\" color=\"danger\" name=\"refresh-circle\"></ion-icon>\r\n  </div>\r\n</div>\r\n\r\n@if(!disabled()){\r\n  <ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n    <ng-template>\r\n      <ion-header>\r\n        <ion-toolbar>\r\n          <ion-buttons slot=\"end\">\r\n            <ion-button (click)=\"modal.dismiss()\">\r\n              <ion-icon name=\"close-circle\"></ion-icon>\r\n            </ion-button>\r\n          </ion-buttons>\r\n        </ion-toolbar>\r\n      </ion-header>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n    </ng-template>\r\n  </ion-modal>\r\n\r\n  <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\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n  <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      <ion-content #scrollContent class=\"size-full\" [scrollY]=\"true\">\r\n        @for (item of lstOptions; track item.value) { \r\n          <ng-container \r\n            [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n          </ng-container>\r\n        }\r\n        @if(configuration().useInfiniteScroll){\r\n          <ion-infinite-scroll threshold=\"10px\" *ngIf=\"lstOptions.length && lstOptions.length != lstOptionsItemValue().length\" (ionInfinite)=\"AddPage($event)\">\r\n            <ion-infinite-scroll-content></ion-infinite-scroll-content>\r\n          </ion-infinite-scroll>\r\n        }\r\n      </ion-content>\r\n    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}.error-container{pointer-events:none;position:absolute;bottom:0;left:0;z-index:200;display:flex;width:100%;height:100%;--tw-translate-y: -3rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;opacity:0;will-change:opacity,auto;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.error-container.active{pointer-events:auto!important;--tw-translate-y: 0px !important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important;opacity:1!important}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { labelTemplate: [{
                 type: ContentChild,
                 args: [SIonLabelTemplateDirective, { read: TemplateRef }]
@@ -3538,6 +3576,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], modal: [{
                 type: ViewChild,
                 args: [IonModal]
+            }], ionContent: [{
+                type: ViewChild,
+                args: ['scrollContent']
             }] } });
 class ItemValue {
     constructor() {
@@ -3731,7 +3772,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 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: InputDateComponent, selector: "input-date, input-date-time, input-time", inputs: ["configuration"] }, { kind: "component", type: InputDecimalComponent, selector: "input-decimal, input-number, input-currency, input-percentage", inputs: ["configuration"], outputs: ["configurationChange"] }, { kind: "component", type: InputSelectComponent, selector: "input-select", inputs: ["items", "configuration"], outputs: ["itemsChange"] }, { kind: "component", type: InputStringComponent, 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"] }] }); }
+    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 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: InputDateComponent, selector: "input-date, input-date-time, input-time", inputs: ["configuration"] }, { kind: "component", type: InputDecimalComponent, selector: "input-decimal, input-number, input-currency, input-percentage", inputs: ["configuration"], outputs: ["configurationChange"] }, { kind: "component", type: InputSelectComponent, selector: "input-select", inputs: ["items", "configuration"], outputs: ["itemsChange"] }, { kind: "component", type: InputStringComponent, 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThFilterComponent, decorators: [{
             type: Component,
@@ -4709,7 +4750,7 @@ class InputColorComponent extends CustomInput {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputColorComponent, selector: "input-color", providers: [
             ...InputProviderFactory.GetProviders(InputColorComponent),
             { provide: CustomInput, useExisting: forwardRef(() => InputColorComponent) },
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "popover", first: true, predicate: SIonPopoverComponent, descendants: true }, { propertyName: "gradient", first: true, predicate: ["gradient"], descendants: true }, { propertyName: "hueSlider", first: true, predicate: ["hueSlider"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"setFocus($event); Present($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  <input #input\r\n    [maskito]=\"HEXMask\"\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"SetColorFromHex($event, true, true)\" \r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  <div class=\" absolute bottom-2 right-8 size-5 rounded-sm overflow-hidden\" [style]=\"{ 'background': value() }\"> </div>\r\n\r\n  <ion-button tabindex=\"-1\" class=\"absolute right-1 bottom-1\" (click)=\"CopyToClipboard(); $event.stopPropagation();\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n    <ion-icon name=\"clipboard\" slot=\"icon-only\"></ion-icon>\r\n  </ion-button>\r\n\r\n    <!-- [maxlength]=\"configuration().maxlength\" -->\r\n    <!-- [type]=\"configuration().type\"  -->\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  #popover \r\n  width=\"fit-content\" \r\n  [anchor]=\"inputContainer\" \r\n>\r\n  <div class=\"size-full p-2 flex gap-1\">  \r\n    <div class=\"flex flex-col w-44 shrink-0 gap-1\">\r\n      <div id=\"gradientWrapper\" class=\"w-44 h-32 relative\">\r\n        <canvas #gradient width=\"176\" height=\"128\" class=\"size-full rounded-sm translucid-border\"></canvas>\r\n        <div class=\"color-indicator quick-transition\" [style.left.%]=\"indicatorX\" [style.top.%]=\"indicatorY\"></div>\r\n      </div>\r\n\r\n      <div id=\"hueWrapper\" class=\"w-full relative\">\r\n        <canvas #hueSlider   class=\"w-full rounded h-[22px]\" width=\"176\" height=\"22\"></canvas>\r\n        <div class=\"indicator quick-transition\" [style.left.%]=\"hslColor.h / 3.6\"></div>\r\n      </div>\r\n\r\n      <div id=\"alphaWrapper\" class=\"w-full relative\">\r\n        <canvas #alphaSlider class=\"w-full rounded h-[22px]\" width=\"176\" height=\"22\"></canvas>\r\n        <div class=\"indicator quick-transition\" [style.left.%]=\"alpha\"></div>\r\n      </div>\r\n\r\n      <div class=\"w-full flex shrink-0\">\r\n        <div class=\"w-full grid grid-cols-5 gap-1\">\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#000000FF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#3880FFFF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#2DD36FFF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#FFC409FF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#EB445AFF' }\"></ng-container>\r\n          \r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#FFFFFFFF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#59168bFF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#C6005CFF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#FB2C36FF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#314158FF' }\"></ng-container>\r\n        </div>\r\n      </div>  \r\n    </div>\r\n  </div>\r\n</sion-popover>\r\n\r\n<ng-template #templateColor let-color>\r\n  <div class=\"size-8 rounded translucid-border cursor-pointer\" (click)=\"SetColorFromHex(color, true, true)\" [style.background]=\"color\"></div>\r\n</ng-template>", styles: ["input:focus{outline:solid 1px color-mix(in srgb,var(--ion-color-primary) 30%,transparent)}input{height:1.25rem;border-radius:.25rem;outline:1px solid transparent;transition-property:outline;transition-duration:.2s}.color-indicator{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid white;box-shadow:0 0 2px #00000080;transform:translate(-50%,-50%);pointer-events:none}.indicator{position:absolute;top:50%;width:6px;height:24px;background-color:#fff;border-radius:3px;box-shadow:0 0 2px #00000080;transform:translate(-50%,-50%);pointer-events:none}.quick-transition{transition:all 75ms}ion-popover{--width: fit-content;--height: fit-content}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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: i3$1.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"] }] }); }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "popover", first: true, predicate: SIonPopoverComponent, descendants: true }, { propertyName: "gradient", first: true, predicate: ["gradient"], descendants: true }, { propertyName: "hueSlider", first: true, predicate: ["hueSlider"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"setFocus($event); Present($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  <input #input\r\n    [maskito]=\"HEXMask\"\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"SetColorFromHex($event, true, true)\" \r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  <div class=\" absolute bottom-2 right-8 size-5 rounded-sm overflow-hidden\" [style]=\"{ 'background': value() }\"> </div>\r\n\r\n  <ion-button tabindex=\"-1\" class=\"absolute right-1 bottom-1\" (click)=\"CopyToClipboard(); $event.stopPropagation();\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n    <ion-icon name=\"clipboard\" slot=\"icon-only\"></ion-icon>\r\n  </ion-button>\r\n\r\n    <!-- [maxlength]=\"configuration().maxlength\" -->\r\n    <!-- [type]=\"configuration().type\"  -->\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  #popover \r\n  width=\"fit-content\" \r\n  [anchor]=\"inputContainer\" \r\n>\r\n  <div class=\"size-full p-2 flex gap-1\">  \r\n    <div class=\"flex flex-col w-44 shrink-0 gap-1\">\r\n      <div id=\"gradientWrapper\" class=\"w-44 h-32 relative\">\r\n        <canvas #gradient width=\"176\" height=\"128\" class=\"size-full rounded-sm translucid-border\"></canvas>\r\n        <div class=\"color-indicator quick-transition\" [style.left.%]=\"indicatorX\" [style.top.%]=\"indicatorY\"></div>\r\n      </div>\r\n\r\n      <div id=\"hueWrapper\" class=\"w-full relative\">\r\n        <canvas #hueSlider   class=\"w-full rounded h-[22px]\" width=\"176\" height=\"22\"></canvas>\r\n        <div class=\"indicator quick-transition\" [style.left.%]=\"hslColor.h / 3.6\"></div>\r\n      </div>\r\n\r\n      <div id=\"alphaWrapper\" class=\"w-full relative\">\r\n        <canvas #alphaSlider class=\"w-full rounded h-[22px]\" width=\"176\" height=\"22\"></canvas>\r\n        <div class=\"indicator quick-transition\" [style.left.%]=\"alpha\"></div>\r\n      </div>\r\n\r\n      <div class=\"w-full flex shrink-0\">\r\n        <div class=\"w-full grid grid-cols-5 gap-1\">\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#000000FF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#3880FFFF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#2DD36FFF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#FFC409FF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#EB445AFF' }\"></ng-container>\r\n          \r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#FFFFFFFF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#59168bFF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#C6005CFF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#FB2C36FF' }\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"templateColor; context: { $implicit: '#314158FF' }\"></ng-container>\r\n        </div>\r\n      </div>  \r\n    </div>\r\n  </div>\r\n</sion-popover>\r\n\r\n<ng-template #templateColor let-color>\r\n  <div class=\"size-8 rounded translucid-border cursor-pointer\" (click)=\"SetColorFromHex(color, true, true)\" [style.background]=\"color\"></div>\r\n</ng-template>", styles: ["input:focus{outline:solid 1px color-mix(in srgb,var(--ion-color-primary) 30%,transparent)}input{height:1.25rem;border-radius:.25rem;outline:1px solid transparent;transition-property:outline;transition-duration:.2s}.color-indicator{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid white;box-shadow:0 0 2px #00000080;transform:translate(-50%,-50%);pointer-events:none}.indicator{position:absolute;top:50%;width:6px;height:24px;background-color:#fff;border-radius:3px;box-shadow:0 0 2px #00000080;transform:translate(-50%,-50%);pointer-events:none}.quick-transition{transition:all 75ms}ion-popover{--width: fit-content;--height: fit-content}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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: i3$1.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputColorComponent, decorators: [{
             type: Component,
@@ -10136,9 +10177,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: [(DefaultViewComponent)]
             }] } });
 
-const lstComponents$2 = [
-    SIonPopoverComponent,
-];
 class SIonPopoverModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverModule, declarations: [SIonPopoverComponent], imports: [CommonModule], exports: [SIonPopoverComponent] }); }
@@ -10147,8 +10185,8 @@ class SIonPopoverModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...lstComponents$2,],
-                    exports: [...lstComponents$2],
+                    declarations: [SIonPopoverComponent],
+                    exports: [SIonPopoverComponent],
                     imports: [
                         CommonModule
                     ]
@@ -10669,7 +10707,7 @@ class DrawerComponent {
         this.genericService.SetTitle(item.title);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerComponent, deps: [{ token: i2$2.Router }, { token: i3.NavController }, { token: GenericService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DrawerComponent, isStandalone: true, selector: "drawer", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, lstMenu: { classPropertyName: "lstMenu", publicName: "lstMenu", isSignal: true, isRequired: false, transformFunction: null }, colapsed: { classPropertyName: "colapsed", publicName: "colapsed", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, useTranslation: { classPropertyName: "useTranslation", publicName: "useTranslation", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { colapsedChange: "colapsedChange" }, ngImport: i0, template: "<div class=\"absolute left-0 top-0 h-full bg-light size-full flex flex-col p-2 !pr-0 w-[19rem] overflow-hidden\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <!-- [ Header ] -->\r\n  <div class=\"shrink-0 w-full flex justify-between items-center\">\r\n    <div #anchor\r\n      (click)=\"ToggleCollapsed()\" \r\n      class=\"toggle size-10 aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu\"\r\n    >\r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </div>\r\n    <!-- <ion-button class=\"size-10 shrink-0 aspect-square\" size=\"small\" color=\"medium\" (click)=\"ToggleCollapsed()\">\r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button> -->\r\n\r\n    <div class=\"size-full shrink flex pl-2 \">\r\n      <div class=\"size-full max-h-10 flex flex-wrap overflow-hidden\">\r\n        @if (!ref.children.length) {\r\n          <ion-text class=\"size-full flex items-center justify-center default-transition z-0\" [ngClass]=\"{'opacity-0 -translate-x-1/2 pointer-events-none': colapsed }\"> \r\n            {{title}}\r\n          </ion-text>\r\n        }\r\n        <div #ref class=\"size-full flex items-center justify-center shrink-0\">\r\n          <ng-content select=\"[slot=logo]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- [ Content ] -->\r\n  <div class=\"size-full shrink flex flex-col relative overflow-hidden\">\r\n    <loading [type]=\"3\" [loading]=\"loading\" text=\"\"></loading>\r\n    <div class=\"size-full shrink flex gap-2\">\r\n      <div class=\"h-full w-12 pr-2 py-2 mask-y shrink-0 flex flex-col gap-2 overflow-y-auto overflow-x-hidden border-dashed border-r border-r-medium/30\">\r\n        <div #searchAnchor (click)=\"modal.present()\" class=\"search-button size-10 aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu\">\r\n          <ion-icon name=\"search\" slot=\"icon-only\"></ion-icon>\r\n        </div>\r\n\r\n        @for (item of lstMenu(); track $index) {\r\n          <div>\r\n            <div\r\n              [class.bg-active]=\"CurrentGroupActive == item\"\r\n              #anchor (mouseenter)=\"popover.present($event)\" \r\n              (mouseleave)=\"popover.dismiss()\" \r\n              (click)=\"CurrentGroupActive = item\" \r\n              class=\"w-10 aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu\"\r\n            >\r\n              <ion-icon [name]=\"item.icon\"></ion-icon>\r\n            </div>\r\n            <sion-popover #popover [anchor]=\"anchor\" [flip]=\"false\" placement=\"right\" fill=\"solid\">\r\n              <div class=\"p-1\">\r\n                {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n              </div>\r\n            </sion-popover>\r\n          </div>\r\n        }\r\n\r\n      </div>\r\n      <div class=\"size-full shrink relative\">\r\n        @for (mGroup of lstMenu(); track $index) {\r\n          <div class=\"absolute top-0 left-0 size-full py-2 default-transition opacity-0 translate-x-full z-0 overflow-hidden\" [ngClass]=\"{'opacity-100 !translate-x-0': CurrentGroupActive == mGroup}\">\r\n            <drawer-group [MenuGroup]=\"mGroup\" [useTranslation]=\"useTranslation\" [colapsed]=\"colapsed\"></drawer-group>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- [ End ] -->\r\n  <div class=\"shrink-0 w-full\">\r\n    <ng-content select=\"[slot=drawer]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<ion-modal #modal [keepContentsMounted]=\"true\" (onWillDismiss)=\"search.set('')\">\r\n  <ng-template>\r\n    <ion-content>\r\n      <ion-card class=\"size-full m-0 overflow-hidden\">\r\n        <ion-card-content class=\"size-full flex flex-col overflow-hidden p-0\">\r\n          <div class=\"shrink-0 w-full flex items-center justify-center\">\r\n            <ion-searchbar class=\"p-0 !pl-2 !py-2\" [ngModel]=\"this.search()\" (ngModelChange)=\"this.search.set($event)\" [debounce]=\"200\"></ion-searchbar>\r\n            <ion-button size=\"small\" fill=\"clear\" (click)=\"modal.dismiss()\">\r\n              <ion-icon name=\"close\"></ion-icon>\r\n            </ion-button>\r\n          </div>\r\n\r\n          <div class=\"size-full flex flex-col shrink gap-2 overflow-y-auto p-2 mask-y\">\r\n            @for (vGroup of lstMenuFiltered(); track $index) {\r\n              <ion-card class=\"m-0 shrink-0\">\r\n                <ion-card-content class=\"p-0 gradient-background bg-inactive flex flex-col\">\r\n                  <div class=\"w-10 flex items-center !justify-start gap-2 text-dark shrink-0 p-2\">\r\n                    <ion-icon [name]=\"vGroup.icon\"></ion-icon>\r\n                    <ion-text>\r\n                      {{useTranslation ? (TranslationModule.PermissaoGrupo + vGroup.id | translate) : vGroup.title}} \r\n                    </ion-text>\r\n                  </div>\r\n                  @for (vMenu of vGroup.lstMenu; track $index) {\r\n                    <div \r\n                      (click)=\"HandleNav(vMenu, $event); modal.dismiss()\"\r\n                      [class.bg-active]=\"router.isActive('/' + vMenu.route, false)\"\r\n                      class=\"w-full flex items-center !justify-start gap-2 text-dark shrink-0 !pl-8 p-1.5 border-t border-t-medium/30 menu-search\">\r\n                      <ion-icon [name]=\"vMenu.icon\"></ion-icon>\r\n                      <ion-text>\r\n                        {{useTranslation ? (TranslationModule.Permissao + vMenu.id | translate) : vMenu.title}} \r\n                      </ion-text>\r\n                    </div>\r\n                  }\r\n                </ion-card-content>\r\n              </ion-card>\r\n            }\r\n\r\n            @if (lstMenuFiltered().length == 0) {\r\n              <ion-text class=\"text-center text-medium\">\r\n                {{useTranslation ? (TranslationModule.SemResultado | translate) : 'Sem resultados encontrados'}}\r\n              </ion-text>\r\n            }\r\n          </div>\r\n        </ion-card-content>\r\n      </ion-card>\r\n    </ion-content>\r\n  </ng-template>\r\n</ion-modal>", styles: [".bg-active{--color-primary: var(--ion-color-primary) !important;--step-1-opacity: .7 !important;--step-2-opacity: .3 !important}.bg-inactive{--color-primary: var(--ion-color-step-250);--step-1-opacity: .5;--step-2-opacity: .4;--step-3-opacity: .8}.menu{display:flex;cursor:pointer;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;padding:.5rem;transition:--color-primary,--step-1-opacity,--step-2-opacity .2s ease-in-out;--inset: var(--color-primary) 0px 1.75px 2px 0px inset;box-shadow:var(--inset)}.toggle:hover{--color-primary: var(--ion-color-step-500) !important;transition:--color-primary .2s ease-in-out}.search-button{--inset2: var(--ion-color-medium) 0px 0px 5px -1px inset;box-shadow:var(--inset2)}.menu-search{position:relative;cursor:pointer;overflow:hidden}.menu-search.bg-active:after{content:\"\";position:absolute;top:50%;right:0;width:.375rem;height:75%;transform:translateY(-50%);border-radius:1rem;background-color:color-mix(in srgb,var(--ion-color-primary) 70%,transparent);opacity:1!important;filter:drop-shadow(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0px 0px 3px)}.menu-search.bg-active:before{content:\"\";position:absolute;top:50%;right:-2.3rem;width:5rem;height:7rem;transform:translateY(-50%);border-radius:1rem;opacity:.5!important;background:radial-gradient(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0%,transparent 66%)}.menu-search.bg-inactive{--color-primary: var(--ion-color-step-250);--step-1-opacity: .5;--step-2-opacity: .4;--step-3-opacity: .8;position:relative}.menu-search.bg-inactive:after{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.menu-search.bg-inactive:before{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "component", type: LoadingComponent, selector: "loading", inputs: ["text", "type", "loading"] }, { kind: "component", type: DrawerGroupComponent, selector: "drawer-group", inputs: ["MenuGroup", "colapsed", "useTranslation"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SIonPopoverModule }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "isVisibleChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DrawerComponent, isStandalone: true, selector: "drawer", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, lstMenu: { classPropertyName: "lstMenu", publicName: "lstMenu", isSignal: true, isRequired: false, transformFunction: null }, colapsed: { classPropertyName: "colapsed", publicName: "colapsed", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, useTranslation: { classPropertyName: "useTranslation", publicName: "useTranslation", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { colapsedChange: "colapsedChange" }, ngImport: i0, template: "<div class=\"absolute left-0 top-0 h-full bg-light size-full flex flex-col p-2 !pr-0 w-[19rem] overflow-hidden\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <!-- [ Header ] -->\r\n  <div class=\"shrink-0 w-full flex justify-between items-center\">\r\n    <div #anchor\r\n      (click)=\"ToggleCollapsed()\" \r\n      class=\"toggle size-10 aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu\"\r\n    >\r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </div>\r\n    <!-- <ion-button class=\"size-10 shrink-0 aspect-square\" size=\"small\" color=\"medium\" (click)=\"ToggleCollapsed()\">\r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button> -->\r\n\r\n    <div class=\"size-full shrink flex pl-2 \">\r\n      <div class=\"size-full max-h-10 flex flex-wrap overflow-hidden\">\r\n        @if (!ref.children.length) {\r\n          <ion-text class=\"size-full flex items-center justify-center default-transition z-0\" [ngClass]=\"{'opacity-0 -translate-x-1/2 pointer-events-none': colapsed }\"> \r\n            {{title}}\r\n          </ion-text>\r\n        }\r\n        <div #ref class=\"size-full flex items-center justify-center shrink-0\">\r\n          <ng-content select=\"[slot=logo]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- [ Content ] -->\r\n  <div class=\"size-full shrink flex flex-col relative overflow-hidden\">\r\n    <loading [type]=\"3\" [loading]=\"loading\" text=\"\"></loading>\r\n    <div class=\"size-full shrink flex gap-2\">\r\n      <div class=\"h-full w-12 pr-2 py-2 mask-y shrink-0 flex flex-col gap-2 overflow-y-auto overflow-x-hidden border-dashed border-r border-r-medium/30\">\r\n        <div #searchAnchor (click)=\"modal.present()\" class=\"search-button size-10 aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu\">\r\n          <ion-icon name=\"search\" slot=\"icon-only\"></ion-icon>\r\n        </div>\r\n\r\n        @for (item of lstMenu(); track $index) {\r\n          <div>\r\n            <div\r\n              [class.bg-active]=\"CurrentGroupActive == item\"\r\n              #anchor (mouseenter)=\"popover.present($event)\" \r\n              (mouseleave)=\"popover.dismiss()\" \r\n              (click)=\"CurrentGroupActive = item\" \r\n              class=\"w-10 aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu\"\r\n            >\r\n              <ion-icon [name]=\"item.icon\"></ion-icon>\r\n            </div>\r\n            <sion-popover #popover [anchor]=\"anchor\" [flip]=\"false\" placement=\"right\" fill=\"solid\">\r\n              <div class=\"p-1\">\r\n                {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n              </div>\r\n            </sion-popover>\r\n          </div>\r\n        }\r\n\r\n      </div>\r\n      <div class=\"size-full shrink relative\">\r\n        @for (mGroup of lstMenu(); track $index) {\r\n          <div class=\"absolute top-0 left-0 size-full py-2 default-transition opacity-0 translate-x-full z-0 overflow-hidden\" [ngClass]=\"{'opacity-100 !translate-x-0': CurrentGroupActive == mGroup}\">\r\n            <drawer-group [MenuGroup]=\"mGroup\" [useTranslation]=\"useTranslation\" [colapsed]=\"colapsed\"></drawer-group>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- [ End ] -->\r\n  <div class=\"shrink-0 w-full\">\r\n    <ng-content select=\"[slot=drawer]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<ion-modal #modal [keepContentsMounted]=\"true\" (onWillDismiss)=\"search.set('')\">\r\n  <ng-template>\r\n    <ion-content>\r\n      <ion-card class=\"size-full m-0 overflow-hidden\">\r\n        <ion-card-content class=\"size-full flex flex-col overflow-hidden p-0\">\r\n          <div class=\"shrink-0 w-full flex items-center justify-center\">\r\n            <ion-searchbar class=\"p-0 !pl-2 !py-2\" [ngModel]=\"this.search()\" (ngModelChange)=\"this.search.set($event)\" [debounce]=\"200\"></ion-searchbar>\r\n            <ion-button size=\"small\" fill=\"clear\" (click)=\"modal.dismiss()\">\r\n              <ion-icon name=\"close\"></ion-icon>\r\n            </ion-button>\r\n          </div>\r\n\r\n          <div class=\"size-full flex flex-col shrink gap-2 overflow-y-auto p-2 mask-y\">\r\n            @for (vGroup of lstMenuFiltered(); track $index) {\r\n              <ion-card class=\"m-0 shrink-0\">\r\n                <ion-card-content class=\"p-0 gradient-background bg-inactive flex flex-col\">\r\n                  <div class=\"w-10 flex items-center !justify-start gap-2 text-dark shrink-0 p-2\">\r\n                    <ion-icon [name]=\"vGroup.icon\"></ion-icon>\r\n                    <ion-text>\r\n                      {{useTranslation ? (TranslationModule.PermissaoGrupo + vGroup.id | translate) : vGroup.title}} \r\n                    </ion-text>\r\n                  </div>\r\n                  @for (vMenu of vGroup.lstMenu; track $index) {\r\n                    <div \r\n                      (click)=\"HandleNav(vMenu, $event); modal.dismiss()\"\r\n                      [class.bg-active]=\"router.isActive('/' + vMenu.route, false)\"\r\n                      class=\"w-full flex items-center !justify-start gap-2 text-dark shrink-0 !pl-8 p-1.5 border-t border-t-medium/30 menu-search\">\r\n                      <ion-icon [name]=\"vMenu.icon\"></ion-icon>\r\n                      <ion-text>\r\n                        {{useTranslation ? (TranslationModule.Permissao + vMenu.id | translate) : vMenu.title}} \r\n                      </ion-text>\r\n                    </div>\r\n                  }\r\n                </ion-card-content>\r\n              </ion-card>\r\n            }\r\n\r\n            @if (lstMenuFiltered().length == 0) {\r\n              <ion-text class=\"text-center text-medium\">\r\n                {{useTranslation ? (TranslationModule.SemResultado | translate) : 'Sem resultados encontrados'}}\r\n              </ion-text>\r\n            }\r\n          </div>\r\n        </ion-card-content>\r\n      </ion-card>\r\n    </ion-content>\r\n  </ng-template>\r\n</ion-modal>", styles: [".bg-active{--color-primary: var(--ion-color-primary) !important;--step-1-opacity: .7 !important;--step-2-opacity: .3 !important}.bg-inactive{--color-primary: var(--ion-color-step-250);--step-1-opacity: .5;--step-2-opacity: .4;--step-3-opacity: .8}.menu{display:flex;cursor:pointer;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;padding:.5rem;transition:--color-primary,--step-1-opacity,--step-2-opacity .2s ease-in-out;--inset: var(--color-primary) 0px 1.75px 2px 0px inset;box-shadow:var(--inset)}.toggle:hover{--color-primary: var(--ion-color-step-500) !important;transition:--color-primary .2s ease-in-out}.search-button{--inset2: var(--ion-color-medium) 0px 0px 5px -1px inset;box-shadow:var(--inset2)}.menu-search{position:relative;cursor:pointer;overflow:hidden}.menu-search.bg-active:after{content:\"\";position:absolute;top:50%;right:0;width:.375rem;height:75%;transform:translateY(-50%);border-radius:1rem;background-color:color-mix(in srgb,var(--ion-color-primary) 70%,transparent);opacity:1!important;filter:drop-shadow(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0px 0px 3px)}.menu-search.bg-active:before{content:\"\";position:absolute;top:50%;right:-2.3rem;width:5rem;height:7rem;transform:translateY(-50%);border-radius:1rem;opacity:.5!important;background:radial-gradient(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0%,transparent 66%)}.menu-search.bg-inactive{--color-primary: var(--ion-color-step-250);--step-1-opacity: .5;--step-2-opacity: .4;--step-3-opacity: .8;position:relative}.menu-search.bg-inactive:after{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.menu-search.bg-inactive:before{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "component", type: LoadingComponent, selector: "loading", inputs: ["text", "type", "loading"] }, { kind: "component", type: DrawerGroupComponent, selector: "drawer-group", inputs: ["MenuGroup", "colapsed", "useTranslation"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SIonPopoverModule }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
@@ -11284,7 +11322,7 @@ class MainContentComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MainContentComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MainContentComponent, isStandalone: true, selector: "main-content", inputs: { backdrop: "backdrop", shadowColor: "shadowColor", colapsed: "colapsed", drawerComponent: "drawerComponent" }, viewQueries: [{ propertyName: "FullScreenConteiner", first: true, predicate: ["target"], descendants: true }], ngImport: i0, template: "<div class=\"size-full flex flex-col\" [ngClass]=\"{'bg-light/50': fullScreen}\" #target>\r\n  <div class=\"w-full h-14 relative shrink-0\">\r\n    <ion-card class=\"m-0 rounded-none size-full border-none\">\r\n      <ion-card-content class=\"p-0 px-2 size-full flex\">\r\n        <div class=\"w-1/2 h-full flex items-center justify-start\">\r\n          @if (!fullScreen) {\r\n            <ion-menu-button  [routerLink]=\"['/']\" [autoHide]=\"true\"></ion-menu-button>\r\n          }\r\n          <ng-content select=\"[slot=start]\"></ng-content>\r\n        </div>\r\n\r\n        <div class=\"w-1/2 h-full flex items-center justify-end gap-2\">\r\n          <ng-content select=\"[slot=end]\"></ng-content>\r\n\r\n          <ion-button (click)=\"FullScreen()\" fill=\"outline\" color=\"dark\" size=\"small\" class=\"size-10 aspect-square  portrait:hidden\">\r\n            <ion-icon slot=\"icon-only\" name=\"expand\"></ion-icon>\r\n          </ion-button>\r\n\r\n\r\n          @if (!fullScreen) {\r\n            <div #anchor>\r\n              <ion-button (click)=\"userPopover.present($event)\" size=\"small\" class=\"size-10 aspect-square\">\r\n                <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n              </ion-button>\r\n            </div>\r\n            <sion-popover #userPopover [anchor]=\"anchor\" [flip]=\"false\" width=\"13rem\">\r\n              <div class=\"w-full flex flex-col overflow-hidden\">\r\n                <div class=\"w-full flex p-2 gap-2 overflow-hidden\">\r\n                  <div class=\"size-10 shrink-0 aspect-square rounded-2xl text-sm flex items-center justify-center bg-primary\">\r\n                    <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n                  </div>\r\n\r\n                  <div class=\"shrink-0 w-full flex flex-col justify-center items-start overflow-hidden text-sm\">\r\n                    <span class=\"truncate\"> {{Token ? Token.Nome : ''}} </span>\r\n                    <span class=\"truncate text-secondary\"> &#64;{{Token ? Token.Apelido : ''}} </span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"w-full\">\r\n                  <ng-content class=\"size-full\" select=\"[slot=user-popover]\"></ng-content>\r\n                </div>\r\n\r\n                <div class=\"w-full p-1 !pb-0 translucid-border !border-x-0 !border-b-0\">\r\n                  <div class=\"rounded-xl flex gap-2 items-center justify-start default-transition py-1 px-2\">\r\n                    <ion-icon name=\"contrast\"></ion-icon>\r\n                    <ion-text> Tema </ion-text>\r\n                  </div>\r\n\r\n                  <div class=\"flex flex-col pl-4\">\r\n                    <ion-radio-group alignment=\"start\" [allowEmptySelection]=\"false\" [value]=\"Theme\" (ionChange)=\"SetTheme($event.detail.value)\">\r\n                      <ion-item class=\"bg-transparent\" lines=\"full\">\r\n                        <ion-icon name=\"cog\" slot=\"start\"></ion-icon>\r\n                        <ion-radio class=\"w-full\" [value]=\"0\">Sistema</ion-radio>\r\n                      </ion-item>\r\n                      <ion-item class=\"bg-transparent\" lines=\"full\">\r\n                        <ion-icon name=\"sunny\" slot=\"start\"></ion-icon>\r\n                        <ion-radio class=\"w-full\" [value]=\"1\">Claro</ion-radio>\r\n                      </ion-item>\r\n                      <ion-item class=\"bg-transparent\" lines=\"none\">\r\n                        <ion-icon name=\"moon\" slot=\"start\"></ion-icon>\r\n                        <ion-radio class=\"w-full\" [value]=\"2\">Escuro</ion-radio>\r\n                      </ion-item>\r\n                    </ion-radio-group>\r\n\r\n\r\n                    <!-- <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden\">\r\n                      <div class=\"rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2\">\r\n                        <ion-checkbox [checked]=\"Theme == 0\" (ionChange)=\"SetTheme(0)\" ></ion-checkbox>\r\n                        <ion-icon name=\"cog\"></ion-icon>\r\n                        <ion-text> Sistema </ion-text>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden\">\r\n                      <div class=\"rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2\">\r\n                        <ion-checkbox [checked]=\"Theme == 1\" (ionChange)=\"SetTheme(1)\" ></ion-checkbox>\r\n                        <ion-icon name=\"sunny\"></ion-icon>\r\n                        <ion-text> Claro </ion-text>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden\">\r\n                      <div class=\"rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2\">\r\n                        <ion-checkbox [checked]=\"Theme == 2\" (ionChange)=\"SetTheme(2)\" ></ion-checkbox>\r\n                        <ion-icon name=\"moon\"></ion-icon>\r\n                        <ion-text> Escuro </ion-text>\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0\">\r\n                  <div (click)=\"authService.Loggout()\" class=\"rounded-xl flex gap-2 cursor-pointer items-center justify-start hover:bg-medium/10 default-transition py-1 px-2\">\r\n                    <ion-icon color=\"danger\" name=\"exit\"></ion-icon>\r\n                    <ion-text> Log Out </ion-text>\r\n                  </div>\r\n\r\n                  <!-- <ion-text> Log Out </ion-text>\r\n                  <ion-button (click)=\"authService.Loggout()\" class=\"size-8 shrink-0\" size=\"small\" fill=\"clear\" color=\"danger\">\r\n                    <ion-icon slot=\"icon-only\" name=\"exit-outline\"></ion-icon> \r\n                  </ion-button> -->\r\n                </div>\r\n              </div>\r\n\r\n              <!-- <div class=\"size-full\">\r\n                <div class=\"w-full p-1 flex items-center\">\r\n                  <div class=\"size-10 shrink-0 aspect-square rounded-2xl text-sm flex items-center justify-center default-transition\" style=\"background-color: var(--ion-color-primary);\">\r\n                    <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n                  </div>\r\n                  <div class=\"grow min-w-10 p-2 justify-center items-center whitespace-nowrap text-ellipsis overflow-hidden block default-transition\" [ngClass]=\"{'opacity-0 w-0': colapsed}\">\r\n                    <span>{{Token ? Token.Nome : ''}}</span> <br>\r\n                    <ion-text color=\"secondary\" class=\"text-sm\">\r\n                      &#64;{{Token ? Token.Apelido : ''}}\r\n                    </ion-text>\r\n                  </div>\r\n                </div>\r\n                <div class=\"w-full\">\r\n                  <ng-content class=\"size-full\" select=\"[slot=user-popover]\"></ng-content>\r\n                </div>\r\n                <div class=\"w-full p-1 px-2 translucid-border !border-x-0 !border-b-0 flex items-center justify-between\">\r\n                  <div class=\"hover:bg-medium/30 default-transition size-full\">\r\n                    <ion-button color=\"dark\" fill=\"clear\" size=\"small\" class=\"rounded-xl w-full text-left overflow-hidden\">\r\n                      <ion-icon slot=\"start\" name=\"contrast\"></ion-icon>\r\n                      <ion-label class=\"text-sm\">Tema</ion-label>\r\n                    </ion-button>\r\n                  </div>\r\n                </div>\r\n                <div class=\"w-full p-1 px-2 translucid-border !border-x-0 !border-b-0 flex items-center justify-between\">\r\n                  <ion-text> Log Out </ion-text>\r\n                  <ion-button (click)=\"authService.Loggout()\" class=\"size-8 shrink-0\" size=\"small\" fill=\"clear\" color=\"danger\">\r\n                    <ion-icon slot=\"icon-only\" name=\"exit-outline\"></ion-icon> \r\n                  </ion-button>\r\n                </div>\r\n              </div> -->\r\n            </sion-popover>\r\n          }\r\n        </div>\r\n      </ion-card-content>\r\n    </ion-card>\r\n  </div>\r\n  <div class=\"size-full relative p-2 pt-0 bg-light\">\r\n    <div class=\"size-full relative rounded-2xl content-shadow overflow-hidden {{backdrop}}\" style=\"--shadow-color: {{shadowColor}}\">\r\n      <ng-content></ng-content> \r\n    </div>\r\n  </div>\r\n</div>", styles: ["#popover-user{--width: 17rem}.content-shadow{--shadow-color: color-mix(in srgb, var(--ion-color-primary) 15%, transparent);box-shadow:0 0 0 1px var(--shadow-color),0 6px 10px -4px var(--shadow-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i3.IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: i3.IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i3.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: RouterLinkWithHref, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SIonPopoverModule }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "isVisibleChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MainContentComponent, isStandalone: true, selector: "main-content", inputs: { backdrop: "backdrop", shadowColor: "shadowColor", colapsed: "colapsed", drawerComponent: "drawerComponent" }, viewQueries: [{ propertyName: "FullScreenConteiner", first: true, predicate: ["target"], descendants: true }], ngImport: i0, template: "<div class=\"size-full flex flex-col\" [ngClass]=\"{'bg-light/50': fullScreen}\" #target>\r\n  <div class=\"w-full h-14 relative shrink-0\">\r\n    <ion-card class=\"m-0 rounded-none size-full border-none\">\r\n      <ion-card-content class=\"p-0 px-2 size-full flex\">\r\n        <div class=\"w-1/2 h-full flex items-center justify-start\">\r\n          @if (!fullScreen) {\r\n            <ion-menu-button  [routerLink]=\"['/']\" [autoHide]=\"true\"></ion-menu-button>\r\n          }\r\n          <ng-content select=\"[slot=start]\"></ng-content>\r\n        </div>\r\n\r\n        <div class=\"w-1/2 h-full flex items-center justify-end gap-2\">\r\n          <ng-content select=\"[slot=end]\"></ng-content>\r\n\r\n          <ion-button (click)=\"FullScreen()\" fill=\"outline\" color=\"dark\" size=\"small\" class=\"size-10 aspect-square  portrait:hidden\">\r\n            <ion-icon slot=\"icon-only\" name=\"expand\"></ion-icon>\r\n          </ion-button>\r\n\r\n\r\n          @if (!fullScreen) {\r\n            <div #anchor>\r\n              <ion-button (click)=\"userPopover.present($event)\" size=\"small\" class=\"size-10 aspect-square\">\r\n                <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n              </ion-button>\r\n            </div>\r\n            <sion-popover #userPopover [anchor]=\"anchor\" [flip]=\"false\" width=\"13rem\">\r\n              <div class=\"w-full flex flex-col overflow-hidden\">\r\n                <div class=\"w-full flex p-2 gap-2 overflow-hidden\">\r\n                  <div class=\"size-10 shrink-0 aspect-square rounded-2xl text-sm flex items-center justify-center bg-primary\">\r\n                    <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n                  </div>\r\n\r\n                  <div class=\"shrink-0 w-full flex flex-col justify-center items-start overflow-hidden text-sm\">\r\n                    <span class=\"truncate\"> {{Token ? Token.Nome : ''}} </span>\r\n                    <span class=\"truncate text-secondary\"> &#64;{{Token ? Token.Apelido : ''}} </span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"w-full\">\r\n                  <ng-content class=\"size-full\" select=\"[slot=user-popover]\"></ng-content>\r\n                </div>\r\n\r\n                <div class=\"w-full p-1 !pb-0 translucid-border !border-x-0 !border-b-0\">\r\n                  <div class=\"rounded-xl flex gap-2 items-center justify-start default-transition py-1 px-2\">\r\n                    <ion-icon name=\"contrast\"></ion-icon>\r\n                    <ion-text> Tema </ion-text>\r\n                  </div>\r\n\r\n                  <div class=\"flex flex-col pl-4\">\r\n                    <ion-radio-group alignment=\"start\" [allowEmptySelection]=\"false\" [value]=\"Theme\" (ionChange)=\"SetTheme($event.detail.value)\">\r\n                      <ion-item class=\"bg-transparent\" lines=\"full\">\r\n                        <ion-icon name=\"cog\" slot=\"start\"></ion-icon>\r\n                        <ion-radio class=\"w-full\" [value]=\"0\">Sistema</ion-radio>\r\n                      </ion-item>\r\n                      <ion-item class=\"bg-transparent\" lines=\"full\">\r\n                        <ion-icon name=\"sunny\" slot=\"start\"></ion-icon>\r\n                        <ion-radio class=\"w-full\" [value]=\"1\">Claro</ion-radio>\r\n                      </ion-item>\r\n                      <ion-item class=\"bg-transparent\" lines=\"none\">\r\n                        <ion-icon name=\"moon\" slot=\"start\"></ion-icon>\r\n                        <ion-radio class=\"w-full\" [value]=\"2\">Escuro</ion-radio>\r\n                      </ion-item>\r\n                    </ion-radio-group>\r\n\r\n\r\n                    <!-- <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden\">\r\n                      <div class=\"rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2\">\r\n                        <ion-checkbox [checked]=\"Theme == 0\" (ionChange)=\"SetTheme(0)\" ></ion-checkbox>\r\n                        <ion-icon name=\"cog\"></ion-icon>\r\n                        <ion-text> Sistema </ion-text>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden\">\r\n                      <div class=\"rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2\">\r\n                        <ion-checkbox [checked]=\"Theme == 1\" (ionChange)=\"SetTheme(1)\" ></ion-checkbox>\r\n                        <ion-icon name=\"sunny\"></ion-icon>\r\n                        <ion-text> Claro </ion-text>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0 overflow-hidden\">\r\n                      <div class=\"rounded-xl flex gap-2 items-center justify-start cursor-pointer hover:bg-medium/30 default-transition py-1 px-2\">\r\n                        <ion-checkbox [checked]=\"Theme == 2\" (ionChange)=\"SetTheme(2)\" ></ion-checkbox>\r\n                        <ion-icon name=\"moon\"></ion-icon>\r\n                        <ion-text> Escuro </ion-text>\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"w-full p-1 translucid-border !border-x-0 !border-b-0\">\r\n                  <div (click)=\"authService.Loggout()\" class=\"rounded-xl flex gap-2 cursor-pointer items-center justify-start hover:bg-medium/10 default-transition py-1 px-2\">\r\n                    <ion-icon color=\"danger\" name=\"exit\"></ion-icon>\r\n                    <ion-text> Log Out </ion-text>\r\n                  </div>\r\n\r\n                  <!-- <ion-text> Log Out </ion-text>\r\n                  <ion-button (click)=\"authService.Loggout()\" class=\"size-8 shrink-0\" size=\"small\" fill=\"clear\" color=\"danger\">\r\n                    <ion-icon slot=\"icon-only\" name=\"exit-outline\"></ion-icon> \r\n                  </ion-button> -->\r\n                </div>\r\n              </div>\r\n\r\n              <!-- <div class=\"size-full\">\r\n                <div class=\"w-full p-1 flex items-center\">\r\n                  <div class=\"size-10 shrink-0 aspect-square rounded-2xl text-sm flex items-center justify-center default-transition\" style=\"background-color: var(--ion-color-primary);\">\r\n                    <span class=\"uppercase text-white\">{{Token ? Token.Nome[0] : ''}}</span>\r\n                  </div>\r\n                  <div class=\"grow min-w-10 p-2 justify-center items-center whitespace-nowrap text-ellipsis overflow-hidden block default-transition\" [ngClass]=\"{'opacity-0 w-0': colapsed}\">\r\n                    <span>{{Token ? Token.Nome : ''}}</span> <br>\r\n                    <ion-text color=\"secondary\" class=\"text-sm\">\r\n                      &#64;{{Token ? Token.Apelido : ''}}\r\n                    </ion-text>\r\n                  </div>\r\n                </div>\r\n                <div class=\"w-full\">\r\n                  <ng-content class=\"size-full\" select=\"[slot=user-popover]\"></ng-content>\r\n                </div>\r\n                <div class=\"w-full p-1 px-2 translucid-border !border-x-0 !border-b-0 flex items-center justify-between\">\r\n                  <div class=\"hover:bg-medium/30 default-transition size-full\">\r\n                    <ion-button color=\"dark\" fill=\"clear\" size=\"small\" class=\"rounded-xl w-full text-left overflow-hidden\">\r\n                      <ion-icon slot=\"start\" name=\"contrast\"></ion-icon>\r\n                      <ion-label class=\"text-sm\">Tema</ion-label>\r\n                    </ion-button>\r\n                  </div>\r\n                </div>\r\n                <div class=\"w-full p-1 px-2 translucid-border !border-x-0 !border-b-0 flex items-center justify-between\">\r\n                  <ion-text> Log Out </ion-text>\r\n                  <ion-button (click)=\"authService.Loggout()\" class=\"size-8 shrink-0\" size=\"small\" fill=\"clear\" color=\"danger\">\r\n                    <ion-icon slot=\"icon-only\" name=\"exit-outline\"></ion-icon> \r\n                  </ion-button>\r\n                </div>\r\n              </div> -->\r\n            </sion-popover>\r\n          }\r\n        </div>\r\n      </ion-card-content>\r\n    </ion-card>\r\n  </div>\r\n  <div class=\"size-full relative p-2 pt-0 bg-light\">\r\n    <div class=\"size-full relative rounded-2xl content-shadow overflow-hidden {{backdrop}}\" style=\"--shadow-color: {{shadowColor}}\">\r\n      <ng-content></ng-content> \r\n    </div>\r\n  </div>\r\n</div>", styles: ["#popover-user{--width: 17rem}.content-shadow{--shadow-color: color-mix(in srgb, var(--ion-color-primary) 15%, transparent);box-shadow:0 0 0 1px var(--shadow-color),0 6px 10px -4px var(--shadow-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i3.IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: i3.IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i3.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: RouterLinkWithHref, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SIonPopoverModule }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MainContentComponent, decorators: [{
             type: Component,