@sapphire-ion/framework 1.0.16 → 1.0.19

package/fesm2022/sapphire-ion-framework.mjs

@@ -1,15 +1,15 @@
 import * as i3 from '@ionic/angular';
-import { IonicModule, IonDatetime, IonModal, IonBackButton, IonCheckbox, IonToggle, IonAccordionGroup } from '@ionic/angular';
+import { NavController, IonicModule, IonDatetime, IonModal, IonBackButton, IonCheckbox, IonToggle, IonAccordionGroup } from '@ionic/angular';
 import { FilePicker } from '@capawesome/capacitor-file-picker';
 import { CameraSource } from '@capacitor/camera';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, NgModule, Inject, signal, model, Component, Input, Pipe, input, computed, effect, contentChildren, output, forwardRef, ContentChildren, EventEmitter, Output, HostListener, Directive, inject, ViewChild, TemplateRef, ContentChild, ElementRef, HostBinding, ViewChildren, ViewContainerRef } from '@angular/core';
+import { Injectable, InjectionToken, NgModule, Inject, inject, signal, model, Component, Input, Pipe, input, computed, effect, contentChildren, output, forwardRef, ContentChildren, EventEmitter, Output, HostListener, ViewChild, Directive, TemplateRef, ContentChild, ElementRef, ViewChildren, HostBinding, ViewContainerRef } from '@angular/core';
 import moment from 'moment';
 import { BehaviorSubject, firstValueFrom, from, switchMap, Subject, takeUntil, distinctUntilChanged, debounceTime, lastValueFrom, Observable, tap, finalize, share, catchError } from 'rxjs';
 import * as i1 from '@angular/common/http';
-import { HttpEventType, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpEventType, HttpHeaders } from '@angular/common/http';
 import * as i2$1 from '@angular/forms';
-import { FormGroup, NG_VALUE_ACCESSOR, ControlContainer, Validators, FormControl, FormBuilder, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { FormBuilder, FormGroup, NG_VALUE_ACCESSOR, ControlContainer, Validators, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/common';
 import { CommonModule, formatNumber } from '@angular/common';
 import * as i2 from '@angular/platform-browser';
@@ -17,13 +17,14 @@ import { Preferences } from '@capacitor/preferences';
 import { jwtDecode } from 'jwt-decode';
 import * as i2$2 from '@angular/router';
 import { ActivatedRoute, RouterLinkWithHref, RouterModule, RouterOutlet, RouterLink } from '@angular/router';
-import { maskitoDateTimeOptionsGenerator, maskitoDateOptionsGenerator, maskitoTimeOptionsGenerator } from '@maskito/kit';
+import { maskitoTransform } from '@maskito/core';
+import { maskitoPhoneOptionsGenerator } from '@maskito/phone';
+import metadata from 'libphonenumber-js/min/metadata';
 import * as i3$1 from '@maskito/angular';
 import { MaskitoDirective } from '@maskito/angular';
+import { maskitoDateTimeOptionsGenerator, maskitoDateOptionsGenerator, maskitoTimeOptionsGenerator } from '@maskito/kit';
 import { autoUpdate, computePosition, offset, flip, shift, limitShift, arrow } from '@floating-ui/dom';
 import { Clipboard } from '@capacitor/clipboard';
-import { maskitoPhoneOptionsGenerator } from '@maskito/phone';
-import metadata from 'libphonenumber-js/min/metadata';
 import * as i7 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { isPossiblePhoneNumber } from 'libphonenumber-js';
@@ -765,7 +766,17 @@ class HttpService {
         this.genericService = genericService;
         this.navController = navController;
         this.apiUrlProviderService = apiUrlProviderService;
+        this.http = inject(HttpClient);
+        this.fb = inject(FormBuilder);
+        this.genericService = inject(GenericService);
+        this.navController = inject(NavController);
+        this.apiUrlProviderService = inject(ApiUrlProviderService);
     }
+    /**
+     * Retorna a rota completa do serviço
+     * @return string
+     * @example 'https://api.example.com/{route}'
+     */
     get fullRoute() {
         return this.apiUrlProviderService.apiUrl + this.route;
     }
@@ -790,11 +801,11 @@ class HttpService {
         var object = obj;
         if (obj instanceof FormGroup) {
             if (obj.invalid) {
-                const r = new BehaviorSubject(null);
-                r.error("[ Invalid Form ]");
-                r.complete();
+                const subject = new BehaviorSubject(null);
+                subject.error("[ Invalid Form ]");
+                subject.complete();
                 this.genericService.PresentToast("Verifique os campos!");
-                return r;
+                return subject;
             }
             object = obj.value;
         }
@@ -802,7 +813,7 @@ class HttpService {
         formData.append('view', JSON.stringify(object));
         //Check in the case it has a file and the view is not passed
         if (Object.entries(object).find(p => p[1] instanceof File) && this.hasFileForm && !view) {
-            console.error("[ FormGroup contains file, but view isnt passed ]");
+            console.error("[ FormGroup contains file, but view isnt a valid parameter ]");
         }
         else if (view) {
             return this._Save(formData, view);
@@ -817,8 +828,11 @@ class HttpService {
     Load(vFiltros) {
         return firstValueFrom(this.List(vFiltros));
     }
+    /** Retorna os campos da tabela */
     get lstTableFields() { return []; }
+    /** Retorna os campos da tabela para visualização/edição (se vazio retornara o padrão (lstTableFields)) */
     get lstTableFieldsView() { return this.lstTableFields; }
+    /** Retora o TableField padrão de id */
     get defaultId() {
         var control = this.fb.control(0);
         const field = new TableField("id", "id", control, InputType.Number);
@@ -826,6 +840,7 @@ class HttpService {
         field.hiddenView = true;
         return field;
     }
+    /** Retora o TableField padrão de idEmpresa */
     get defaultIdEmpresa() {
         var control = this.fb.control(0);
         const field = new TableField("Empresa", "idEmpresa", control, InputType.Select);
@@ -837,10 +852,7 @@ class HttpService {
     _Save(formData, view) {
         view.loading = true;
         const subject = new BehaviorSubject(null);
-        this.http.post(this.fullRoute + `/save`, formData, {
-            reportProgress: true,
-            observe: 'events',
-        }).subscribe({
+        this.http.post(this.fullRoute + `/save`, formData, { reportProgress: true, observe: 'events' }).subscribe({
             next: (rez) => {
                 if (rez.type == HttpEventType.UploadProgress) {
                     const res = rez.loaded / rez.total;
@@ -852,8 +864,8 @@ class HttpService {
                     view.submitted = false;
                     view.Refresh();
                     const id = Number(rez.body);
-                    //[ Redirect to view/id | redirectPath ]
-                    if (view.id == 0) {
+                    //[ Redirect to view/:id | redirectPath ]
+                    if (!view.id && id) {
                         this.RedirectRoute(id, view.redirectPath, view.GetCurrentRouting());
                     }
                 }
@@ -926,14 +938,6 @@ var InputBoolType;
 })(InputBoolType || (InputBoolType = {}));
 
 class HttpServiceAtivo extends HttpService {
-    constructor(http, fb, genericService, navController, apiUrlProviderService) {
-        super(http, fb, genericService, navController, apiUrlProviderService);
-        this.http = http;
-        this.fb = fb;
-        this.genericService = genericService;
-        this.navController = navController;
-        this.apiUrlProviderService = apiUrlProviderService;
-    }
     /**
      * Troca o status de ativo da entidade
      */
@@ -947,14 +951,14 @@ class HttpServiceAtivo extends HttpService {
     ListAtivo(vFilter) {
         return this.http.post(this.fullRoute + `/listAtivo`, vFilter);
     }
-    /**  Table Field padrão de ativo */
+    /** Table Field padrão de ativo */
     get defaultAtivo() {
         var control = this.fb.control(true);
         const field = new TableField("Ativo", "ativo", control, InputType.Bool);
         field.configuration = new InputBoolConfiguration(InputBoolType.Toggle);
         return field;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HttpServiceAtivo, deps: [{ token: i1.HttpClient }, { token: i2$1.FormBuilder }, { token: GenericService }, { token: i3.NavController }, { token: ApiUrlProviderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HttpServiceAtivo, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HttpServiceAtivo, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HttpServiceAtivo, decorators: [{
@@ -962,7 +966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2$1.FormBuilder }, { type: GenericService }, { type: i3.NavController }, { type: ApiUrlProviderService }] });
+        }] });
 
 class InputSelectConfiguration {
     constructor(
@@ -1032,7 +1036,7 @@ class InputSelectDataLoader {
         this.bindValue = null;
         /** Valor que será exibido */
         this.bindLabel = null;
-        this._isLoaded = false;
+        this.isLoaded = false;
         this.items = [];
         this.configuration = configuration;
         this.bindValue = BindValueFactory(configuration);
@@ -1060,7 +1064,7 @@ class InputSelectDataLoader {
             !this.configuration.loadFromFunction &&
             (!this.configuration.loadFromArray || !this.configuration.loadFromArray.length)) {
             this.items = [...items || []];
-            this._isLoaded = true;
+            this.isLoaded = true;
             for (const component of this.lstComponents) {
                 if (!component.destroyed)
                     component.items.set([...this.items]);
@@ -1068,7 +1072,7 @@ class InputSelectDataLoader {
         }
         try {
             await this.Load();
-            this._isLoaded = true;
+            this.isLoaded = true;
             for (const component of this.lstComponents) {
                 if (!component.destroyed)
                     component.items.set([...this.items]);
@@ -1081,7 +1085,7 @@ class InputSelectDataLoader {
         }
     }
     async Load() {
-        if (this._isLoaded) {
+        if (this.isLoaded) {
             for (const component of this.lstComponents) {
                 if (!component.destroyed)
                     component.items.set([...this.items]);
@@ -1877,7 +1881,7 @@ class HeaderListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderListComponent, deps: [{ token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: HeaderListComponent, selector: "header-list", inputs: { limit: "limit", page: "page", search: "search", loading: "loading", link: "link", noNew: "noNew", noPage: "noPage", noSearch: "noSearch", overrideNew: "overrideNew" }, outputs: { limitChange: "limitChange", pageChange: "pageChange", searchChange: "searchChange", refreshEmitter: "refresh", onNewEmitter: "onNew" }, host: { listeners: { "window:keydown": "onKeyPress($event)" } }, ngImport: i0, template: "<div class=\"flex flex-wrap w-full gap-2\">\r\n  @if (!noPage) {\r\n    <div class=\"portrait:basis-[calc(50%-0.25rem)] landscape:w-48 portrait:order-1\">\r\n      <ion-item class=\"rounded-2xl w-full h-full translucid-border\" lines=\"full\" style=\"--border-radius: 1rem !important; --background: transparent\" >\r\n        <ion-select [disabled]=\"loading\" [(ngModel)]=\"limit\" (ionChange)=\"EmitLimit()\" interface=\"popover\">\r\n          @for (limit of lstLimits; track limit) {\r\n            <ion-select-option [value]=\"limit.value\">{{limit.label}}</ion-select-option>\r\n          }\r\n        </ion-select>\r\n      </ion-item>\r\n    </div>\r\n  }\r\n  \r\n  <ng-content select=\"[slot=start]\"></ng-content>\r\n\r\n  @if(!noSearch) {\r\n    <div class=\"portrait:basis-full portrait:order-3 grow flex items-center justify-center\">\r\n      <ion-searchbar class=\"w-full min-h-0 p-0 m-0\" [debounce]=\"500\" [(ngModel)]=\"search\" (ionInput)=\"this.EmitSearch()\" [animated]=\"true\" placeholder=\"Pesquisar...\"></ion-searchbar>\r\n    </div>\r\n  }\r\n\r\n  <ng-content select=\"[slot=end]\"></ng-content>\r\n\r\n  @if(!noNew){\r\n    <div class=\"portrait:basis-[calc(50%-0.25rem)] landscape:basis-24 portrait:order-2\">\r\n      <ion-button [routerLink]=\"overrideNew ? null : [link]\" (click)=\"onNew()\" class=\"size-full m-0 rounded-2xl text-base\" size=\"small\" fill=\"clear\">\r\n        <ion-icon name=\"add\" slot=\"start\"></ion-icon>\r\n        <ion-text class=\"text-base\">Novo</ion-text>\r\n      </ion-button>\r\n    </div>\r\n  }\r\n</div>", styles: [""], 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.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { 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.IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "required", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: i3.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "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.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "directive", type: i3.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: HeaderListComponent, selector: "header-list", inputs: { limit: "limit", page: "page", search: "search", loading: "loading", link: "link", noNew: "noNew", noPage: "noPage", noSearch: "noSearch", overrideNew: "overrideNew" }, outputs: { limitChange: "limitChange", pageChange: "pageChange", searchChange: "searchChange", refreshEmitter: "refresh", onNewEmitter: "onNew" }, host: { listeners: { "window:keydown": "onKeyPress($event)" } }, ngImport: i0, template: "<div class=\"flex flex-wrap w-full gap-2\">\r\n  @if (!noPage) {\r\n    <div class=\"portrait:basis-[calc(50%-0.25rem)] landscape:w-48 portrait:order-1\">\r\n      <ion-item class=\"rounded-2xl w-full h-full translucid-border\" lines=\"full\" style=\"--border-radius: 1rem !important; --background: transparent\" >\r\n        <ion-select [disabled]=\"loading\" [(ngModel)]=\"limit\" (ionChange)=\"EmitLimit()\" interface=\"popover\">\r\n          @for (limit of lstLimits; track limit) {\r\n            <ion-select-option [value]=\"limit.value\">{{limit.label}}</ion-select-option>\r\n          }\r\n        </ion-select>\r\n      </ion-item>\r\n    </div>\r\n  }\r\n  \r\n  <ng-content select=\"[slot=start]\"></ng-content>\r\n\r\n  @if(!noSearch) {\r\n    <div class=\"portrait:basis-full portrait:order-3 grow flex items-center justify-center\">\r\n      <ion-searchbar class=\"w-full min-h-0 p-0 m-0\" [debounce]=\"500\" [(ngModel)]=\"search\" (ionInput)=\"this.EmitSearch()\" [animated]=\"true\" placeholder=\"Pesquisar...\"></ion-searchbar>\r\n    </div>\r\n  }\r\n\r\n  <ng-content select=\"[slot=end]\"></ng-content>\r\n\r\n  @if(!noNew){\r\n    <div class=\"portrait:basis-[calc(50%-0.25rem)] landscape:basis-24 portrait:order-2\">\r\n      <ion-button [routerLink]=\"overrideNew ? null : [link]\" (click)=\"onNew()\" class=\"size-full m-0 rounded-2xl text-base\" size=\"small\" fill=\"clear\">\r\n        <ion-icon name=\"add\" slot=\"start\"></ion-icon>\r\n        <ion-text class=\"text-base\">Novo</ion-text>\r\n      </ion-button>\r\n    </div>\r\n  }\r\n</div>", styles: [""], 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.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { 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.IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "required", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: i3.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "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.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "directive", type: i3.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: HeaderListComponent, decorators: [{
             type: Component,
@@ -2021,6 +2025,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+var TelefoneCelular;
+(function (TelefoneCelular) {
+    TelefoneCelular["Tel"] = "Tel";
+    TelefoneCelular["Cel"] = "Cel";
+    TelefoneCelular["TelCel"] = "TelCel";
+})(TelefoneCelular || (TelefoneCelular = {}));
+class InputTelefoneCelularConfiguration {
+    constructor(type = TelefoneCelular.TelCel) {
+        this.type = type;
+    }
+}
+
+class InputProviderFactory {
+    static GetProviders(component) {
+        return [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => component),
+                multi: true,
+            }];
+    }
+}
+
+class CustomInput {
+    /** @virtual */
+    SetValue(obj) {
+        this.value.set(obj);
+        this.runValidation();
+        this.propagateChange(obj);
+    }
+    constructor() {
+        /** Exibe o spinner de carregamento */
+        this.loading = model(false);
+        /** Se ativo desabilita o Input */
+        this.disabled = model(false);
+        /** Indica se o formulário foi enviado */
+        this.submitted = model(false);
+        /** Titulo do Input */
+        this.label = input("Label");
+        /** Torna o input obrigatorio */
+        this.required = model(false);
+        //[ Value ]
+        this.value = signal(undefined);
+        this.invalid = false;
+        //[ ControlValueAccessor ]
+        /** Acionado quando um elemento perde o foco. */
+        this.blur = output();
+        /** Emitido quando o valor é alterado. */
+        this.change = output();
+        this.onChange = (value) => { return; };
+        this.onTouch = (value) => { return; };
+        try {
+            this.controlContainer = inject(ControlContainer);
+        }
+        catch { }
+        effect(() => {
+            if (this.control) {
+                this.invalid = this.control.invalid;
+            }
+        });
+    }
+    /** @virtual */
+    ngOnInit() {
+        if (!this.control && this.controlContainer && this.formControlName) {
+            this.control = this.controlContainer.control.get(this.formControlName);
+        }
+        if (this.control) {
+            this.required.set(this.control.hasValidator(Validators.required));
+            this.invalid = this.control.invalid;
+            this.control.events.subscribe({ next: (event) => { this.runValidation(); } });
+        }
+    }
+    runValidation() {
+        if (this.control) {
+            this.required.set(this.control.hasValidator(Validators.required));
+            this.invalid = this.control.invalid;
+        }
+        else {
+            this.invalid = !this.value() && this.required();
+        }
+    }
+    propagateChange(obj) { this.onChange(obj); this.change.emit(obj); ; }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouch = fn; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CustomInput, selector: "ng-component", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: false, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "formControl", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", disabled: "disabledChange", submitted: "submittedChange", required: "requiredChange", blur: "blur", change: "change" }, providers: [
+            ...InputProviderFactory.GetProviders(CustomInput)
+        ], ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomInput, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    providers: [
+                        ...InputProviderFactory.GetProviders(CustomInput)
+                    ]
+                }]
+        }], ctorParameters: () => [], propDecorators: { formControlName: [{
+                type: Input
+            }], control: [{
+                type: Input,
+                args: ['formControl']
+            }] } });
+
+class InputTelefoneComponent extends CustomInput {
+    setFocus(event) {
+        if (this.input && (event == null || event.target == this.inputContainer.nativeElement)) {
+            this.input.nativeElement.focus();
+        }
+    }
+    constructor(elementRef) {
+        super();
+        this.elementRef = elementRef;
+        this.configuration = model(new InputTelefoneCelularConfiguration());
+        this.mask = mask$1;
+        if (this.elementRef.nativeElement.tagName.toLowerCase() == 'input-cpf-cnpj') {
+            this.configuration.set(new InputTelefoneCelularConfiguration());
+        }
+        else {
+            const selector = this.elementRef.nativeElement.tagName.toLowerCase().split('-')[1];
+            if (selector == 'celular') {
+                this.configuration.set(new InputTelefoneCelularConfiguration(TelefoneCelular.Cel));
+            }
+            else if (selector == 'telefone') {
+                this.configuration.set(new InputTelefoneCelularConfiguration(TelefoneCelular.TelCel));
+            }
+        }
+        this.value.set('+55');
+    }
+    writeValue(obj) {
+        this.value.set(obj);
+        this.runValidation();
+    }
+    SetValue(obj) {
+        this.value.set(obj);
+        this.runValidation();
+        this.propagateChange(obj.replaceAll('.', '').replaceAll('-', '').replaceAll(' ', ''));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputTelefoneComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: InputTelefoneComponent, selector: "input-telefone, input-celular, input-telefone-celular", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configuration: "configurationChange" }, providers: [
+            ...InputProviderFactory.GetProviders(InputTelefoneComponent),
+            { provide: CustomInput, useExisting: forwardRef(() => InputTelefoneComponent) },
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], 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  <input #input\r\n    (focus)=\"!value() ? SetValue('+55') : null\"\r\n    [ngModel]=\"value()\" \r\n    [maskito]=\"mask\"\r\n    inputmode=\"numeric\"\r\n    [type]=\"'text'\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["", "@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.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputTelefoneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-telefone, input-celular, input-telefone-celular', providers: [
+                        ...InputProviderFactory.GetProviders(InputTelefoneComponent),
+                        { provide: CustomInput, useExisting: forwardRef(() => InputTelefoneComponent) },
+                    ], 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  <input #input\r\n    (focus)=\"!value() ? SetValue('+55') : null\"\r\n    [ngModel]=\"value()\" \r\n    [maskito]=\"mask\"\r\n    inputmode=\"numeric\"\r\n    [type]=\"'text'\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["@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']
+            }], inputContainer: [{
+                type: ViewChild,
+                args: ['inputContainer']
+            }] } });
+const mask$1 = maskitoPhoneOptionsGenerator({
+    metadata,
+    strict: false,
+    countryIsoCode: 'BR',
+});
+function FormatTelefoneCelular(value) {
+    return maskitoTransform(value, mask$1);
+}
+
 class StorageService {
     constructor(http, apiUrlProviderService, genericService) {
         this.http = http;
@@ -2140,14 +2309,151 @@ function DownloadFile(data, fileUrl) {
     linkElement.dispatchEvent(me);
 }
 
-class InputProviderFactory {
-    static GetProviders(component) {
-        return [{
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => component),
-                multi: true,
-            }];
+class InputCpfCnpjComponent extends CustomInput {
+    setFocus(event) {
+        if (this.input && (event == null || event.target == this.inputContainer.nativeElement)) {
+            this.input.nativeElement.focus();
+        }
     }
+    constructor(elementRef) {
+        super();
+        this.elementRef = elementRef;
+        this.configuration = model(new InputCpfCnpjConfiguration());
+        this.mask = {
+            mask: (elementState) => {
+                if (this.configuration().type == 'CPFCNPJ') {
+                    if (!elementState.value) {
+                        return cpfMask;
+                    }
+                    else {
+                        if (elementState.value.includes('.')) {
+                            if (elementState.value.length <= 14) {
+                                return cpfMask;
+                            }
+                            return cnpjMask;
+                        }
+                        else {
+                            if (elementState.value.length <= 11) {
+                                return cpfMask;
+                            }
+                            return cnpjMask;
+                        }
+                    }
+                }
+                if (this.configuration().type == 'CNPJ') {
+                    return cnpjMask;
+                }
+                if (this.configuration().type == 'CPF') {
+                    return cpfMask;
+                }
+            },
+        };
+        if (this.elementRef.nativeElement.tagName.toLowerCase() == 'input-cpf-cnpj') {
+            this.configuration.set(new InputCpfCnpjConfiguration());
+        }
+        else {
+            const selector = this.elementRef.nativeElement.tagName.toLowerCase().split('-')[1];
+            if (selector == 'cpf') {
+                this.configuration.set(new InputCpfCnpjConfiguration('CPF'));
+            }
+            else if (selector == 'cnpj') {
+                this.configuration.set(new InputCpfCnpjConfiguration('CNPJ'));
+            }
+        }
+    }
+    writeValue(obj) {
+        this.value.set(obj);
+        this.runValidation();
+    }
+    SetValue(obj) {
+        this.value.set(obj);
+        this.runValidation();
+        this.propagateChange(obj.replaceAll('.', '').replaceAll('-', '').replaceAll('/', ''));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputCpfCnpjComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: InputCpfCnpjComponent, selector: "input-cpf-cnpj, input-cpf, input-cnpj", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configuration: "configurationChange" }, providers: [
+            ...InputProviderFactory.GetProviders(InputCpfCnpjComponent),
+            { provide: CustomInput, useExisting: forwardRef(() => InputCpfCnpjComponent) },
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], 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  <input #input\r\n    [ngModel]=\"value()\" \r\n    [maskito]=\"mask\"\r\n    inputmode=\"numeric\"\r\n    [type]=\"'text'\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["", "@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.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputCpfCnpjComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-cpf-cnpj, input-cpf, input-cnpj', providers: [
+                        ...InputProviderFactory.GetProviders(InputCpfCnpjComponent),
+                        { provide: CustomInput, useExisting: forwardRef(() => InputCpfCnpjComponent) },
+                    ], 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  <input #input\r\n    [ngModel]=\"value()\" \r\n    [maskito]=\"mask\"\r\n    inputmode=\"numeric\"\r\n    [type]=\"'text'\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["@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']
+            }], inputContainer: [{
+                type: ViewChild,
+                args: ['inputContainer']
+            }] } });
+const cpfMask = [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/];
+const cnpjMask = [/\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/];
+const cpfCnpjMask = {
+    mask: (elementState) => {
+        if (!elementState.value) {
+            return cpfMask;
+        }
+        else {
+            if (elementState.value.includes('.')) {
+                if (elementState.value.length <= 14) {
+                    return cpfMask;
+                }
+                return cnpjMask;
+            }
+            else {
+                if (elementState.value.length <= 11) {
+                    return cpfMask;
+                }
+                return cnpjMask;
+            }
+        }
+    }
+};
+function FormatCpfCnpj(value) {
+    return maskitoTransform(value, cpfCnpjMask);
+}
+
+class InputCepComponent extends CustomInput {
+    setFocus(event) {
+        if (this.input && (event == null || event.target == this.inputContainer.nativeElement)) {
+            this.input.nativeElement.focus();
+        }
+    }
+    constructor(elementRef) {
+        super();
+        this.elementRef = elementRef;
+        this.mask = mask;
+    }
+    writeValue(obj) {
+        this.value.set(obj);
+        this.runValidation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputCepComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputCepComponent, selector: "input-cep", providers: [
+            ...InputProviderFactory.GetProviders(InputCepComponent),
+            { provide: CustomInput, useExisting: forwardRef(() => InputCepComponent) },
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], 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  <input #input\r\n    [ngModel]=\"value()\" \r\n    [maskito]=\"mask\"\r\n    inputmode=\"numeric\"\r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["", "@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.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputCepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-cep', providers: [
+                        ...InputProviderFactory.GetProviders(InputCepComponent),
+                        { provide: CustomInput, useExisting: forwardRef(() => InputCepComponent) },
+                    ], 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  <input #input\r\n    [ngModel]=\"value()\" \r\n    [maskito]=\"mask\"\r\n    inputmode=\"numeric\"\r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["@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']
+            }], inputContainer: [{
+                type: ViewChild,
+                args: ['inputContainer']
+            }] } });
+const cepMask = [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/];
+const mask = { mask: cepMask };
+function FormatCep(value) {
+    return maskitoTransform(value, mask);
 }
 
 class NgVarDirective {
@@ -2347,11 +2653,11 @@ class DefaultPaginationComponent {
         this.changeEmitter.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultPaginationComponent, deps: [{ token: GenericService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DefaultPaginationComponent, selector: "default-pagination", inputs: { _total: ["total", "_total"], _limit: ["limit", "_limit"], length: "length", loading: "loading", page: "page" }, outputs: { pageChange: "pageChange", changeEmitter: "change" }, ngImport: i0, template: "<div id=\"pagination\" class=\"flex items-center rounded-b-2xl px-4 py-2 portrait:flex-col\">\r\n  <div class=\"w-full h-full items-center justify-start flex portrait:justify-center\">\r\n    <ion-spinner [hidden]=\"!(loading && lstPages.length == 0)\"></ion-spinner>\r\n    <ion-text [hidden]=\"loading && lstPages.length == 0\">\r\n      <div class=\"flex\">\r\n        Mostrando &nbsp;\r\n        <ion-skeleton-text *ngIf=\"loading\" [animated]=\"true\" style=\"width: 2ch\"></ion-skeleton-text>\r\n        <b *ngIf=\"!loading\">{{limit * page - limit + length}}</b>  &nbsp;\r\n        de \r\n        @if (total != null) {\r\n          <b>&nbsp; {{total}} &nbsp;</b> items\r\n        }\r\n        @else{\r\n          <b>&nbsp; - &nbsp; </b> items\r\n        }\r\n      </div>\r\n    </ion-text>\r\n  </div>\r\n  <div class=\"w-full h-full items-center justify-end flex portrait:justify-center\" *ngIf=\"total != null\">\r\n    <button class=\"flex items-center\" [disabled]=\"loading\" (click)=\"PageSub()\">\r\n      <ion-icon [ngClass]=\"{'opacity-20': page == 1}\" name=\"chevron-back\" class=\"cursor-pointer default transition\"></ion-icon>\r\n    </button>\r\n\r\n    <ion-spinner *ngIf=\"loading && lstPages.length == 0\"></ion-spinner>\r\n\r\n    <button [disabled]=\"loading\" class=\"page\" *ngFor=\"let item of lstPages\" [ngClass]=\"{ 'selected' : page == item }\" (click)=\"SetPage(item)\"> {{item}} </button>\r\n\r\n    <button class=\"flex items-center\" [disabled]=\"loading\" (click)=\"PageAdd()\">\r\n      <ion-icon [ngClass]=\"{'opacity-20': page == TotalPages }\" name=\"chevron-forward\" class=\"cursor-pointer default transition\"></ion-icon>\r\n    </button>\r\n\r\n    @if (TotalPages > 5) {\r\n      <button [disabled]=\"loading\" class=\"page\" [id]=\"pop_id\"><ion-icon name=\"search\"></ion-icon></button>\r\n      <ion-popover [trigger]=\"pop_id\" triggerAction=\"click\">\r\n        <ng-template>\r\n          <ion-content>\r\n            <div class=\"grid grid-cols-10 pl-3\">\r\n              <div class=\"col-span-8 pb-2\">\r\n                <ion-input class=\"number-class\" [(ngModel)]=\"_page\" type=\"Number\" labelPlacement=\"stacked\" label=\"P\u00E1gina [Max. {{TotalPages}}]\"></ion-input>\r\n              </div>\r\n              <div class=\"col-span-2\">\r\n                <ion-button [disabled]=\"loading\" class=\"size-full\" size=\"small\" (click)=\"SetPageManual()\" style=\"--border-radius: 0rem\">\r\n                  <ion-icon class=\"w-4 aspect-square\" slot=\"icon-only\" name=\"checkmark-circle\"></ion-icon>\r\n                </ion-button>\r\n              </div>\r\n            </div>\r\n          </ion-content>\r\n        </ng-template>\r\n      </ion-popover>\r\n    }\r\n    </div>\r\n</div>", styles: ["#pagination{background-color:var(--ion-color-step-300);color:var(--ion-color-step-700)}@media (prefers-color-scheme: light){#pagination{background-color:var(--ion-framework-table-light)}}button.page{margin-left:.25rem;margin-right:.25rem;display:flex;height:1.5rem;min-width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.375rem;border-width:1px;padding-left:.25rem;padding-right:.25rem;text-align:center;border:var(--ion-color-dark) solid 1px;color:var(--ion-color-dark);transition:all .25s}button.page:disabled{opacity:.75}button.page.selected{background-color:var(--ion-color-dark);color:var(--ion-color-dark-contrast)!important}\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.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.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i3.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i3.NumericValueAccessor, selector: "ion-input[type=number],ion-range" }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DefaultPaginationComponent, selector: "default-pagination", inputs: { _total: ["total", "_total"], _limit: ["limit", "_limit"], length: "length", loading: "loading", page: "page" }, outputs: { pageChange: "pageChange", changeEmitter: "change" }, ngImport: i0, template: "<div id=\"pagination\" class=\"flex items-center rounded-b-2xl p-2 portrait:flex-col\">\r\n  <div class=\"w-full h-full items-center justify-start flex portrait:justify-center\">\r\n    <ion-spinner [hidden]=\"!(loading && lstPages.length == 0)\"></ion-spinner>\r\n    <ion-text [hidden]=\"loading && lstPages.length == 0\">\r\n      <div class=\"flex\">\r\n        Mostrando &nbsp;\r\n        <ion-skeleton-text *ngIf=\"loading\" [animated]=\"true\" style=\"width: 2ch\"></ion-skeleton-text>\r\n        <b *ngIf=\"!loading\">{{limit * page - limit + length}}</b>  &nbsp;\r\n        de \r\n        @if (total != null) {\r\n          <b>&nbsp; {{total}} &nbsp;</b> items\r\n        }\r\n        @else{\r\n          <b>&nbsp; - &nbsp; </b> items\r\n        }\r\n      </div>\r\n    </ion-text>\r\n  </div>\r\n  <div class=\"w-full h-full items-center justify-end flex portrait:justify-center\" *ngIf=\"total != null\">\r\n    <button class=\"flex items-center\" [disabled]=\"loading\" (click)=\"PageSub()\">\r\n      <ion-icon [ngClass]=\"{'opacity-20': page == 1}\" name=\"chevron-back\" class=\"cursor-pointer default transition\"></ion-icon>\r\n    </button>\r\n\r\n    <ion-spinner *ngIf=\"loading && lstPages.length == 0\"></ion-spinner>\r\n\r\n    <button [disabled]=\"loading\" class=\"page\" *ngFor=\"let item of lstPages\" [ngClass]=\"{ 'selected' : page == item }\" (click)=\"SetPage(item)\"> {{item}} </button>\r\n\r\n    <button class=\"flex items-center\" [disabled]=\"loading\" (click)=\"PageAdd()\">\r\n      <ion-icon [ngClass]=\"{'opacity-20': page == TotalPages }\" name=\"chevron-forward\" class=\"cursor-pointer default transition\"></ion-icon>\r\n    </button>\r\n\r\n    @if (TotalPages > 5) {\r\n      <button [disabled]=\"loading\" class=\"page\" [id]=\"pop_id\"><ion-icon name=\"search\"></ion-icon></button>\r\n      <ion-popover [trigger]=\"pop_id\" triggerAction=\"click\">\r\n        <ng-template>\r\n          <ion-content>\r\n            <div class=\"grid grid-cols-10 pl-3\">\r\n              <div class=\"col-span-8 pb-2\">\r\n                <ion-input class=\"number-class\" [(ngModel)]=\"_page\" type=\"Number\" labelPlacement=\"stacked\" label=\"P\u00E1gina [Max. {{TotalPages}}]\"></ion-input>\r\n              </div>\r\n              <div class=\"col-span-2\">\r\n                <ion-button [disabled]=\"loading\" class=\"size-full\" size=\"small\" (click)=\"SetPageManual()\" style=\"--border-radius: 0rem\">\r\n                  <ion-icon class=\"w-4 aspect-square\" slot=\"icon-only\" name=\"checkmark-circle\"></ion-icon>\r\n                </ion-button>\r\n              </div>\r\n            </div>\r\n          </ion-content>\r\n        </ng-template>\r\n      </ion-popover>\r\n    }\r\n    </div>\r\n</div>", styles: ["#pagination{background-color:color-mix(in srgb,var(--ion-color-dark) 10%,var(--ion-color-light));color:var(--ion-color-step-700)}button.page{margin-left:.25rem;margin-right:.25rem;display:flex;height:1.5rem;min-width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.375rem;border-width:1px;padding-left:.25rem;padding-right:.25rem;text-align:center;border:var(--ion-color-dark) solid 1px;color:var(--ion-color-dark);transition:all .25s}button.page:disabled{opacity:.75}button.page.selected{background-color:var(--ion-color-dark);color:var(--ion-color-dark-contrast)!important}\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.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.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i3.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i3.NumericValueAccessor, selector: "ion-input[type=number],ion-input-otp:not([type=text]),ion-range" }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'default-pagination', template: "<div id=\"pagination\" class=\"flex items-center rounded-b-2xl px-4 py-2 portrait:flex-col\">\r\n  <div class=\"w-full h-full items-center justify-start flex portrait:justify-center\">\r\n    <ion-spinner [hidden]=\"!(loading && lstPages.length == 0)\"></ion-spinner>\r\n    <ion-text [hidden]=\"loading && lstPages.length == 0\">\r\n      <div class=\"flex\">\r\n        Mostrando &nbsp;\r\n        <ion-skeleton-text *ngIf=\"loading\" [animated]=\"true\" style=\"width: 2ch\"></ion-skeleton-text>\r\n        <b *ngIf=\"!loading\">{{limit * page - limit + length}}</b>  &nbsp;\r\n        de \r\n        @if (total != null) {\r\n          <b>&nbsp; {{total}} &nbsp;</b> items\r\n        }\r\n        @else{\r\n          <b>&nbsp; - &nbsp; </b> items\r\n        }\r\n      </div>\r\n    </ion-text>\r\n  </div>\r\n  <div class=\"w-full h-full items-center justify-end flex portrait:justify-center\" *ngIf=\"total != null\">\r\n    <button class=\"flex items-center\" [disabled]=\"loading\" (click)=\"PageSub()\">\r\n      <ion-icon [ngClass]=\"{'opacity-20': page == 1}\" name=\"chevron-back\" class=\"cursor-pointer default transition\"></ion-icon>\r\n    </button>\r\n\r\n    <ion-spinner *ngIf=\"loading && lstPages.length == 0\"></ion-spinner>\r\n\r\n    <button [disabled]=\"loading\" class=\"page\" *ngFor=\"let item of lstPages\" [ngClass]=\"{ 'selected' : page == item }\" (click)=\"SetPage(item)\"> {{item}} </button>\r\n\r\n    <button class=\"flex items-center\" [disabled]=\"loading\" (click)=\"PageAdd()\">\r\n      <ion-icon [ngClass]=\"{'opacity-20': page == TotalPages }\" name=\"chevron-forward\" class=\"cursor-pointer default transition\"></ion-icon>\r\n    </button>\r\n\r\n    @if (TotalPages > 5) {\r\n      <button [disabled]=\"loading\" class=\"page\" [id]=\"pop_id\"><ion-icon name=\"search\"></ion-icon></button>\r\n      <ion-popover [trigger]=\"pop_id\" triggerAction=\"click\">\r\n        <ng-template>\r\n          <ion-content>\r\n            <div class=\"grid grid-cols-10 pl-3\">\r\n              <div class=\"col-span-8 pb-2\">\r\n                <ion-input class=\"number-class\" [(ngModel)]=\"_page\" type=\"Number\" labelPlacement=\"stacked\" label=\"P\u00E1gina [Max. {{TotalPages}}]\"></ion-input>\r\n              </div>\r\n              <div class=\"col-span-2\">\r\n                <ion-button [disabled]=\"loading\" class=\"size-full\" size=\"small\" (click)=\"SetPageManual()\" style=\"--border-radius: 0rem\">\r\n                  <ion-icon class=\"w-4 aspect-square\" slot=\"icon-only\" name=\"checkmark-circle\"></ion-icon>\r\n                </ion-button>\r\n              </div>\r\n            </div>\r\n          </ion-content>\r\n        </ng-template>\r\n      </ion-popover>\r\n    }\r\n    </div>\r\n</div>", styles: ["#pagination{background-color:var(--ion-color-step-300);color:var(--ion-color-step-700)}@media (prefers-color-scheme: light){#pagination{background-color:var(--ion-framework-table-light)}}button.page{margin-left:.25rem;margin-right:.25rem;display:flex;height:1.5rem;min-width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.375rem;border-width:1px;padding-left:.25rem;padding-right:.25rem;text-align:center;border:var(--ion-color-dark) solid 1px;color:var(--ion-color-dark);transition:all .25s}button.page:disabled{opacity:.75}button.page.selected{background-color:var(--ion-color-dark);color:var(--ion-color-dark-contrast)!important}\n"] }]
+            args: [{ selector: 'default-pagination', template: "<div id=\"pagination\" class=\"flex items-center rounded-b-2xl p-2 portrait:flex-col\">\r\n  <div class=\"w-full h-full items-center justify-start flex portrait:justify-center\">\r\n    <ion-spinner [hidden]=\"!(loading && lstPages.length == 0)\"></ion-spinner>\r\n    <ion-text [hidden]=\"loading && lstPages.length == 0\">\r\n      <div class=\"flex\">\r\n        Mostrando &nbsp;\r\n        <ion-skeleton-text *ngIf=\"loading\" [animated]=\"true\" style=\"width: 2ch\"></ion-skeleton-text>\r\n        <b *ngIf=\"!loading\">{{limit * page - limit + length}}</b>  &nbsp;\r\n        de \r\n        @if (total != null) {\r\n          <b>&nbsp; {{total}} &nbsp;</b> items\r\n        }\r\n        @else{\r\n          <b>&nbsp; - &nbsp; </b> items\r\n        }\r\n      </div>\r\n    </ion-text>\r\n  </div>\r\n  <div class=\"w-full h-full items-center justify-end flex portrait:justify-center\" *ngIf=\"total != null\">\r\n    <button class=\"flex items-center\" [disabled]=\"loading\" (click)=\"PageSub()\">\r\n      <ion-icon [ngClass]=\"{'opacity-20': page == 1}\" name=\"chevron-back\" class=\"cursor-pointer default transition\"></ion-icon>\r\n    </button>\r\n\r\n    <ion-spinner *ngIf=\"loading && lstPages.length == 0\"></ion-spinner>\r\n\r\n    <button [disabled]=\"loading\" class=\"page\" *ngFor=\"let item of lstPages\" [ngClass]=\"{ 'selected' : page == item }\" (click)=\"SetPage(item)\"> {{item}} </button>\r\n\r\n    <button class=\"flex items-center\" [disabled]=\"loading\" (click)=\"PageAdd()\">\r\n      <ion-icon [ngClass]=\"{'opacity-20': page == TotalPages }\" name=\"chevron-forward\" class=\"cursor-pointer default transition\"></ion-icon>\r\n    </button>\r\n\r\n    @if (TotalPages > 5) {\r\n      <button [disabled]=\"loading\" class=\"page\" [id]=\"pop_id\"><ion-icon name=\"search\"></ion-icon></button>\r\n      <ion-popover [trigger]=\"pop_id\" triggerAction=\"click\">\r\n        <ng-template>\r\n          <ion-content>\r\n            <div class=\"grid grid-cols-10 pl-3\">\r\n              <div class=\"col-span-8 pb-2\">\r\n                <ion-input class=\"number-class\" [(ngModel)]=\"_page\" type=\"Number\" labelPlacement=\"stacked\" label=\"P\u00E1gina [Max. {{TotalPages}}]\"></ion-input>\r\n              </div>\r\n              <div class=\"col-span-2\">\r\n                <ion-button [disabled]=\"loading\" class=\"size-full\" size=\"small\" (click)=\"SetPageManual()\" style=\"--border-radius: 0rem\">\r\n                  <ion-icon class=\"w-4 aspect-square\" slot=\"icon-only\" name=\"checkmark-circle\"></ion-icon>\r\n                </ion-button>\r\n              </div>\r\n            </div>\r\n          </ion-content>\r\n        </ng-template>\r\n      </ion-popover>\r\n    }\r\n    </div>\r\n</div>", styles: ["#pagination{background-color:color-mix(in srgb,var(--ion-color-dark) 10%,var(--ion-color-light));color:var(--ion-color-step-700)}button.page{margin-left:.25rem;margin-right:.25rem;display:flex;height:1.5rem;min-width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.375rem;border-width:1px;padding-left:.25rem;padding-right:.25rem;text-align:center;border:var(--ion-color-dark) solid 1px;color:var(--ion-color-dark);transition:all .25s}button.page:disabled{opacity:.75}button.page.selected{background-color:var(--ion-color-dark);color:var(--ion-color-dark-contrast)!important}\n"] }]
         }], ctorParameters: () => [{ type: GenericService }], propDecorators: { _total: [{
                 type: Input,
                 args: ['total']
@@ -2371,87 +2677,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['change']
             }] } });
 
-class CustomInput {
-    /** @virtual */
-    SetValue(obj) {
-        this.value.set(obj);
-        this.runValidation();
-        this.propagateChange(obj);
-    }
-    constructor() {
-        /** Exibe o spinner de carregamento */
-        this.loading = model(false);
-        /** Se ativo desabilita o Input */
-        this.disabled = model(false);
-        /** Indica se o formulário foi enviado */
-        this.submitted = model(false);
-        /** Titulo do Input */
-        this.label = input("Label");
-        /** Torna o input obrigatorio */
-        this.required = model(false);
-        //[ Value ]
-        this.value = signal(undefined);
-        this.invalid = false;
-        //[ ControlValueAccessor ]
-        /** Acionado quando um elemento perde o foco. */
-        this.blur = output();
-        /** Emitido quando o valor é alterado. */
-        this.change = output();
-        this.onChange = (value) => { return; };
-        this.onTouch = (value) => { return; };
-        try {
-            this.controlContainer = inject(ControlContainer);
-        }
-        catch { }
-        effect(() => {
-            if (this.control) {
-                this.invalid = this.control.invalid;
-            }
-        });
-    }
-    /** @virtual */
-    ngOnInit() {
-        if (!this.control && this.controlContainer && this.formControlName) {
-            this.control = this.controlContainer.control.get(this.formControlName);
-        }
-        if (this.control) {
-            this.required.set(this.control.hasValidator(Validators.required));
-            this.invalid = this.control.invalid;
-            this.control.events.subscribe({ next: (event) => { this.runValidation(); } });
-        }
-    }
-    runValidation() {
-        if (this.control) {
-            this.required.set(this.control.hasValidator(Validators.required));
-            this.invalid = this.control.invalid;
-        }
-        else {
-            this.invalid = !this.value() && this.required();
-        }
-    }
-    propagateChange(obj) { this.onChange(obj); this.change.emit(obj); ; }
-    registerOnChange(fn) { this.onChange = fn; }
-    registerOnTouched(fn) { this.onTouch = fn; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CustomInput, selector: "ng-component", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: false, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "formControl", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", disabled: "disabledChange", submitted: "submittedChange", required: "requiredChange", blur: "blur", change: "change" }, providers: [
-            ...InputProviderFactory.GetProviders(CustomInput)
-        ], ngImport: i0, template: '', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomInput, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                    providers: [
-                        ...InputProviderFactory.GetProviders(CustomInput)
-                    ]
-                }]
-        }], ctorParameters: () => [], propDecorators: { formControlName: [{
-                type: Input
-            }], control: [{
-                type: Input,
-                args: ['formControl']
-            }] } });
-
 class SIonPopoverComponent {
     constructor(viewContainerRef, ngZone) {
         this.viewContainerRef = viewContainerRef;
@@ -2469,11 +2694,14 @@ class SIonPopoverComponent {
         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);
@@ -2514,6 +2742,7 @@ class SIonPopoverComponent {
         this.isVisibleChange.emit(this.isVisible);
         await Timeout(200);
         this.onDidPresent.emit();
+        this.lock = false;
     }
     async GetComputePositionReturn(refEl, popEl, arrowEl) {
         return await computePosition(refEl, popEl, {
@@ -2539,7 +2768,6 @@ class SIonPopoverComponent {
         if (!this.popoverInstance) {
             return;
         }
-        console.log('Click detected in popover', !this.anchor.contains(event.target), this.anchor);
         if (!this.popoverInstance.contains(event.target) &&
             !this.anchor.contains(event.target)) {
             this.dismiss();
@@ -2559,6 +2787,8 @@ class SIonPopoverComponent {
         });
     }
     async dismiss() {
+        await waitUntil(() => !this.lock);
+        this.lock = true;
         this.onWillDismiss.emit();
         if (this.cleanupAutoUpdate) {
             this.cleanupAutoUpdate();
@@ -2572,6 +2802,7 @@ class SIonPopoverComponent {
             this.popoverInstance = undefined;
         }
         this.onDidDismiss.emit();
+        this.lock = false;
     }
     ngOnDestroy() {
         if (this.documentClickListener) {
@@ -2580,11 +2811,11 @@ class SIonPopoverComponent {
         this.dismiss();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SIonPopoverComponent, selector: "sion-popover", inputs: { fill: "fill", arrow: "arrow", flip: "flip", placement: "placement", height: "height", width: "width", anchor: "anchor" }, outputs: { onWillPresent: "onWillPresent", onDidPresent: "onDidPresent", onWillDismiss: "onWillDismiss", onDidDismiss: "onDidDismiss", isVisibleChange: "isVisibleChange" }, queries: [{ propertyName: "contentChildren", predicate: ["*"], descendants: true }], viewQueries: [{ propertyName: "popoverTemplate", first: true, predicate: ["popoverTemplate"], descendants: true, static: true }, { propertyName: "contentContainer", first: true, predicate: ["popoverWrapper"], descendants: true }, { propertyName: "arrowElement", first: true, predicate: ["popoverArrow"], descendants: true }], ngImport: i0, template: "<ng-template #popoverTemplate>\r\n  <div #popoverWrapper class=\"popover-wrapper translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n        'visible-anim'    : isVisible,\r\n        'invisible-anim'  : !isVisible,\r\n      }\"\r\n    [style.height]=\"height\"\r\n    [style.width]=\"width\"\r\n  >\r\n  <!-- 'solid' | 'outline' | 'blur' | 'clear' -->\r\n    @if(arrow){\r\n      <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n        [ngClass]=\"{\r\n          'bg-light'        : fill == 'solid',\r\n          'bg-transparent'  : fill == 'outline',\r\n          'backdrop-blur-md': fill == 'blur',\r\n          'visible-anim'    : isVisible,\r\n          'invisible-anim'  : !isVisible,\r\n      }\"\r\n      ></div>\r\n    }\r\n    <ng-content #content></ng-content>\r\n  </div>\r\n</ng-template>", styles: [".popover-wrapper{z-index:50;border-radius:.75rem;width:max-content;position:absolute;will-change:left,top,bottom,right,transform,opacity,filter;transition:opacity,transform,filter .2s ease-in-out;display:none}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.visible-anim{animation:visible .2s ease-in-out forwards}.invisible-anim{pointer-events:none;animation:invisible .2s ease-in-out forwards;opacity:0}@keyframes visible{0%{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}to{opacity:1!important;filter:grayscale(0);transform:scale(1)}}@keyframes invisible{0%{opacity:1;filter:grayscale(0);transform:scale(1)}to{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SIonPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sion-popover', template: "<ng-template #popoverTemplate>\r\n  <div #popoverWrapper class=\"popover-wrapper translucid-border\"\r\n      [ngClass]=\"{\r\n        'bg-light'        : fill == 'solid',\r\n        'bg-transparent'  : fill == 'outline',\r\n        'backdrop-blur-md bg-light/80': fill == 'blur',\r\n        '!border-0'       : fill == 'clear',\r\n        'visible-anim'    : isVisible,\r\n        'invisible-anim'  : !isVisible,\r\n      }\"\r\n    [style.height]=\"height\"\r\n    [style.width]=\"width\"\r\n  >\r\n  <!-- 'solid' | 'outline' | 'blur' | 'clear' -->\r\n    @if(arrow){\r\n      <div #popoverArrow class=\"popover-arrow size-4 translucid-border\"\r\n        [ngClass]=\"{\r\n          'bg-light'        : fill == 'solid',\r\n          'bg-transparent'  : fill == 'outline',\r\n          'backdrop-blur-md': fill == 'blur',\r\n          'visible-anim'    : isVisible,\r\n          'invisible-anim'  : !isVisible,\r\n      }\"\r\n      ></div>\r\n    }\r\n    <ng-content #content></ng-content>\r\n  </div>\r\n</ng-template>", styles: [".popover-wrapper{z-index:50;border-radius:.75rem;width:max-content;position:absolute;will-change:left,top,bottom,right,transform,opacity,filter;transition:opacity,transform,filter .2s ease-in-out;display:none}.popover-arrow{border-radius:.125rem;position:absolute;transform:scale(1) rotate(var(--rotation))!important;clip-path:var(--clip-path-triangle, polygon(0% 0%, 0% 100%, 100% 100%))}.visible-anim{animation:visible .2s ease-in-out forwards}.invisible-anim{pointer-events:none;animation:invisible .2s ease-in-out forwards;opacity:0}@keyframes visible{0%{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}to{opacity:1!important;filter:grayscale(0);transform:scale(1)}}@keyframes invisible{0%{opacity:1;filter:grayscale(0);transform:scale(1)}to{opacity:0!important;filter:grayscale(.9);transform:scale(.95)}}\n"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.NgZone }], propDecorators: { fill: [{
                 type: Input
             }], arrow: [{
@@ -2634,10 +2865,15 @@ const rotations = {
     left: "225deg",
     right: "45deg",
 };
+async function waitUntil(condition, interval = 50) {
+    while (!condition()) {
+        await new Promise(resolve => setTimeout(resolve, interval));
+    }
+}
 
 class InputDateComponent extends CustomInput {
-    focus(event) {
-        if (this.input && event.target == this.inputContainer.nativeElement) {
+    setFocus(event) {
+        if (this.input && (event == null || event.target == this.inputContainer.nativeElement)) {
             this.input.nativeElement.focus();
         }
     }
@@ -2715,11 +2951,17 @@ class InputDateComponent extends CustomInput {
         this.SetValue(v.toString(), true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputDateComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    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)], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "datetime", first: true, predicate: IonDatetime, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <input #input\r\n    [ngModel]=\"dtValue\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [maskito]=\"options\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  \r\n  <ion-button tabindex=\"-1\" class=\"absolute right-1 bottom-1\" (click)=\"Present(modal, popover, $event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n    <ion-icon [name]=\"presentation == 'time' ? 'time' : 'calendar'\" slot=\"icon-only\"></ion-icon>\r\n  </ion-button>\r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>\r\n\r\n<sion-popover\r\n  [anchor]=\"inputContainer\"\r\n  #popover \r\n  [class.time]=\"presentation == 'time'\" \r\n  [class.date]=\"presentation == 'date'\" \r\n  [class.datetime]=\"presentation == 'date-time'\"\r\n>\r\n  <ng-container *ngTemplateOutlet=\"datetimeTemplate; context: { $implicit: popover }\"></ng-container>\r\n</sion-popover>\r\n\r\n<ion-modal \r\n  #modal\r\n  [class.time]=\"presentation == 'time'\" \r\n  [class.date]=\"presentation == 'date'\" \r\n  [class.datetime]=\"presentation == 'date-time'\"\r\n>\r\n  <ng-template>\r\n    <ng-container *ngTemplateOutlet=\"datetimeTemplate; context: { $implicit: modal }\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n\r\n<ng-template #datetimeTemplate let-parent>\r\n  <div class=\"flex items-center justify-center bg-[--ion-color-light] rounded-xl\" tabindex=\"-1\">\r\n    @if(presentation.includes('date')) {\r\n      <ion-datetime tabindex=\"-1\" [ngModel]=\"value()\" class=\"date\" presentation=\"date\" (ionChange)=\"ChangeDate($event.target.value);\"></ion-datetime>\r\n    }\r\n    @if(presentation == 'date-time') {\r\n      <div class=\"flex flex-col items-center justify-center py-12 h-[21rem]\">\r\n        <div class=\"h-full border-r-2 border-primary mask-y/30\"></div>\r\n      </div>\r\n    }\r\n    @if(presentation.includes('time')) {\r\n      <div class=\"h-[21rem] flex flex-col items-center justify-center gap-2\">\r\n        <ion-icon class=\"text-2xl\" name=\"alarm\"></ion-icon>\r\n        <ion-datetime tabindex=\"-1\" [ngModel]=\"value()\" class=\"time\" presentation=\"time\" hourCycle=\"h24\" (ionChange)=\"ChangeDate($event.target.value)\"></ion-datetime>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>", styles: [".input-container{position:relative!important}.input-container input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}ion-popover{--height: auto}ion-popover.time{--width: 8rem}ion-popover.date{--width: 21.5rem}ion-popover.datetime{--width: 29rem}ion-modal{--height: auto}ion-modal.time{--width: 8rem}ion-modal.date{--width: 21.5rem}ion-modal.datetime{--width: 29rem}ion-datetime{--wheel-highlight-background: var(--ion-color-primary) !important}ion-datetime.date{width:21.5rem}ion-datetime.time{width:8rem}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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"] }] }); }
+    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"] }] }); }
 }
 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)], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <input #input\r\n    [ngModel]=\"dtValue\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [maskito]=\"options\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  \r\n  <ion-button tabindex=\"-1\" class=\"absolute right-1 bottom-1\" (click)=\"Present(modal, popover, $event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n    <ion-icon [name]=\"presentation == 'time' ? 'time' : 'calendar'\" slot=\"icon-only\"></ion-icon>\r\n  </ion-button>\r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>\r\n\r\n<sion-popover\r\n  [anchor]=\"inputContainer\"\r\n  #popover \r\n  [class.time]=\"presentation == 'time'\" \r\n  [class.date]=\"presentation == 'date'\" \r\n  [class.datetime]=\"presentation == 'date-time'\"\r\n>\r\n  <ng-container *ngTemplateOutlet=\"datetimeTemplate; context: { $implicit: popover }\"></ng-container>\r\n</sion-popover>\r\n\r\n<ion-modal \r\n  #modal\r\n  [class.time]=\"presentation == 'time'\" \r\n  [class.date]=\"presentation == 'date'\" \r\n  [class.datetime]=\"presentation == 'date-time'\"\r\n>\r\n  <ng-template>\r\n    <ng-container *ngTemplateOutlet=\"datetimeTemplate; context: { $implicit: modal }\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n\r\n<ng-template #datetimeTemplate let-parent>\r\n  <div class=\"flex items-center justify-center bg-[--ion-color-light] rounded-xl\" tabindex=\"-1\">\r\n    @if(presentation.includes('date')) {\r\n      <ion-datetime tabindex=\"-1\" [ngModel]=\"value()\" class=\"date\" presentation=\"date\" (ionChange)=\"ChangeDate($event.target.value);\"></ion-datetime>\r\n    }\r\n    @if(presentation == 'date-time') {\r\n      <div class=\"flex flex-col items-center justify-center py-12 h-[21rem]\">\r\n        <div class=\"h-full border-r-2 border-primary mask-y/30\"></div>\r\n      </div>\r\n    }\r\n    @if(presentation.includes('time')) {\r\n      <div class=\"h-[21rem] flex flex-col items-center justify-center gap-2\">\r\n        <ion-icon class=\"text-2xl\" name=\"alarm\"></ion-icon>\r\n        <ion-datetime tabindex=\"-1\" [ngModel]=\"value()\" class=\"time\" presentation=\"time\" hourCycle=\"h24\" (ionChange)=\"ChangeDate($event.target.value)\"></ion-datetime>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>", styles: [".input-container{position:relative!important}.input-container input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}ion-popover{--height: auto}ion-popover.time{--width: 8rem}ion-popover.date{--width: 21.5rem}ion-popover.datetime{--width: 29rem}ion-modal{--height: auto}ion-modal.time{--width: 8rem}ion-modal.date{--width: 21.5rem}ion-modal.datetime{--width: 29rem}ion-datetime{--wheel-highlight-background: var(--ion-color-primary) !important}ion-datetime.date{width:21.5rem}ion-datetime.time{width:8rem}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
@@ -2732,7 +2974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class InputDecimalComponent extends CustomInput {
-    focus(event) {
+    setFocus(event) {
         if (this.input && event.target == this.inputContainer.nativeElement) {
             this.input.nativeElement.focus();
             this.input.nativeElement.setSelectionRange(this.valueString.length, this.valueString.length);
@@ -2933,11 +3175,17 @@ class InputDecimalComponent extends CustomInput {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputDecimalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: InputDecimalComponent, selector: "input-decimal, input-number, input-currency, input-percentage", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configuration: "configurationChange" }, host: { listeners: { "paste": "onPaste($event)" } }, providers: [...InputProviderFactory.GetProviders(InputDecimalComponent)], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n\r\n  <div class=\"decimal-input-container text-dark\">\r\n    <span *ngIf=\"configuration().prefix\" slot=\"start\">{{configuration().prefix}}</span>\r\n    <input #input\r\n      inputmode=\"numeric\"\r\n      [value]=\"valueString\" \r\n      (keydown)=\"onKeyDown($event)\"\r\n      [disabled]=\"disabled() || loading()\"\r\n    />\r\n    <span *ngIf=\"configuration().sufix\"  slot=\"end\"  >{{configuration().sufix}}</span>\r\n  </div>\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["input{text-align:right;width:100%}.decimal-input-container{display:flex;width:100%;align-items:center;justify-content:center;gap:.25rem}.decimal-input-container span{flex-shrink:0}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: InputDecimalComponent, selector: "input-decimal, input-number, input-currency, input-percentage", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configuration: "configurationChange" }, host: { listeners: { "paste": "onPaste($event)" } }, providers: [
+            ...InputProviderFactory.GetProviders(InputDecimalComponent),
+            { provide: CustomInput, useExisting: forwardRef(() => InputDecimalComponent) },
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], 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  <div class=\"decimal-input-container text-dark\">\r\n    <span *ngIf=\"configuration().prefix\" slot=\"start\">{{configuration().prefix}}</span>\r\n    <input #input\r\n      inputmode=\"numeric\"\r\n      [value]=\"valueString\" \r\n      (keydown)=\"onKeyDown($event)\"\r\n      [disabled]=\"disabled() || loading()\"\r\n    />\r\n    <span *ngIf=\"configuration().sufix\"  slot=\"end\"  >{{configuration().sufix}}</span>\r\n  </div>\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["input{text-align:right;width:100%}.decimal-input-container{display:flex;width:100%;align-items:center;justify-content:center;gap:.25rem}.decimal-input-container span{flex-shrink:0}\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.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputDecimalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-decimal, input-number, input-currency, input-percentage', providers: [...InputProviderFactory.GetProviders(InputDecimalComponent)], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n\r\n  <div class=\"decimal-input-container text-dark\">\r\n    <span *ngIf=\"configuration().prefix\" slot=\"start\">{{configuration().prefix}}</span>\r\n    <input #input\r\n      inputmode=\"numeric\"\r\n      [value]=\"valueString\" \r\n      (keydown)=\"onKeyDown($event)\"\r\n      [disabled]=\"disabled() || loading()\"\r\n    />\r\n    <span *ngIf=\"configuration().sufix\"  slot=\"end\"  >{{configuration().sufix}}</span>\r\n  </div>\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["input{text-align:right;width:100%}.decimal-input-container{display:flex;width:100%;align-items:center;justify-content:center;gap:.25rem}.decimal-input-container span{flex-shrink:0}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
+            args: [{ selector: 'input-decimal, input-number, input-currency, input-percentage', providers: [
+                        ...InputProviderFactory.GetProviders(InputDecimalComponent),
+                        { provide: CustomInput, useExisting: forwardRef(() => InputDecimalComponent) },
+                    ], 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  <div class=\"decimal-input-container text-dark\">\r\n    <span *ngIf=\"configuration().prefix\" slot=\"start\">{{configuration().prefix}}</span>\r\n    <input #input\r\n      inputmode=\"numeric\"\r\n      [value]=\"valueString\" \r\n      (keydown)=\"onKeyDown($event)\"\r\n      [disabled]=\"disabled() || loading()\"\r\n    />\r\n    <span *ngIf=\"configuration().sufix\"  slot=\"end\"  >{{configuration().sufix}}</span>\r\n  </div>\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["input{text-align:right;width:100%}.decimal-input-container{display:flex;width:100%;align-items:center;justify-content:center;gap:.25rem}.decimal-input-container span{flex-shrink:0}\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']
@@ -2986,8 +3234,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     selector: '[sionOptionTemplate]',
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
-class OptionTemplateContext {
-}
 
 class SIonLabelTemplateDirective {
     constructor(template) {
@@ -3035,7 +3281,9 @@ class InputSelectComponent extends CustomInput {
         }
         this.SetCurrentItemLabel();
     }
-    focus(event) { }
+    setFocus(event) {
+        this.Present(event);
+    }
     constructor() {
         super();
         /** Items disponíveis no select */
@@ -3231,11 +3479,17 @@ class InputSelectComponent extends CustomInput {
         return Array.isArray(obj);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputSelectComponent, selector: "input-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { listeners: { "document:keydown": "HandleKeyboardEvent($event)" } }, providers: [...InputProviderFactory.GetProviders(InputSelectComponent)], queries: [{ propertyName: "labelTemplate", first: true, predicate: SIonLabelTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "optionTemplate", first: true, predicate: SIonOptionTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: SIonPlaceholderTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "inputSelectLabel", first: true, predicate: ["inputSelectLabel"], descendants: true }, { propertyName: "inputSearchBar", first: true, predicate: ["inputSearchBar"], descendants: true }, { propertyName: "selectContent", first: true, predicate: ["selectContent"], descendants: true }, { propertyName: "popover", first: true, predicate: SIonPopoverComponent, descendants: true }, { propertyName: "modal", first: true, predicate: IonModal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event); Present($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.manual-focus]=\"floatingVisible\"\r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n  [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\"  #inputSelectLabel tabindex=\"0\">\r\n    @if (!configuration().multiple && currentLabel){\r\n      @if(labelTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"labelTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n      }\r\n    }\r\n    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n      <div class=\"w-full min-h-6 overflow-hidden relative\">\r\n        <div class=\"absolute left-0 top-0 overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n          @for (item of currentItems; track $index) {\r\n            <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n              @if(labelTemplate){\r\n                <ng-container \r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n                </ng-container>\r\n              }\r\n              @else {\r\n                <span class=\"input-select-label\"> {{item.label}} </span>\r\n              }\r\n            \r\n              <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </div>\r\n              <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </ion-button> -->\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if(placeholderTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"placeholderTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n    <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n    <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n  </div>\r\n  @if(configuration().clearable){\r\n    <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n      <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n  } \r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>\r\n\r\n<ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n  <ng-template>\r\n    <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n<sion-popover \r\n    #popover \r\n    [width]=\"inputContainer.offsetWidth + 'px'\" \r\n    (onWillPresent)=\"OnPresent()\" \r\n    (onDidDismiss)=\"OnDismiss()\" \r\n    [anchor]=\"inputContainer\" \r\n    [placement]=\"configuration().popoverConfiguration.placement\" \r\n    [flip]=\"configuration().popoverConfiguration.flip\"\r\n  >\r\n  <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n</sion-popover>\r\n\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n  <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      @if(floatingVisible){\r\n        @for (item of lstOptions; track item.value) { \r\n            <ng-container \r\n              [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n            </ng-container>\r\n          }\r\n        }\r\n    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "isVisibleChange"] }] }); }
+    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>\r\n\r\n<ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n  <ng-template>\r\n    <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n<sion-popover \r\n    #popover \r\n    [width]=\"inputContainer.offsetWidth + 'px'\" \r\n    (onWillPresent)=\"OnPresent()\" \r\n    (onDidDismiss)=\"OnDismiss()\" \r\n    [anchor]=\"inputContainer\" \r\n    [placement]=\"configuration().popoverConfiguration.placement\" \r\n    [flip]=\"configuration().popoverConfiguration.flip\"\r\n  >\r\n  <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n</sion-popover>\r\n\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n  <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      @if(floatingVisible){\r\n        @for (item of lstOptions; track item.value) { \r\n            <ng-container \r\n              [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n            </ng-container>\r\n          }\r\n        }\r\n    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 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.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "isVisibleChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-select', providers: [...InputProviderFactory.GetProviders(InputSelectComponent)], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event); Present($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.manual-focus]=\"floatingVisible\"\r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"loading() || loadingFromLoader || disabled()\"\r\n  [class.loading]=\"loading() || loadingFromLoader\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  \r\n  <div class=\"w-full truncate outline-none\" [class.pr-7]=\"!configuration().clearable\" [class.pr-10]=\"configuration().clearable\"  #inputSelectLabel tabindex=\"0\">\r\n    @if (!configuration().multiple && currentLabel){\r\n      @if(labelTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"labelTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: currentLabel, item: currentItems.item }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label\"> {{currentLabel}} </span>\r\n      }\r\n    }\r\n    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {\r\n      <div class=\"w-full min-h-6 overflow-hidden relative\">\r\n        <div class=\"absolute left-0 top-0 overflow-x-auto flex gap-2 size-full mask-x/2\">\r\n          @for (item of currentItems; track $index) {\r\n            <div class=\"translucid-border rounded-lg flex items-center justify-center gap-2 pl-2\">\r\n              @if(labelTemplate){\r\n                <ng-container \r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.label, item: item.item }\">\r\n                </ng-container>\r\n              }\r\n              @else {\r\n                <span class=\"input-select-label\"> {{item.label}} </span>\r\n              }\r\n            \r\n              <div class=\"h-full aspect-square flex items-center justify-center cursor-pointer\" (click)=\"Select(item); $event.stopPropagation()\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </div>\r\n              <!-- <ion-button class=\"m-0 h-full\" (click)=\"Select(item.value); $event.stopPropagation()\" color=\"medium\" size=\"small\" fill=\"outline\" style=\"--border-radius: .5rem\">\r\n                <ion-icon name=\"close\" color=\"danger\" slot=\"icon-only\"></ion-icon>\r\n              </ion-button> -->\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n    @else {\r\n      @if(placeholderTemplate){\r\n        <ng-container \r\n          [ngTemplateOutlet]=\"placeholderTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }\">\r\n        </ng-container>\r\n      }\r\n      @else {\r\n        <span class=\"input-select-label !text-medium\"> {{this.configuration().placeholder}} </span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div class=\"absolute bottom-1 flex flex-col items-center justify-center size-7\" [class.right-1]=\"!configuration().clearable\" [class.right-8]=\"configuration().clearable\">\r\n    <ion-icon class=\"-mb-0.5\" name=\"chevron-up\"></ion-icon>\r\n    <ion-icon class=\"-mt-0.5\" name=\"chevron-down\"></ion-icon>\r\n  </div>\r\n  @if(configuration().clearable){\r\n    <ion-button class=\"absolute right-1 bottom-1\" (click)=\"Clear($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n      <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n  } \r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading() || loadingFromLoader\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>\r\n\r\n<ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n  <ng-template>\r\n    <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n<sion-popover \r\n    #popover \r\n    [width]=\"inputContainer.offsetWidth + 'px'\" \r\n    (onWillPresent)=\"OnPresent()\" \r\n    (onDidDismiss)=\"OnDismiss()\" \r\n    [anchor]=\"inputContainer\" \r\n    [placement]=\"configuration().popoverConfiguration.placement\" \r\n    [flip]=\"configuration().popoverConfiguration.flip\"\r\n  >\r\n  <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n</sion-popover>\r\n\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n  <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      @if(floatingVisible){\r\n        @for (item of lstOptions; track item.value) { \r\n            <ng-container \r\n              [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n            </ng-container>\r\n          }\r\n        }\r\n    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
+            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>\r\n\r\n<ion-modal #modal (ionModalWillPresent)=\"OnPresent()\" (didDismiss)=\"OnDismiss()\" style=\"--width: 90%; --height: 90%;\" [keepContentsMounted]=\"true\">\r\n  <ng-template>\r\n    <ng-container [ngTemplateOutlet]=\"selectContentTemplate\" [ngTemplateOutletContext]=\"{ modal: true }\"></ng-container>\r\n  </ng-template>\r\n</ion-modal>\r\n\r\n<sion-popover \r\n    #popover \r\n    [width]=\"inputContainer.offsetWidth + 'px'\" \r\n    (onWillPresent)=\"OnPresent()\" \r\n    (onDidDismiss)=\"OnDismiss()\" \r\n    [anchor]=\"inputContainer\" \r\n    [placement]=\"configuration().popoverConfiguration.placement\" \r\n    [flip]=\"configuration().popoverConfiguration.flip\"\r\n  >\r\n  <ng-container [ngTemplateOutlet]=\"selectContentTemplate\"></ng-container>\r\n</sion-popover>\r\n\r\n<ng-template #selectContentTemplate let-modal=\"modal\">\r\n  <div #selectContent class=\"select-content\" [class.!size-full]=\"modal\">\r\n    <div class=\"select-search-bar-container\">\r\n      <div class=\"select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0\">\r\n        <ion-icon color=\"dark\" name=\"search\"></ion-icon>\r\n      </div>\r\n      <input #inputSearchBar tabindex=\"-1\" class=\"select-search-bar border-primary/70 !rounded-l-none\" [formControl]=\"searchBarControl\"/>\r\n    </div> \r\n    <ul class=\"select-item-list mask-y\" role=\"listbox\" [attr.aria-activedescendant]=\"'sion-is-' + selectedIndex\">\r\n      @if(floatingVisible){\r\n        @for (item of lstOptions; track item.value) { \r\n            <ng-container \r\n              [ngTemplateOutlet]=\"baseOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{ item: item, index: $index }\">\r\n            </ng-container>\r\n          }\r\n        }\r\n    </ul>\r\n    @if(isServiceAtivo()){\r\n      <div class=\"w-full text-xs flex items-center justify-end\">\r\n        <ion-checkbox [ngModel]=\"somenteAtivos()\" (ngModelChange)=\"somenteAtivos.set($event)\" class=\"scale-75\"> Somente ativos </ion-checkbox>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #baseOptionTemplate let-item=\"item\" let-index=\"index\">\r\n  <li [id]=\"'sion-is-' + index\" class=\"select-item\" [class.disabled]=\"item.disabled\" [attr.aria-selected]=\"index == selectedIndex\" (mouseenter)=\"selectedIndex = index\" (click)=\"Select(item)\">\r\n    <div class=\"select-item-checkmark-conteiner\">\r\n      @if(item.selected) {\r\n        <ion-icon class=\"select-item-checkmark\" color=\"primary\" name=\"checkmark\"></ion-icon>\r\n      }\r\n    </div>\r\n    @if (optionTemplate) {\r\n      <ng-container \r\n        [ngTemplateOutlet]=\"optionTemplate\"\r\n        [ngTemplateOutletContext]=\"{ item: item.item }\">\r\n      </ng-container>\r\n    }\r\n    @else {\r\n      <span class=\"select-item-label\"> {{item.label}} </span>\r\n    }\r\n  </li>\r\n</ng-template>", styles: [".input-container{cursor:pointer!important}.input-select-label{pointer-events:none;min-height:1.5rem;width:100%;outline:2px solid transparent;outline-offset:2px;color:var(--ion-color-dark)}.select-content{display:flex;height:18rem;width:100%;flex-direction:column;gap:.25rem;overflow:hidden;padding:.25rem}.select-content .select-search-bar-container{display:flex;width:100%;flex-shrink:1}.select-content .select-search-bar-container .select-search-bar-icon-container{display:flex;height:100%;width:1.75rem;align-items:center;justify-content:center;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-width:1px}.select-content .select-search-bar-container .select-search-bar{width:100%;flex-shrink:1;border-radius:.375rem;border-width:1px;background-color:transparent;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}@media (orientation: portrait){.select-content .select-search-bar-container .select-search-bar{height:2.5rem}}@media (orientation: landscape){.select-content .select-search-bar-container .select-search-bar{height:1.75rem}}.select-item-list{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem}.select-item-list .select-item{color:var(--ion-color-dark);display:flex;width:100%;flex-shrink:0;align-items:center;justify-content:flex-start;border-radius:.375rem;padding-right:.5rem}@media (orientation: portrait){.select-item-list .select-item{min-height:2.5rem}}@media (orientation: landscape){.select-item-list .select-item{min-height:2rem}}.select-item-list .select-item{cursor:pointer}.select-item-list .select-item.disabled{opacity:.5;pointer-events:none}.select-item-list .select-item:hover,.select-item-list .select-item:focus,.select-item-list .select-item[aria-selected=true]{background-color:color-mix(in srgb,var(--ion-color-dark) 20%,transparent)}.select-item-list .select-item .select-item-checkmark-conteiner{display:flex;height:100%;width:1.75rem;flex-shrink:0;align-items:center;justify-content:center}.select-item-list .select-item .select-item-label{width:100%}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 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 }]
@@ -3278,8 +3532,8 @@ function isPortrait() {
 }
 
 class InputStringComponent extends CustomInput {
-    focus(event) {
-        if (this.input && event.target == this.inputContainer.nativeElement) {
+    setFocus(event = null) {
+        if (this.input && (event == null || event.target == this.inputContainer.nativeElement)) {
             this.input.nativeElement.focus();
         }
     }
@@ -3292,11 +3546,17 @@ class InputStringComponent extends CustomInput {
         this.runValidation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputStringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: InputStringComponent, selector: "input-string", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [...InputProviderFactory.GetProviders(InputStringComponent)], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  <input #input\r\n    [ngModel]=\"value()\" \r\n    [type]=\"configuration().type\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n    [maxlength]=\"configuration().maxlength\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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.1.0", version: "18.2.13", type: InputStringComponent, selector: "input-string", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            ...InputProviderFactory.GetProviders(InputStringComponent),
+            { provide: CustomInput, useExisting: forwardRef(() => InputStringComponent) },
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], 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  <input #input\r\n    [ngModel]=\"value()\" \r\n    [type]=\"configuration().type\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n    [maxlength]=\"configuration().maxlength\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["", "@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.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: InputStringComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-string', providers: [...InputProviderFactory.GetProviders(InputStringComponent)], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  <input #input\r\n    [ngModel]=\"value()\" \r\n    [type]=\"configuration().type\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n    [maxlength]=\"configuration().maxlength\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
+            args: [{ selector: 'input-string', providers: [
+                        ...InputProviderFactory.GetProviders(InputStringComponent),
+                        { provide: CustomInput, useExisting: forwardRef(() => InputStringComponent) },
+                    ], 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  <input #input\r\n    [ngModel]=\"value()\" \r\n    [type]=\"configuration().type\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n    [maxlength]=\"configuration().maxlength\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["@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: { input: [{
                 type: ViewChild,
                 args: ['input']
@@ -3453,11 +3713,11 @@ class ThFilterComponent {
         return;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ThFilterComponent, selector: "th-filter", inputs: { field: "field" }, outputs: { changeEmitter: "change" }, ngImport: i0, template: "<div #anchor class=\"h-5 aspect-square mr-1 flex items-center justify-center cursor-pointer\">\r\n  <ion-icon name=\"filter-circle\" (click)=\"popover.present($event)\" class=\"text-xl align-sub size-full\" [color]=\"isFilterActive ? 'secondary' : 'medium' \"></ion-icon>\r\n</div>\r\n\r\n<sion-popover fill=\"solid\" #popover [anchor]=\"anchor\" triggerAction=\"click\">\r\n  <div class=\"w-72 flex flex-col gap-2 p-2\" >\r\n    @if(!['Select', 'Bool', 'String', 'TextArea'].includes(field.type)){\r\n      <ion-label class=\"w-full flex items-center justify-center\">  Filtro - {{field.header}} </ion-label>\r\n    }\r\n    @switch (field.type) {\r\n      @case ('String') {\r\n        <input-string [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" (blur)=\"Change()\"></input-string>\r\n      }\r\n      @case ('Number') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-number (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-number>\r\n          <input-number (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-number>\r\n        </div>\r\n      }\r\n      @case ('Decimal') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-decimal>\r\n          <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-decimal>\r\n        </div>\r\n      }\r\n      @case ('Currency') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-currency>\r\n          <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-currency>\r\n        </div>\r\n      }\r\n      @case ('Select') {\r\n        <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" [configuration]=\"configuration\"></input-select>\r\n      }\r\n      @case ('TextArea') {\r\n        <input-string (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\"></input-string>\r\n      }\r\n      @case ('Bool') {\r\n        <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" placeholder=\"\" [configuration]=\"configuration\"></input-select>\r\n      }\r\n      @case ('Date') {\r\n        <div class=\"size-full grid grid-cols-1 gap-2\">\r\n          <input-date (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date>\r\n          <input-date (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date>\r\n        </div>\r\n      }\r\n      @case ('DateTime') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date-time>\r\n          <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date-time>\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n  <!-- <ion-card class=\"m-0 !border-0 bg-primary/30 w-72\">\r\n    <ion-card-header class=\"bg-transparent\">\r\n      <ion-card-title class=\"text-center text-sm\">\r\n        Filtro - {{field.header}}\r\n      </ion-card-title>\r\n    </ion-card-header>\r\n    <ion-card-content [ngClass]=\"{'!p-0': ['Select', 'Bool', 'String', 'TextArea'].includes(field.type)}\" class=\"!p-2 bg-light rounded-t-2xl\">\r\n      @switch (field.type) {\r\n        @case ('String') {\r\n          <input-string [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" (blur)=\"Change()\"></input-string>\r\n        }\r\n        @case ('Number') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-number (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-number>\r\n            <input-number (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-number>\r\n          </div>\r\n        }\r\n        @case ('Decimal') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-decimal>\r\n            <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-decimal>\r\n          </div>\r\n        }\r\n        @case ('Currency') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-currency>\r\n            <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-currency>\r\n          </div>\r\n        }\r\n        @case ('Select') {\r\n          <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" [configuration]=\"configuration\"></input-select>\r\n        }\r\n        @case ('TextArea') {\r\n          <input-string (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\"></input-string>\r\n        }\r\n        @case ('Bool') {\r\n          <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" placeholder=\"\" [configuration]=\"configuration\"></input-select>\r\n        }\r\n        @case ('Date') {\r\n          <div class=\"size-full grid grid-cols-1 gap-2\">\r\n            <input-date (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date>\r\n            <input-date (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date>\r\n          </div>\r\n        }\r\n        @case ('DateTime') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date-time>\r\n            <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date-time>\r\n          </div>\r\n        }\r\n      }\r\n    </ion-card-content>\r\n  </ion-card> -->\r\n</sion-popover>\r\n", styles: [".th-select{border-radius:0!important}.th-select ion-card{--border-radius: 0 !important;--border-width: 0 !important;border-radius:0!important;border-width:0!important}.th-select ion-card ion-item{--border-radius: 0 !important;--border-width: 0 !important;border-radius:0!important;border-width:0!important}.th-select ion-card div.w-12 ion-button{--border-width: 1px !important;--border-radius: 0rem 0rem 1rem 0rem !important}\n"], dependencies: [{ kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: 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", "isVisibleChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'th-filter', template: "<div #anchor class=\"h-5 aspect-square mr-1 flex items-center justify-center cursor-pointer\">\r\n  <ion-icon name=\"filter-circle\" (click)=\"popover.present($event)\" class=\"text-xl align-sub size-full\" [color]=\"isFilterActive ? 'secondary' : 'medium' \"></ion-icon>\r\n</div>\r\n\r\n<sion-popover fill=\"solid\" #popover [anchor]=\"anchor\" triggerAction=\"click\">\r\n  <div class=\"w-72 flex flex-col gap-2 p-2\" >\r\n    @if(!['Select', 'Bool', 'String', 'TextArea'].includes(field.type)){\r\n      <ion-label class=\"w-full flex items-center justify-center\">  Filtro - {{field.header}} </ion-label>\r\n    }\r\n    @switch (field.type) {\r\n      @case ('String') {\r\n        <input-string [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" (blur)=\"Change()\"></input-string>\r\n      }\r\n      @case ('Number') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-number (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-number>\r\n          <input-number (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-number>\r\n        </div>\r\n      }\r\n      @case ('Decimal') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-decimal>\r\n          <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-decimal>\r\n        </div>\r\n      }\r\n      @case ('Currency') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-currency>\r\n          <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-currency>\r\n        </div>\r\n      }\r\n      @case ('Select') {\r\n        <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" [configuration]=\"configuration\"></input-select>\r\n      }\r\n      @case ('TextArea') {\r\n        <input-string (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\"></input-string>\r\n      }\r\n      @case ('Bool') {\r\n        <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" placeholder=\"\" [configuration]=\"configuration\"></input-select>\r\n      }\r\n      @case ('Date') {\r\n        <div class=\"size-full grid grid-cols-1 gap-2\">\r\n          <input-date (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date>\r\n          <input-date (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date>\r\n        </div>\r\n      }\r\n      @case ('DateTime') {\r\n        <div class=\"grid grid-cols-1 gap-2\">\r\n          <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date-time>\r\n          <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date-time>\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n  <!-- <ion-card class=\"m-0 !border-0 bg-primary/30 w-72\">\r\n    <ion-card-header class=\"bg-transparent\">\r\n      <ion-card-title class=\"text-center text-sm\">\r\n        Filtro - {{field.header}}\r\n      </ion-card-title>\r\n    </ion-card-header>\r\n    <ion-card-content [ngClass]=\"{'!p-0': ['Select', 'Bool', 'String', 'TextArea'].includes(field.type)}\" class=\"!p-2 bg-light rounded-t-2xl\">\r\n      @switch (field.type) {\r\n        @case ('String') {\r\n          <input-string [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" (blur)=\"Change()\"></input-string>\r\n        }\r\n        @case ('Number') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-number (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-number>\r\n            <input-number (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-number>\r\n          </div>\r\n        }\r\n        @case ('Decimal') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-decimal>\r\n            <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-decimal>\r\n          </div>\r\n        }\r\n        @case ('Currency') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-currency>\r\n            <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-currency>\r\n          </div>\r\n        }\r\n        @case ('Select') {\r\n          <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" [configuration]=\"configuration\"></input-select>\r\n        }\r\n        @case ('TextArea') {\r\n          <input-string (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\"></input-string>\r\n        }\r\n        @case ('Bool') {\r\n          <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" placeholder=\"\" [configuration]=\"configuration\"></input-select>\r\n        }\r\n        @case ('Date') {\r\n          <div class=\"size-full grid grid-cols-1 gap-2\">\r\n            <input-date (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date>\r\n            <input-date (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date>\r\n          </div>\r\n        }\r\n        @case ('DateTime') {\r\n          <div class=\"grid grid-cols-1 gap-2\">\r\n            <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date-time>\r\n            <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date-time>\r\n          </div>\r\n        }\r\n      }\r\n    </ion-card-content>\r\n  </ion-card> -->\r\n</sion-popover>\r\n", styles: [".th-select{border-radius:0!important}.th-select ion-card{--border-radius: 0 !important;--border-width: 0 !important;border-radius:0!important;border-width:0!important}.th-select ion-card ion-item{--border-radius: 0 !important;--border-width: 0 !important;border-radius:0!important;border-width:0!important}.th-select ion-card div.w-12 ion-button{--border-width: 1px !important;--border-radius: 0rem 0rem 1rem 0rem !important}\n"] }]
+            args: [{ selector: 'th-filter', 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"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{
                 type: Input
             }], changeEmitter: [{
@@ -3465,204 +3725,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['change']
             }] } });
 
-/** Componente de tabela padrão */
 class DefaultTableComponent {
     constructor(storageService, activatedRoute, router) {
         this.storageService = storageService;
         this.activatedRoute = activatedRoute;
         this.router = router;
-        this.limitChange = new EventEmitter();
-        this.pageChange = new EventEmitter();
-        this.orderByPropertyChange = new EventEmitter();
-        this.ascendingChange = new EventEmitter();
-        //#endregion [ Pagination ]
+        /** Template de ações, deve ser um elemento ```<ng-template>``` */
+        // acoesTemplate: InputSignal<TemplateRef<any>> = input<TemplateRef<any>>();
+        /** Service a ser utilizado na listagem */
+        this.service = input();
+        this.total = model(0);
+        /** Número de items máximo (usando two way data binding) */
+        this.limit = model();
+        /** Valor da pagina, setado = 1 quando troca-se o valor de limite de paginas (usando two way data binding) */
+        this.page = model(1);
+        /** Propriedade de ordenação (usando two way data binding) */
+        this.orderByProperty = model(null);
+        /** Propriedade de ordenação
+         * Se = true  Ordenará de menor ao maior
+         * Se = false Ordenará de maior ao menor (usando two way data binding) */
+        this.ascending = model(true);
         /** Filtros (usando two way data binding) */
-        this.filter = [];
-        this.filterChange = new EventEmitter();
+        this.filter = model([]);
         /** Evento emitido quando um dos dados é ativado. Emite o id do dado */
-        this.ativarEmitter = new EventEmitter;
-        this.refreshEmitter = new EventEmitter();
+        this.ativar = output();
+        this.refresh = output();
+        this.loading = model(false);
         /** Lista de dados a ser exibidos */
-        this.items = [];
+        this.items = model([]);
         /** Lista de campos a ser exibidos */
-        this.lstTableFields = [];
+        this.lstTableFields = model([]);
+        this.lstTableFieldsAvailable = computed(() => {
+            return this.lstTableFields().filter(p => !p.hidden).map(tf => {
+                return new AvailableTableField(tf, this.ascending() && this.orderByProperty() == tf.index, !this.ascending() && this.orderByProperty() == tf.index);
+            });
+        });
         /** Remove os filtros no cabeçalho da tabela  */
-        this.noFilters = false;
+        this.noFilters = input(false);
         /** Aplica classes de CSS na coluna de acirdo com o retorno da função passada como parametro  */
-        this.columnClass = null;
-        /** Aplica style de CSS na coluna de acirdo com o retorno da função passada como parametro  */
-        this.columnStyle = null;
+        this.columnClass = input(null);
+        /** Aplica style de CSS na coluna de acirco com o retorno da função passada como parametro  */
+        this.columnStyle = input(null);
         /** Remove a paginação da listagem */
-        this.noPagination = false;
+        this.noPagination = input(false);
         /** Caminho de redirecionamento do item */
-        this.itemPath = "view/:id";
-        this.InputTypeFile = InputType.File;
+        this.itemPath = input('view/:id');
+        this.itemClick = output();
+        this.InputType = InputType;
+        this.lstRows = [];
+        effect(() => {
+            for (const tf of this.lstTableFields().filter(p => p.type == InputType.Select)) {
+                tf.configuration.loader.Refresh().then(() => this.SetLstRows());
+            }
+            this.SetLstRows();
+        });
     }
     Redirect(field, item) {
-        if (field.index == 'ativo') {
+        this.itemClick.emit(item);
+        if (!field) {
             return;
         }
-        else if (field.type == 'File') {
+        else if (field.index == 'ativo') {
             return;
         }
-        else {
-            if (this.itemPath) {
-                const id = item.id;
-                const path = this.itemPath.replace(":id", id.toString());
-                this.router.navigate([`./${path}`], { relativeTo: this.activatedRoute });
-            }
-        }
-    }
-    ngOnInit() {
-        if (this.defaultService && this.lstTableFields.length == 0) {
-            this.lstTableFields = this.defaultService.lstTableFields;
-        }
-        if (this.lstTableFields.length == 0) {
-            console.warn("[ Warning! ] [ Table configuration is empty]");
-        }
-        this.lstTableFields.filter(tf => tf.configuration instanceof InputSelectConfiguration).forEach(tf => tf.configuration.loader.Refresh());
-    }
-    SwitchOrder(field) {
-        if (this.orderByProperty != field.index) {
-            this.orderByProperty = field.index;
-            this.ascending = true;
-        }
-        else if (this.ascending) {
-            this.ascending = false;
+        else if (field.type == 'File') {
+            return;
         }
-        else {
-            this.orderByProperty = null;
+        else if (this.itemPath()) {
+            const id = item['id'];
+            const path = this.itemPath().replace(":id", id.toString());
+            this.router.navigate([`./${path}`], { relativeTo: this.activatedRoute });
         }
-        this.orderByPropertyChange.emit(this.orderByProperty);
-        this.ascendingChange.emit(this.ascending);
-        this.EmitChange();
-    }
-    EmitPage(value) {
-        this.pageChange.emit(value);
-        this.EmitChange();
     }
-    EmitChange() {
-        this.refreshEmitter.emit();
+    SetLstRows() {
+        this.lstRows = this.items().map(item => {
+            return new DefaultTableRow(item, item['id'], this.GetColumns(item), this.columnClass() ? this.columnClass()('acoes', item) : '', this.columnStyle() ? this.columnClass()('acoes', item) : '');
+        });
     }
-    GetField(item, field) {
-        const value = item[field.index];
-        const type = field.type;
-        if (['Number', 'Decimal', 'Currency'].includes(type)) {
-            const config = field.configuration;
-            return config.prefix + ' ' + formatNumber(value, "pt-BR", `1.${config.precision}-${config.precision}`) + ' ' + config.sufix;
-        }
-        else if (type == 'DateTime') {
+    GetColumns(item) {
+        return this.lstTableFields().filter(p => !p.hidden).map(tf => {
+            const value = item[tf.index];
+            const column = new DefaultTableColumn(value, tf);
+            column.class = this.columnClass() ? this.columnClass()(tf.index, item) : '';
+            column.style = this.columnStyle() ? this.columnStyle()(tf.index, item) : '';
             if (!value) {
-                return "-";
+                column.label = '-';
+                return column;
+            }
+            if (tf.type == InputType.Bool) {
+                column.label = "<bool>";
+            }
+            else if (tf.type == InputType.Cep) {
+                column.label = FormatCep(value);
+            }
+            else if (tf.type == InputType.Color) {
+                column.label = value;
+            }
+            else if ([InputType.Cpf, InputType.Cnpj, InputType.CpfCnpj].includes(tf.type)) {
+                column.label = FormatCpfCnpj(value);
+            }
+            else if (tf.type == InputType.DateTime) {
+                column.class += ' font-mono';
+                column.label = Utils.DateISOToDDMMYYYYHHMM(value);
+            }
+            else if (tf.type == InputType.Date) {
+                column.class += ' font-mono';
+                column.label = Utils.DateISOToDDMMYYYYHHMM(value);
+            }
+            else if (tf.type == InputType.Time) {
+                column.class += ' font-mono';
+                column.label = value;
+            }
+            else if ([InputType.Decimal, InputType.Decimal, InputType.Currency].includes(tf.type)) {
+                const configuration = tf.configuration;
+                column.label = [
+                    configuration.prefix,
+                    formatNumber(value, 'pt-BR', `1.${configuration.precision}-${configuration.precision}`),
+                    configuration.sufix,
+                ].join(' ');
+            }
+            else if (tf.type == InputType.File) {
+                column.label = '<file>';
+            }
+            else if (tf.type == InputType.Icon) {
+                column.label = 'icon';
+            }
+            else if (tf.type == InputType.Select) {
+                column.label = tf.configuration.loader.GetLabel(value);
+                column.loading = !tf.configuration.loader.isLoaded;
             }
-            return Utils.DateISOToDDMMYYYYHHMM(value);
-        }
-        else if (type == 'Date') {
-            if (!value) {
-                return "-";
+            else if ([InputType.String, InputType.TextArea].includes(tf.type)) {
+                column.label = value;
             }
-            return Utils.DateISOToDDMMYYYY(value);
-        }
-        return value;
+            else if ([InputType.Telefone, InputType.Celular, InputType.TelefoneCelular].includes(tf.type)) {
+                column.label = FormatTelefoneCelular(value);
+            }
+            return column;
+        });
     }
-    GetSelectLabel(item, tField) {
-        const configuration = tField.configuration;
-        if (!configuration.multiple) {
-            return configuration.loader.GetLabel(this.GetField(item, tField));
+    ngOnInit() { this.SetLstRows(); }
+    SwitchOrder(tf) {
+        if (this.orderByProperty() != tf.index) {
+            this.orderByProperty.set(tf.index);
+            this.ascending.set(true);
+        }
+        else if (this.ascending()) {
+            this.ascending.set(false);
         }
         else {
-            const values = this.GetField(item, tField);
-            if (values && values.length > 0) {
-                return values.map(v => configuration.loader.GetLabel(v)).join(", ");
-            }
-            else {
-                return "";
-            }
+            this.orderByProperty.set(null);
         }
-    }
-    GetTypeOf(val) {
-        return typeof (val);
-    }
-    Ativar(id) {
-        this.ativarEmitter.emit(id);
+        this.refresh.emit();
     }
     ChangeFilter() {
-        this.filterChange.emit(CompileLstTableField(this.lstTableFields));
-        this.refreshEmitter.emit();
-    }
-    GetTdClasses(field, item) {
-        var classes = "";
-        if (['DateTime', 'Time', 'Date'].includes(field.type)) {
-            classes += 'font-mono ';
-        }
-        if (this.columnClass) {
-            classes += this.columnClass(field.index, item);
-        }
-        return classes;
+        this.filter.set(CompileLstTableField(this.lstTableFields()));
+        this.page.set(1);
+        this.refresh.emit();
     }
-    GetTdStyle(field, item) {
-        if (this.columnStyle) {
-            return this.columnStyle(field, item);
-        }
-        return "";
+    Ativar(id) {
+        this.ativar.emit(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultTableComponent, deps: [{ token: StorageService }, { token: i2$2.ActivatedRoute }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DefaultTableComponent, selector: "default-table", inputs: { defaultService: ["service", "defaultService"], acoesTemplate: "acoesTemplate", total: "total", limit: "limit", page: "page", orderByProperty: "orderByProperty", ascending: "ascending", filter: "filter", loading: "loading", items: "items", lstTableFields: "lstTableFields", noFilters: "noFilters", columnClass: "columnClass", columnStyle: "columnStyle", noPagination: "noPagination", itemPath: "itemPath" }, outputs: { limitChange: "limitChange", pageChange: "pageChange", orderByPropertyChange: "orderByPropertyChange", ascendingChange: "ascendingChange", filterChange: "filterChange", ativarEmitter: "ativar", refreshEmitter: "refresh" }, ngImport: i0, template: "<!-- <section class=\"w-full h-full rounded-2xl flex flex-col overflow-y-hidden relative\" [ngClass]=\"{ 'loading' : loading }\">\r\n    \r\n    <div class=\"unique-conteiner default-transition\" [ngClass]=\"{'!-z-50 !-translate-y-12 !opacity-0': !loading }\">\r\n        <loading [type]=\"2\"></loading>\r\n    </div>\r\n    <div class=\"unique-conteiner default-transition\" [ngClass]=\"{'!-z-50 !-translate-y-12 !opacity-0': items.length != 0 || loading }\">\r\n        <b><ion-icon class=\"align-sub\" name=\"remove-circle\"></ion-icon> Sem dados</b>\r\n    </div>\r\n\r\n    <div id=\"wrapper\" class=\"relative overflow-y-auto w-full grow-0 mb-auto pb-2\">\r\n        <table class=\"z-20 overflow-visible\">\r\n            <thead>\r\n                <tr>\r\n                    <th scope=\"col\" class=\"px-3 !h-10\" *ngIf=\"acoesTemplate\">\r\n                        <span>A\u00E7\u00F5es</span>\r\n                    </th>\r\n                    @for (field of lstTableFields; let i = $index; track i) {\r\n                        @if (!field.hidden) {\r\n                            <th scope=\"col\" class=\"p-2 px-3\" id=\"th-filter-select\">\r\n                                <div class=\"flex items-center justify-start h-full\" style=\"white-space: var(--ion-table-filter-wrap);\"> \r\n                                    @if(!noFilters){\r\n                                        <th-filter class=\"!text-base\" style=\"text-transform: none !important\" *ngIf=\"(field.type != InputTypeFile) && !(field.filter && field.disabledChange()) && !noFilters\"\r\n                                            [field]=\"field\"\r\n                                            (change)=\"ChangeFilter()\"\r\n                                        ></th-filter>\r\n                                    }\r\n                                    <span>{{field.header}}</span>\r\n\r\n                                    <a *ngIf=\"!(!(field.type != InputTypeFile) && !(field.filter && field.disabledChange())) && !noFilters\" class=\"order-switch h-5 flex items-center justify-center px-1 ml-2 shrink-0 cursor-pointer rounded-2xl\" (click)=\"SwitchOrder(field)\" [ngClass]=\"{ 'ordering-asc' : orderByProperty == field.index && ascending, 'ordering-desc' : orderByProperty == field.index && !ascending}\">\r\n                                        <ion-icon id=\"up\"   name=\"arrow-up\"   class=\"-mt-1\"></ion-icon>\r\n                                        <ion-icon id=\"down\" name=\"arrow-down\" class=\"-ml-1 -mb-1\"></ion-icon>\r\n                                    </a>\r\n                                </div>\r\n                            </th>\r\n                        }\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr [hidden]=\"loading\" *ngFor=\"let item of items\">\r\n                    @if(acoesTemplate){\r\n                        <td class=\"whitespace-nowrap py-1 px-3\" [style]=\"GetTdStyle('Acoes', item)\" >\r\n                            <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: item }\"></ng-container>\r\n                        </td>\r\n                    }\r\n\r\n                    @for (field of lstTableFields; track $index) {\r\n                        @if (!field.hidden) {\r\n                            <td class=\"px-3 py-2\" \r\n                                [ngClass]=\"GetTdClasses(field, item)\" \r\n                                [style]=\"GetTdStyle(field, item)\" \r\n                                (click)=\"Redirect(field, item)\"\r\n                                style=\"white-space: var(--ion-table-row-wrap);\"\r\n                            >\r\n                                @if (field.index == 'ativo') {\r\n                                    <div class=\"w-full h-full flex items-center justify-start\" [routerLink]=\"null\">\r\n                                        <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"loading\" (ionChange)=\"Ativar(item.id)\" ></ion-toggle>\r\n                                    </div>\r\n                                } @else {\r\n                                    @switch (field.type) {\r\n                                        @case (\"Bool\") {\r\n                                            @if (field.configuration.type == \"toggle\") {\r\n                                                <div class=\"-full h-full flex items-center justify-start\">\r\n                                                    <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-toggle>\r\n                                                </div>\r\n                                            }\r\n                                            @else {\r\n                                                <div class=\"-full h-full flex items-center justify-start\">\r\n                                                    <ion-checkbox [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-checkbox>\r\n                                                </div>\r\n                                            }\r\n                                        }\r\n                                        @case (\"File\") {\r\n                                            <download-button [(ngModel)]=\"item[field.index]\" [configuration]=\"field.configuration\"></download-button>\r\n                                        }\r\n                                        @case (\"Select\") {\r\n                                            {{GetSelectLabel(item, field)}}\r\n                                        }\r\n                                        @default {\r\n                                            {{GetField(item, field)}} \r\n                                        }\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        }\r\n                    }\r\n                </tr>\r\n\r\n                <ng-content select=\"[slot=item-end]\"></ng-content>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    @if(!noPagination){\r\n        <div class=\"shrink-0 mt-auto w-full\">\r\n            <default-pagination\r\n                [page]=\"page\"\r\n                (pageChange)=\"EmitPage($event)\"\r\n                [total]=\"total\"\r\n                [limit]=\"limit\"\r\n                [length]=\"items.length\"\r\n                [loading]=\"loading\"\r\n            ></default-pagination>\r\n        </div>\r\n    }\r\n</section> -->\r\n<div class=\"size-full rounded-2xl flex flex-col overflow-hidden relative\">\r\n    <loading [type]=\"3\" [loading]=\"loading\"></loading>\r\n    <content-block text=\"Sem Dados\" [value]=\"!(items.length != 0 || loading)\"></content-block>\r\n\r\n    <div class=\"size-full shrink relative overflow-y-auto\">\r\n        <table>\r\n            <thead>\r\n                <tr>\r\n                    <th scope=\"col\" class=\"px-3 !h-10\" *ngIf=\"acoesTemplate\"> A\u00E7\u00F5es </th>\r\n                        @for (field of lstTableFields; let i = $index; track i) {\r\n                            @if (!field.hidden) {\r\n                                <th scope=\"col\" class=\"p-2 px-3\" id=\"th-filter-select\">\r\n                                    <div class=\"flex items-center justify-start h-full\" style=\"white-space: var(--ion-table-filter-wrap);\"> \r\n                                        @if(!noFilters){\r\n                                            <th-filter class=\"!text-base\" style=\"text-transform: none !important\" *ngIf=\"(field.type != InputTypeFile) && !(field.filter && field.disabledChange()) && !noFilters\"\r\n                                                [field]=\"field\"\r\n                                                (change)=\"ChangeFilter()\"\r\n                                            ></th-filter>\r\n                                        }\r\n                                        <span>{{field.header}}</span>\r\n\r\n                                        <a *ngIf=\"!(!(field.type != InputTypeFile) && !(field.filter && field.disabledChange())) && !noFilters\" class=\"order-switch h-5 flex items-center justify-center px-1 ml-2 shrink-0 cursor-pointer rounded-2xl\" (click)=\"SwitchOrder(field)\" [ngClass]=\"{ 'ordering-asc' : orderByProperty == field.index && ascending, 'ordering-desc' : orderByProperty == field.index && !ascending}\">\r\n                                            <ion-icon id=\"up\"   name=\"arrow-up\"   class=\"-mt-1\"></ion-icon>\r\n                                            <ion-icon id=\"down\" name=\"arrow-down\" class=\"-ml-1 -mb-1\"></ion-icon>\r\n                                        </a>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n                        }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr [hidden]=\"loading\" *ngFor=\"let item of items\">\r\n                    @if(acoesTemplate){\r\n                        <td class=\"whitespace-nowrap py-1 px-3\" [style]=\"GetTdStyle('Acoes', item)\" >\r\n                            <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: item }\"></ng-container>\r\n                        </td>\r\n                    }\r\n\r\n                    @for (field of lstTableFields; track $index) {\r\n                        @if (!field.hidden) {\r\n                            <td class=\"px-3 py-2\" \r\n                                [ngClass]=\"GetTdClasses(field, item)\" \r\n                                [style]=\"GetTdStyle(field, item)\" \r\n                                (click)=\"Redirect(field, item)\"\r\n                                style=\"white-space: var(--ion-table-row-wrap);\"\r\n                            >\r\n                                @if (field.index == 'ativo') {\r\n                                    <div class=\"w-full h-full flex items-center justify-start\" [routerLink]=\"null\">\r\n                                        <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"loading\" (ionChange)=\"Ativar(item.id)\" ></ion-toggle>\r\n                                    </div>\r\n                                } @else {\r\n                                    @switch (field.type) {\r\n                                        @case (\"Bool\") {\r\n                                            @if (field.configuration.type == \"toggle\") {\r\n                                                <div class=\"-full h-full flex items-center justify-start\">\r\n                                                    <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-toggle>\r\n                                                </div>\r\n                                            }\r\n                                            @else {\r\n                                                <div class=\"-full h-full flex items-center justify-start\">\r\n                                                    <ion-checkbox [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-checkbox>\r\n                                                </div>\r\n                                            }\r\n                                        }\r\n                                        @case (\"File\") {\r\n                                            <download-button [(ngModel)]=\"item[field.index]\" [configuration]=\"field.configuration\"></download-button>\r\n                                        }\r\n                                        @case (\"Select\") {\r\n                                            {{GetSelectLabel(item, field)}}\r\n                                        }\r\n                                        @default {\r\n                                            {{GetField(item, field)}} \r\n                                        }\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        }\r\n                    }\r\n                </tr>\r\n\r\n                <ng-content select=\"[slot=item-end]\"></ng-content>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    @if(!noPagination){\r\n        <div class=\"shrink-0 z-[100]\">\r\n            <default-pagination\r\n                [page]=\"page\"\r\n                (pageChange)=\"EmitPage($event)\"\r\n                [total]=\"total\"\r\n                [limit]=\"limit\"\r\n                [length]=\"items.length\"\r\n                [loading]=\"loading\"\r\n            ></default-pagination>\r\n        </div>\r\n    }\r\n</div>", styles: ["#th-filter-select:hover .order-switch{background-color:var(--ion-color-step-200)}#th-filter-select:hover .order-switch #up,#th-filter-select:hover .order-switch #down{opacity:1!important;color:var(--ion-color-step-700)!important}#th-filter-select .order-switch{transition:background-color .3s}#th-filter-select .order-switch #up,#th-filter-select .order-switch #down{opacity:0;transition:all .3s}#th-filter-select .order-switch.ordering-asc #up{color:var(--ion-color-primary)!important;opacity:1}#th-filter-select .order-switch.ordering-asc #down,#th-filter-select .order-switch.ordering-desc #up{color:var(--ion-color-step-800)!important;opacity:1}#th-filter-select .order-switch.ordering-desc #down{color:var(--ion-color-primary)!important;opacity:1}\n"], dependencies: [{ kind: "component", type: i3.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i3.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "component", type: DownloadButtonComponent, selector: "download-button", inputs: ["expand", "value", "size", "color", "params", "disabled", "post", "configuration"], outputs: ["valueChange"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoadingComponent, selector: "loading", inputs: ["text", "type", "loading"] }, { kind: "component", type: ContentBlockComponent, selector: "content-block", inputs: ["text", "value"] }, { kind: "component", type: DefaultPaginationComponent, selector: "default-pagination", inputs: ["total", "limit", "length", "loading", "page"], outputs: ["pageChange", "change"] }, { kind: "component", type: ThFilterComponent, selector: "th-filter", inputs: ["field"], outputs: ["change"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DefaultTableComponent, selector: "default-table", inputs: { acoesTemplate: { classPropertyName: "acoesTemplate", publicName: "acoesTemplate", isSignal: false, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, orderByProperty: { classPropertyName: "orderByProperty", publicName: "orderByProperty", isSignal: true, isRequired: false, transformFunction: null }, ascending: { classPropertyName: "ascending", publicName: "ascending", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, lstTableFields: { classPropertyName: "lstTableFields", publicName: "lstTableFields", isSignal: true, isRequired: false, transformFunction: null }, noFilters: { classPropertyName: "noFilters", publicName: "noFilters", isSignal: true, isRequired: false, transformFunction: null }, columnClass: { classPropertyName: "columnClass", publicName: "columnClass", isSignal: true, isRequired: false, transformFunction: null }, columnStyle: { classPropertyName: "columnStyle", publicName: "columnStyle", isSignal: true, isRequired: false, transformFunction: null }, noPagination: { classPropertyName: "noPagination", publicName: "noPagination", isSignal: true, isRequired: false, transformFunction: null }, itemPath: { classPropertyName: "itemPath", publicName: "itemPath", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { total: "totalChange", limit: "limitChange", page: "pageChange", orderByProperty: "orderByPropertyChange", ascending: "ascendingChange", filter: "filterChange", ativar: "ativar", refresh: "refresh", loading: "loadingChange", items: "itemsChange", lstTableFields: "lstTableFieldsChange", itemClick: "itemClick" }, ngImport: i0, template: "<!-- <div class=\"size-full rounded-2xl flex flex-col overflow-hidden relative\">\r\n    <loading [type]=\"3\" [loading]=\"loading\"></loading>\r\n    <content-block text=\"Sem Dados\" [value]=\"!(items.length != 0 || loading)\"></content-block>\r\n\r\n    <div class=\"size-full shrink relative overflow-y-auto\">\r\n        <table>\r\n            <thead>\r\n                <tr>\r\n                    <th scope=\"col\" class=\"px-3 !h-10\" *ngIf=\"acoesTemplate\"> A\u00E7\u00F5es </th>\r\n                        @for (field of lstTableFields; let i = $index; track i) {\r\n                            @if (!field.hidden) {\r\n                                <th scope=\"col\" class=\"p-2 px-3\" id=\"th-filter-select\">\r\n                                    <div class=\"flex items-center justify-start h-full\" style=\"white-space: var(--ion-table-filter-wrap);\"> \r\n                                        @if(!noFilters){\r\n                                            <th-filter class=\"!text-base\" style=\"text-transform: none !important\" *ngIf=\"(field.type != InputTypeFile) && !(field.filter && field.disabledChange()) && !noFilters\"\r\n                                                [field]=\"field\"\r\n                                                (change)=\"ChangeFilter()\"\r\n                                            ></th-filter>\r\n                                        }\r\n                                        <span>{{field.header}}</span>\r\n\r\n                                        <a *ngIf=\"!(!(field.type != InputTypeFile) && !(field.filter && field.disabledChange())) && !noFilters\" class=\"order-switch h-5 flex items-center justify-center px-1 ml-2 shrink-0 cursor-pointer rounded-2xl\" (click)=\"SwitchOrder(field)\" [ngClass]=\"{ 'ordering-asc' : orderByProperty == field.index && ascending, 'ordering-desc' : orderByProperty == field.index && !ascending}\">\r\n                                            <ion-icon id=\"up\"   name=\"arrow-up\"   class=\"-mt-1\"></ion-icon>\r\n                                            <ion-icon id=\"down\" name=\"arrow-down\" class=\"-ml-1 -mb-1\"></ion-icon>\r\n                                        </a>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n                        }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr [hidden]=\"loading\" *ngFor=\"let item of items\">\r\n                    @if(acoesTemplate){\r\n                        <td class=\"whitespace-nowrap py-1 px-3\" [style]=\"GetTdStyle('Acoes', item)\" >\r\n                            <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: item }\"></ng-container>\r\n                        </td>\r\n                    }\r\n\r\n                    @for (field of lstTableFields; track $index) {\r\n                        @if (!field.hidden) {\r\n                            <td class=\"px-3 py-2\" \r\n                                [ngClass]=\"GetTdClasses(field, item)\" \r\n                                [style]=\"GetTdStyle(field, item)\" \r\n                                (click)=\"Redirect(field, item)\"\r\n                                style=\"white-space: var(--ion-table-row-wrap);\"\r\n                            >\r\n                                @if (field.index == 'ativo') {\r\n                                    <div class=\"w-full h-full flex items-center justify-start\" [routerLink]=\"null\">\r\n                                        <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"loading\" (ionChange)=\"Ativar(item.id)\" ></ion-toggle>\r\n                                    </div>\r\n                                } @else {\r\n                                    @switch (field.type) {\r\n                                        @case (\"Bool\") {\r\n                                            @if (field.configuration.type == \"toggle\") {\r\n                                                <div class=\"-full h-full flex items-center justify-start\">\r\n                                                    <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-toggle>\r\n                                                </div>\r\n                                            }\r\n                                            @else {\r\n                                                <div class=\"-full h-full flex items-center justify-start\">\r\n                                                    <ion-checkbox [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-checkbox>\r\n                                                </div>\r\n                                            }\r\n                                        }\r\n                                        @case (\"File\") {\r\n                                            <download-button [(ngModel)]=\"item[field.index]\" [configuration]=\"field.configuration\"></download-button>\r\n                                        }\r\n                                        @case (\"Select\") {\r\n                                            {{GetSelectLabel(item, field)}}\r\n                                        }\r\n                                        @default {\r\n                                            {{GetField(item, field)}} \r\n                                        }\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        }\r\n                    }\r\n                </tr>\r\n\r\n                <ng-content select=\"[slot=item-end]\"></ng-content>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    @if(!noPagination){\r\n        <div class=\"shrink-0 z-[100]\">\r\n            <default-pagination\r\n                [page]=\"page\"\r\n                (pageChange)=\"EmitPage($event)\"\r\n                [total]=\"total\"\r\n                [limit]=\"limit\"\r\n                [length]=\"items.length\"\r\n                [loading]=\"loading\"\r\n            ></default-pagination>\r\n        </div>\r\n    }\r\n</div> -->\r\n\r\n<div class=\"size-full rounded-xl flex flex-col overflow-hidden relative\">\r\n    <loading [type]=\"3\" [loading]=\"loading()\"></loading>\r\n    <content-block text=\"Sem Dados\" [value]=\"!(items.length != 0 || loading)\"></content-block>\r\n\r\n     <div class=\"size-full shrink relative overflow-y-auto\">\r\n        <table>\r\n            <thead>\r\n                <tr>\r\n                    @if(acoesTemplate){\r\n\r\n                    }\r\n                    <th scope=\"col\" class=\"p-2\"> \r\n                        A\u00E7\u00F5es \r\n                    </th>\r\n\r\n                    @for (tfa of lstTableFieldsAvailable(); track tfa.tf.index) {\r\n                        <th scope=\"col\" class=\"p-2\"> \r\n                            <div class=\"flex gap-2 items-center justify-start th\">\r\n                                @if(!noFilters()){\r\n                                    <th-filter class=\"!text-base\" style=\"text-transform: none !important\" \r\n                                    *ngIf=\"((tfa.tf.type != InputType.File || (tfa.tf.filter && tfa.tf.disabledChange())) && !noFilters())\"\r\n                                        [field]=\"tfa.tf\"\r\n                                        (change)=\"ChangeFilter()\"\r\n                                    ></th-filter>\r\n                                }\r\n\r\n                                {{tfa.tf.header}} \r\n\r\n                                @if((tfa.tf.type != InputType.File || (tfa.tf.filter && tfa.tf.disabledChange())) && !noFilters()){\r\n                                    <a [ngClass]=\"{ 'bg-light/10 !opacity-100': tfa.ascending || tfa.descending }\"\r\n                                        class=\"order h-4 w-5 relative cursor-pointer rounded-lg opacity-0 default-transition\" \r\n                                        (click)=\"SwitchOrder(tfa.tf)\"\r\n                                    >\r\n                                        <ion-icon \r\n                                            [class.text-primary]=\"tfa.ascending\"\r\n                                            class=\"absolute left-0 top-0\" \r\n                                            name=\"arrow-up\"\r\n                                        ></ion-icon> \r\n                                        <ion-icon \r\n                                            [class.text-primary]=\"tfa.descending\"\r\n                                            class=\"absolute right-0 bottom-0\" \r\n                                            name=\"arrow-down\"\r\n                                        ></ion-icon> \r\n                                    </a>\r\n                                }\r\n                            </div>\r\n                        </th>\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of lstRows; track row.id || $index) {\r\n                    <tr [hidden]=\"loading()\">\r\n                        @if(acoesTemplate){\r\n                            <td (click)=\"Redirect(undefined, row.item)\" class=\"whitespace-nowrap py-1 px-3 {{row.acoesClass}}\" [style]=\"row.acoesStyle\" >\r\n                                <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: row.item }\"></ng-container>\r\n                            </td>\r\n                        }\r\n\r\n                        @for (col of row.lstColumns; track col.tf.index) {\r\n                            <td class=\"{{col.class}} p-2 cursor-pointer\" (click)=\"Redirect(col.tf, row.item)\" [style]=\"'white-space: var(--ion-table-row-wrap);' + col.style\">\r\n                                @if(col.tf.index == 'ativo') {\r\n                                    <div class=\"size-full flex items-center justify-start\" [routerLink]=\"null\">\r\n                                        <ion-toggle [checked]=\"col.value\" [disabled]=\"loading()\" (ionChange)=\"Ativar(row.id)\" ></ion-toggle>\r\n                                    </div>\r\n                                }\r\n                                @else if (col.tf.type == InputType.Bool){\r\n                                    <div class=\"h-full flex items-center justify-start\">\r\n                                        @if(col.tf.configuration.type == 'toggle') {\r\n                                            <ion-toggle [checked]=\"col.value\" [disabled]=\"true\"></ion-toggle>\r\n                                        }\r\n                                        @else {\r\n                                            <ion-checkbox [checked]=\"col.value\" [disabled]=\"true\"></ion-checkbox>\r\n                                        }\r\n                                    </div>\r\n                                }\r\n                                @else if (col.tf.type == InputType.File) {\r\n                                    <download-button [(ngModel)]=\"col.value\" [configuration]=\"col.tf.configuration\"></download-button>\r\n                                }\r\n                                @else if (col.loading){\r\n                                    <ion-spinner name=\"dots\"></ion-spinner>\r\n                                } @else {\r\n                                    {{col.label}}\r\n                                }\r\n                            </td>\r\n                        }\r\n                    </tr>\r\n                    <ng-content select=\"[slot=item-end]\"></ng-content>\r\n                }\r\n            </tbody>\r\n        </table>\r\n     </div>\r\n     @if(!noPagination()){\r\n        <div class=\"shrink-0 z-[100]\">\r\n            <default-pagination\r\n                [page]=\"page()\"\r\n                (pageChange)=\"page.set($event); refresh.emit()\"\r\n                [total]=\"total()\"\r\n                [limit]=\"limit()\"\r\n                [length]=\"items().length\"\r\n                [loading]=\"loading()\"\r\n            ></default-pagination>\r\n        </div>\r\n    }\r\n\r\n    <!-- <div class=\"overflow-y-auto\">\r\n        @for (item of lstRows; track $index) {\r\n            <div class=\"border border-red-500 flex\">\r\n                {{$index}} - \r\n                @for (lbl of item.lstColumns; track $index) {\r\n                    ([{{lbl.label}}])\r\n                }\r\n            </div>\r\n        }\r\n    </div> -->\r\n</div>", styles: [".th:hover>.order{opacity:1;background-color:color-mix(in srgb,var(--ion-color-light) 10%,transparent)}\n"], dependencies: [{ kind: "component", type: i3.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i3.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: DownloadButtonComponent, selector: "download-button", inputs: ["expand", "value", "size", "color", "params", "disabled", "post", "configuration"], outputs: ["valueChange"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoadingComponent, selector: "loading", inputs: ["text", "type", "loading"] }, { kind: "component", type: ContentBlockComponent, selector: "content-block", inputs: ["text", "value"] }, { kind: "component", type: DefaultPaginationComponent, selector: "default-pagination", inputs: ["total", "limit", "length", "loading", "page"], outputs: ["pageChange", "change"] }, { kind: "component", type: ThFilterComponent, selector: "th-filter", inputs: ["field"], outputs: ["change"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'default-table', template: "<!-- <section class=\"w-full h-full rounded-2xl flex flex-col overflow-y-hidden relative\" [ngClass]=\"{ 'loading' : loading }\">\r\n    \r\n    <div class=\"unique-conteiner default-transition\" [ngClass]=\"{'!-z-50 !-translate-y-12 !opacity-0': !loading }\">\r\n        <loading [type]=\"2\"></loading>\r\n    </div>\r\n    <div class=\"unique-conteiner default-transition\" [ngClass]=\"{'!-z-50 !-translate-y-12 !opacity-0': items.length != 0 || loading }\">\r\n        <b><ion-icon class=\"align-sub\" name=\"remove-circle\"></ion-icon> Sem dados</b>\r\n    </div>\r\n\r\n    <div id=\"wrapper\" class=\"relative overflow-y-auto w-full grow-0 mb-auto pb-2\">\r\n        <table class=\"z-20 overflow-visible\">\r\n            <thead>\r\n                <tr>\r\n                    <th scope=\"col\" class=\"px-3 !h-10\" *ngIf=\"acoesTemplate\">\r\n                        <span>A\u00E7\u00F5es</span>\r\n                    </th>\r\n                    @for (field of lstTableFields; let i = $index; track i) {\r\n                        @if (!field.hidden) {\r\n                            <th scope=\"col\" class=\"p-2 px-3\" id=\"th-filter-select\">\r\n                                <div class=\"flex items-center justify-start h-full\" style=\"white-space: var(--ion-table-filter-wrap);\"> \r\n                                    @if(!noFilters){\r\n                                        <th-filter class=\"!text-base\" style=\"text-transform: none !important\" *ngIf=\"(field.type != InputTypeFile) && !(field.filter && field.disabledChange()) && !noFilters\"\r\n                                            [field]=\"field\"\r\n                                            (change)=\"ChangeFilter()\"\r\n                                        ></th-filter>\r\n                                    }\r\n                                    <span>{{field.header}}</span>\r\n\r\n                                    <a *ngIf=\"!(!(field.type != InputTypeFile) && !(field.filter && field.disabledChange())) && !noFilters\" class=\"order-switch h-5 flex items-center justify-center px-1 ml-2 shrink-0 cursor-pointer rounded-2xl\" (click)=\"SwitchOrder(field)\" [ngClass]=\"{ 'ordering-asc' : orderByProperty == field.index && ascending, 'ordering-desc' : orderByProperty == field.index && !ascending}\">\r\n                                        <ion-icon id=\"up\"   name=\"arrow-up\"   class=\"-mt-1\"></ion-icon>\r\n                                        <ion-icon id=\"down\" name=\"arrow-down\" class=\"-ml-1 -mb-1\"></ion-icon>\r\n                                    </a>\r\n                                </div>\r\n                            </th>\r\n                        }\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr [hidden]=\"loading\" *ngFor=\"let item of items\">\r\n                    @if(acoesTemplate){\r\n                        <td class=\"whitespace-nowrap py-1 px-3\" [style]=\"GetTdStyle('Acoes', item)\" >\r\n                            <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: item }\"></ng-container>\r\n                        </td>\r\n                    }\r\n\r\n                    @for (field of lstTableFields; track $index) {\r\n                        @if (!field.hidden) {\r\n                            <td class=\"px-3 py-2\" \r\n                                [ngClass]=\"GetTdClasses(field, item)\" \r\n                                [style]=\"GetTdStyle(field, item)\" \r\n                                (click)=\"Redirect(field, item)\"\r\n                                style=\"white-space: var(--ion-table-row-wrap);\"\r\n                            >\r\n                                @if (field.index == 'ativo') {\r\n                                    <div class=\"w-full h-full flex items-center justify-start\" [routerLink]=\"null\">\r\n                                        <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"loading\" (ionChange)=\"Ativar(item.id)\" ></ion-toggle>\r\n                                    </div>\r\n                                } @else {\r\n                                    @switch (field.type) {\r\n                                        @case (\"Bool\") {\r\n                                            @if (field.configuration.type == \"toggle\") {\r\n                                                <div class=\"-full h-full flex items-center justify-start\">\r\n                                                    <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-toggle>\r\n                                                </div>\r\n                                            }\r\n                                            @else {\r\n                                                <div class=\"-full h-full flex items-center justify-start\">\r\n                                                    <ion-checkbox [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-checkbox>\r\n                                                </div>\r\n                                            }\r\n                                        }\r\n                                        @case (\"File\") {\r\n                                            <download-button [(ngModel)]=\"item[field.index]\" [configuration]=\"field.configuration\"></download-button>\r\n                                        }\r\n                                        @case (\"Select\") {\r\n                                            {{GetSelectLabel(item, field)}}\r\n                                        }\r\n                                        @default {\r\n                                            {{GetField(item, field)}} \r\n                                        }\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        }\r\n                    }\r\n                </tr>\r\n\r\n                <ng-content select=\"[slot=item-end]\"></ng-content>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    @if(!noPagination){\r\n        <div class=\"shrink-0 mt-auto w-full\">\r\n            <default-pagination\r\n                [page]=\"page\"\r\n                (pageChange)=\"EmitPage($event)\"\r\n                [total]=\"total\"\r\n                [limit]=\"limit\"\r\n                [length]=\"items.length\"\r\n                [loading]=\"loading\"\r\n            ></default-pagination>\r\n        </div>\r\n    }\r\n</section> -->\r\n<div class=\"size-full rounded-2xl flex flex-col overflow-hidden relative\">\r\n    <loading [type]=\"3\" [loading]=\"loading\"></loading>\r\n    <content-block text=\"Sem Dados\" [value]=\"!(items.length != 0 || loading)\"></content-block>\r\n\r\n    <div class=\"size-full shrink relative overflow-y-auto\">\r\n        <table>\r\n            <thead>\r\n                <tr>\r\n                    <th scope=\"col\" class=\"px-3 !h-10\" *ngIf=\"acoesTemplate\"> A\u00E7\u00F5es </th>\r\n                        @for (field of lstTableFields; let i = $index; track i) {\r\n                            @if (!field.hidden) {\r\n                                <th scope=\"col\" class=\"p-2 px-3\" id=\"th-filter-select\">\r\n                                    <div class=\"flex items-center justify-start h-full\" style=\"white-space: var(--ion-table-filter-wrap);\"> \r\n                                        @if(!noFilters){\r\n                                            <th-filter class=\"!text-base\" style=\"text-transform: none !important\" *ngIf=\"(field.type != InputTypeFile) && !(field.filter && field.disabledChange()) && !noFilters\"\r\n                                                [field]=\"field\"\r\n                                                (change)=\"ChangeFilter()\"\r\n                                            ></th-filter>\r\n                                        }\r\n                                        <span>{{field.header}}</span>\r\n\r\n                                        <a *ngIf=\"!(!(field.type != InputTypeFile) && !(field.filter && field.disabledChange())) && !noFilters\" class=\"order-switch h-5 flex items-center justify-center px-1 ml-2 shrink-0 cursor-pointer rounded-2xl\" (click)=\"SwitchOrder(field)\" [ngClass]=\"{ 'ordering-asc' : orderByProperty == field.index && ascending, 'ordering-desc' : orderByProperty == field.index && !ascending}\">\r\n                                            <ion-icon id=\"up\"   name=\"arrow-up\"   class=\"-mt-1\"></ion-icon>\r\n                                            <ion-icon id=\"down\" name=\"arrow-down\" class=\"-ml-1 -mb-1\"></ion-icon>\r\n                                        </a>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n                        }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr [hidden]=\"loading\" *ngFor=\"let item of items\">\r\n                    @if(acoesTemplate){\r\n                        <td class=\"whitespace-nowrap py-1 px-3\" [style]=\"GetTdStyle('Acoes', item)\" >\r\n                            <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: item }\"></ng-container>\r\n                        </td>\r\n                    }\r\n\r\n                    @for (field of lstTableFields; track $index) {\r\n                        @if (!field.hidden) {\r\n                            <td class=\"px-3 py-2\" \r\n                                [ngClass]=\"GetTdClasses(field, item)\" \r\n                                [style]=\"GetTdStyle(field, item)\" \r\n                                (click)=\"Redirect(field, item)\"\r\n                                style=\"white-space: var(--ion-table-row-wrap);\"\r\n                            >\r\n                                @if (field.index == 'ativo') {\r\n                                    <div class=\"w-full h-full flex items-center justify-start\" [routerLink]=\"null\">\r\n                                        <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"loading\" (ionChange)=\"Ativar(item.id)\" ></ion-toggle>\r\n                                    </div>\r\n                                } @else {\r\n                                    @switch (field.type) {\r\n                                        @case (\"Bool\") {\r\n                                            @if (field.configuration.type == \"toggle\") {\r\n                                                <div class=\"-full h-full flex items-center justify-start\">\r\n                                                    <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-toggle>\r\n                                                </div>\r\n                                            }\r\n                                            @else {\r\n                                                <div class=\"-full h-full flex items-center justify-start\">\r\n                                                    <ion-checkbox [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-checkbox>\r\n                                                </div>\r\n                                            }\r\n                                        }\r\n                                        @case (\"File\") {\r\n                                            <download-button [(ngModel)]=\"item[field.index]\" [configuration]=\"field.configuration\"></download-button>\r\n                                        }\r\n                                        @case (\"Select\") {\r\n                                            {{GetSelectLabel(item, field)}}\r\n                                        }\r\n                                        @default {\r\n                                            {{GetField(item, field)}} \r\n                                        }\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        }\r\n                    }\r\n                </tr>\r\n\r\n                <ng-content select=\"[slot=item-end]\"></ng-content>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    @if(!noPagination){\r\n        <div class=\"shrink-0 z-[100]\">\r\n            <default-pagination\r\n                [page]=\"page\"\r\n                (pageChange)=\"EmitPage($event)\"\r\n                [total]=\"total\"\r\n                [limit]=\"limit\"\r\n                [length]=\"items.length\"\r\n                [loading]=\"loading\"\r\n            ></default-pagination>\r\n        </div>\r\n    }\r\n</div>", styles: ["#th-filter-select:hover .order-switch{background-color:var(--ion-color-step-200)}#th-filter-select:hover .order-switch #up,#th-filter-select:hover .order-switch #down{opacity:1!important;color:var(--ion-color-step-700)!important}#th-filter-select .order-switch{transition:background-color .3s}#th-filter-select .order-switch #up,#th-filter-select .order-switch #down{opacity:0;transition:all .3s}#th-filter-select .order-switch.ordering-asc #up{color:var(--ion-color-primary)!important;opacity:1}#th-filter-select .order-switch.ordering-asc #down,#th-filter-select .order-switch.ordering-desc #up{color:var(--ion-color-step-800)!important;opacity:1}#th-filter-select .order-switch.ordering-desc #down{color:var(--ion-color-primary)!important;opacity:1}\n"] }]
-        }], ctorParameters: () => [{ type: StorageService }, { type: i2$2.ActivatedRoute }, { type: i2$2.Router }], propDecorators: { defaultService: [{
-                type: Input,
-                args: ['service']
-            }], acoesTemplate: [{
-                type: Input
-            }], total: [{
-                type: Input
-            }], limit: [{
-                type: Input
-            }], limitChange: [{
-                type: Output
-            }], page: [{
-                type: Input
-            }], pageChange: [{
-                type: Output
-            }], orderByProperty: [{
-                type: Input
-            }], orderByPropertyChange: [{
-                type: Output
-            }], ascending: [{
-                type: Input
-            }], ascendingChange: [{
-                type: Output
-            }], filter: [{
-                type: Input,
-                args: ['filter']
-            }], filterChange: [{
-                type: Output
-            }], ativarEmitter: [{
-                type: Output,
-                args: ['ativar']
-            }], refreshEmitter: [{
-                type: Output,
-                args: ['refresh']
-            }], loading: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], lstTableFields: [{
-                type: Input
-            }], noFilters: [{
-                type: Input
-            }], columnClass: [{
-                type: Input
-            }], columnStyle: [{
-                type: Input
-            }], noPagination: [{
-                type: Input
-            }], itemPath: [{
+            args: [{ selector: 'default-table', template: "<!-- <div class=\"size-full rounded-2xl flex flex-col overflow-hidden relative\">\r\n    <loading [type]=\"3\" [loading]=\"loading\"></loading>\r\n    <content-block text=\"Sem Dados\" [value]=\"!(items.length != 0 || loading)\"></content-block>\r\n\r\n    <div class=\"size-full shrink relative overflow-y-auto\">\r\n        <table>\r\n            <thead>\r\n                <tr>\r\n                    <th scope=\"col\" class=\"px-3 !h-10\" *ngIf=\"acoesTemplate\"> A\u00E7\u00F5es </th>\r\n                        @for (field of lstTableFields; let i = $index; track i) {\r\n                            @if (!field.hidden) {\r\n                                <th scope=\"col\" class=\"p-2 px-3\" id=\"th-filter-select\">\r\n                                    <div class=\"flex items-center justify-start h-full\" style=\"white-space: var(--ion-table-filter-wrap);\"> \r\n                                        @if(!noFilters){\r\n                                            <th-filter class=\"!text-base\" style=\"text-transform: none !important\" *ngIf=\"(field.type != InputTypeFile) && !(field.filter && field.disabledChange()) && !noFilters\"\r\n                                                [field]=\"field\"\r\n                                                (change)=\"ChangeFilter()\"\r\n                                            ></th-filter>\r\n                                        }\r\n                                        <span>{{field.header}}</span>\r\n\r\n                                        <a *ngIf=\"!(!(field.type != InputTypeFile) && !(field.filter && field.disabledChange())) && !noFilters\" class=\"order-switch h-5 flex items-center justify-center px-1 ml-2 shrink-0 cursor-pointer rounded-2xl\" (click)=\"SwitchOrder(field)\" [ngClass]=\"{ 'ordering-asc' : orderByProperty == field.index && ascending, 'ordering-desc' : orderByProperty == field.index && !ascending}\">\r\n                                            <ion-icon id=\"up\"   name=\"arrow-up\"   class=\"-mt-1\"></ion-icon>\r\n                                            <ion-icon id=\"down\" name=\"arrow-down\" class=\"-ml-1 -mb-1\"></ion-icon>\r\n                                        </a>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n                        }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr [hidden]=\"loading\" *ngFor=\"let item of items\">\r\n                    @if(acoesTemplate){\r\n                        <td class=\"whitespace-nowrap py-1 px-3\" [style]=\"GetTdStyle('Acoes', item)\" >\r\n                            <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: item }\"></ng-container>\r\n                        </td>\r\n                    }\r\n\r\n                    @for (field of lstTableFields; track $index) {\r\n                        @if (!field.hidden) {\r\n                            <td class=\"px-3 py-2\" \r\n                                [ngClass]=\"GetTdClasses(field, item)\" \r\n                                [style]=\"GetTdStyle(field, item)\" \r\n                                (click)=\"Redirect(field, item)\"\r\n                                style=\"white-space: var(--ion-table-row-wrap);\"\r\n                            >\r\n                                @if (field.index == 'ativo') {\r\n                                    <div class=\"w-full h-full flex items-center justify-start\" [routerLink]=\"null\">\r\n                                        <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"loading\" (ionChange)=\"Ativar(item.id)\" ></ion-toggle>\r\n                                    </div>\r\n                                } @else {\r\n                                    @switch (field.type) {\r\n                                        @case (\"Bool\") {\r\n                                            @if (field.configuration.type == \"toggle\") {\r\n                                                <div class=\"-full h-full flex items-center justify-start\">\r\n                                                    <ion-toggle [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-toggle>\r\n                                                </div>\r\n                                            }\r\n                                            @else {\r\n                                                <div class=\"-full h-full flex items-center justify-start\">\r\n                                                    <ion-checkbox [checked]=\"item[field.index]\" [disabled]=\"true\"></ion-checkbox>\r\n                                                </div>\r\n                                            }\r\n                                        }\r\n                                        @case (\"File\") {\r\n                                            <download-button [(ngModel)]=\"item[field.index]\" [configuration]=\"field.configuration\"></download-button>\r\n                                        }\r\n                                        @case (\"Select\") {\r\n                                            {{GetSelectLabel(item, field)}}\r\n                                        }\r\n                                        @default {\r\n                                            {{GetField(item, field)}} \r\n                                        }\r\n                                    }\r\n                                }\r\n                            </td>\r\n                        }\r\n                    }\r\n                </tr>\r\n\r\n                <ng-content select=\"[slot=item-end]\"></ng-content>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    @if(!noPagination){\r\n        <div class=\"shrink-0 z-[100]\">\r\n            <default-pagination\r\n                [page]=\"page\"\r\n                (pageChange)=\"EmitPage($event)\"\r\n                [total]=\"total\"\r\n                [limit]=\"limit\"\r\n                [length]=\"items.length\"\r\n                [loading]=\"loading\"\r\n            ></default-pagination>\r\n        </div>\r\n    }\r\n</div> -->\r\n\r\n<div class=\"size-full rounded-xl flex flex-col overflow-hidden relative\">\r\n    <loading [type]=\"3\" [loading]=\"loading()\"></loading>\r\n    <content-block text=\"Sem Dados\" [value]=\"!(items.length != 0 || loading)\"></content-block>\r\n\r\n     <div class=\"size-full shrink relative overflow-y-auto\">\r\n        <table>\r\n            <thead>\r\n                <tr>\r\n                    @if(acoesTemplate){\r\n\r\n                    }\r\n                    <th scope=\"col\" class=\"p-2\"> \r\n                        A\u00E7\u00F5es \r\n                    </th>\r\n\r\n                    @for (tfa of lstTableFieldsAvailable(); track tfa.tf.index) {\r\n                        <th scope=\"col\" class=\"p-2\"> \r\n                            <div class=\"flex gap-2 items-center justify-start th\">\r\n                                @if(!noFilters()){\r\n                                    <th-filter class=\"!text-base\" style=\"text-transform: none !important\" \r\n                                    *ngIf=\"((tfa.tf.type != InputType.File || (tfa.tf.filter && tfa.tf.disabledChange())) && !noFilters())\"\r\n                                        [field]=\"tfa.tf\"\r\n                                        (change)=\"ChangeFilter()\"\r\n                                    ></th-filter>\r\n                                }\r\n\r\n                                {{tfa.tf.header}} \r\n\r\n                                @if((tfa.tf.type != InputType.File || (tfa.tf.filter && tfa.tf.disabledChange())) && !noFilters()){\r\n                                    <a [ngClass]=\"{ 'bg-light/10 !opacity-100': tfa.ascending || tfa.descending }\"\r\n                                        class=\"order h-4 w-5 relative cursor-pointer rounded-lg opacity-0 default-transition\" \r\n                                        (click)=\"SwitchOrder(tfa.tf)\"\r\n                                    >\r\n                                        <ion-icon \r\n                                            [class.text-primary]=\"tfa.ascending\"\r\n                                            class=\"absolute left-0 top-0\" \r\n                                            name=\"arrow-up\"\r\n                                        ></ion-icon> \r\n                                        <ion-icon \r\n                                            [class.text-primary]=\"tfa.descending\"\r\n                                            class=\"absolute right-0 bottom-0\" \r\n                                            name=\"arrow-down\"\r\n                                        ></ion-icon> \r\n                                    </a>\r\n                                }\r\n                            </div>\r\n                        </th>\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of lstRows; track row.id || $index) {\r\n                    <tr [hidden]=\"loading()\">\r\n                        @if(acoesTemplate){\r\n                            <td (click)=\"Redirect(undefined, row.item)\" class=\"whitespace-nowrap py-1 px-3 {{row.acoesClass}}\" [style]=\"row.acoesStyle\" >\r\n                                <ng-container *ngTemplateOutlet=\"acoesTemplate; context: { $implicit: row.item }\"></ng-container>\r\n                            </td>\r\n                        }\r\n\r\n                        @for (col of row.lstColumns; track col.tf.index) {\r\n                            <td class=\"{{col.class}} p-2 cursor-pointer\" (click)=\"Redirect(col.tf, row.item)\" [style]=\"'white-space: var(--ion-table-row-wrap);' + col.style\">\r\n                                @if(col.tf.index == 'ativo') {\r\n                                    <div class=\"size-full flex items-center justify-start\" [routerLink]=\"null\">\r\n                                        <ion-toggle [checked]=\"col.value\" [disabled]=\"loading()\" (ionChange)=\"Ativar(row.id)\" ></ion-toggle>\r\n                                    </div>\r\n                                }\r\n                                @else if (col.tf.type == InputType.Bool){\r\n                                    <div class=\"h-full flex items-center justify-start\">\r\n                                        @if(col.tf.configuration.type == 'toggle') {\r\n                                            <ion-toggle [checked]=\"col.value\" [disabled]=\"true\"></ion-toggle>\r\n                                        }\r\n                                        @else {\r\n                                            <ion-checkbox [checked]=\"col.value\" [disabled]=\"true\"></ion-checkbox>\r\n                                        }\r\n                                    </div>\r\n                                }\r\n                                @else if (col.tf.type == InputType.File) {\r\n                                    <download-button [(ngModel)]=\"col.value\" [configuration]=\"col.tf.configuration\"></download-button>\r\n                                }\r\n                                @else if (col.loading){\r\n                                    <ion-spinner name=\"dots\"></ion-spinner>\r\n                                } @else {\r\n                                    {{col.label}}\r\n                                }\r\n                            </td>\r\n                        }\r\n                    </tr>\r\n                    <ng-content select=\"[slot=item-end]\"></ng-content>\r\n                }\r\n            </tbody>\r\n        </table>\r\n     </div>\r\n     @if(!noPagination()){\r\n        <div class=\"shrink-0 z-[100]\">\r\n            <default-pagination\r\n                [page]=\"page()\"\r\n                (pageChange)=\"page.set($event); refresh.emit()\"\r\n                [total]=\"total()\"\r\n                [limit]=\"limit()\"\r\n                [length]=\"items().length\"\r\n                [loading]=\"loading()\"\r\n            ></default-pagination>\r\n        </div>\r\n    }\r\n\r\n    <!-- <div class=\"overflow-y-auto\">\r\n        @for (item of lstRows; track $index) {\r\n            <div class=\"border border-red-500 flex\">\r\n                {{$index}} - \r\n                @for (lbl of item.lstColumns; track $index) {\r\n                    ([{{lbl.label}}])\r\n                }\r\n            </div>\r\n        }\r\n    </div> -->\r\n</div>", styles: [".th:hover>.order{opacity:1;background-color:color-mix(in srgb,var(--ion-color-light) 10%,transparent)}\n"] }]
+        }], ctorParameters: () => [{ type: StorageService }, { type: i2$2.ActivatedRoute }, { type: i2$2.Router }], propDecorators: { acoesTemplate: [{
                 type: Input
             }] } });
+class DefaultTableRow {
+    constructor(item, id, lstColumns, acoesClass = '', acoesStyle = '') {
+        this.item = item;
+        this.id = id;
+        this.lstColumns = lstColumns;
+        this.acoesClass = acoesClass;
+        this.acoesStyle = acoesStyle;
+    }
+}
+class DefaultTableColumn {
+    constructor(value = null, tf) {
+        this.value = value;
+        this.tf = tf;
+        this.loading = false;
+        this.class = '';
+        this.style = '';
+    }
+}
+class AvailableTableField {
+    constructor(tf, ascending, descending) {
+        this.tf = tf;
+        this.ascending = ascending;
+        this.descending = descending;
+    }
+}
 
 /** Componente de listagem padrão
  * Tipo Generic deve ser um service HttpService
@@ -3714,7 +3970,7 @@ class DefaultListComponent extends List {
         await super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultListComponent, deps: [{ token: i0.ElementRef }, { token: i2$2.ActivatedRoute }, { token: GenericService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DefaultListComponent, selector: "default-list", inputs: { noNew: "noNew", noPage: "noPage", noSearch: "noSearch", columnClass: "columnClass", columnStyle: "columnStyle", overrideNew: "overrideNew", noPagination: "noPagination", noBreadcrumbs: "noBreadcrumbs", itemPath: "itemPath" }, outputs: { onNewEmitter: "onNew" }, queries: [{ propertyName: "acoesTemplate", first: true, predicate: ["tmpAcoes"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-content class=\"bg-transparent\">\r\n  <div class=\"wrapper\" [ngClass]=\"{'!p-0 translucid-primary-background': nested}\">\r\n    @if (!noBreadcrumbs) {\r\n      <ion-breadcrumbs>\r\n        <ion-breadcrumb [routerLink]=\"[service ? service.route : '']\" [replaceUrl]=\"true\">{{service.title}}</ion-breadcrumb>\r\n      </ion-breadcrumbs>\r\n    }\r\n    <ion-card>\r\n      <ion-card-header [ngClass]=\"{'!px-0 !pb-0': noNew && noPage && noSearch}\">\r\n        <header-list \r\n          [(limit)]=\"frm.limit\"\r\n          [(search)]=\"frm.search\"        \r\n          [(page)]=\"frm.page\"        \r\n          [loading]=\"loading\"  \r\n          (refresh)=\"Refresh()\"\r\n          [noNew]=\"noNew\"\r\n          [noPage]=\"noPage\"\r\n          [noSearch]=\"noSearch\"\r\n          [overrideNew]=\"overrideNew\"\r\n          (onNew)=\"onNewEmitter.emit()\"\r\n        > \r\n          <ng-content slot=\"start\" select=\"[slot=header-start]\"></ng-content>\r\n          <ng-content slot=\"end\" select=\"[slot=header-end]\"></ng-content>\r\n        </header-list>\r\n      </ion-card-header>\r\n      <ion-card-content>\r\n        <ion-refresher slot=\"fixed\" class=\"z-20\" (ionRefresh)=\"Refresh($event)\">\r\n          <ion-refresher-content></ion-refresher-content>\r\n        </ion-refresher>\r\n        <div class=\"size-full ion-content-scroll-host\">\r\n          @if(frm){\r\n            <default-table \r\n              class=\"block size-full relative\" \r\n              [ngClass]=\"{ 'translate-y-0' : !loading }\"\r\n              [loading]=\"loading\"\r\n              [items]=\"lstDados\" \r\n              [total]=\"total\"\r\n              [(limit)]=\"frm.limit\"\r\n              [(page)]=\"frm.page\"\r\n              [(ascending)]=\"frm.ascending\"\r\n              [(orderByProperty)]=\"frm.orderByProperty\"\r\n              [(filter)]=\"frm.filter\"\r\n              [itemPath]=\"itemPath\"\r\n              [columnClass]=\"columnClass\"\r\n              [columnStyle]=\"columnStyle\"\r\n              [service]=\"service\"\r\n              [acoesTemplate]=\"acoesTemplate\"\r\n              (refresh)=\"Refresh();\"\r\n              (ativar)=\"Ativar($event)\"\r\n              [lstTableFields]=\"lstTableFields\"\r\n              [noPagination]=\"noPagination\"\r\n            >\r\n            </default-table>\r\n          }\r\n        </div>\r\n      </ion-card-content>\r\n    </ion-card>\r\n  </div>\r\n</ion-content>", styles: [""], dependencies: [{ kind: "component", type: i3.IonBreadcrumb, selector: "ion-breadcrumb", inputs: ["active", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "separator", "target"] }, { kind: "component", type: i3.IonBreadcrumbs, selector: "ion-breadcrumbs", inputs: ["color", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "mode"] }, { 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.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i3.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "directive", type: i3.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: HeaderListComponent, selector: "header-list", inputs: ["limit", "page", "search", "loading", "link", "noNew", "noPage", "noSearch", "overrideNew"], outputs: ["limitChange", "pageChange", "searchChange", "refresh", "onNew"] }, { kind: "component", type: DefaultTableComponent, selector: "default-table", inputs: ["service", "acoesTemplate", "total", "limit", "page", "orderByProperty", "ascending", "filter", "loading", "items", "lstTableFields", "noFilters", "columnClass", "columnStyle", "noPagination", "itemPath"], outputs: ["limitChange", "pageChange", "orderByPropertyChange", "ascendingChange", "filterChange", "ativar", "refresh"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DefaultListComponent, selector: "default-list", inputs: { noNew: "noNew", noPage: "noPage", noSearch: "noSearch", columnClass: "columnClass", columnStyle: "columnStyle", overrideNew: "overrideNew", noPagination: "noPagination", noBreadcrumbs: "noBreadcrumbs", itemPath: "itemPath" }, outputs: { onNewEmitter: "onNew" }, queries: [{ propertyName: "acoesTemplate", first: true, predicate: ["tmpAcoes"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-content class=\"bg-transparent\">\r\n  <div class=\"wrapper\" [ngClass]=\"{'!p-0 translucid-primary-background': nested}\">\r\n    @if (!noBreadcrumbs) {\r\n      <ion-breadcrumbs>\r\n        <ion-breadcrumb [routerLink]=\"[service ? service.route : '']\" [replaceUrl]=\"true\">{{service.title}}</ion-breadcrumb>\r\n      </ion-breadcrumbs>\r\n    }\r\n    <ion-card>\r\n      <ion-card-header [ngClass]=\"{'!px-0 !pb-0': noNew && noPage && noSearch}\">\r\n        <header-list \r\n          [(limit)]=\"frm.limit\"\r\n          [(search)]=\"frm.search\"        \r\n          [(page)]=\"frm.page\"        \r\n          [loading]=\"loading\"  \r\n          (refresh)=\"Refresh()\"\r\n          [noNew]=\"noNew\"\r\n          [noPage]=\"noPage\"\r\n          [noSearch]=\"noSearch\"\r\n          [overrideNew]=\"overrideNew\"\r\n          (onNew)=\"onNewEmitter.emit()\"\r\n        > \r\n          <ng-content slot=\"start\" select=\"[slot=header-start]\"></ng-content>\r\n          <ng-content slot=\"end\" select=\"[slot=header-end]\"></ng-content>\r\n        </header-list>\r\n      </ion-card-header>\r\n      <ion-card-content>\r\n        <ion-refresher slot=\"fixed\" class=\"z-20\" (ionRefresh)=\"Refresh($event)\">\r\n          <ion-refresher-content></ion-refresher-content>\r\n        </ion-refresher>\r\n        <div class=\"size-full ion-content-scroll-host\">\r\n          @if(frm){\r\n            <default-table \r\n              class=\"block size-full relative\" \r\n              [ngClass]=\"{ 'translate-y-0' : !loading }\"\r\n              [loading]=\"loading\"\r\n              [items]=\"lstDados\" \r\n              [total]=\"total\"\r\n              [(limit)]=\"frm.limit\"\r\n              [(page)]=\"frm.page\"\r\n              [(ascending)]=\"frm.ascending\"\r\n              [(orderByProperty)]=\"frm.orderByProperty\"\r\n              [(filter)]=\"frm.filter\"\r\n              [itemPath]=\"itemPath\"\r\n              [columnClass]=\"columnClass\"\r\n              [columnStyle]=\"columnStyle\"\r\n              [service]=\"service\"\r\n              [acoesTemplate]=\"acoesTemplate\"\r\n              (refresh)=\"Refresh();\"\r\n              (ativar)=\"Ativar($event)\"\r\n              [lstTableFields]=\"lstTableFields\"\r\n              [noPagination]=\"noPagination\"\r\n            >\r\n            </default-table>\r\n          }\r\n        </div>\r\n      </ion-card-content>\r\n    </ion-card>\r\n  </div>\r\n</ion-content>", styles: [""], dependencies: [{ kind: "component", type: i3.IonBreadcrumb, selector: "ion-breadcrumb", inputs: ["active", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "separator", "target"] }, { kind: "component", type: i3.IonBreadcrumbs, selector: "ion-breadcrumbs", inputs: ["color", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "mode"] }, { 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.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i3.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "directive", type: i3.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: HeaderListComponent, selector: "header-list", inputs: ["limit", "page", "search", "loading", "link", "noNew", "noPage", "noSearch", "overrideNew"], outputs: ["limitChange", "pageChange", "searchChange", "refresh", "onNew"] }, { kind: "component", type: DefaultTableComponent, selector: "default-table", inputs: ["acoesTemplate", "service", "total", "limit", "page", "orderByProperty", "ascending", "filter", "loading", "items", "lstTableFields", "noFilters", "columnClass", "columnStyle", "noPagination", "itemPath"], outputs: ["totalChange", "limitChange", "pageChange", "orderByPropertyChange", "ascendingChange", "filterChange", "ativar", "refresh", "loadingChange", "itemsChange", "lstTableFieldsChange", "itemClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultListComponent, decorators: [{
             type: Component,
@@ -3906,7 +4162,15 @@ class View {
         else {
             this.nested = true;
         }
-        this.Refresh();
+        await this.Refresh();
+        await this.FocusOnFirstField();
+    }
+    async FocusOnFirstField() {
+        try {
+            await Timeout(100);
+            this.lstCustomInputs.first.setFocus(null);
+        }
+        catch { }
     }
     async Refresh() {
         this.loading = true;
@@ -3918,7 +4182,7 @@ class View {
         this.ViewDidRefreshEmitter.emit();
     }
     async Load() {
-        if (this.id == 0) {
+        if (!this.id) {
             return;
         }
         const res = await firstValueFrom(this.service.Get(this.id));
@@ -3983,7 +4247,7 @@ class View {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: View, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: View, selector: "ng-component", inputs: { id: "id", loading: "loading", submitted: "submitted", progress: "progress", service: "service", lstTableFields: "lstTableFields", redirectPath: "redirectPath" }, outputs: { ViewDidRefreshEmitter: "ViewDidRefresh", SaveEmitter: "Save" }, host: { listeners: { "window:keydown": "onKeyPress($event)" } }, viewQueries: [{ propertyName: "Wrapper", first: true, predicate: [".wrapper"], descendants: true }, { propertyName: "HeaderViewComponentElement", first: true, predicate: HeaderViewComponent, descendants: true }], ngImport: i0, template: '', isInline: true, styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: View, selector: "ng-component", inputs: { id: "id", loading: "loading", submitted: "submitted", progress: "progress", service: "service", lstTableFields: "lstTableFields", redirectPath: "redirectPath" }, outputs: { ViewDidRefreshEmitter: "ViewDidRefresh", SaveEmitter: "Save" }, host: { listeners: { "window:keydown": "onKeyPress($event)" } }, viewQueries: [{ propertyName: "Wrapper", first: true, predicate: [".wrapper"], descendants: true }, { propertyName: "HeaderViewComponentElement", first: true, predicate: HeaderViewComponent, descendants: true }, { propertyName: "lstCustomInputs", predicate: CustomInput, descendants: true }], ngImport: i0, template: '', isInline: true, styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: View, decorators: [{
             type: Component,
@@ -4005,6 +4269,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], Wrapper: [{
                 type: ViewChild,
                 args: ['.wrapper']
+            }], lstCustomInputs: [{
+                type: ViewChildren,
+                args: [CustomInput]
             }], ViewDidRefreshEmitter: [{
                 type: Output,
                 args: ['ViewDidRefresh']
@@ -4026,7 +4293,7 @@ function instanceOfViewDidCreateForm(object) {
 }
 
 class InputBoolComponent extends CustomInput {
-    focus(event) {
+    setFocus(event) {
         if (this.inputContainer) {
             this.inputContainer.nativeElement.focus();
             this.SetValue(!this.value);
@@ -4041,11 +4308,17 @@ class InputBoolComponent extends CustomInput {
         this.runValidation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputBoolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputBoolComponent, selector: "input-bool", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [...InputProviderFactory.GetProviders(InputBoolComponent)], viewQueries: [{ propertyName: "ionCheckbox", first: true, predicate: IonCheckbox, descendants: true }, { propertyName: "ionToggle", first: true, predicate: IonToggle, descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  tabindex=\"-1\"\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  @if(configuration().type == \"checkbox\"){\r\n    <ion-checkbox (click)=\"$event.stopPropagation()\" #checkbox [ngModel]=\"value()\" (ngModelChange)=\"SetValue(!value())\" class=\"text-sm text-dark my-1.5\">\r\n      {{label()}}\r\n    </ion-checkbox>\r\n  }\r\n  @else { \r\n    <!-- toogle -->\r\n    <ion-toggle (click)=\"$event.stopPropagation()\" #toggle [ngModel]=\"value()\" (ngModelChange)=\"SetValue(!value())\" class=\"text-sm text-dark\">\r\n      {{label()}}\r\n    </ion-toggle>\r\n  }\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: [".input-container{cursor:pointer!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;padding:.375rem!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 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputBoolComponent, selector: "input-bool", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            ...InputProviderFactory.GetProviders(InputBoolComponent),
+            { provide: CustomInput, useExisting: forwardRef(() => InputBoolComponent) },
+        ], viewQueries: [{ propertyName: "ionCheckbox", first: true, predicate: IonCheckbox, descendants: true }, { propertyName: "ionToggle", first: true, predicate: IonToggle, descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  tabindex=\"-1\"\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  @if(configuration().type == \"checkbox\"){\r\n    <ion-checkbox (click)=\"$event.stopPropagation()\" #checkbox [ngModel]=\"value()\" (ngModelChange)=\"SetValue(!value())\" class=\"text-sm text-dark my-1.5\">\r\n      {{label()}}\r\n    </ion-checkbox>\r\n  }\r\n  @else { \r\n    <!-- toogle -->\r\n    <ion-toggle (click)=\"$event.stopPropagation()\" #toggle [ngModel]=\"value()\" (ngModelChange)=\"SetValue(!value())\" class=\"text-sm text-dark\">\r\n      {{label()}}\r\n    </ion-toggle>\r\n  }\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: [".input-container{cursor:pointer!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;padding:.375rem!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.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "directive", type: i3.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputBoolComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-bool', providers: [...InputProviderFactory.GetProviders(InputBoolComponent)], template: "<div \r\n  #inputContainer\r\n  tabindex=\"-1\"\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  @if(configuration().type == \"checkbox\"){\r\n    <ion-checkbox (click)=\"$event.stopPropagation()\" #checkbox [ngModel]=\"value()\" (ngModelChange)=\"SetValue(!value())\" class=\"text-sm text-dark my-1.5\">\r\n      {{label()}}\r\n    </ion-checkbox>\r\n  }\r\n  @else { \r\n    <!-- toogle -->\r\n    <ion-toggle (click)=\"$event.stopPropagation()\" #toggle [ngModel]=\"value()\" (ngModelChange)=\"SetValue(!value())\" class=\"text-sm text-dark\">\r\n      {{label()}}\r\n    </ion-toggle>\r\n  }\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: [".input-container{cursor:pointer!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;padding:.375rem!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 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
+            args: [{ selector: 'input-bool', providers: [
+                        ...InputProviderFactory.GetProviders(InputBoolComponent),
+                        { provide: CustomInput, useExisting: forwardRef(() => InputBoolComponent) },
+                    ], template: "<div \r\n  #inputContainer\r\n  tabindex=\"-1\"\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  @if(configuration().type == \"checkbox\"){\r\n    <ion-checkbox (click)=\"$event.stopPropagation()\" #checkbox [ngModel]=\"value()\" (ngModelChange)=\"SetValue(!value())\" class=\"text-sm text-dark my-1.5\">\r\n      {{label()}}\r\n    </ion-checkbox>\r\n  }\r\n  @else { \r\n    <!-- toogle -->\r\n    <ion-toggle (click)=\"$event.stopPropagation()\" #toggle [ngModel]=\"value()\" (ngModelChange)=\"SetValue(!value())\" class=\"text-sm text-dark\">\r\n      {{label()}}\r\n    </ion-toggle>\r\n  }\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: [".input-container{cursor:pointer!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;padding:.375rem!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: { ionCheckbox: [{
                 type: ViewChild,
                 args: [IonCheckbox]
@@ -4057,41 +4330,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['inputContainer']
             }] } });
 
-class InputCepComponent extends CustomInput {
-    focus(event) {
-        if (this.input && event.target == this.inputContainer.nativeElement) {
-            this.input.nativeElement.focus();
-        }
-    }
-    constructor(elementRef) {
-        super();
-        this.elementRef = elementRef;
-        this.cepMask = [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/];
-        this.mask = {
-            mask: this.cepMask,
-        };
-    }
-    writeValue(obj) {
-        this.value.set(obj);
-        this.runValidation();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputCepComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputCepComponent, selector: "input-cep", providers: [...InputProviderFactory.GetProviders(InputCepComponent)], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  <input #input\r\n    [ngModel]=\"value()\" \r\n    [maskito]=\"mask\"\r\n    inputmode=\"numeric\"\r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputCepComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'input-cep', providers: [...InputProviderFactory.GetProviders(InputCepComponent)], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  <input #input\r\n    [ngModel]=\"value()\" \r\n    [maskito]=\"mask\"\r\n    inputmode=\"numeric\"\r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { input: [{
-                type: ViewChild,
-                args: ['input']
-            }], inputContainer: [{
-                type: ViewChild,
-                args: ['inputContainer']
-            }] } });
-
 class InputColorComponent extends CustomInput {
-    focus(event) {
-        if (this.input && event.target == this.inputContainer.nativeElement) {
+    setFocus(event) {
+        if (this.input && (event == null || event.target == this.inputContainer.nativeElement)) {
             this.input.nativeElement.focus();
         }
     }
@@ -4447,11 +4688,17 @@ class InputColorComponent extends CustomInput {
         this.indicatorY = Math.max(0, Math.min(100, this.indicatorY));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputColorComponent, deps: [{ token: GenericService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputColorComponent, selector: "input-color", 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)=\"focus($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 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputColorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-color', template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event); Present($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.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 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
+            args: [{ selector: 'input-color', providers: [
+                        ...InputProviderFactory.GetProviders(InputColorComponent),
+                        { provide: CustomInput, useExisting: forwardRef(() => InputColorComponent) },
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: GenericService }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
@@ -4551,86 +4798,11 @@ function RGBToHex(rgb, alpha = 1) {
 const HEXDigitRegex = /[0-9a-f]+/i;
 const HEXMask = ['#', HEXDigitRegex, HEXDigitRegex, HEXDigitRegex, HEXDigitRegex, HEXDigitRegex, HEXDigitRegex, HEXDigitRegex];
 
-class InputCpfCnpjComponent extends CustomInput {
-    focus(event) {
-        if (this.input && event.target == this.inputContainer.nativeElement) {
-            this.input.nativeElement.focus();
-        }
-    }
-    constructor(elementRef) {
-        super();
-        this.elementRef = elementRef;
-        this.configuration = model(new InputCpfCnpjConfiguration());
-        this.cpfMask = [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/];
-        this.cnpjMask = [/\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/];
-        this.mask = {
-            mask: (elementState) => {
-                if (this.configuration().type == 'CPFCNPJ') {
-                    if (!elementState.value) {
-                        return this.cpfMask;
-                    }
-                    else {
-                        if (elementState.value.includes('.')) {
-                            if (elementState.value.length <= 14) {
-                                return this.cpfMask;
-                            }
-                            return this.cnpjMask;
-                        }
-                        else {
-                            if (elementState.value.length <= 11) {
-                                return this.cpfMask;
-                            }
-                            return this.cnpjMask;
-                        }
-                    }
-                }
-                if (this.configuration().type == 'CNPJ') {
-                    return this.cnpjMask;
-                }
-                if (this.configuration().type == 'CPF') {
-                    return this.cpfMask;
-                }
-            },
-        };
-        if (this.elementRef.nativeElement.tagName.toLowerCase() == 'input-cpf-cnpj') {
-            this.configuration.set(new InputCpfCnpjConfiguration());
-        }
-        else {
-            const selector = this.elementRef.nativeElement.tagName.toLowerCase().split('-')[1];
-            if (selector == 'cpf') {
-                this.configuration.set(new InputCpfCnpjConfiguration('CPF'));
-            }
-            else if (selector == 'cnpj') {
-                this.configuration.set(new InputCpfCnpjConfiguration('CNPJ'));
-            }
-        }
-    }
-    writeValue(obj) {
-        this.value.set(obj);
-        this.runValidation();
-    }
-    SetValue(obj) {
-        this.value.set(obj);
-        this.runValidation();
-        this.propagateChange(obj.replaceAll('.', '').replaceAll('-', '').replaceAll('/', ''));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputCpfCnpjComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: InputCpfCnpjComponent, selector: "input-cpf-cnpj, input-cpf, input-cnpj", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configuration: "configurationChange" }, providers: [...InputProviderFactory.GetProviders(InputCpfCnpjComponent)], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  <input #input\r\n    [ngModel]=\"value()\" \r\n    [maskito]=\"mask\"\r\n    inputmode=\"numeric\"\r\n    [type]=\"'text'\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputCpfCnpjComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'input-cpf-cnpj, input-cpf, input-cnpj', providers: [...InputProviderFactory.GetProviders(InputCpfCnpjComponent)], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  <input #input\r\n    [ngModel]=\"value()\" \r\n    [maskito]=\"mask\"\r\n    inputmode=\"numeric\"\r\n    [type]=\"'text'\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { input: [{
-                type: ViewChild,
-                args: ['input']
-            }], inputContainer: [{
-                type: ViewChild,
-                args: ['inputContainer']
-            }] } });
-
 class InputFileComponent extends CustomInput {
-    focus(event) {
-        this.Upload();
+    setFocus(event) {
+        if (event) {
+            this.Upload();
+        }
         this.inputContainer.nativeElement.focus();
     }
     constructor(utilsService, storageService) {
@@ -4684,11 +4856,17 @@ class InputFileComponent extends CustomInput {
         this.storageService.StartDownload(this.value());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputFileComponent, deps: [{ token: UtilsService }, { token: StorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputFileComponent, selector: "input-file", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [...InputProviderFactory.GetProviders(InputFileComponent)], viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  <div tabindex=\"0\" class=\"file-label-container text-dark\" [title]=\"valueString\" (click)=\"Upload()\">\r\n    <ion-icon class=\"shrink-0\" color=\"dark\" name=\"document\"></ion-icon> \r\n    <span class=\"shrink truncate\">\r\n      {{valueString}}\r\n    </span>\r\n\r\n    <ion-button [class.available]=\"value()\" color=\"medium\" class=\"ellipsis-button ml-auto shrink-0\" fill=\"clear\" style=\"--border-radius: .5rem\" size=\"small\" (click)=\"popover.present($event); $event.stopPropagation()\">\r\n      <ion-icon name=\"ellipsis-vertical\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n    <ion-popover #popover>\r\n      <ng-template>\r\n        <ion-content>\r\n          <div class=\"size-full flex flex-col\">\r\n            @if(value()){\r\n              <ion-button color=\"danger\"size=\"small\"  style=\"--border-radius: 0rem\" (click)=\"Clear($event); popover.dismiss()\">\r\n                <ion-icon color=\"dark\" name=\"trash\" slot=\"icon-only\"></ion-icon>\r\n                Limpar\r\n              </ion-button>\r\n            }\r\n            @if(isString){\r\n              <ion-button color=\"secondary\" size=\"small\" style=\"--border-radius: 0rem\" (click)=\"Download()\">\r\n                <ion-icon color=\"dark\" name=\"download\" slot=\"start\"></ion-icon>\r\n                Download\r\n              </ion-button>\r\n              @if(storageService.GetProgress(this.value().toString())){\r\n                <ion-progress-bar [value]=\"storageService.GetProgress(this.value().toString())\"></ion-progress-bar>\r\n              }\r\n              @if(isImage){\r\n                <image fill=\"clear\" [src]=\"value().toString()\"></image>\r\n              }\r\n            }\r\n            @else if(isImage){\r\n              <ion-img [src]=\"objectURL\" class=\"w-full h-32\"></ion-img>\r\n            }\r\n          </div>\r\n        </ion-content>\r\n      </ng-template>\r\n    </ion-popover>\r\n  </div>\r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: [".file-label-container{position:relative;display:flex;height:1.5rem;width:100%;align-items:center;justify-content:flex-start;gap:.25rem}.input-container{padding-right:.25rem!important}.ellipsis-button{opacity:0;pointer-events:none;will-change:opacity;transition:opacity .2s ease-in-out}.ellipsis-button.available{pointer-events:auto;opacity:1}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.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.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i3.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonPopover, selector: "ion-popover" }, { kind: "component", type: ImageComponent, selector: "image", inputs: ["fill", "object", "src"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputFileComponent, selector: "input-file", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            ...InputProviderFactory.GetProviders(InputFileComponent),
+            { provide: CustomInput, useExisting: forwardRef(() => InputFileComponent) },
+        ], viewQueries: [{ propertyName: "inputContainer", first: true, predicate: ["inputContainer"], 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  <div tabindex=\"0\" class=\"file-label-container text-dark\" [title]=\"valueString\" (click)=\"Upload()\">\r\n    <ion-icon class=\"shrink-0\" color=\"dark\" name=\"document\"></ion-icon> \r\n    <span class=\"shrink truncate\">\r\n      {{valueString}}\r\n    </span>\r\n\r\n    <ion-button [class.available]=\"value()\" color=\"medium\" class=\"ellipsis-button ml-auto shrink-0\" fill=\"clear\" style=\"--border-radius: .5rem\" size=\"small\" (click)=\"popover.present($event); $event.stopPropagation()\">\r\n      <ion-icon name=\"ellipsis-vertical\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n    <ion-popover #popover>\r\n      <ng-template>\r\n        <ion-content>\r\n          <div class=\"size-full flex flex-col\">\r\n            @if(value()){\r\n              <ion-button color=\"danger\"size=\"small\"  style=\"--border-radius: 0rem\" (click)=\"Clear($event); popover.dismiss()\">\r\n                <ion-icon color=\"dark\" name=\"trash\" slot=\"icon-only\"></ion-icon>\r\n                Limpar\r\n              </ion-button>\r\n            }\r\n            @if(isString){\r\n              <ion-button color=\"secondary\" size=\"small\" style=\"--border-radius: 0rem\" (click)=\"Download()\">\r\n                <ion-icon color=\"dark\" name=\"download\" slot=\"start\"></ion-icon>\r\n                Download\r\n              </ion-button>\r\n              @if(storageService.GetProgress(this.value().toString())){\r\n                <ion-progress-bar [value]=\"storageService.GetProgress(this.value().toString())\"></ion-progress-bar>\r\n              }\r\n              @if(isImage){\r\n                <image fill=\"clear\" [src]=\"value().toString()\"></image>\r\n              }\r\n            }\r\n            @else if(isImage){\r\n              <ion-img [src]=\"objectURL\" class=\"w-full h-32\"></ion-img>\r\n            }\r\n          </div>\r\n        </ion-content>\r\n      </ng-template>\r\n    </ion-popover>\r\n  </div>\r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: [".file-label-container{position:relative;display:flex;height:1.5rem;width:100%;align-items:center;justify-content:flex-start;gap:.25rem}.input-container{padding-right:.25rem!important}.ellipsis-button{opacity:0;pointer-events:none;will-change:opacity;transition:opacity .2s ease-in-out}.ellipsis-button.available{pointer-events:auto;opacity:1}\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.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.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i3.IonProgressBar, selector: "ion-progress-bar", inputs: ["buffer", "color", "mode", "reversed", "type", "value"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonPopover, selector: "ion-popover" }, { kind: "component", type: ImageComponent, selector: "image", inputs: ["fill", "object", "src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-file', providers: [...InputProviderFactory.GetProviders(InputFileComponent)], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  <div tabindex=\"0\" class=\"file-label-container text-dark\" [title]=\"valueString\" (click)=\"Upload()\">\r\n    <ion-icon class=\"shrink-0\" color=\"dark\" name=\"document\"></ion-icon> \r\n    <span class=\"shrink truncate\">\r\n      {{valueString}}\r\n    </span>\r\n\r\n    <ion-button [class.available]=\"value()\" color=\"medium\" class=\"ellipsis-button ml-auto shrink-0\" fill=\"clear\" style=\"--border-radius: .5rem\" size=\"small\" (click)=\"popover.present($event); $event.stopPropagation()\">\r\n      <ion-icon name=\"ellipsis-vertical\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n    <ion-popover #popover>\r\n      <ng-template>\r\n        <ion-content>\r\n          <div class=\"size-full flex flex-col\">\r\n            @if(value()){\r\n              <ion-button color=\"danger\"size=\"small\"  style=\"--border-radius: 0rem\" (click)=\"Clear($event); popover.dismiss()\">\r\n                <ion-icon color=\"dark\" name=\"trash\" slot=\"icon-only\"></ion-icon>\r\n                Limpar\r\n              </ion-button>\r\n            }\r\n            @if(isString){\r\n              <ion-button color=\"secondary\" size=\"small\" style=\"--border-radius: 0rem\" (click)=\"Download()\">\r\n                <ion-icon color=\"dark\" name=\"download\" slot=\"start\"></ion-icon>\r\n                Download\r\n              </ion-button>\r\n              @if(storageService.GetProgress(this.value().toString())){\r\n                <ion-progress-bar [value]=\"storageService.GetProgress(this.value().toString())\"></ion-progress-bar>\r\n              }\r\n              @if(isImage){\r\n                <image fill=\"clear\" [src]=\"value().toString()\"></image>\r\n              }\r\n            }\r\n            @else if(isImage){\r\n              <ion-img [src]=\"objectURL\" class=\"w-full h-32\"></ion-img>\r\n            }\r\n          </div>\r\n        </ion-content>\r\n      </ng-template>\r\n    </ion-popover>\r\n  </div>\r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: [".file-label-container{position:relative;display:flex;height:1.5rem;width:100%;align-items:center;justify-content:flex-start;gap:.25rem}.input-container{padding-right:.25rem!important}.ellipsis-button{opacity:0;pointer-events:none;will-change:opacity;transition:opacity .2s ease-in-out}.ellipsis-button.available{pointer-events:auto;opacity:1}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
+            args: [{ selector: 'input-file', providers: [
+                        ...InputProviderFactory.GetProviders(InputFileComponent),
+                        { provide: CustomInput, useExisting: forwardRef(() => InputFileComponent) },
+                    ], 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  <div tabindex=\"0\" class=\"file-label-container text-dark\" [title]=\"valueString\" (click)=\"Upload()\">\r\n    <ion-icon class=\"shrink-0\" color=\"dark\" name=\"document\"></ion-icon> \r\n    <span class=\"shrink truncate\">\r\n      {{valueString}}\r\n    </span>\r\n\r\n    <ion-button [class.available]=\"value()\" color=\"medium\" class=\"ellipsis-button ml-auto shrink-0\" fill=\"clear\" style=\"--border-radius: .5rem\" size=\"small\" (click)=\"popover.present($event); $event.stopPropagation()\">\r\n      <ion-icon name=\"ellipsis-vertical\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n    <ion-popover #popover>\r\n      <ng-template>\r\n        <ion-content>\r\n          <div class=\"size-full flex flex-col\">\r\n            @if(value()){\r\n              <ion-button color=\"danger\"size=\"small\"  style=\"--border-radius: 0rem\" (click)=\"Clear($event); popover.dismiss()\">\r\n                <ion-icon color=\"dark\" name=\"trash\" slot=\"icon-only\"></ion-icon>\r\n                Limpar\r\n              </ion-button>\r\n            }\r\n            @if(isString){\r\n              <ion-button color=\"secondary\" size=\"small\" style=\"--border-radius: 0rem\" (click)=\"Download()\">\r\n                <ion-icon color=\"dark\" name=\"download\" slot=\"start\"></ion-icon>\r\n                Download\r\n              </ion-button>\r\n              @if(storageService.GetProgress(this.value().toString())){\r\n                <ion-progress-bar [value]=\"storageService.GetProgress(this.value().toString())\"></ion-progress-bar>\r\n              }\r\n              @if(isImage){\r\n                <image fill=\"clear\" [src]=\"value().toString()\"></image>\r\n              }\r\n            }\r\n            @else if(isImage){\r\n              <ion-img [src]=\"objectURL\" class=\"w-full h-32\"></ion-img>\r\n            }\r\n          </div>\r\n        </ion-content>\r\n      </ng-template>\r\n    </ion-popover>\r\n  </div>\r\n\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: [".file-label-container{position:relative;display:flex;height:1.5rem;width:100%;align-items:center;justify-content:flex-start;gap:.25rem}.input-container{padding-right:.25rem!important}.ellipsis-button{opacity:0;pointer-events:none;will-change:opacity;transition:opacity .2s ease-in-out}.ellipsis-button.available{pointer-events:auto;opacity:1}\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: UtilsService }, { type: StorageService }], propDecorators: { inputContainer: [{
                 type: ViewChild,
                 args: ['inputContainer']
@@ -9805,8 +9983,8 @@ const lstFluenticons = [
 ];
 
 class InputIconComponent extends CustomInput {
-    focus(event) {
-        if (this.input && event.target == this.inputContainer.nativeElement) {
+    setFocus(event) {
+        if (this.input && (event == null || event.target == this.inputContainer.nativeElement)) {
             this.input.nativeElement.focus();
         }
     }
@@ -9831,11 +10009,17 @@ class InputIconComponent extends CustomInput {
         this.propagateChange(obj);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputIconComponent, deps: [{ token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputIconComponent, selector: "input-icon", providers: [...InputProviderFactory.GetProviders(InputIconComponent)], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input-select [ngModel]=\"value()\" (ngModelChange)=\"SetValue($event)\" [items]=\"lstIcons\" [configuration]=\"config\" [submitted]=\"submitted()\" [label]=\"label()\" [required]=\"required()\" [disabled]=\"disabled()\" [loading]=\"loading()\">\r\n  <ng-template sionLabelTemplate sionOptionTemplate let-item=\"item\">\r\n    <div class=\"flex truncate items-center justify-start gap-2 text-dark\">\r\n      <ion-icon [name]=\"item.name\" class=\"size-5\"></ion-icon>\r\n      <span class=\"truncate\">{{item.name}}</span>\r\n    </div>\r\n  </ng-template>\r\n</input-select>", styles: ["", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputSelectComponent, selector: "input-select", inputs: ["items", "configuration"], outputs: ["itemsChange"] }, { kind: "directive", type: SIonLabelTemplateDirective, selector: "[sionLabelTemplate]" }, { kind: "directive", type: SIonOptionTemplateDirective, selector: "[sionOptionTemplate]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputIconComponent, selector: "input-icon", providers: [
+            ...InputProviderFactory.GetProviders(InputIconComponent),
+            { provide: CustomInput, useExisting: forwardRef(() => InputIconComponent) },
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input-select [ngModel]=\"value()\" (ngModelChange)=\"SetValue($event)\" [items]=\"lstIcons\" [configuration]=\"config\" [submitted]=\"submitted()\" [label]=\"label()\" [required]=\"required()\" [disabled]=\"disabled()\" [loading]=\"loading()\">\r\n  <ng-template sionLabelTemplate sionOptionTemplate let-item=\"item\">\r\n    <div class=\"flex truncate items-center justify-start gap-2 text-dark\">\r\n      <ion-icon [name]=\"item.name\" class=\"size-5\"></ion-icon>\r\n      <span class=\"truncate\">{{item.name}}</span>\r\n    </div>\r\n  </ng-template>\r\n</input-select>", styles: ["", "@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.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputSelectComponent, selector: "input-select", inputs: ["items", "configuration"], outputs: ["itemsChange"] }, { kind: "directive", type: SIonLabelTemplateDirective, selector: "[sionLabelTemplate]" }, { kind: "directive", type: SIonOptionTemplateDirective, selector: "[sionOptionTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-icon', providers: [...InputProviderFactory.GetProviders(InputIconComponent)], template: "<input-select [ngModel]=\"value()\" (ngModelChange)=\"SetValue($event)\" [items]=\"lstIcons\" [configuration]=\"config\" [submitted]=\"submitted()\" [label]=\"label()\" [required]=\"required()\" [disabled]=\"disabled()\" [loading]=\"loading()\">\r\n  <ng-template sionLabelTemplate sionOptionTemplate let-item=\"item\">\r\n    <div class=\"flex truncate items-center justify-start gap-2 text-dark\">\r\n      <ion-icon [name]=\"item.name\" class=\"size-5\"></ion-icon>\r\n      <span class=\"truncate\">{{item.name}}</span>\r\n    </div>\r\n  </ng-template>\r\n</input-select>", styles: ["@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
+            args: [{ selector: 'input-icon', providers: [
+                        ...InputProviderFactory.GetProviders(InputIconComponent),
+                        { provide: CustomInput, useExisting: forwardRef(() => InputIconComponent) },
+                    ], template: "<input-select [ngModel]=\"value()\" (ngModelChange)=\"SetValue($event)\" [items]=\"lstIcons\" [configuration]=\"config\" [submitted]=\"submitted()\" [label]=\"label()\" [required]=\"required()\" [disabled]=\"disabled()\" [loading]=\"loading()\">\r\n  <ng-template sionLabelTemplate sionOptionTemplate let-item=\"item\">\r\n    <div class=\"flex truncate items-center justify-start gap-2 text-dark\">\r\n      <ion-icon [name]=\"item.name\" class=\"size-5\"></ion-icon>\r\n      <span class=\"truncate\">{{item.name}}</span>\r\n    </div>\r\n  </ng-template>\r\n</input-select>", styles: ["@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: EnvironmentService }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
@@ -9844,70 +10028,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['inputContainer']
             }] } });
 
-var TelefoneCelular;
-(function (TelefoneCelular) {
-    TelefoneCelular["Tel"] = "Tel";
-    TelefoneCelular["Cel"] = "Cel";
-    TelefoneCelular["TelCel"] = "TelCel";
-})(TelefoneCelular || (TelefoneCelular = {}));
-class InputTelefoneCelularConfiguration {
-    constructor(type = TelefoneCelular.TelCel) {
-        this.type = type;
-    }
-}
-
-class InputTelefoneComponent extends CustomInput {
-    focus(event) {
-        if (this.input && event.target == this.inputContainer.nativeElement) {
-            this.input.nativeElement.focus();
-        }
-    }
-    constructor(elementRef) {
-        super();
-        this.elementRef = elementRef;
-        this.configuration = model(new InputTelefoneCelularConfiguration());
-        this.mask = maskitoPhoneOptionsGenerator({
-            metadata,
-            strict: false,
-            countryIsoCode: 'BR',
-        });
-        if (this.elementRef.nativeElement.tagName.toLowerCase() == 'input-cpf-cnpj') {
-            this.configuration.set(new InputTelefoneCelularConfiguration());
-        }
-        else {
-            const selector = this.elementRef.nativeElement.tagName.toLowerCase().split('-')[1];
-            if (selector == 'celular') {
-                this.configuration.set(new InputTelefoneCelularConfiguration(TelefoneCelular.Cel));
-            }
-            else if (selector == 'telefone') {
-                this.configuration.set(new InputTelefoneCelularConfiguration(TelefoneCelular.TelCel));
-            }
-        }
-        this.value.set('+55');
-    }
-    writeValue(obj) {
-        this.value.set(obj);
-        this.runValidation();
-    }
-    SetValue(obj) {
-        this.value.set(obj);
-        this.runValidation();
-        this.propagateChange(obj.replaceAll('.', '').replaceAll('-', '').replaceAll(' ', ''));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputTelefoneComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: InputTelefoneComponent, selector: "input-telefone, input-celular, input-telefone-celular", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configuration: "configurationChange" }, providers: [...InputProviderFactory.GetProviders(InputTelefoneComponent)], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  <input #input\r\n    (focus)=\"!value() ? SetValue('+55') : null\"\r\n    [ngModel]=\"value()\" \r\n    [maskito]=\"mask\"\r\n    inputmode=\"numeric\"\r\n    [type]=\"'text'\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputTelefoneComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'input-telefone, input-celular, input-telefone-celular', providers: [...InputProviderFactory.GetProviders(InputTelefoneComponent)], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  <input #input\r\n    (focus)=\"!value() ? SetValue('+55') : null\"\r\n    [ngModel]=\"value()\" \r\n    [maskito]=\"mask\"\r\n    inputmode=\"numeric\"\r\n    [type]=\"'text'\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n  />\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: ["@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { input: [{
-                type: ViewChild,
-                args: ['input']
-            }], inputContainer: [{
-                type: ViewChild,
-                args: ['inputContainer']
-            }] } });
-
 class InputTextAreaConfiguration extends InputStringConfiguration {
     constructor(maxlength = 255) {
         super(InputStringType.Text, maxlength);
@@ -9915,8 +10035,8 @@ class InputTextAreaConfiguration extends InputStringConfiguration {
 }
 
 class InputTextareaComponent extends CustomInput {
-    focus(event) {
-        if (this.input && event.target == this.inputContainer.nativeElement) {
+    setFocus(event) {
+        if (this.input && (event == null || event.target == this.inputContainer.nativeElement)) {
             this.input.nativeElement.focus();
         }
     }
@@ -9929,11 +10049,17 @@ class InputTextareaComponent extends CustomInput {
         this.runValidation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: InputTextareaComponent, selector: "input-textarea", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [...InputProviderFactory.GetProviders(InputTextareaComponent)], viewQueries: [{ propertyName: "input", first: true, predicate: ["textarea"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  <textarea #textarea\r\n    [ngModel]=\"value()\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n    [maxlength]=\"configuration().maxlength\"\r\n  >\r\n  </textarea>\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: [".input-container{padding-right:.25rem!important}.loading-container{padding-top:.5rem;align-items:start!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 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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.1.0", version: "18.2.13", type: InputTextareaComponent, selector: "input-textarea", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            ...InputProviderFactory.GetProviders(InputTextareaComponent),
+            { provide: CustomInput, useExisting: forwardRef(() => InputTextareaComponent) },
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["textarea"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], 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  <textarea #textarea\r\n    [ngModel]=\"value()\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n    [maxlength]=\"configuration().maxlength\"\r\n  >\r\n  </textarea>\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: [".input-container{padding-right:.25rem!important}.loading-container{padding-top:.5rem;align-items:start!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.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: InputTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-textarea', providers: [...InputProviderFactory.GetProviders(InputTextareaComponent)], template: "<div \r\n  #inputContainer\r\n  class=\"input-container\" \r\n  (click)=\"focus($event)\"\r\n  [class.required]=\"required()\" \r\n  [class.submitted]=\"submitted()\" \r\n  [class.invalid]=\"invalid\" \r\n  [class.disabled]=\"disabled() || loading()\"\r\n  [class.loading]=\"loading()\"\r\n>\r\n  <div class=\"input-label\"> \r\n    <span class=\"truncate\">\r\n      {{label()}} \r\n    </span>\r\n  </div>\r\n  <textarea #textarea\r\n    [ngModel]=\"value()\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n    [maxlength]=\"configuration().maxlength\"\r\n  >\r\n  </textarea>\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: [".input-container{padding-right:.25rem!important}.loading-container{padding-top:.5rem;align-items:start!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 1px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:transform;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
+            args: [{ selector: 'input-textarea', providers: [
+                        ...InputProviderFactory.GetProviders(InputTextareaComponent),
+                        { provide: CustomInput, useExisting: forwardRef(() => InputTextareaComponent) },
+                    ], 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  <textarea #textarea\r\n    [ngModel]=\"value()\" \r\n    (ngModelChange)=\"SetValue($event)\"\r\n    [disabled]=\"disabled() || loading()\"\r\n    [maxlength]=\"configuration().maxlength\"\r\n  >\r\n  </textarea>\r\n  <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n    <ion-spinner></ion-spinner>\r\n  </div>\r\n</div>", styles: [".input-container{padding-right:.25rem!important}.loading-container{padding-top:.5rem;align-items:start!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: { input: [{
                 type: ViewChild,
                 args: ['textarea']
@@ -10436,11 +10562,11 @@ class DrawerGroupComponent {
         this.genericService.SetTitle(item.title);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerGroupComponent, deps: [{ token: i2$2.Router }, { token: i3.NavController }, { token: GenericService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DrawerGroupComponent, isStandalone: true, selector: "drawer-group", inputs: { MenuGroup: "MenuGroup", colapsed: "colapsed", useTranslation: "useTranslation" }, viewQueries: [{ propertyName: "lstIonAcordionGroup", predicate: IonAccordionGroup, descendants: true }], ngImport: i0, template: "<div class=\"size-full flex flex-col  verflow-hidden\">\r\n  <div class=\"w-full text-center\">\r\n    <!-- <ion-item class=\"bg-inactive bg-active\" lines=\"none\" style=\"--border-radius: 1rem\">\r\n      <ion-label class=\"text-center\">\r\n        <ion-icon class=\"text-2xl\" [name]=\"MenuGroup.icon\"></ion-icon> <br>\r\n        <ion-text class=\"text-lg\">\r\n          {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} \r\n        </ion-text>\r\n      </ion-label>\r\n    </ion-item> -->\r\n    <div class=\"gradient-background header flex flex-col gap-1 p-2 text-center items-center justify-center rounded-xl\">\r\n      <ion-icon class=\"text-2xl\" [name]=\"MenuGroup.icon\"></ion-icon>\r\n      <ion-text class=\"text-dark\">\r\n        {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} \r\n      </ion-text>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex flex-col gap-2 w-full pt-2 mask-y overflow-y-auto\">\r\n    @for (mGroup of MenuGroup.lstMenu; track $index) {\r\n      <!-- Menu -->\r\n      @if(mGroup.type == \"Menu\"){\r\n        <div (click)=\"HandleNav(mGroup, $event)\" \r\n          class=\"bg-inactive gradient-background menu\"\r\n          [routerLink]=\"[mGroup.route]\"\r\n          [class.bg-active]=\"router.isActive('/' + mGroup.route, false)\"\r\n        >\r\n          <div class=\"content\">\r\n            <ion-icon class=\"shrink-0\" [name]=\"mGroup.icon\"></ion-icon>\r\n            <ion-label class=\"shrink\">\r\n              {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          \r\n            </ion-label>\r\n          </div>\r\n        </div>\r\n        <!-- <ion-item \r\n          class=\"bg-inactive shrink-0\" lines=\"none\" \r\n          (click)=\"HandleNav(mGroup)\"\r\n          [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mGroup.route, false)}\">\r\n          <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n          <ion-label class=\"ion-text-nowrap\">\r\n            {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          \r\n          </ion-label>\r\n        </ion-item> -->\r\n      } \r\n      @else if (mGroup.type == \"MenuGroup\") {\r\n        <!-- MenuGroup -->\r\n        <!-- <div class=\"w-full overflow-hidden shrink-0\">\r\n          <ion-accordion-group class=\"ion-text-nowrap w-full\">\r\n            <ion-accordion class=\"bg-transparent\" [value]=\"mGroup\">\r\n              <ion-item slot=\"header\" color=\"light\" class=\"ion-text-nowrap bg-inactive\" style=\"--ion-color-base: var(--background) !important\">\r\n                <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n                <ion-label>\r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + mGroup.id | translate) : mGroup.title}}\r\n                </ion-label>\r\n              </ion-item>\r\n              <div slot=\"content\">\r\n                <div class=\"pl-8\">\r\n                  <div class=\"w-full border-l-2 border-solid rounded-bl-2xl grid gap-2 pl-2 py-2\" style=\"border-color: color-mix(in srgb, var(--ion-color-primary) 30%, transparent 70%)\">\r\n                    @for (mMenu of mGroup.lstMenu; track $index) {\r\n                      @if (mMenu.type == \"Menu\") {\r\n                        <ion-item \r\n                          class=\"bg-inactive\" lines=\"none\" \r\n                          (click)=\"HandleNav(mMenu)\"\r\n                          [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mMenu.route, false)}\">\r\n                          <ion-icon slot=\"start\" [name]=\"mMenu.icon\"></ion-icon>\r\n                          <ion-label class=\"ion-text-nowrap\">\r\n                            {{useTranslation ? (TranslationModule.Permissao + mMenu.id | translate) : mMenu.title}}\r\n                          </ion-label>\r\n                        </ion-item>\r\n                      }\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ion-accordion>\r\n          </ion-accordion-group>\r\n        </div> -->\r\n      }\r\n    }\r\n  </div>\r\n</div>", styles: [".menu{display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:flex-start;overflow:hidden;border-radius:.75rem;padding:.375rem;transition:--color-primary,--step-1-opacity,--step-2-opacity .2s ease-in-out;--inset: var(--color-primary) 0px 1.75px 1px 0px inset;box-shadow:var(--inset)}.menu .content{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.menu.bg-active:after{content:\"\";position:absolute;top:50%;right:0;width:.375rem;height:75%;transform:translateY(-50%);border-radius:inherit;background-color:color-mix(in srgb,var(--ion-color-primary) 70%,transparent);opacity:1!important;filter:drop-shadow(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0px 0px 3px)}.menu.bg-active:before{content:\"\";position:absolute;top:50%;right:-2.3rem;width:5rem;height:7rem;transform:translateY(-50%);border-radius:inherit;opacity:.5!important;background:radial-gradient(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0%,transparent 66%)}.menu.bg-inactive{--color-primary: var(--ion-color-step-250);--step-1-opacity: .5;--step-2-opacity: .4;--step-3-opacity: .8;position:relative}.menu.bg-inactive:after{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.menu.bg-inactive:before{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.header{--color-primary: var(--ion-color-primary) !important;--step-1-opacity: .7 !important;--step-2-opacity: .3 !important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]" }, { kind: "directive", type: RouterLinkWithHref, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DrawerGroupComponent, isStandalone: true, selector: "drawer-group", inputs: { MenuGroup: "MenuGroup", colapsed: "colapsed", useTranslation: "useTranslation" }, viewQueries: [{ propertyName: "lstIonAcordionGroup", predicate: IonAccordionGroup, descendants: true }], ngImport: i0, template: "<div class=\"size-full flex flex-col  verflow-hidden\">\r\n  <div class=\"w-full text-center\">\r\n    <!-- <ion-item class=\"bg-inactive bg-active\" lines=\"none\" style=\"--border-radius: 1rem\">\r\n      <ion-label class=\"text-center\">\r\n        <ion-icon class=\"text-2xl\" [name]=\"MenuGroup.icon\"></ion-icon> <br>\r\n        <ion-text class=\"text-lg\">\r\n          {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} \r\n        </ion-text>\r\n      </ion-label>\r\n    </ion-item> -->\r\n    <div class=\"gradient-background header flex flex-col gap-1 p-2 text-center items-center justify-center rounded-xl\">\r\n      <ion-icon class=\"text-2xl\" [name]=\"MenuGroup.icon\"></ion-icon>\r\n      <ion-text class=\"text-dark\">\r\n        {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} \r\n      </ion-text>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex flex-col gap-2 w-full pt-2 mask-y overflow-y-auto\">\r\n    @for (mGroup of MenuGroup.lstMenu; track $index) {\r\n      <!-- Menu -->\r\n      @if(mGroup.type == \"Menu\"){\r\n        <div (click)=\"HandleNav(mGroup, $event)\" \r\n          class=\"bg-inactive gradient-background menu\"\r\n          [class.bg-active]=\"router.isActive('/' + mGroup.route, false)\"\r\n        >\r\n          <div class=\"content\">\r\n            <ion-icon class=\"shrink-0\" [name]=\"mGroup.icon\"></ion-icon>\r\n            <ion-label class=\"shrink\">\r\n              {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          \r\n            </ion-label>\r\n          </div>\r\n        </div>\r\n        <!-- <ion-item \r\n          class=\"bg-inactive shrink-0\" lines=\"none\" \r\n          (click)=\"HandleNav(mGroup)\"\r\n          [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mGroup.route, false)}\">\r\n          <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n          <ion-label class=\"ion-text-nowrap\">\r\n            {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          \r\n          </ion-label>\r\n        </ion-item> -->\r\n      } \r\n      @else if (mGroup.type == \"MenuGroup\") {\r\n        <!-- MenuGroup -->\r\n        <!-- <div class=\"w-full overflow-hidden shrink-0\">\r\n          <ion-accordion-group class=\"ion-text-nowrap w-full\">\r\n            <ion-accordion class=\"bg-transparent\" [value]=\"mGroup\">\r\n              <ion-item slot=\"header\" color=\"light\" class=\"ion-text-nowrap bg-inactive\" style=\"--ion-color-base: var(--background) !important\">\r\n                <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n                <ion-label>\r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + mGroup.id | translate) : mGroup.title}}\r\n                </ion-label>\r\n              </ion-item>\r\n              <div slot=\"content\">\r\n                <div class=\"pl-8\">\r\n                  <div class=\"w-full border-l-2 border-solid rounded-bl-2xl grid gap-2 pl-2 py-2\" style=\"border-color: color-mix(in srgb, var(--ion-color-primary) 30%, transparent 70%)\">\r\n                    @for (mMenu of mGroup.lstMenu; track $index) {\r\n                      @if (mMenu.type == \"Menu\") {\r\n                        <ion-item \r\n                          class=\"bg-inactive\" lines=\"none\" \r\n                          (click)=\"HandleNav(mMenu)\"\r\n                          [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mMenu.route, false)}\">\r\n                          <ion-icon slot=\"start\" [name]=\"mMenu.icon\"></ion-icon>\r\n                          <ion-label class=\"ion-text-nowrap\">\r\n                            {{useTranslation ? (TranslationModule.Permissao + mMenu.id | translate) : mMenu.title}}\r\n                          </ion-label>\r\n                        </ion-item>\r\n                      }\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ion-accordion>\r\n          </ion-accordion-group>\r\n        </div> -->\r\n      }\r\n    }\r\n  </div>\r\n</div>", styles: [".menu{display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:flex-start;overflow:hidden;border-radius:.75rem;padding:.375rem;transition:--color-primary,--step-1-opacity,--step-2-opacity .2s ease-in-out;--inset: var(--color-primary) 0px 1.75px 2px 0px inset;box-shadow:var(--inset)}.menu .content{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.menu.bg-active:after{content:\"\";position:absolute;top:50%;right:0;width:.375rem;height:75%;transform:translateY(-50%);border-radius:inherit;background-color:color-mix(in srgb,var(--ion-color-primary) 70%,transparent);opacity:1!important;filter:drop-shadow(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0px 0px 3px)}.menu.bg-active:before{content:\"\";position:absolute;top:50%;right:-2.3rem;width:5rem;height:7rem;transform:translateY(-50%);border-radius:inherit;opacity:.5!important;background:radial-gradient(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0%,transparent 66%)}.menu.bg-inactive{--color-primary: var(--ion-color-step-250);--step-1-opacity: .5;--step-2-opacity: .4;--step-3-opacity: .8;position:relative}.menu.bg-inactive:after{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.menu.bg-inactive:before{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.header{--color-primary: var(--ion-color-primary) !important;--step-1-opacity: .7 !important;--step-2-opacity: .3 !important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerGroupComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, IonicModule, RouterLinkWithHref, TranslateModule], selector: 'drawer-group', template: "<div class=\"size-full flex flex-col  verflow-hidden\">\r\n  <div class=\"w-full text-center\">\r\n    <!-- <ion-item class=\"bg-inactive bg-active\" lines=\"none\" style=\"--border-radius: 1rem\">\r\n      <ion-label class=\"text-center\">\r\n        <ion-icon class=\"text-2xl\" [name]=\"MenuGroup.icon\"></ion-icon> <br>\r\n        <ion-text class=\"text-lg\">\r\n          {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} \r\n        </ion-text>\r\n      </ion-label>\r\n    </ion-item> -->\r\n    <div class=\"gradient-background header flex flex-col gap-1 p-2 text-center items-center justify-center rounded-xl\">\r\n      <ion-icon class=\"text-2xl\" [name]=\"MenuGroup.icon\"></ion-icon>\r\n      <ion-text class=\"text-dark\">\r\n        {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} \r\n      </ion-text>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex flex-col gap-2 w-full pt-2 mask-y overflow-y-auto\">\r\n    @for (mGroup of MenuGroup.lstMenu; track $index) {\r\n      <!-- Menu -->\r\n      @if(mGroup.type == \"Menu\"){\r\n        <div (click)=\"HandleNav(mGroup, $event)\" \r\n          class=\"bg-inactive gradient-background menu\"\r\n          [routerLink]=\"[mGroup.route]\"\r\n          [class.bg-active]=\"router.isActive('/' + mGroup.route, false)\"\r\n        >\r\n          <div class=\"content\">\r\n            <ion-icon class=\"shrink-0\" [name]=\"mGroup.icon\"></ion-icon>\r\n            <ion-label class=\"shrink\">\r\n              {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          \r\n            </ion-label>\r\n          </div>\r\n        </div>\r\n        <!-- <ion-item \r\n          class=\"bg-inactive shrink-0\" lines=\"none\" \r\n          (click)=\"HandleNav(mGroup)\"\r\n          [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mGroup.route, false)}\">\r\n          <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n          <ion-label class=\"ion-text-nowrap\">\r\n            {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          \r\n          </ion-label>\r\n        </ion-item> -->\r\n      } \r\n      @else if (mGroup.type == \"MenuGroup\") {\r\n        <!-- MenuGroup -->\r\n        <!-- <div class=\"w-full overflow-hidden shrink-0\">\r\n          <ion-accordion-group class=\"ion-text-nowrap w-full\">\r\n            <ion-accordion class=\"bg-transparent\" [value]=\"mGroup\">\r\n              <ion-item slot=\"header\" color=\"light\" class=\"ion-text-nowrap bg-inactive\" style=\"--ion-color-base: var(--background) !important\">\r\n                <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n                <ion-label>\r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + mGroup.id | translate) : mGroup.title}}\r\n                </ion-label>\r\n              </ion-item>\r\n              <div slot=\"content\">\r\n                <div class=\"pl-8\">\r\n                  <div class=\"w-full border-l-2 border-solid rounded-bl-2xl grid gap-2 pl-2 py-2\" style=\"border-color: color-mix(in srgb, var(--ion-color-primary) 30%, transparent 70%)\">\r\n                    @for (mMenu of mGroup.lstMenu; track $index) {\r\n                      @if (mMenu.type == \"Menu\") {\r\n                        <ion-item \r\n                          class=\"bg-inactive\" lines=\"none\" \r\n                          (click)=\"HandleNav(mMenu)\"\r\n                          [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mMenu.route, false)}\">\r\n                          <ion-icon slot=\"start\" [name]=\"mMenu.icon\"></ion-icon>\r\n                          <ion-label class=\"ion-text-nowrap\">\r\n                            {{useTranslation ? (TranslationModule.Permissao + mMenu.id | translate) : mMenu.title}}\r\n                          </ion-label>\r\n                        </ion-item>\r\n                      }\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ion-accordion>\r\n          </ion-accordion-group>\r\n        </div> -->\r\n      }\r\n    }\r\n  </div>\r\n</div>", styles: [".menu{display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:flex-start;overflow:hidden;border-radius:.75rem;padding:.375rem;transition:--color-primary,--step-1-opacity,--step-2-opacity .2s ease-in-out;--inset: var(--color-primary) 0px 1.75px 1px 0px inset;box-shadow:var(--inset)}.menu .content{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.menu.bg-active:after{content:\"\";position:absolute;top:50%;right:0;width:.375rem;height:75%;transform:translateY(-50%);border-radius:inherit;background-color:color-mix(in srgb,var(--ion-color-primary) 70%,transparent);opacity:1!important;filter:drop-shadow(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0px 0px 3px)}.menu.bg-active:before{content:\"\";position:absolute;top:50%;right:-2.3rem;width:5rem;height:7rem;transform:translateY(-50%);border-radius:inherit;opacity:.5!important;background:radial-gradient(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0%,transparent 66%)}.menu.bg-inactive{--color-primary: var(--ion-color-step-250);--step-1-opacity: .5;--step-2-opacity: .4;--step-3-opacity: .8;position:relative}.menu.bg-inactive:after{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.menu.bg-inactive:before{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.header{--color-primary: var(--ion-color-primary) !important;--step-1-opacity: .7 !important;--step-2-opacity: .3 !important}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, IonicModule, RouterLinkWithHref, TranslateModule], selector: 'drawer-group', template: "<div class=\"size-full flex flex-col  verflow-hidden\">\r\n  <div class=\"w-full text-center\">\r\n    <!-- <ion-item class=\"bg-inactive bg-active\" lines=\"none\" style=\"--border-radius: 1rem\">\r\n      <ion-label class=\"text-center\">\r\n        <ion-icon class=\"text-2xl\" [name]=\"MenuGroup.icon\"></ion-icon> <br>\r\n        <ion-text class=\"text-lg\">\r\n          {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} \r\n        </ion-text>\r\n      </ion-label>\r\n    </ion-item> -->\r\n    <div class=\"gradient-background header flex flex-col gap-1 p-2 text-center items-center justify-center rounded-xl\">\r\n      <ion-icon class=\"text-2xl\" [name]=\"MenuGroup.icon\"></ion-icon>\r\n      <ion-text class=\"text-dark\">\r\n        {{useTranslation ? (TranslationModule.PermissaoGrupo + MenuGroup.id | translate) : MenuGroup.title}} \r\n      </ion-text>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex flex-col gap-2 w-full pt-2 mask-y overflow-y-auto\">\r\n    @for (mGroup of MenuGroup.lstMenu; track $index) {\r\n      <!-- Menu -->\r\n      @if(mGroup.type == \"Menu\"){\r\n        <div (click)=\"HandleNav(mGroup, $event)\" \r\n          class=\"bg-inactive gradient-background menu\"\r\n          [class.bg-active]=\"router.isActive('/' + mGroup.route, false)\"\r\n        >\r\n          <div class=\"content\">\r\n            <ion-icon class=\"shrink-0\" [name]=\"mGroup.icon\"></ion-icon>\r\n            <ion-label class=\"shrink\">\r\n              {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          \r\n            </ion-label>\r\n          </div>\r\n        </div>\r\n        <!-- <ion-item \r\n          class=\"bg-inactive shrink-0\" lines=\"none\" \r\n          (click)=\"HandleNav(mGroup)\"\r\n          [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mGroup.route, false)}\">\r\n          <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n          <ion-label class=\"ion-text-nowrap\">\r\n            {{useTranslation ? (TranslationModule.Permissao + mGroup.id | translate) : mGroup.title}}          \r\n          </ion-label>\r\n        </ion-item> -->\r\n      } \r\n      @else if (mGroup.type == \"MenuGroup\") {\r\n        <!-- MenuGroup -->\r\n        <!-- <div class=\"w-full overflow-hidden shrink-0\">\r\n          <ion-accordion-group class=\"ion-text-nowrap w-full\">\r\n            <ion-accordion class=\"bg-transparent\" [value]=\"mGroup\">\r\n              <ion-item slot=\"header\" color=\"light\" class=\"ion-text-nowrap bg-inactive\" style=\"--ion-color-base: var(--background) !important\">\r\n                <ion-icon slot=\"start\" [name]=\"mGroup.icon\"></ion-icon>\r\n                <ion-label>\r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + mGroup.id | translate) : mGroup.title}}\r\n                </ion-label>\r\n              </ion-item>\r\n              <div slot=\"content\">\r\n                <div class=\"pl-8\">\r\n                  <div class=\"w-full border-l-2 border-solid rounded-bl-2xl grid gap-2 pl-2 py-2\" style=\"border-color: color-mix(in srgb, var(--ion-color-primary) 30%, transparent 70%)\">\r\n                    @for (mMenu of mGroup.lstMenu; track $index) {\r\n                      @if (mMenu.type == \"Menu\") {\r\n                        <ion-item \r\n                          class=\"bg-inactive\" lines=\"none\" \r\n                          (click)=\"HandleNav(mMenu)\"\r\n                          [ngClass]=\"{'colapsed': colapsed, 'bg-active' : router.isActive('/' + mMenu.route, false)}\">\r\n                          <ion-icon slot=\"start\" [name]=\"mMenu.icon\"></ion-icon>\r\n                          <ion-label class=\"ion-text-nowrap\">\r\n                            {{useTranslation ? (TranslationModule.Permissao + mMenu.id | translate) : mMenu.title}}\r\n                          </ion-label>\r\n                        </ion-item>\r\n                      }\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ion-accordion>\r\n          </ion-accordion-group>\r\n        </div> -->\r\n      }\r\n    }\r\n  </div>\r\n</div>", styles: [".menu{display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:flex-start;overflow:hidden;border-radius:.75rem;padding:.375rem;transition:--color-primary,--step-1-opacity,--step-2-opacity .2s ease-in-out;--inset: var(--color-primary) 0px 1.75px 2px 0px inset;box-shadow:var(--inset)}.menu .content{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.menu.bg-active:after{content:\"\";position:absolute;top:50%;right:0;width:.375rem;height:75%;transform:translateY(-50%);border-radius:inherit;background-color:color-mix(in srgb,var(--ion-color-primary) 70%,transparent);opacity:1!important;filter:drop-shadow(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0px 0px 3px)}.menu.bg-active:before{content:\"\";position:absolute;top:50%;right:-2.3rem;width:5rem;height:7rem;transform:translateY(-50%);border-radius:inherit;opacity:.5!important;background:radial-gradient(color-mix(in srgb,var(--ion-color-primary) 70%,transparent) 0%,transparent 66%)}.menu.bg-inactive{--color-primary: var(--ion-color-step-250);--step-1-opacity: .5;--step-2-opacity: .4;--step-3-opacity: .8;position:relative}.menu.bg-inactive:after{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.menu.bg-inactive:before{content:\"\";opacity:0;transition:opacity .2s ease-in-out;will-change:opacity}.header{--color-primary: var(--ion-color-primary) !important;--step-1-opacity: .7 !important;--step-2-opacity: .3 !important}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.Router }, { type: i3.NavController }, { type: GenericService }], propDecorators: { MenuGroup: [{
                 type: Input
             }], colapsed: [{
@@ -10453,10 +10579,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class DrawerComponent {
-    constructor() {
+    constructor(router, navController, genericService) {
+        this.router = router;
+        this.navController = navController;
+        this.genericService = genericService;
         this.TranslationModule = {
             Permissao: 'Entities.Permissao.',
-            PermissaoGrupo: 'Entities.PermissaoGrupo.'
+            PermissaoGrupo: 'Entities.PermissaoGrupo.',
+            SemResultado: 'Messages.SemResultado'
         };
         this.loading = true;
         this.lstMenu = input();
@@ -10466,6 +10596,15 @@ class DrawerComponent {
         this.useTranslation = false;
         this.CurrentGroupActive = null;
         this._enterColapsed = false;
+        this.search = signal("");
+        this.lstMenuFiltered = computed(() => {
+            const str = this.search().toLowerCase();
+            const lstS1 = this.lstMenu().map(p => {
+                return new Menu(p.type, p.title, p.icon, p.lstMenu.filter(x => x.title.toLowerCase().includes(str)), p.route);
+            });
+            const lstS2 = lstS1.filter(p => p.lstMenu.length > 0);
+            return lstS2;
+        });
         effect(() => {
             //Handle Menu Title
             const lstFlat = this.lstFlattenMenu();
@@ -10495,8 +10634,24 @@ class DrawerComponent {
             this.colapsedChange.emit(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DrawerComponent, isStandalone: true, selector: "drawer", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, lstMenu: { classPropertyName: "lstMenu", publicName: "lstMenu", isSignal: true, isRequired: false, transformFunction: null }, colapsed: { classPropertyName: "colapsed", publicName: "colapsed", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, useTranslation: { classPropertyName: "useTranslation", publicName: "useTranslation", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { colapsedChange: "colapsedChange" }, ngImport: i0, template: "<!-- <div class=\"absolute left-0 top-0 h-full w-[19rem] flex flex-col bg-light\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <div class=\"w-full px-2 h-14 pt-2 flex justify-between items-center text-3xl text-center\">\r\n    <ion-button id=\"drawer-button\" class=\"shrink-0 portrait:hidden aspect-square h-12 z-10 default-transition m-0\" size=\"small\" fill=\"outline\" color=\"dark\" style=\"--border-radius: 999rem; --border-width: 0;\" (click)=\"ToggleCollapsed()\"> \r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n    <div class=\"size-full\">\r\n      @if (!ref.children.length) {\r\n        <ion-text class=\"size-full flex items-center justify-center default-transition z-0\" [ngClass]=\"{'opacity-0 -translate-x-1/2': colapsed }\"> \r\n          {{title}}\r\n        </ion-text>\r\n      }\r\n      <div #ref class=\"size-full flex items-center justify-center\">\r\n        <ng-content select=\"[slot=logo]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"menu-conteiner\" class=\"mask-y flex flex-col relative\">\r\n    <loading [type]=\"3\" [loading]=\"loading\" text=\"\"></loading>\r\n    <div class=\"size-full shrink flex\">\r\n      <div class=\"h-full w-16 p-2 shrink-0\">\r\n        <div class=\"grid gap-2\">\r\n          @for (item of lstMenu(); track $index) {\r\n            <ion-item \r\n              id=\"group-menu\" [title]=\"item.title\" class=\"bg-inactive relative overflow-visible\" lines=\"none\" style=\"--padding-start: 0;\"\r\n              (click)=\"CurrentGroupActive = item\" \r\n              [ngClass]=\"{'bg-active': CurrentGroupActive == item}\"\r\n            >\r\n              <div id=\"tooltip\" class=\"opacity-0 !pointer-events-none -translate-x-4 absolute top-0 bottom-0 default-transition left-14 px-2 my-auto text-nowrap h-8 bg-[var(--ion-color-secondary)] -z-30 rounded-xl flex items-center justify-center\">\r\n                <div class=\"absolute -left-1 top-0 rounded bottom-0 my-auto rotate-45 h-4 aspect-square bg-[var(--ion-color-secondary)]\"></div>\r\n                <ion-icon class=\"z-50 mr-2\" [name]=\"item.icon\"></ion-icon>\r\n                <ion-text class=\"z-50\"> \r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n                </ion-text>\r\n              </div>\r\n              <div class=\"absolute top-0 size-full flex items-center justify-center overflow-visible\">\r\n                <ion-icon class=\"text-2xl\" [name]=\"item.icon\"></ion-icon>\r\n              </div>\r\n            </ion-item>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"h-full w-full border-dashed border-l relative\" style=\"border-color: color-mix(in srgb, var(--ion-color-dark) 20%, transparent 80%);\">\r\n        @for (mGroup of lstMenu(); track $index) {\r\n          <div class=\"absolute top-0 left-0 px-2 py-2 size-full default-transition opacity-0 translate-x-full z-0 mask-y overflow-y-auto\" [ngClass]=\"{'opacity-100 !translate-x-0': CurrentGroupActive == mGroup}\">\r\n            <drawer-group [MenuGroup]=\"mGroup\" [useTranslation]=\"useTranslation\" [colapsed]=\"colapsed\"></drawer-group>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div> \r\n\r\n    <div class=\"shrink-0 w-full\">\r\n      <ng-content select=\"[slot=drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n<div class=\"absolute left-0 top-0 h-full bg-light size-full flex flex-col p-2 !pr-0 w-[19rem] overflow-hidden\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <!-- [ Header ] -->\r\n  <div class=\"shrink-0 w-full flex justify-between items-center\">\r\n    <div #anchor\r\n      (click)=\"ToggleCollapsed()\" \r\n      class=\"toggle size-10 aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu\"\r\n    >\r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </div>\r\n    <!-- <ion-button class=\"size-10 shrink-0 aspect-square\" size=\"small\" color=\"medium\" (click)=\"ToggleCollapsed()\">\r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button> -->\r\n\r\n    <div class=\"size-full shrink\">\r\n      @if (!ref.children.length) {\r\n        <ion-text class=\"size-full flex items-center justify-center default-transition z-0\" [ngClass]=\"{'opacity-0 -translate-x-1/2 pointer-events-none': colapsed }\"> \r\n          {{title}}\r\n        </ion-text>\r\n      }\r\n      <div #ref class=\"size-full flex items-center justify-center\">\r\n        <ng-content select=\"[slot=logo]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- [ Content ] -->\r\n  <div class=\"size-full shrink flex flex-col relative overflow-hidden\">\r\n    <loading [type]=\"3\" [loading]=\"loading\" text=\"\"></loading>\r\n    <div class=\"size-full shrink flex gap-2\">\r\n      <div class=\"h-full supports-[selector(::-webkit-scrollbar-thumb)]:!w-[3.375rem] w-12 pr-2 py-2 mask-y shrink-0 flex flex-col gap-2 overflow-y-auto border-dashed border-r border-r-medium/30\">\r\n        @for (item of lstMenu(); track $index) {\r\n          <div>\r\n            <div\r\n              [class.bg-active]=\"CurrentGroupActive == item\"\r\n              #anchor (mouseenter)=\"popover.present($event)\" \r\n              (mouseleave)=\"popover.dismiss()\" \r\n              (click)=\"CurrentGroupActive = item\" \r\n              class=\"w-full aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu\"\r\n            >\r\n              <ion-icon [name]=\"item.icon\"></ion-icon>\r\n            </div>\r\n            <sion-popover #popover [anchor]=\"anchor\" [flip]=\"false\" placement=\"right\" fill=\"solid\">\r\n              <div class=\"p-1\">\r\n                {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n              </div>\r\n            </sion-popover>\r\n          </div>\r\n          <!-- <ion-button class=\"w-full aspect-square shrink-0\" size=\"small\" color=\"secondary\" (click)=\"CurrentGroupActive = item\"> \r\n            <ion-icon [name]=\"item.icon\" slot=\"icon-only\"></ion-icon>\r\n          </ion-button> -->\r\n        }\r\n\r\n      </div>\r\n      <div class=\"size-full shrink relative\">\r\n        @for (mGroup of lstMenu(); track $index) {\r\n          <div class=\"absolute top-0 left-0 size-full py-2 default-transition opacity-0 translate-x-full z-0 overflow-hidden\" [ngClass]=\"{'opacity-100 !translate-x-0': CurrentGroupActive == mGroup}\">\r\n            <drawer-group [MenuGroup]=\"mGroup\" [useTranslation]=\"useTranslation\" [colapsed]=\"colapsed\"></drawer-group>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- [ End ] -->\r\n  <div class=\"shrink-0 w-full\">\r\n    <ng-content select=\"[slot=drawer]\"></ng-content>\r\n  </div>\r\n</div>", styles: [".bg-active{--color-primary: var(--ion-color-primary) !important;--step-1-opacity: .7 !important;--step-2-opacity: .3 !important}.bg-inactive{--color-primary: var(--ion-color-step-250);--step-1-opacity: .5;--step-2-opacity: .4;--step-3-opacity: .8}.menu{display:flex;cursor:pointer;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;padding:.5rem;transition:--color-primary,--step-1-opacity,--step-2-opacity .2s ease-in-out;--inset: var(--color-primary) 0px 1.75px 1px 0px inset;box-shadow:var(--inset)}.toggle:hover{--color-primary: var(--ion-color-step-500) !important;transition:--color-primary .2s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: LoadingComponent, selector: "loading", inputs: ["text", "type", "loading"] }, { kind: "component", type: DrawerGroupComponent, selector: "drawer-group", inputs: ["MenuGroup", "colapsed", "useTranslation"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SIonPopoverModule }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss", "isVisibleChange"] }] }); }
+    HandleNav(item, event) {
+        if (event.ctrlKey || event.metaKey) {
+            window.open(window.origin + '/' + item.route, '_blank');
+            event.preventDefault();
+            return;
+        }
+        this.SetTitle(item);
+        const vGroup = FindMenuParent(this.lstMenu(), item);
+        if (vGroup) {
+            this.CurrentGroupActive = vGroup;
+        }
+        this.navController.navigateRoot('/' + item.route);
+    }
+    SetTitle(item) {
+        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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
@@ -10506,9 +10661,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LoadingComponent,
                         DrawerGroupComponent,
                         TranslateModule,
-                        SIonPopoverModule
-                    ], selector: 'drawer', template: "<!-- <div class=\"absolute left-0 top-0 h-full w-[19rem] flex flex-col bg-light\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <div class=\"w-full px-2 h-14 pt-2 flex justify-between items-center text-3xl text-center\">\r\n    <ion-button id=\"drawer-button\" class=\"shrink-0 portrait:hidden aspect-square h-12 z-10 default-transition m-0\" size=\"small\" fill=\"outline\" color=\"dark\" style=\"--border-radius: 999rem; --border-width: 0;\" (click)=\"ToggleCollapsed()\"> \r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button>\r\n    <div class=\"size-full\">\r\n      @if (!ref.children.length) {\r\n        <ion-text class=\"size-full flex items-center justify-center default-transition z-0\" [ngClass]=\"{'opacity-0 -translate-x-1/2': colapsed }\"> \r\n          {{title}}\r\n        </ion-text>\r\n      }\r\n      <div #ref class=\"size-full flex items-center justify-center\">\r\n        <ng-content select=\"[slot=logo]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"menu-conteiner\" class=\"mask-y flex flex-col relative\">\r\n    <loading [type]=\"3\" [loading]=\"loading\" text=\"\"></loading>\r\n    <div class=\"size-full shrink flex\">\r\n      <div class=\"h-full w-16 p-2 shrink-0\">\r\n        <div class=\"grid gap-2\">\r\n          @for (item of lstMenu(); track $index) {\r\n            <ion-item \r\n              id=\"group-menu\" [title]=\"item.title\" class=\"bg-inactive relative overflow-visible\" lines=\"none\" style=\"--padding-start: 0;\"\r\n              (click)=\"CurrentGroupActive = item\" \r\n              [ngClass]=\"{'bg-active': CurrentGroupActive == item}\"\r\n            >\r\n              <div id=\"tooltip\" class=\"opacity-0 !pointer-events-none -translate-x-4 absolute top-0 bottom-0 default-transition left-14 px-2 my-auto text-nowrap h-8 bg-[var(--ion-color-secondary)] -z-30 rounded-xl flex items-center justify-center\">\r\n                <div class=\"absolute -left-1 top-0 rounded bottom-0 my-auto rotate-45 h-4 aspect-square bg-[var(--ion-color-secondary)]\"></div>\r\n                <ion-icon class=\"z-50 mr-2\" [name]=\"item.icon\"></ion-icon>\r\n                <ion-text class=\"z-50\"> \r\n                  {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n                </ion-text>\r\n              </div>\r\n              <div class=\"absolute top-0 size-full flex items-center justify-center overflow-visible\">\r\n                <ion-icon class=\"text-2xl\" [name]=\"item.icon\"></ion-icon>\r\n              </div>\r\n            </ion-item>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"h-full w-full border-dashed border-l relative\" style=\"border-color: color-mix(in srgb, var(--ion-color-dark) 20%, transparent 80%);\">\r\n        @for (mGroup of lstMenu(); track $index) {\r\n          <div class=\"absolute top-0 left-0 px-2 py-2 size-full default-transition opacity-0 translate-x-full z-0 mask-y overflow-y-auto\" [ngClass]=\"{'opacity-100 !translate-x-0': CurrentGroupActive == mGroup}\">\r\n            <drawer-group [MenuGroup]=\"mGroup\" [useTranslation]=\"useTranslation\" [colapsed]=\"colapsed\"></drawer-group>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div> \r\n\r\n    <div class=\"shrink-0 w-full\">\r\n      <ng-content select=\"[slot=drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n<div class=\"absolute left-0 top-0 h-full bg-light size-full flex flex-col p-2 !pr-0 w-[19rem] overflow-hidden\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n  <!-- [ Header ] -->\r\n  <div class=\"shrink-0 w-full flex justify-between items-center\">\r\n    <div #anchor\r\n      (click)=\"ToggleCollapsed()\" \r\n      class=\"toggle size-10 aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu\"\r\n    >\r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </div>\r\n    <!-- <ion-button class=\"size-10 shrink-0 aspect-square\" size=\"small\" color=\"medium\" (click)=\"ToggleCollapsed()\">\r\n      <ion-icon name=\"menu\" slot=\"icon-only\"></ion-icon>\r\n    </ion-button> -->\r\n\r\n    <div class=\"size-full shrink\">\r\n      @if (!ref.children.length) {\r\n        <ion-text class=\"size-full flex items-center justify-center default-transition z-0\" [ngClass]=\"{'opacity-0 -translate-x-1/2 pointer-events-none': colapsed }\"> \r\n          {{title}}\r\n        </ion-text>\r\n      }\r\n      <div #ref class=\"size-full flex items-center justify-center\">\r\n        <ng-content select=\"[slot=logo]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- [ Content ] -->\r\n  <div class=\"size-full shrink flex flex-col relative overflow-hidden\">\r\n    <loading [type]=\"3\" [loading]=\"loading\" text=\"\"></loading>\r\n    <div class=\"size-full shrink flex gap-2\">\r\n      <div class=\"h-full supports-[selector(::-webkit-scrollbar-thumb)]:!w-[3.375rem] w-12 pr-2 py-2 mask-y shrink-0 flex flex-col gap-2 overflow-y-auto border-dashed border-r border-r-medium/30\">\r\n        @for (item of lstMenu(); track $index) {\r\n          <div>\r\n            <div\r\n              [class.bg-active]=\"CurrentGroupActive == item\"\r\n              #anchor (mouseenter)=\"popover.present($event)\" \r\n              (mouseleave)=\"popover.dismiss()\" \r\n              (click)=\"CurrentGroupActive = item\" \r\n              class=\"w-full aspect-square shrink-0 rounded-xl bg-inactive gradient-background menu\"\r\n            >\r\n              <ion-icon [name]=\"item.icon\"></ion-icon>\r\n            </div>\r\n            <sion-popover #popover [anchor]=\"anchor\" [flip]=\"false\" placement=\"right\" fill=\"solid\">\r\n              <div class=\"p-1\">\r\n                {{useTranslation ? (TranslationModule.PermissaoGrupo + item.id | translate) : item.title}}\r\n              </div>\r\n            </sion-popover>\r\n          </div>\r\n          <!-- <ion-button class=\"w-full aspect-square shrink-0\" size=\"small\" color=\"secondary\" (click)=\"CurrentGroupActive = item\"> \r\n            <ion-icon [name]=\"item.icon\" slot=\"icon-only\"></ion-icon>\r\n          </ion-button> -->\r\n        }\r\n\r\n      </div>\r\n      <div class=\"size-full shrink relative\">\r\n        @for (mGroup of lstMenu(); track $index) {\r\n          <div class=\"absolute top-0 left-0 size-full py-2 default-transition opacity-0 translate-x-full z-0 overflow-hidden\" [ngClass]=\"{'opacity-100 !translate-x-0': CurrentGroupActive == mGroup}\">\r\n            <drawer-group [MenuGroup]=\"mGroup\" [useTranslation]=\"useTranslation\" [colapsed]=\"colapsed\"></drawer-group>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- [ End ] -->\r\n  <div class=\"shrink-0 w-full\">\r\n    <ng-content select=\"[slot=drawer]\"></ng-content>\r\n  </div>\r\n</div>", styles: [".bg-active{--color-primary: var(--ion-color-primary) !important;--step-1-opacity: .7 !important;--step-2-opacity: .3 !important}.bg-inactive{--color-primary: var(--ion-color-step-250);--step-1-opacity: .5;--step-2-opacity: .4;--step-3-opacity: .8}.menu{display:flex;cursor:pointer;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;padding:.5rem;transition:--color-primary,--step-1-opacity,--step-2-opacity .2s ease-in-out;--inset: var(--color-primary) 0px 1.75px 1px 0px inset;box-shadow:var(--inset)}.toggle:hover{--color-primary: var(--ion-color-step-500) !important;transition:--color-primary .2s ease-in-out}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { loading: [{
+                        SIonPopoverModule,
+                        RouterLinkWithHref,
+                        ReactiveFormsModule,
+                        FormsModule
+                    ], selector: 'drawer', 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"] }]
+        }], ctorParameters: () => [{ type: i2$2.Router }, { type: i3.NavController }, { type: GenericService }], propDecorators: { loading: [{
                 type: Input
             }], colapsed: [{
                 type: Input
@@ -10630,6 +10788,9 @@ class FilterComponent {
                 ]);
             }
         }
+        if (!this._configuration) {
+            this._configuration = this.configuration();
+        }
     }
     Change() {
         if (this.model) {
@@ -10946,7 +11107,7 @@ class LoginAdminComponent {
         this.apiUrlProviderService.apiUrl = this.apiUrl;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoginAdminComponent, deps: [{ token: ApiUrlProviderService }, { token: AuthService }, { token: UsuarioService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LoginAdminComponent, isStandalone: true, selector: "login-admin", ngImport: i0, template: "@if (this.authService.isAdmin || !this.apiUrlProviderService.production) {\r\n  <ion-button (click)=\"adminPopover.present($event)\" fill=\"outline\" class=\"aspect-square h-8 z-50\" size=\"small\">\r\n    <ion-icon name=\"shield\" slot=\"icon-only\"></ion-icon>\r\n  </ion-button>\r\n  <ion-popover id=\"admin-popover\" #adminPopover>\r\n    <ng-template>\r\n      <ion-content class=\"p-2 bg-transparent\">\r\n      <div class=\"p-2\">\r\n        <input-select\r\n          [(ngModel)]=\"idUsuario\"\r\n          label=\"Logar como...\"\r\n          (change)=\"SelectUser($event)\"\r\n          [configuration]=\"selectUserConfiguration\"\r\n        ></input-select>\r\n  \r\n        <div class=\"rounded-2xl mt-2 overflow-hidden border border-primary/30\">\r\n          <div class=\"py-2 text-center border-b border-b-medium/30\">\r\n            <span class=\"font-poppins\"> API </span>\r\n          </div>\r\n          <ion-item lines=\"none\" style=\"--border-width: 0 !important;\">\r\n            <ion-input [(ngModel)]=\"apiUrl\" (ngModelChange)=\"SetApiUrl()\"></ion-input>\r\n          </ion-item>\r\n        </div>\r\n      </div>\r\n      </ion-content>\r\n    </ng-template>\r\n  </ion-popover>\r\n}", styles: ["#admin-popover{--width: 17rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.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.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: InputSelectComponent, selector: "input-select", inputs: ["items", "configuration"], outputs: ["itemsChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LoginAdminComponent, isStandalone: true, selector: "login-admin", ngImport: i0, template: "@if (this.authService.isAdmin || !this.apiUrlProviderService.production) {\r\n  <ion-button (click)=\"adminPopover.present($event)\" fill=\"outline\" class=\"aspect-square h-8 z-50\" size=\"small\">\r\n    <ion-icon name=\"shield\" slot=\"icon-only\"></ion-icon>\r\n  </ion-button>\r\n  <ion-popover id=\"admin-popover\" #adminPopover>\r\n    <ng-template>\r\n      <ion-content class=\"p-2 bg-transparent\">\r\n      <div class=\"p-2\">\r\n        <input-select\r\n          [(ngModel)]=\"idUsuario\"\r\n          label=\"Logar como...\"\r\n          (change)=\"SelectUser($event)\"\r\n          [configuration]=\"selectUserConfiguration\"\r\n        ></input-select>\r\n  \r\n        <div class=\"rounded-2xl mt-2 overflow-hidden border border-primary/30\">\r\n          <div class=\"py-2 text-center border-b border-b-medium/30\">\r\n            <span class=\"font-poppins\"> API </span>\r\n          </div>\r\n          <ion-item lines=\"none\" style=\"--border-width: 0 !important;\">\r\n            <ion-input [(ngModel)]=\"apiUrl\" (ngModelChange)=\"SetApiUrl()\"></ion-input>\r\n          </ion-item>\r\n        </div>\r\n      </div>\r\n      </ion-content>\r\n    </ng-template>\r\n  </ion-popover>\r\n}", styles: ["#admin-popover{--width: 17rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.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.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: InputSelectComponent, selector: "input-select", inputs: ["items", "configuration"], outputs: ["itemsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoginAdminComponent, decorators: [{
             type: Component,
@@ -11020,7 +11181,7 @@ class DefaultLoginComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultLoginComponent, deps: [{ token: i2$1.FormBuilder }, { token: GenericService }, { token: i3.NavController }, { token: AuthService }, { token: ApiUrlProviderService }, { token: EnvironmentService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DefaultLoginComponent, isStandalone: true, selector: "login", outputs: { OnLogin: "OnLogin" }, host: { listeners: { "window:keydown": "Login($event)" } }, viewQueries: [{ propertyName: "loginContainer", first: true, predicate: ["loginContainer"], descendants: true }], ngImport: i0, template: "<!-- <div class=\"size-full flex justify-center items-center relative\">\r\n  <div class=\"landscape:w-4/5 portrait:w-full landscape:h-2/3 portrait:h-full landscape:max-w-[60rem] translucid-border landscape:rounded-3xl landscape:backdrop-blur-xl overflow-hidden\">\r\n    <div class=\"size-full flex portrait:flex-col\" style=\"background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);\">\r\n      <div class=\"shrink-0 w-96 portrait:w-full portrait:h-32 h-full p-3\">\r\n        <div class=\"rounded-2xl size-full overflow-x-hidden\">\r\n          <ng-content class=\"size-full\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"grow flex items-center justify-center h-full py-3 pr-3 portrait:pl-3\">\r\n        <div class=\"w-96 h-full flex flex-col items-center justify-center gap-2\" *ngIf=\"frm\" [formGroup]=\"frm\">\r\n\r\n          <ion-text class=\"text-5xl my-10 portrait:mt-[-5rem]\"> Login </ion-text>\r\n\r\n          <ion-card class=\"w-full backdrop-blur-xl\">\r\n            <ion-card-content>\r\n              <ion-item lines=\"none\" label=\"Senha\" labelPlacement=\"stacked\" class=\"rounded-2xl my-3 w-full\">\r\n                <ion-icon name=\"person\" slot=\"start\"></ion-icon>\r\n                <ion-input placeholder=\"Usu\u00E1rio / User\" formControlName=\"apelido\"></ion-input>\r\n              </ion-item>\r\n            </ion-card-content>\r\n          </ion-card>\r\n\r\n          <ion-card class=\"w-full backdrop-blur-xl\"> \r\n            <ion-card-content>\r\n              <ion-item lines=\"none\" class=\"rounded-2xl my-3 w-full\">\r\n                <ion-icon name=\"lock-closed\" slot=\"start\"></ion-icon>\r\n                <ion-input type=\"password\" formControlName=\"senha\" placeholder=\"Senha / Password\">\r\n                  <ion-input-password-toggle slot=\"end\"></ion-input-password-toggle>\r\n                </ion-input>\r\n              </ion-item>\r\n            </ion-card-content>\r\n          </ion-card>\r\n\r\n          <div class=\"w-full\">\r\n            <a href=\"\">Esqueceu a senha?</a>\r\n          </div>\r\n\r\n          <div class=\"flex w-full\">\r\n            <ion-button class=\"rounded-2xl shadow-xl default-transition w-full\" expand=\"block\" (click)=\"Login()\" [disabled]=\"loading\">\r\n              <ion-spinner class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}\" slot=\"start\"></ion-spinner>\r\n              <ion-icon    class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0':  loading}\" name=\"enter-outline\" slot=\"start\" ></ion-icon>\r\n              <span class=\"default-transition\" > Login </span>\r\n            </ion-button>\r\n\r\n            <ion-button class=\"shrink-0 aspect-square ml-3\" color=\"dark\" hidden>\r\n              <svg class=\"size-8\" slot=\"icon-only\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 32 32\" width=\"64\" height=\"64\"><defs><path id=\"A\" d=\"M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z\"/></defs><clipPath id=\"B\"><use xlink:href=\"#A\"/></clipPath><g transform=\"matrix(.727273 0 0 .727273 -.954545 -1.45455)\"><path d=\"M0 37V11l17 13z\" clip-path=\"url(#B)\" fill=\"#fbbc05\"/><path d=\"M0 11l17 13 7-6.1L48 14V0H0z\" clip-path=\"url(#B)\" fill=\"#ea4335\"/><path d=\"M0 37l30-23 7.9 1L48 0v48H0z\" clip-path=\"url(#B)\" fill=\"#34a853\"/><path d=\"M48 48L17 24l-4-3 35-10z\" clip-path=\"url(#B)\" fill=\"#4285f4\"/></g></svg>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n\r\n<div #loginContainer class=\"size-full flex justify-center items-center relative portrait:p-4\">\r\n  <div class=\"landscape:w-4/5 landscape:h-2/3 landscape:xl:max-w-[60rem] portrait:size-full translucid-border backdrop-blur-xl rounded-3xl overflow-hidden\">\r\n    <div class=\"size-full flex portrait:flex-col\" style=\"background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);\">\r\n      <div class=\"shrink-0 w-96 portrait:w-full portrait:h-40 landscape:h-full p-2\">\r\n        <div class=\"size-full rounded-2xl overflow-hidden\">\r\n          <ng-content select=\"[slot=logo]\" class=\"size-full\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"shrink size-full flex flex-col items-center justify-center gap-3 px-10 relative\" *ngIf=\"frm\" [formGroup]=\"frm\">\r\n        <ion-text class=\"h-24 text-5xl\"> Login </ion-text>\r\n\r\n        <ion-card class=\"w-full backdrop-blur-xl\">\r\n          <ion-card-content>\r\n            <ion-item lines=\"none\" label=\"Senha\" labelPlacement=\"stacked\" class=\"rounded-2xl my-3 w-full\">\r\n              <ion-icon name=\"person\" slot=\"start\"></ion-icon>\r\n              <ion-input placeholder=\"Usu\u00E1rio / User\" formControlName=\"apelido\"></ion-input>\r\n            </ion-item>\r\n          </ion-card-content>\r\n        </ion-card>\r\n\r\n        <ion-card class=\"w-full backdrop-blur-xl\"> \r\n          <ion-card-content>\r\n            <ion-item lines=\"none\" class=\"rounded-2xl my-3 w-full\">\r\n              <ion-icon name=\"lock-closed\" slot=\"start\"></ion-icon>\r\n              <ion-input type=\"password\" formControlName=\"senha\" placeholder=\"Senha / Password\">\r\n                <ion-input-password-toggle slot=\"end\"></ion-input-password-toggle>\r\n              </ion-input>\r\n            </ion-item>\r\n          </ion-card-content>\r\n        </ion-card>\r\n\r\n        <div class=\"flex w-full\">\r\n          <ion-button class=\"transition-all rounded-2xl shadow-xl default-transition w-full\" expand=\"block\" (click)=\"Login()\" [disabled]=\"loading\">\r\n            <ion-spinner class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}\" slot=\"start\"></ion-spinner>\r\n            <ion-icon    class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0':  loading}\" name=\"enter-outline\" slot=\"start\" ></ion-icon>\r\n            <span class=\"default-transition\"> Login </span>\r\n          </ion-button>\r\n\r\n          <!-- <ion-button class=\"shrink-0 aspect-square ml-3\" color=\"dark\" hidden>\r\n            <svg class=\"size-8\" slot=\"icon-only\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 32 32\" width=\"64\" height=\"64\"><defs><path id=\"A\" d=\"M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z\"/></defs><clipPath id=\"B\"><use xlink:href=\"#A\"/></clipPath><g transform=\"matrix(.727273 0 0 .727273 -.954545 -1.45455)\"><path d=\"M0 37V11l17 13z\" clip-path=\"url(#B)\" fill=\"#fbbc05\"/><path d=\"M0 11l17 13 7-6.1L48 14V0H0z\" clip-path=\"url(#B)\" fill=\"#ea4335\"/><path d=\"M0 37l30-23 7.9 1L48 0v48H0z\" clip-path=\"url(#B)\" fill=\"#34a853\"/><path d=\"M48 48L17 24l-4-3 35-10z\" clip-path=\"url(#B)\" fill=\"#4285f4\"/></g></svg>\r\n          </ion-button> -->\r\n        </div>\r\n\r\n        <div class=\"w-full\">\r\n          <ng-content select=\"[slot=end]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["ion-card{margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:1rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);background:color-mix(in srgb,var(--ion-color-light) 15%,transparent 93%);border-bottom-color:var(--ion-color-medium);border-right-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-top-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-left-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-width:1px 1px 2px 1px}ion-card ion-card-content{padding:0}ion-card:hover{background:color-mix(in srgb,var(--ion-color-dark) 15%,transparent 93%)}ion-card.submitted.invalid{border-color:color-mix(in srgb,var(--ion-color-danger) 75%,transparent 25%)!important}ion-card ion-card-content{width:100%;height:100%;background-color:transparent;padding:0}ion-item{--background: transparent;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i3.IonInputPasswordToggle, selector: "ion-input-password-toggle", inputs: ["color", "hideIcon", "mode", "showIcon"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DefaultLoginComponent, isStandalone: true, selector: "login", outputs: { OnLogin: "OnLogin" }, host: { listeners: { "window:keydown": "Login($event)" } }, viewQueries: [{ propertyName: "loginContainer", first: true, predicate: ["loginContainer"], descendants: true }], ngImport: i0, template: "<!-- <div class=\"size-full flex justify-center items-center relative\">\r\n  <div class=\"landscape:w-4/5 portrait:w-full landscape:h-2/3 portrait:h-full landscape:max-w-[60rem] translucid-border landscape:rounded-3xl landscape:backdrop-blur-xl overflow-hidden\">\r\n    <div class=\"size-full flex portrait:flex-col\" style=\"background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);\">\r\n      <div class=\"shrink-0 w-96 portrait:w-full portrait:h-32 h-full p-3\">\r\n        <div class=\"rounded-2xl size-full overflow-x-hidden\">\r\n          <ng-content class=\"size-full\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"grow flex items-center justify-center h-full py-3 pr-3 portrait:pl-3\">\r\n        <div class=\"w-96 h-full flex flex-col items-center justify-center gap-2\" *ngIf=\"frm\" [formGroup]=\"frm\">\r\n\r\n          <ion-text class=\"text-5xl my-10 portrait:mt-[-5rem]\"> Login </ion-text>\r\n\r\n          <ion-card class=\"w-full backdrop-blur-xl\">\r\n            <ion-card-content>\r\n              <ion-item lines=\"none\" label=\"Senha\" labelPlacement=\"stacked\" class=\"rounded-2xl my-3 w-full\">\r\n                <ion-icon name=\"person\" slot=\"start\"></ion-icon>\r\n                <ion-input placeholder=\"Usu\u00E1rio / User\" formControlName=\"apelido\"></ion-input>\r\n              </ion-item>\r\n            </ion-card-content>\r\n          </ion-card>\r\n\r\n          <ion-card class=\"w-full backdrop-blur-xl\"> \r\n            <ion-card-content>\r\n              <ion-item lines=\"none\" class=\"rounded-2xl my-3 w-full\">\r\n                <ion-icon name=\"lock-closed\" slot=\"start\"></ion-icon>\r\n                <ion-input type=\"password\" formControlName=\"senha\" placeholder=\"Senha / Password\">\r\n                  <ion-input-password-toggle slot=\"end\"></ion-input-password-toggle>\r\n                </ion-input>\r\n              </ion-item>\r\n            </ion-card-content>\r\n          </ion-card>\r\n\r\n          <div class=\"w-full\">\r\n            <a href=\"\">Esqueceu a senha?</a>\r\n          </div>\r\n\r\n          <div class=\"flex w-full\">\r\n            <ion-button class=\"rounded-2xl shadow-xl default-transition w-full\" expand=\"block\" (click)=\"Login()\" [disabled]=\"loading\">\r\n              <ion-spinner class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}\" slot=\"start\"></ion-spinner>\r\n              <ion-icon    class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0':  loading}\" name=\"enter-outline\" slot=\"start\" ></ion-icon>\r\n              <span class=\"default-transition\" > Login </span>\r\n            </ion-button>\r\n\r\n            <ion-button class=\"shrink-0 aspect-square ml-3\" color=\"dark\" hidden>\r\n              <svg class=\"size-8\" slot=\"icon-only\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 32 32\" width=\"64\" height=\"64\"><defs><path id=\"A\" d=\"M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z\"/></defs><clipPath id=\"B\"><use xlink:href=\"#A\"/></clipPath><g transform=\"matrix(.727273 0 0 .727273 -.954545 -1.45455)\"><path d=\"M0 37V11l17 13z\" clip-path=\"url(#B)\" fill=\"#fbbc05\"/><path d=\"M0 11l17 13 7-6.1L48 14V0H0z\" clip-path=\"url(#B)\" fill=\"#ea4335\"/><path d=\"M0 37l30-23 7.9 1L48 0v48H0z\" clip-path=\"url(#B)\" fill=\"#34a853\"/><path d=\"M48 48L17 24l-4-3 35-10z\" clip-path=\"url(#B)\" fill=\"#4285f4\"/></g></svg>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n\r\n<div #loginContainer class=\"size-full flex justify-center items-center relative portrait:p-4\">\r\n  <div class=\"landscape:w-4/5 landscape:h-2/3 landscape:xl:max-w-[60rem] portrait:size-full translucid-border backdrop-blur-xl rounded-3xl overflow-hidden\">\r\n    <div class=\"size-full flex portrait:flex-col\" style=\"background-color: color-mix(in srgb, var(--ion-color-light) 20%, transparent 80%);\">\r\n      <div class=\"shrink-0 w-96 portrait:w-full portrait:h-40 landscape:h-full p-2\">\r\n        <div class=\"size-full rounded-2xl overflow-hidden\">\r\n          <ng-content select=\"[slot=logo]\" class=\"size-full\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"shrink size-full flex flex-col items-center justify-center gap-3 px-10 relative\" *ngIf=\"frm\" [formGroup]=\"frm\">\r\n        <ion-text class=\"h-24 text-5xl\"> Login </ion-text>\r\n\r\n        <ion-card class=\"w-full backdrop-blur-xl\">\r\n          <ion-card-content>\r\n            <ion-item lines=\"none\" label=\"Senha\" labelPlacement=\"stacked\" class=\"rounded-2xl my-3 w-full\">\r\n              <ion-icon name=\"person\" slot=\"start\"></ion-icon>\r\n              <ion-input placeholder=\"Usu\u00E1rio / User\" formControlName=\"apelido\"></ion-input>\r\n            </ion-item>\r\n          </ion-card-content>\r\n        </ion-card>\r\n\r\n        <ion-card class=\"w-full backdrop-blur-xl\"> \r\n          <ion-card-content>\r\n            <ion-item lines=\"none\" class=\"rounded-2xl my-3 w-full\">\r\n              <ion-icon name=\"lock-closed\" slot=\"start\"></ion-icon>\r\n              <ion-input type=\"password\" formControlName=\"senha\" placeholder=\"Senha / Password\">\r\n                <ion-input-password-toggle slot=\"end\"></ion-input-password-toggle>\r\n              </ion-input>\r\n            </ion-item>\r\n          </ion-card-content>\r\n        </ion-card>\r\n\r\n        <div class=\"flex w-full\">\r\n          <ion-button class=\"transition-all rounded-2xl shadow-xl default-transition w-full\" expand=\"block\" (click)=\"Login()\" [disabled]=\"loading\">\r\n            <ion-spinner class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0': !loading, 'mr-2' : loading}\" slot=\"start\"></ion-spinner>\r\n            <ion-icon    class=\"default-transition\" [ngClass]=\"{'-translate-x-12 opacity-0 size-0':  loading}\" name=\"enter-outline\" slot=\"start\" ></ion-icon>\r\n            <span class=\"default-transition\"> Login </span>\r\n          </ion-button>\r\n\r\n          <!-- <ion-button class=\"shrink-0 aspect-square ml-3\" color=\"dark\" hidden>\r\n            <svg class=\"size-8\" slot=\"icon-only\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 32 32\" width=\"64\" height=\"64\"><defs><path id=\"A\" d=\"M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z\"/></defs><clipPath id=\"B\"><use xlink:href=\"#A\"/></clipPath><g transform=\"matrix(.727273 0 0 .727273 -.954545 -1.45455)\"><path d=\"M0 37V11l17 13z\" clip-path=\"url(#B)\" fill=\"#fbbc05\"/><path d=\"M0 11l17 13 7-6.1L48 14V0H0z\" clip-path=\"url(#B)\" fill=\"#ea4335\"/><path d=\"M0 37l30-23 7.9 1L48 0v48H0z\" clip-path=\"url(#B)\" fill=\"#34a853\"/><path d=\"M48 48L17 24l-4-3 35-10z\" clip-path=\"url(#B)\" fill=\"#4285f4\"/></g></svg>\r\n          </ion-button> -->\r\n        </div>\r\n\r\n        <div class=\"w-full\">\r\n          <ng-content select=\"[slot=end]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["ion-card{margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:1rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);background:color-mix(in srgb,var(--ion-color-light) 15%,transparent 93%);border-bottom-color:var(--ion-color-medium);border-right-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-top-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-left-color:color-mix(in srgb,var(--ion-color-medium) 30%,transparent 70%);border-width:1px 1px 2px 1px}ion-card ion-card-content{padding:0}ion-card:hover{background:color-mix(in srgb,var(--ion-color-dark) 15%,transparent 93%)}ion-card.submitted.invalid{border-color:color-mix(in srgb,var(--ion-color-danger) 75%,transparent 25%)!important}ion-card ion-card-content{width:100%;height:100%;background-color:transparent;padding:0}ion-item{--background: transparent;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i3.IonInputPasswordToggle, selector: "ion-input-password-toggle", inputs: ["color", "hideIcon", "mode", "showIcon"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultLoginComponent, decorators: [{
             type: Component,
@@ -11127,6 +11288,27 @@ var Theme;
     Theme[Theme["Dark"] = 2] = "Dark";
 })(Theme || (Theme = {}));
 
+class SionCardComponent {
+    constructor() {
+        this.background = 'bg-light';
+        this.backdrop = 'bg-primary/30';
+        this.justify = 'justify-center';
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SionCardComponent, isStandalone: true, selector: "sion-card", inputs: { background: "background", backdrop: "backdrop", justify: "justify" }, ngImport: i0, template: "<ion-card class=\"m-0\">\r\n  <ion-card-content class=\"size-full p-0\">\r\n    <div class=\"size-full {{backdrop}} flex flex-col overflow-hidden\">\r\n      <div class=\"flex items-center {{justify}} p-2 min-h-8\">\r\n        <ng-content select=\"[slot=header]\"></ng-content>\r\n      </div>\r\n      <div class=\"{{background}} rounded-t-2xl\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </ion-card-content>\r\n</ion-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SionCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sion-card', standalone: true, imports: [CommonModule, IonicModule], template: "<ion-card class=\"m-0\">\r\n  <ion-card-content class=\"size-full p-0\">\r\n    <div class=\"size-full {{backdrop}} flex flex-col overflow-hidden\">\r\n      <div class=\"flex items-center {{justify}} p-2 min-h-8\">\r\n        <ng-content select=\"[slot=header]\"></ng-content>\r\n      </div>\r\n      <div class=\"{{background}} rounded-t-2xl\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </ion-card-content>\r\n</ion-card>" }]
+        }], ctorParameters: () => [], propDecorators: { background: [{
+                type: Input
+            }], backdrop: [{
+                type: Input
+            }], justify: [{
+                type: Input
+            }] } });
+
 class StepComponent {
     constructor() {
         this.label = "Label";
@@ -11167,7 +11349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class StepperComponent extends CustomInput {
-    focus(event) {
+    setFocus(event) {
         // throw new Error('Method not implemented.');
     }
     constructor() { super(); }
@@ -11187,11 +11369,11 @@ class StepperComponent extends CustomInput {
         this.propagateChange(obj);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepperComponent, selector: "stepper", providers: InputProviderFactory.GetProviders(StepperComponent), queries: [{ propertyName: "lstSteps", predicate: StepComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex w-full justify-evenly\">\r\n    <ng-content selector=\"step\" class=\"grow\"></ng-content>\r\n</div>", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepperComponent, selector: "stepper", providers: InputProviderFactory.GetProviders(StepperComponent), queries: [{ propertyName: "lstSteps", predicate: StepComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex w-full justify-evenly\">\r\n    <ng-content select=\"step\" class=\"grow\"></ng-content>\r\n</div>", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stepper', providers: InputProviderFactory.GetProviders(StepperComponent), template: "<div class=\"flex w-full justify-evenly\">\r\n    <ng-content selector=\"step\" class=\"grow\"></ng-content>\r\n</div>" }]
+            args: [{ selector: 'stepper', providers: InputProviderFactory.GetProviders(StepperComponent), template: "<div class=\"flex w-full justify-evenly\">\r\n    <ng-content select=\"step\" class=\"grow\"></ng-content>\r\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { lstSteps: [{
                 type: ContentChildren,
                 args: [StepComponent]
@@ -11524,5 +11706,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractList, AbstractView, ApiUrlProviderService, AuthGuard, AuthService, BindLabelFactory, BindValueFactory, BoolProperty, CarouselComponent, CarouselImageComponent, CarouselItemComponent, CarouselModule, Comparison, ComparisonOperator, ComparisonOperatorString, ComparisonValueType, CompileFilters, CompileLstTableField, ContentBlockComponent, ControlError, DateProperty, DateTimeProperty, DecimalProperty, DefaultDrawerEndComponent, DefaultListComponent, DefaultLoginComponent, DefaultModule, DefaultPage, DefaultPageConfiguration, DefaultPageImage, DefaultPaginationComponent, DefaultRoutingFactory, DefaultTableComponent, DefaultViewComponent, Download, DownloadButtonComponent, DragDropFileDirective, DragDropFileModule, DragDropOverlayComponent, DrawerComponent, DrawerGroupComponent, EnumProperty, Environment, EnvironmentInjectionToken, EnvironmentService, ErrorInterceptor, FilterComponent, Forbidden403Component, FormValidators, GenericService, HeaderListComponent, HeaderViewComponent, HttpService, HttpServiceAtivo, ICarouselItem, INT_MAX, ImageComponent, ImplicitProperty, InfiniteScroll, InfiniteScrollConfiguration, InfoPopoverComponent, InputBoolComponent, InputBoolConfiguration, InputBoolType, InputCepComponent, InputColorComponent, InputCpfCnpjComponent, InputCpfCnpjConfiguration, InputCurrencyConfiguration, InputDateComponent, InputDateConfiguration, InputDecimalComponent, InputDecimalConfiguration, InputFileComponent, InputFileConfiguration, InputIconComponent, InputNumberConfiguration, InputPercentageConfiguration, InputProviderFactory, InputSelectComponent, InputSelectConfiguration, InputSelectDataLoader, InputStringComponent, InputStringConfiguration, InputStringType, InputTelefoneCelularConfiguration, InputTelefoneComponent, InputTextareaComponent, InputType, InputsDefaultConfigurations, InputsModule, IntProperty, List, LoadingComponent, LoginAdminComponent, LongProperty, MainContentComponent, Menu, NgVarDirective, OptionTemplateContext, RouteCacheService, RouteData, RouteProviderService, SIonLabelTemplateDirective, SIonOptionTemplateDirective, SIonPlaceholderTemplateDirective, SIonPopoverComponent, SIonPopoverModule, SapphireIonFrameworkModule, Search, SecurePipe, StepComponent, StepperComponent, StepperModule, StorageService, StringProperty, TabComponent, TableField, TableFieldFormBuilder, TabsComponent, TabsModule, TelefoneCelular, TextTooltipComponent, ThFilterComponent, TimeProperty, Timeout, TokenInterceptor, TooltipComponent, UsuarioService, Utils, UtilsService, View, ViewFiltros, ViewRetorno, idPreloaderConfiguration, lstImage, lstImageTypes };
+export { AbstractList, AbstractView, ApiUrlProviderService, AuthGuard, AuthService, BindLabelFactory, BindValueFactory, BoolProperty, CarouselComponent, CarouselImageComponent, CarouselItemComponent, CarouselModule, Comparison, ComparisonOperator, ComparisonOperatorString, ComparisonValueType, CompileFilters, CompileLstTableField, ContentBlockComponent, ControlError, DateProperty, DateTimeProperty, DecimalProperty, DefaultDrawerEndComponent, DefaultListComponent, DefaultLoginComponent, DefaultModule, DefaultPage, DefaultPageConfiguration, DefaultPageImage, DefaultPaginationComponent, DefaultRoutingFactory, DefaultTableComponent, DefaultViewComponent, Download, DownloadButtonComponent, DragDropFileDirective, DragDropFileModule, DragDropOverlayComponent, DrawerComponent, DrawerGroupComponent, EnumProperty, Environment, EnvironmentInjectionToken, EnvironmentService, ErrorInterceptor, FilterComponent, Forbidden403Component, FormValidators, FormatCep, FormatCpfCnpj, FormatTelefoneCelular, GenericService, HeaderListComponent, HeaderViewComponent, HttpService, HttpServiceAtivo, ICarouselItem, INT_MAX, ImageComponent, ImplicitProperty, InfiniteScroll, InfiniteScrollConfiguration, InfoPopoverComponent, InputBoolComponent, InputBoolConfiguration, InputBoolType, InputCepComponent, InputColorComponent, InputCpfCnpjComponent, InputCpfCnpjConfiguration, InputCurrencyConfiguration, InputDateComponent, InputDateConfiguration, InputDecimalComponent, InputDecimalConfiguration, InputFileComponent, InputFileConfiguration, InputIconComponent, InputNumberConfiguration, InputPercentageConfiguration, InputProviderFactory, InputSelectComponent, InputSelectConfiguration, InputSelectDataLoader, InputStringComponent, InputStringConfiguration, InputStringType, InputTelefoneCelularConfiguration, InputTelefoneComponent, InputTextareaComponent, InputType, InputsDefaultConfigurations, InputsModule, IntProperty, List, LoadingComponent, LoginAdminComponent, LongProperty, MainContentComponent, Menu, NgVarDirective, RouteCacheService, RouteData, RouteProviderService, SIonLabelTemplateDirective, SIonOptionTemplateDirective, SIonPlaceholderTemplateDirective, SIonPopoverComponent, SIonPopoverModule, SapphireIonFrameworkModule, Search, SecurePipe, SionCardComponent, StepComponent, StepperComponent, StepperModule, StorageService, StringProperty, TabComponent, TableField, TableFieldFormBuilder, TabsComponent, TabsModule, TelefoneCelular, TextTooltipComponent, ThFilterComponent, TimeProperty, Timeout, TokenInterceptor, TooltipComponent, UsuarioService, Utils, UtilsService, View, ViewFiltros, ViewRetorno, idPreloaderConfiguration, lstImage, lstImageTypes };
 //# sourceMappingURL=sapphire-ion-framework.mjs.map