@dev-tcloud/tcloud-ui 6.0.7 → 6.1.0

package/fesm2022/dev-tcloud-tcloud-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, Pipe, InjectionToken, Optional, Inject, ViewEncapsulation, input, effect, Directive, HostListener, NgModule, makeEnvironmentProviders, computed, output, signal, inject, ApplicationRef, model, viewChild, ChangeDetectionStrategy, ContentChildren } from '@angular/core';
+import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, InjectionToken, Optional, Inject, input, effect, Directive, Pipe, ViewEncapsulation, HostListener, NgModule, makeEnvironmentProviders, computed, output, signal, inject, ApplicationRef, model, viewChild, ChangeDetectionStrategy, ContentChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
 import { Subject, Subscription, debounceTime, distinctUntilChanged, map, BehaviorSubject } from 'rxjs';
@@ -377,6 +377,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Token de injeção para a configuração do TCloud UI
+ */
+const TCLOUD_UI_CONFIG = new InjectionToken('TCLOUD_UI_CONFIG');
+/**
+ * Token de injeção para o serviço de usuário customizado
+ */
+const TCLOUD_UI_USER_SERVICE = new InjectionToken('TCLOUD_UI_USER_SERVICE');
+/**
+ * Token de injeção para o serviço de tema customizado
+ */
+const TCLOUD_UI_LAYOUT_SERVICE = new InjectionToken('TCLOUD_UI_LAYOUT_SERVICE');
+/**
+ * Token de injeção para o serviço de viewport customizado
+ */
+const TCLOUD_UI_VIEWPORT_SERVICE = new InjectionToken('TCLOUD_UI_VIEWPORT_SERVICE');
+
+class TCloudUiLayoutService {
+    constructor(_LayoutService) {
+        this._LayoutService = _LayoutService;
+        this.layoutService = {};
+        this.layoutService = this._LayoutService;
+    }
+    getCurrentLayout() {
+        // return 'modern';
+        try {
+            return this.layoutService?.getCurrentLayout();
+        }
+        catch (error) {
+            // console.warn('getCurrentLayout', error);
+        }
+        return 'classic';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, deps: [{ token: TCLOUD_UI_LAYOUT_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TCLOUD_UI_LAYOUT_SERVICE]
+                }] }] });
+
+class TCloudUiFormDirective {
+    constructor(_tCloudUiLayoutService, _el) {
+        this._tCloudUiLayoutService = _tCloudUiLayoutService;
+        this._el = _el;
+        this.fullWidth = input(false);
+        effect(() => {
+            this.setClasses();
+        });
+    }
+    layout() {
+        return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
+    }
+    setClasses() {
+        const layout = this.layout();
+        if (layout === 'classic') {
+            return;
+        }
+        const tokenList = this._el.nativeElement.classList;
+        tokenList.remove(...Array.from(tokenList).filter((c) => c === 'form-control'));
+        tokenList.remove(...Array.from(tokenList).filter((c) => c === 'tc-form-control'));
+        if (layout === 'modern') {
+            this._el.nativeElement.classList.add('tc-rev-input-control');
+            this.fullWidth() ? this._el.nativeElement.classList.add('tc-rev-input-control--full-width') : null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFormDirective, deps: [{ token: TCloudUiLayoutService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TCloudUiFormDirective, isStandalone: true, selector: "[tcloudForm]", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tcloudForm]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: i0.ElementRef }] });
+
 const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => TCloudUiDataListComponent),
@@ -648,14 +732,14 @@ class TCloudUiDataListComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TCloudUiDataListComponent, isStandalone: true, selector: "tcloud-ui-data-list", inputs: { placeholder: "placeholder", disabled: "disabled", loading: "loading", showInput: "showInput", search: "search", listItems: "listItems", open: "open", border: "border", ngModel: "ngModel" }, outputs: { onInputChange: "onInputChange", onChange: "onChange", onOpened: "onOpened", onClosed: "onClosed", ngModelChange: "ngModelChange" }, providers: [
             DataListService,
             CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7
-        ], ngImport: i0, template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tcloud-ui-data-list tc-dropdown\" [class.disabled]=\"disabled || loading\">\n  <div *ngIf=\"loading\" class=\"loading-area\">\n    <i class=\"fas fa-spinner fa-spin\"></i>\n  </div>\n  <!-- [attr.data-bs-toggle]=\"'dropdown'\"  -->\n  <button \n    #_option\n    [class.input-hidden]=\"!showInput\"\n    [class.in-border]=\"border\"\n    [class.loading-box]=\"loading\"\n    [disabled]=\"disabled || loading\"\n    class=\"dropdown-toggle button-select no-margin-bottom area-text\" \n    type=\"button\" \n    id=\"{{ id }}\" \n    \n    [attr.aria-haspopup]=\"'true'\" \n    [attr.aria-expanded]=\"'false'\" \n    (click)=\"toOpen();toInput(_option)\" >\n\n    <i class=\"tc-placeholder area-text\" *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\n    {{ selected_description }}\n    <span><i class=\"fas fa-angle-down\"></i></span>\n  </button>\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\n\n    <div class=\"line-search\" *ngIf=\"search\">\n      <table class=\"box-search\">\n        <tr>\n\n          <td class=\"area-input\">\n            <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \n          </td>\n\n          <td class=\"area-icon\">\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n          </td>\n          \n        </tr>\n      </table>\n    </div>\n    \n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\n      <ng-content></ng-content>  \n      <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n        <ng-container *ngFor=\"let item of listItems\">\n          <tcloud-ui-data-list-option [value]=\"item.value\" [disabled]=\"item?.disabled\" >{{ item?.description }}</tcloud-ui-data-list-option>\n          </ng-container>\n      </ng-container>    \n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"formulario\">\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\n  </form>\n</div>\n", styles: [".dropdown-toggle:after{display:none!important}i.tc-placeholder{font-style:italic;color:#999;text-transform:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666;padding-right:30px}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: ["disabled", "value"], outputs: ["selected"] }] }); }
+        ], ngImport: i0, template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tcloud-ui-data-list tc-dropdown\" [class.disabled]=\"disabled || loading\">\n  <div *ngIf=\"loading\" class=\"loading-area\">\n    <i class=\"fas fa-spinner fa-spin\"></i>\n  </div>\n  <!-- [attr.data-bs-toggle]=\"'dropdown'\"  -->\n  <button \n    tcloudForm\n    #_option\n    [class.input-hidden]=\"!showInput\"\n    [class.in-border]=\"border\"\n    [class.loading-box]=\"loading\"\n    [disabled]=\"disabled || loading\"\n    class=\"dropdown-toggle button-select no-margin-bottom area-text\" \n    type=\"button\" \n    id=\"{{ id }}\" \n    \n    [attr.aria-haspopup]=\"'true'\" \n    [attr.aria-expanded]=\"'false'\" \n    (click)=\"toOpen();toInput(_option)\" >\n\n    <i class=\"tc-placeholder area-text\" *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\n    {{ selected_description }}\n    <span><i class=\"fas fa-angle-down\"></i></span>\n  </button>\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\n\n    <div class=\"line-search\" *ngIf=\"search\">\n      <table class=\"box-search\">\n        <tr>\n\n          <td class=\"area-input\">\n            <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \n          </td>\n\n          <td class=\"area-icon\">\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n          </td>\n          \n        </tr>\n      </table>\n    </div>\n    \n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\n      <ng-content></ng-content>  \n      <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n        <ng-container *ngFor=\"let item of listItems\">\n          <tcloud-ui-data-list-option [value]=\"item.value\" [disabled]=\"item?.disabled\" >{{ item?.description }}</tcloud-ui-data-list-option>\n          </ng-container>\n      </ng-container>    \n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"formulario\">\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\n  </form>\n</div>\n", styles: [".dropdown-toggle:after{display:none!important}i.tc-placeholder{font-style:italic;color:#999;text-transform:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666;padding-right:30px}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TCloudUiDataListOptionComponent, selector: "tcloud-ui-data-list-option", inputs: ["disabled", "value"], outputs: ["selected"] }, { kind: "directive", type: TCloudUiFormDirective, selector: "[tcloudForm]", inputs: ["fullWidth"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiDataListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tcloud-ui-data-list', providers: [
                         DataListService,
                         CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7
-                    ], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListOptionComponent], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tcloud-ui-data-list tc-dropdown\" [class.disabled]=\"disabled || loading\">\n  <div *ngIf=\"loading\" class=\"loading-area\">\n    <i class=\"fas fa-spinner fa-spin\"></i>\n  </div>\n  <!-- [attr.data-bs-toggle]=\"'dropdown'\"  -->\n  <button \n    #_option\n    [class.input-hidden]=\"!showInput\"\n    [class.in-border]=\"border\"\n    [class.loading-box]=\"loading\"\n    [disabled]=\"disabled || loading\"\n    class=\"dropdown-toggle button-select no-margin-bottom area-text\" \n    type=\"button\" \n    id=\"{{ id }}\" \n    \n    [attr.aria-haspopup]=\"'true'\" \n    [attr.aria-expanded]=\"'false'\" \n    (click)=\"toOpen();toInput(_option)\" >\n\n    <i class=\"tc-placeholder area-text\" *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\n    {{ selected_description }}\n    <span><i class=\"fas fa-angle-down\"></i></span>\n  </button>\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\n\n    <div class=\"line-search\" *ngIf=\"search\">\n      <table class=\"box-search\">\n        <tr>\n\n          <td class=\"area-input\">\n            <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \n          </td>\n\n          <td class=\"area-icon\">\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n          </td>\n          \n        </tr>\n      </table>\n    </div>\n    \n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\n      <ng-content></ng-content>  \n      <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n        <ng-container *ngFor=\"let item of listItems\">\n          <tcloud-ui-data-list-option [value]=\"item.value\" [disabled]=\"item?.disabled\" >{{ item?.description }}</tcloud-ui-data-list-option>\n          </ng-container>\n      </ng-container>    \n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"formulario\">\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\n  </form>\n</div>\n", styles: [".dropdown-toggle:after{display:none!important}i.tc-placeholder{font-style:italic;color:#999;text-transform:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666;padding-right:30px}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!important}\n"] }]
+                    ], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListOptionComponent, TCloudUiFormDirective], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tcloud-ui-data-list tc-dropdown\" [class.disabled]=\"disabled || loading\">\n  <div *ngIf=\"loading\" class=\"loading-area\">\n    <i class=\"fas fa-spinner fa-spin\"></i>\n  </div>\n  <!-- [attr.data-bs-toggle]=\"'dropdown'\"  -->\n  <button \n    tcloudForm\n    #_option\n    [class.input-hidden]=\"!showInput\"\n    [class.in-border]=\"border\"\n    [class.loading-box]=\"loading\"\n    [disabled]=\"disabled || loading\"\n    class=\"dropdown-toggle button-select no-margin-bottom area-text\" \n    type=\"button\" \n    id=\"{{ id }}\" \n    \n    [attr.aria-haspopup]=\"'true'\" \n    [attr.aria-expanded]=\"'false'\" \n    (click)=\"toOpen();toInput(_option)\" >\n\n    <i class=\"tc-placeholder area-text\" *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\n    {{ selected_description }}\n    <span><i class=\"fas fa-angle-down\"></i></span>\n  </button>\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\n\n    <div class=\"line-search\" *ngIf=\"search\">\n      <table class=\"box-search\">\n        <tr>\n\n          <td class=\"area-input\">\n            <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \n          </td>\n\n          <td class=\"area-icon\">\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n          </td>\n          \n        </tr>\n      </table>\n    </div>\n    \n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\n      <ng-content></ng-content>  \n      <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n        <ng-container *ngFor=\"let item of listItems\">\n          <tcloud-ui-data-list-option [value]=\"item.value\" [disabled]=\"item?.disabled\" >{{ item?.description }}</tcloud-ui-data-list-option>\n          </ng-container>\n      </ng-container>    \n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"formulario\">\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\n  </form>\n</div>\n", styles: [".dropdown-toggle:after{display:none!important}i.tc-placeholder{font-style:italic;color:#999;text-transform:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666;padding-right:30px}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: DataListService }, { type: i2.FormBuilder }], propDecorators: { placeholder: [{
                 type: Input
             }], disabled: [{
@@ -1106,54 +1190,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 }]
         }] });
 
-/**
- * Token de injeção para a configuração do TCloud UI
- */
-const TCLOUD_UI_CONFIG = new InjectionToken('TCLOUD_UI_CONFIG');
-/**
- * Token de injeção para o serviço de usuário customizado
- */
-const TCLOUD_UI_USER_SERVICE = new InjectionToken('TCLOUD_UI_USER_SERVICE');
-/**
- * Token de injeção para o serviço de tema customizado
- */
-const TCLOUD_UI_LAYOUT_SERVICE = new InjectionToken('TCLOUD_UI_LAYOUT_SERVICE');
-/**
- * Token de injeção para o serviço de viewport customizado
- */
-const TCLOUD_UI_VIEWPORT_SERVICE = new InjectionToken('TCLOUD_UI_VIEWPORT_SERVICE');
-
-class TCloudUiLayoutService {
-    constructor(_LayoutService) {
-        this._LayoutService = _LayoutService;
-        this.layoutService = {};
-        this.layoutService = this._LayoutService;
-    }
-    getCurrentLayout() {
-        //return 'modern';
-        try {
-            return this.layoutService?.getCurrentLayout();
-        }
-        catch (error) {
-            // console.warn('getCurrentLayout', error);
-        }
-        return 'classic';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, deps: [{ token: TCLOUD_UI_LAYOUT_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [TCLOUD_UI_LAYOUT_SERVICE]
-                }] }] });
-
 var translation = {
     ptBR: {
         days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
@@ -2135,42 +2171,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }] } });
 
-class TCloudUiFormDirective {
-    constructor(_tCloudUiLayoutService, _el) {
-        this._tCloudUiLayoutService = _tCloudUiLayoutService;
-        this._el = _el;
-        this.fullWidth = input(false);
-        effect(() => {
-            this.setClasses();
-        });
-    }
-    layout() {
-        return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
-    }
-    setClasses() {
-        const layout = this.layout();
-        if (layout === 'classic') {
-            return;
-        }
-        const tokenList = this._el.nativeElement.classList;
-        tokenList.remove(...Array.from(tokenList).filter((c) => c === 'form-control'));
-        tokenList.remove(...Array.from(tokenList).filter((c) => c === 'tc-form-control'));
-        if (layout === 'modern') {
-            this._el.nativeElement.classList.add('tc-rev-input-control');
-            this.fullWidth() ? this._el.nativeElement.classList.add('tc-rev-input-control--full-width') : null;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFormDirective, deps: [{ token: TCloudUiLayoutService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TCloudUiFormDirective, isStandalone: true, selector: "[tcloudForm]", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFormDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tcloudForm]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: i0.ElementRef }] });
-
 class TCloudUiFiltersComponent {
     set data(data) {
         // this._data = JSON.parse(JSON.stringify(data));
@@ -2702,11 +2702,11 @@ class TCloudUiFiltersComponent {
         this.result.emit(data);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFiltersComponent, deps: [{ token: i1.DatePipe }, { token: TCloudUiLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TCloudUiFiltersComponent, isStandalone: true, selector: "tcloud-ui-filters", inputs: { border: "border", data: "data", filters: "filters", submitText: "submitText", btnSubmitClass: "btnSubmitClass", useOnChangeSubmit: "useOnChangeSubmit", useButtonSubmit: "useButtonSubmit", useNormalizeCaseSensitive: "useNormalizeCaseSensitive", useRangeDate: "useRangeDate", useFilterAccept: "useFilterAccept" }, outputs: { result: "result", onFilter: "onFilter", onChange: "onChange", onSubmit: "onSubmit" }, providers: [DatePipe], viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"show_filters\" class=\"area-filter {{layout}}\" [class.tc-rev-filters]=\"layout === 'modern'\" [class.tcloud-ui-filters]=\"layout === 'classic'\" [class.no-border]=\"!border\">\n  <ng-container *ngFor=\"let item of filters; let i = index\">\n\n    <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n\n      <ng-container *ngIf=\"item.type === 'date'\">\n\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            @if (layout === 'classic') {\n              <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n              {{ item.description }}\n            } @else {\n              {{ item.description }}:\n            }\n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <input\n              tcloudForm\n              #_input\n              type=\"date\"\n              name=\"input_{{i+1}}\"\n              class=\"tc-form-control\"\n              [(ngModel)]=\"item.value\"\n              (ngModelChange)=\"searchIn(item, _input)\">\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'datetime'\">\n\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n            {{ item.description }}\n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <input\n              tcloudForm\n              #_input\n              type=\"datetime-local\"\n              name=\"input_{{i+1}}\"\n              class=\"tc-form-control\"\n              [(ngModel)]=\"item.value\"\n              (ngModelChange)=\"searchIn(item, _input)\">\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'date-local'\">\n\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n            {{ item.description }}\n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <tcloud-ui-datepicker\n              #_input\n              name=\"input_{{i+1}}\"\n              [modeInput]=\"true\"\n              [(ngModel)]=\"item.value\"\n              (ngModelChange)=\"searchIn(item, _input)\">\n            </tcloud-ui-datepicker>\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'datetime-local'\">\n\n          <ng-container *ngIf=\"(item.id === 'start' || item.id === 'stop') && useRangeDate\">\n            <!-- PERIOD RANGE DATE -->\n            <ng-container *ngIf=\"item.id === 'start'\">\n              <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''\">\n                <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(_range_date && _range_date.result && _range_date.result.start && _range_date.result.stop )\" class=\"fas fa-filter icon-filter\"></i>&nbsp;</div>\n                <tcloud-ui-range-date\n                  #_range_date ngModel name=\"input_{{i+1}}\"\n                  [defaultValuePeriodStartStop]=\"item.defaultValuePeriodStartStop\"\n                  [descriptionStart]=\"descriptionStart\"\n                  [descriptionStop]=\"descriptionStop\"\n                  required\n                  (onChange)=\"searchInRange(_range_date); searchIn(item, _range_date)\">\n                </tcloud-ui-range-date>\n              </div>\n            </ng-container>\n            <input *ngIf=\"item.id === 'start'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"start_value\">\n            <input *ngIf=\"item.id === 'stop'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"stop_value\">\n          </ng-container>\n\n          <ng-container *ngIf=\"!item.id || !useRangeDate\">\n\n            <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n              <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n              <div class=\"box-type-{{item.type}}\">\n                <tcloud-ui-datepicker-time\n                  #_input\n                  [(ngModel)]=\"item.value\"\n                  name=\"input_{{i+1}}\"\n                  [useOptionsDateTime]=\"(item && item.useOptionsDateTime) ? true : false\"\n                  (eventChange)=\"searchIn(item, _input)\" >\n                </tcloud-ui-datepicker-time>\n                <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n                  <i class=\"fas fa-times\"></i>\n                </button>\n              </div>\n            </div>\n\n          </ng-container>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local' && item.type !== 'datetime' && item.type !== 'date'\">\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n          <div class=\"box-type-{{item.type}}\">\n            <input\n              tcloudForm\n              #_input\n              [(ngModel)]=\"item.value\"\n              placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n              name=\"input_{{i+1}}\"\n              type=\"{{ (item.type === 'number') ? 'number' : (item.type) ? item.type : 'text' }}\"\n              class=\"tc-form-control\"\n              (keyup)=\"searchIn(item, $event)\">\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            <i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n            {{ item.description }}\n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <select\n              tcloudForm\n              #_input\n              [(ngModel)]=\"item.value\"\n              name=\"input_{{i+1}}\"\n              class=\"tc-form-control\"\n              (change)=\"searchIn(item, $event)\">\n              <ng-container *ngIf=\"typeof item?.selectFirstOptionHidden === 'undefined' || item?.selectFirstOptionHidden\">\n                <option [ngValue]=\"\"></option>\n              </ng-container>              \n              <ng-container *ngFor=\"let v of item.data\">\n                <option [value]=\"v.value\">{{ v.description }}</option>\n              </ng-container>\n            </select>\n          </div>\n        </div>\n      </ng-container>\n\n    </ng-container>\n\n\n    <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n\n      <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n        <div class=\"m-description tc-title-ellipsis\" title=\"{{ item.description }}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n        <div class=\"area-input-checkbox\">\n          <div class=\"tc-form-control\" tcloudForm>\n            <label>\n              <span>{{ item.placeholder }}</span>\n              <input\n                tcloudForm\n                #_input\n                placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                name=\"input_{{i+1}}\"\n                type=\"checkbox\"\n                (change)=\"searchIn(item, _input.checked)\">\n            </label>\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n\n\n  </ng-container>\n\n  <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n    <button type=\"button\" class=\"tc-btn {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\n  </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n<!-- <pre> {{ data | json }} </pre> -->\n\n<!-- <p>FILTERS</p><pre> {{ filters | json }}</pre> -->\n\n<!--\n    <pre>start_stop: {{ start_stop }}</pre>\n    <pre>start_stop_width: {{ start_stop_width }}</pre>\n    <pre>start_stop_und: {{ start_stop_und }}</pre>\n-->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--tc-primary)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.area-input-checkbox div.tc-form-control{height:40px}.m-description{margin-bottom:3px}input{color:#535353}input[type=text],input[type=number],select{height:40px!important}.type-hidden{display:none;width:0px!important}.box-type-global_vars{display:none!important;width:0px!important}.tc-title-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-border{border:none!important}.tc-rev-filters select,.tc-rev-filters input[type=text],.tc-rev-filters input[type=number],.tc-rev-filters input[type=email] input[type=password],.tc-rev-filters input[type=date]{background-color:#fff;width:100%!important}.tc-rev-filters input[type=checkbox]{position:inherit;cursor:pointer;margin:0!important}.tc-rev-filters .area-input-checkbox label span{position:relative;bottom:14px;left:-5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TCloudUiRangeDateComponent, selector: "tcloud-ui-range-date", inputs: ["defaultValuePeriodStartStop", "required", "descriptionStart", "descriptionStop"], outputs: ["onChange"] }, { kind: "component", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: ["multiple", "maxNumberOfDates", "daysOfWeekDisabled", "minDate", "maxDate", "datesDisabled", "modeInput", "useBorder", "childInputDateTime", "startViewInMinDate", "startViewInMaxDate", "disabled", "ngModel", "code"], outputs: ["onChange", "ngModelChange", "onCheckDate"] }, { kind: "component", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["ngModel", "minDate", "maxDate", "useOptionsDateTime"], outputs: ["ngModelChange", "onChange", "eventChange"] }, { kind: "directive", type: TCloudUiFormDirective, selector: "[tcloudForm]", inputs: ["fullWidth"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TCloudUiFiltersComponent, isStandalone: true, selector: "tcloud-ui-filters", inputs: { border: "border", data: "data", filters: "filters", submitText: "submitText", btnSubmitClass: "btnSubmitClass", useOnChangeSubmit: "useOnChangeSubmit", useButtonSubmit: "useButtonSubmit", useNormalizeCaseSensitive: "useNormalizeCaseSensitive", useRangeDate: "useRangeDate", useFilterAccept: "useFilterAccept" }, outputs: { result: "result", onFilter: "onFilter", onChange: "onChange", onSubmit: "onSubmit" }, providers: [DatePipe], viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"show_filters\" class=\"area-filter {{layout}}\" [class.tc-rev-filters]=\"layout === 'modern'\" [class.tcloud-ui-filters]=\"layout === 'classic'\" [class.no-border]=\"!border\">\n  <ng-container *ngFor=\"let item of filters; let i = index\">\n\n    <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n\n      <ng-container *ngIf=\"item.type === 'date'\">\n\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n            {{ item.description }}            \n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <input\n              tcloudForm\n              #_input\n              type=\"date\"\n              name=\"input_{{i+1}}\"\n              class=\"tc-form-control\"\n              [(ngModel)]=\"item.value\"\n              (ngModelChange)=\"searchIn(item, _input)\">\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'datetime'\">\n\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n            {{ item.description }}\n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <input\n              tcloudForm\n              #_input\n              type=\"datetime-local\"\n              name=\"input_{{i+1}}\"\n              class=\"tc-form-control\"\n              [(ngModel)]=\"item.value\"\n              (ngModelChange)=\"searchIn(item, _input)\">\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'date-local'\">\n\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n            {{ item.description }}\n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <tcloud-ui-datepicker\n              #_input\n              name=\"input_{{i+1}}\"\n              [modeInput]=\"true\"\n              [(ngModel)]=\"item.value\"\n              (ngModelChange)=\"searchIn(item, _input)\">\n            </tcloud-ui-datepicker>\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'datetime-local'\">\n\n          <ng-container *ngIf=\"(item.id === 'start' || item.id === 'stop') && useRangeDate\">\n            <!-- PERIOD RANGE DATE -->\n            <ng-container *ngIf=\"item.id === 'start'\">\n              <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''\">\n                <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(_range_date && _range_date.result && _range_date.result.start && _range_date.result.stop )\" class=\"fas fa-filter icon-filter\"></i>&nbsp;</div>\n                <tcloud-ui-range-date\n                  #_range_date ngModel name=\"input_{{i+1}}\"\n                  [defaultValuePeriodStartStop]=\"item.defaultValuePeriodStartStop\"\n                  [descriptionStart]=\"descriptionStart\"\n                  [descriptionStop]=\"descriptionStop\"\n                  required\n                  (onChange)=\"searchInRange(_range_date); searchIn(item, _range_date)\">\n                </tcloud-ui-range-date>\n              </div>\n            </ng-container>\n            <input *ngIf=\"item.id === 'start'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"start_value\">\n            <input *ngIf=\"item.id === 'stop'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"stop_value\">\n          </ng-container>\n\n          <ng-container *ngIf=\"!item.id || !useRangeDate\">\n\n            <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n              <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n              <div class=\"box-type-{{item.type}}\">\n                <tcloud-ui-datepicker-time\n                  #_input\n                  [(ngModel)]=\"item.value\"\n                  name=\"input_{{i+1}}\"\n                  [useOptionsDateTime]=\"(item && item.useOptionsDateTime) ? true : false\"\n                  (eventChange)=\"searchIn(item, _input)\" >\n                </tcloud-ui-datepicker-time>\n                <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n                  <i class=\"fas fa-times\"></i>\n                </button>\n              </div>\n            </div>\n\n          </ng-container>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local' && item.type !== 'datetime' && item.type !== 'date'\">\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n          <div class=\"box-type-{{item.type}}\">\n            <input\n              tcloudForm\n              #_input\n              [(ngModel)]=\"item.value\"\n              placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n              name=\"input_{{i+1}}\"\n              type=\"{{ (item.type === 'number') ? 'number' : (item.type) ? item.type : 'text' }}\"\n              class=\"tc-form-control\"\n              (keyup)=\"searchIn(item, $event)\">\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            <i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n            {{ item.description }}\n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <select\n              tcloudForm\n              #_input\n              [(ngModel)]=\"item.value\"\n              name=\"input_{{i+1}}\"\n              class=\"tc-form-control\"\n              (change)=\"searchIn(item, $event)\">\n              <ng-container *ngIf=\"typeof item?.selectFirstOptionHidden === 'undefined' || !item?.selectFirstOptionHidden\">\n                <option [ngValue]=\"\"></option>\n              </ng-container>              \n              <ng-container *ngFor=\"let v of item.data\">\n                <option [value]=\"v.value\">{{ v.description }}</option>\n              </ng-container>\n            </select>\n          </div>\n        </div>\n      </ng-container>\n\n    </ng-container>\n\n\n    <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n\n      <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n        <div class=\"m-description tc-title-ellipsis\" title=\"{{ item.description }}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n        <div class=\"area-input-checkbox\">\n          <div class=\"tc-form-control\" tcloudForm>\n            <label>\n              <span>{{ item.placeholder }}</span>\n              <input\n                tcloudForm\n                #_input\n                placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                name=\"input_{{i+1}}\"\n                type=\"checkbox\"\n                (change)=\"searchIn(item, _input.checked)\">\n            </label>\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n\n\n  </ng-container>\n\n  <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n    <button type=\"button\" class=\"tc-btn {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\n  </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n<!-- <pre> {{ data | json }} </pre> -->\n\n<!-- <p>FILTERS</p><pre> {{ filters | json }}</pre> -->\n\n<!--\n    <pre>start_stop: {{ start_stop }}</pre>\n    <pre>start_stop_width: {{ start_stop_width }}</pre>\n    <pre>start_stop_und: {{ start_stop_und }}</pre>\n-->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--tc-primary)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.area-input-checkbox div.tc-form-control{height:40px}.m-description{margin-bottom:3px}input{color:#535353}input[type=text],input[type=number],select{height:40px!important}.type-hidden{display:none;width:0px!important}.box-type-global_vars{display:none!important;width:0px!important}.tc-title-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-border{border:none!important}.tc-rev-filters select,.tc-rev-filters input[type=text],.tc-rev-filters input[type=number],.tc-rev-filters input[type=email] input[type=password],.tc-rev-filters input[type=date]{background-color:#fff;width:100%!important}.tc-rev-filters input[type=checkbox]{position:inherit;cursor:pointer;margin:0!important}.tc-rev-filters .area-input-checkbox label span{position:relative;bottom:14px;left:-5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TCloudUiRangeDateComponent, selector: "tcloud-ui-range-date", inputs: ["defaultValuePeriodStartStop", "required", "descriptionStart", "descriptionStop"], outputs: ["onChange"] }, { kind: "component", type: TCloudUiDatepickerComponent, selector: "tcloud-ui-datepicker", inputs: ["multiple", "maxNumberOfDates", "daysOfWeekDisabled", "minDate", "maxDate", "datesDisabled", "modeInput", "useBorder", "childInputDateTime", "startViewInMinDate", "startViewInMaxDate", "disabled", "ngModel", "code"], outputs: ["onChange", "ngModelChange", "onCheckDate"] }, { kind: "component", type: TCloudUiDatepickerTimeComponent, selector: "tcloud-ui-datepicker-time", inputs: ["ngModel", "minDate", "maxDate", "useOptionsDateTime"], outputs: ["ngModelChange", "onChange", "eventChange"] }, { kind: "directive", type: TCloudUiFormDirective, selector: "[tcloudForm]", inputs: ["fullWidth"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-filters', standalone: true, imports: [CommonModule, FormsModule, TCloudUiRangeDateComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiFormDirective], providers: [DatePipe], template: "<div *ngIf=\"show_filters\" class=\"area-filter {{layout}}\" [class.tc-rev-filters]=\"layout === 'modern'\" [class.tcloud-ui-filters]=\"layout === 'classic'\" [class.no-border]=\"!border\">\n  <ng-container *ngFor=\"let item of filters; let i = index\">\n\n    <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n\n      <ng-container *ngIf=\"item.type === 'date'\">\n\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            @if (layout === 'classic') {\n              <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n              {{ item.description }}\n            } @else {\n              {{ item.description }}:\n            }\n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <input\n              tcloudForm\n              #_input\n              type=\"date\"\n              name=\"input_{{i+1}}\"\n              class=\"tc-form-control\"\n              [(ngModel)]=\"item.value\"\n              (ngModelChange)=\"searchIn(item, _input)\">\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'datetime'\">\n\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n            {{ item.description }}\n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <input\n              tcloudForm\n              #_input\n              type=\"datetime-local\"\n              name=\"input_{{i+1}}\"\n              class=\"tc-form-control\"\n              [(ngModel)]=\"item.value\"\n              (ngModelChange)=\"searchIn(item, _input)\">\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'date-local'\">\n\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n            {{ item.description }}\n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <tcloud-ui-datepicker\n              #_input\n              name=\"input_{{i+1}}\"\n              [modeInput]=\"true\"\n              [(ngModel)]=\"item.value\"\n              (ngModelChange)=\"searchIn(item, _input)\">\n            </tcloud-ui-datepicker>\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'datetime-local'\">\n\n          <ng-container *ngIf=\"(item.id === 'start' || item.id === 'stop') && useRangeDate\">\n            <!-- PERIOD RANGE DATE -->\n            <ng-container *ngIf=\"item.id === 'start'\">\n              <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''\">\n                <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(_range_date && _range_date.result && _range_date.result.start && _range_date.result.stop )\" class=\"fas fa-filter icon-filter\"></i>&nbsp;</div>\n                <tcloud-ui-range-date\n                  #_range_date ngModel name=\"input_{{i+1}}\"\n                  [defaultValuePeriodStartStop]=\"item.defaultValuePeriodStartStop\"\n                  [descriptionStart]=\"descriptionStart\"\n                  [descriptionStop]=\"descriptionStop\"\n                  required\n                  (onChange)=\"searchInRange(_range_date); searchIn(item, _range_date)\">\n                </tcloud-ui-range-date>\n              </div>\n            </ng-container>\n            <input *ngIf=\"item.id === 'start'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"start_value\">\n            <input *ngIf=\"item.id === 'stop'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"stop_value\">\n          </ng-container>\n\n          <ng-container *ngIf=\"!item.id || !useRangeDate\">\n\n            <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n              <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n              <div class=\"box-type-{{item.type}}\">\n                <tcloud-ui-datepicker-time\n                  #_input\n                  [(ngModel)]=\"item.value\"\n                  name=\"input_{{i+1}}\"\n                  [useOptionsDateTime]=\"(item && item.useOptionsDateTime) ? true : false\"\n                  (eventChange)=\"searchIn(item, _input)\" >\n                </tcloud-ui-datepicker-time>\n                <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n                  <i class=\"fas fa-times\"></i>\n                </button>\n              </div>\n            </div>\n\n          </ng-container>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local' && item.type !== 'datetime' && item.type !== 'date'\">\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n          <div class=\"box-type-{{item.type}}\">\n            <input\n              tcloudForm\n              #_input\n              [(ngModel)]=\"item.value\"\n              placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n              name=\"input_{{i+1}}\"\n              type=\"{{ (item.type === 'number') ? 'number' : (item.type) ? item.type : 'text' }}\"\n              class=\"tc-form-control\"\n              (keyup)=\"searchIn(item, $event)\">\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            <i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n            {{ item.description }}\n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <select\n              tcloudForm\n              #_input\n              [(ngModel)]=\"item.value\"\n              name=\"input_{{i+1}}\"\n              class=\"tc-form-control\"\n              (change)=\"searchIn(item, $event)\">\n              <ng-container *ngIf=\"typeof item?.selectFirstOptionHidden === 'undefined' || item?.selectFirstOptionHidden\">\n                <option [ngValue]=\"\"></option>\n              </ng-container>              \n              <ng-container *ngFor=\"let v of item.data\">\n                <option [value]=\"v.value\">{{ v.description }}</option>\n              </ng-container>\n            </select>\n          </div>\n        </div>\n      </ng-container>\n\n    </ng-container>\n\n\n    <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n\n      <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n        <div class=\"m-description tc-title-ellipsis\" title=\"{{ item.description }}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n        <div class=\"area-input-checkbox\">\n          <div class=\"tc-form-control\" tcloudForm>\n            <label>\n              <span>{{ item.placeholder }}</span>\n              <input\n                tcloudForm\n                #_input\n                placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                name=\"input_{{i+1}}\"\n                type=\"checkbox\"\n                (change)=\"searchIn(item, _input.checked)\">\n            </label>\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n\n\n  </ng-container>\n\n  <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n    <button type=\"button\" class=\"tc-btn {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\n  </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n<!-- <pre> {{ data | json }} </pre> -->\n\n<!-- <p>FILTERS</p><pre> {{ filters | json }}</pre> -->\n\n<!--\n    <pre>start_stop: {{ start_stop }}</pre>\n    <pre>start_stop_width: {{ start_stop_width }}</pre>\n    <pre>start_stop_und: {{ start_stop_und }}</pre>\n-->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--tc-primary)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.area-input-checkbox div.tc-form-control{height:40px}.m-description{margin-bottom:3px}input{color:#535353}input[type=text],input[type=number],select{height:40px!important}.type-hidden{display:none;width:0px!important}.box-type-global_vars{display:none!important;width:0px!important}.tc-title-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-border{border:none!important}.tc-rev-filters select,.tc-rev-filters input[type=text],.tc-rev-filters input[type=number],.tc-rev-filters input[type=email] input[type=password],.tc-rev-filters input[type=date]{background-color:#fff;width:100%!important}.tc-rev-filters input[type=checkbox]{position:inherit;cursor:pointer;margin:0!important}.tc-rev-filters .area-input-checkbox label span{position:relative;bottom:14px;left:-5px}\n"] }]
+            args: [{ selector: 'tcloud-ui-filters', standalone: true, imports: [CommonModule, FormsModule, TCloudUiRangeDateComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiFormDirective], providers: [DatePipe], template: "<div *ngIf=\"show_filters\" class=\"area-filter {{layout}}\" [class.tc-rev-filters]=\"layout === 'modern'\" [class.tcloud-ui-filters]=\"layout === 'classic'\" [class.no-border]=\"!border\">\n  <ng-container *ngFor=\"let item of filters; let i = index\">\n\n    <ng-container *ngIf=\"!item.type || (item.type && item.type !== 'boolean')\">\n\n      <ng-container *ngIf=\"item.type === 'date'\">\n\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n            {{ item.description }}            \n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <input\n              tcloudForm\n              #_input\n              type=\"date\"\n              name=\"input_{{i+1}}\"\n              class=\"tc-form-control\"\n              [(ngModel)]=\"item.value\"\n              (ngModelChange)=\"searchIn(item, _input)\">\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'datetime'\">\n\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n            {{ item.description }}\n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <input\n              tcloudForm\n              #_input\n              type=\"datetime-local\"\n              name=\"input_{{i+1}}\"\n              class=\"tc-form-control\"\n              [(ngModel)]=\"item.value\"\n              (ngModelChange)=\"searchIn(item, _input)\">\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'date-local'\">\n\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            <i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n            {{ item.description }}\n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <tcloud-ui-datepicker\n              #_input\n              name=\"input_{{i+1}}\"\n              [modeInput]=\"true\"\n              [(ngModel)]=\"item.value\"\n              (ngModelChange)=\"searchIn(item, _input)\">\n            </tcloud-ui-datepicker>\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'datetime-local'\">\n\n          <ng-container *ngIf=\"(item.id === 'start' || item.id === 'stop') && useRangeDate\">\n            <!-- PERIOD RANGE DATE -->\n            <ng-container *ngIf=\"item.id === 'start'\">\n              <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''\">\n                <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(_range_date && _range_date.result && _range_date.result.start && _range_date.result.stop )\" class=\"fas fa-filter icon-filter\"></i>&nbsp;</div>\n                <tcloud-ui-range-date\n                  #_range_date ngModel name=\"input_{{i+1}}\"\n                  [defaultValuePeriodStartStop]=\"item.defaultValuePeriodStartStop\"\n                  [descriptionStart]=\"descriptionStart\"\n                  [descriptionStop]=\"descriptionStop\"\n                  required\n                  (onChange)=\"searchInRange(_range_date); searchIn(item, _range_date)\">\n                </tcloud-ui-range-date>\n              </div>\n            </ng-container>\n            <input *ngIf=\"item.id === 'start'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"start_value\">\n            <input *ngIf=\"item.id === 'stop'\" #_input name=\"input_{{i+1}}\" type=\"hidden\" [(ngModel)]=\"stop_value\">\n          </ng-container>\n\n          <ng-container *ngIf=\"!item.id || !useRangeDate\">\n\n            <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n              <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"(item.value !== undefined && item.value !== null && item.value !== '')\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n              <div class=\"box-type-{{item.type}}\">\n                <tcloud-ui-datepicker-time\n                  #_input\n                  [(ngModel)]=\"item.value\"\n                  name=\"input_{{i+1}}\"\n                  [useOptionsDateTime]=\"(item && item.useOptionsDateTime) ? true : false\"\n                  (eventChange)=\"searchIn(item, _input)\" >\n                </tcloud-ui-datepicker-time>\n                <button class=\"btn-clear-filter-text\" [class.to-hide]=\"!(item.value !== undefined && item.value !== null && item.value !== '')\" (click)=\"searchIn(item, null); item.searchText = undefined; item.value = ''\">\n                  <i class=\"fas fa-times\"></i>\n                </button>\n              </div>\n            </div>\n\n          </ng-container>\n\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local' && item.type !== 'datetime' && item.type !== 'date'\">\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n          <div class=\"box-type-{{item.type}}\">\n            <input\n              tcloudForm\n              #_input\n              [(ngModel)]=\"item.value\"\n              placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n              name=\"input_{{i+1}}\"\n              type=\"{{ (item.type === 'number') ? 'number' : (item.type) ? item.type : 'text' }}\"\n              class=\"tc-form-control\"\n              (keyup)=\"searchIn(item, $event)\">\n            <button class=\"btn-clear-filter-text\" [class.to-hide]=\"_input.value === ''\" (click)=\"searchIn(item, null); _input.value = ''\">\n              <i class=\"fas fa-times\"></i>\n            </button>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"item.type === 'select' && item.data && (item.data).length > 0\" >\n        <div class=\"box-filter-input type-{{item.type}} box-type-{{item.type}}\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n\n          <div class=\"m-description tc-title-ellipsis box-type-{{item.type}}\" title=\"{{ item.description }}\">\n            <i [class.to-active]=\"_input.value !== ''\" class=\"fas fa-filter icon-filter\"></i>&nbsp;\n            {{ item.description }}\n          </div>\n          <div class=\"box-type-{{item.type}}\">\n            <select\n              tcloudForm\n              #_input\n              [(ngModel)]=\"item.value\"\n              name=\"input_{{i+1}}\"\n              class=\"tc-form-control\"\n              (change)=\"searchIn(item, $event)\">\n              <ng-container *ngIf=\"typeof item?.selectFirstOptionHidden === 'undefined' || !item?.selectFirstOptionHidden\">\n                <option [ngValue]=\"\"></option>\n              </ng-container>              \n              <ng-container *ngFor=\"let v of item.data\">\n                <option [value]=\"v.value\">{{ v.description }}</option>\n              </ng-container>\n            </select>\n          </div>\n        </div>\n      </ng-container>\n\n    </ng-container>\n\n\n    <ng-container *ngIf=\"item.type && item.type === 'boolean'\">\n\n      <div class=\"box-filter-input\" [style]=\"(item.width !== '') ? 'width:'+item.width : ''\">\n        <div class=\"m-description tc-title-ellipsis\" title=\"{{ item.description }}\" title=\"{{ item.description }}\"><i [class.to-active]=\"_input.checked === true\" class=\"fas fa-filter icon-filter\"></i>&nbsp;{{ item.description }}</div>\n        <div class=\"area-input-checkbox\">\n          <div class=\"tc-form-control\" tcloudForm>\n            <label>\n              <span>{{ item.placeholder }}</span>\n              <input\n                tcloudForm\n                #_input\n                placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                name=\"input_{{i+1}}\"\n                type=\"checkbox\"\n                (change)=\"searchIn(item, _input.checked)\">\n            </label>\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n\n\n  </ng-container>\n\n  <div class=\"text-right mb-1 mr-1\" *ngIf=\"useButtonSubmit\">\n    <button type=\"button\" class=\"tc-btn {{ btnSubmitClass }}\" (click)=\"toSubmit()\" >{{ submitText }}</button>\n  </div>\n\n</div>\n\n<!-- <pre>{{ inputs | json }}</pre> -->\n<!-- <pre> {{ data | json }} </pre> -->\n\n<!-- <p>FILTERS</p><pre> {{ filters | json }}</pre> -->\n\n<!--\n    <pre>start_stop: {{ start_stop }}</pre>\n    <pre>start_stop_width: {{ start_stop_width }}</pre>\n    <pre>start_stop_und: {{ start_stop_und }}</pre>\n-->", styles: [".box-filter-input{display:inline-grid;padding:10px 5px;position:relative}.area-filter{border:1px solid #eeeeee;border-radius:5px;margin-bottom:5px}.btn-clear-filter-text{position:absolute;right:8px;top:38px;background-color:#fff;border:none;cursor:pointer;color:#aaa}.to-hide{display:none}.icon-filter{color:#ccc}.to-active{color:var(--tc-primary)}.area-input-checkbox label{cursor:pointer;margin-bottom:0;color:#9f9f9f}.area-input-checkbox div.tc-form-control{height:40px}.m-description{margin-bottom:3px}input{color:#535353}input[type=text],input[type=number],select{height:40px!important}.type-hidden{display:none;width:0px!important}.box-type-global_vars{display:none!important;width:0px!important}.tc-title-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-border{border:none!important}.tc-rev-filters select,.tc-rev-filters input[type=text],.tc-rev-filters input[type=number],.tc-rev-filters input[type=email] input[type=password],.tc-rev-filters input[type=date]{background-color:#fff;width:100%!important}.tc-rev-filters input[type=checkbox]{position:inherit;cursor:pointer;margin:0!important}.tc-rev-filters .area-input-checkbox label span{position:relative;bottom:14px;left:-5px}\n"] }]
         }], ctorParameters: () => [{ type: i1.DatePipe }, { type: TCloudUiLayoutService }], propDecorators: { _formulario: [{
                 type: ViewChild,
                 args: ['_formulario']
@@ -6670,7 +6670,7 @@ class TCloudUiDeviceUtilsService {
         this.renderer.setStyle(this.menuHost, 'z-index', '9999');
         this.renderer.setStyle(this.menuHost, 'opacity', '0');
         this.renderer.appendChild(document.body, this.menuHost);
-        // Impede scroll da página enquanto o dropdown está aberto
+        // Impede scroll da página externa enquanto o dropdown está aberto
         this.renderer.setStyle(document.body, 'overflow', 'hidden');
         this.renderer.setStyle(document.body, 'touch-action', 'none');
         this.embeddedView = menuTemplate.createEmbeddedView({});
@@ -6830,6 +6830,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }] } });
 
+class TcRevIconButtonDirective {
+    constructor(_el) {
+        this._el = _el;
+        this.color = input('primary');
+        this.size = input('sm');
+        this.tcRevIconButton = input('filled');
+        effect(() => {
+            this.setClasses();
+        });
+    }
+    setClasses() {
+        const tokenList = this._el.nativeElement.classList;
+        tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
+        let tcRevIconButton = this.tcRevIconButton();
+        if (!tcRevIconButton) {
+            tcRevIconButton = 'filled';
+        }
+        this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
+        this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}-icon`);
+        this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcRevIconButton}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevIconButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TcRevIconButtonDirective, isStandalone: true, selector: "button[tcRevIconButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tcRevIconButton: { classPropertyName: "tcRevIconButton", publicName: "tcRevIconButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-btn tc-rev-btn-icon" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevIconButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tcRevIconButton]',
+                    host: {
+                        class: 'tc-rev-btn tc-rev-btn-icon'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
 var DropdownGroupedSize;
 (function (DropdownGroupedSize) {
     DropdownGroupedSize["sm"] = "sm";
@@ -6844,6 +6878,7 @@ class TcRevDropdownGroupedComponent {
     }
     constructor(elementRef) {
         this.elementRef = elementRef;
+        this._deviceService = inject(TCloudUiDeviceUtilsService);
         this.label = input(''); // Label que será exibida
         this.disabled = input(false); // Desabilita o dropdown
         this.options = input.required(); // Lista de opções agrupadas
@@ -6859,18 +6894,22 @@ class TcRevDropdownGroupedComponent {
         this.isOpen = false; // Controla se o dropdown está aberto
         this.searchTerm = signal(''); // Termo de busca
         this.dropdownSize = DropdownGroupedSize;
+        this.isDesktop = this._deviceService.isDesktop;
+        this.isMobile = this._deviceService.isMobile;
     }
     ngOnChanges(_simpleChanges) {
         // Atualiza a opção selecionada quando o valor pré-selecionado muda
-        if (_simpleChanges['initialValue'] || _simpleChanges['options'] || _simpleChanges['value']) {
+        if (_simpleChanges['initialValue'] ||
+            _simpleChanges['options'] ||
+            _simpleChanges['value']) {
             const valueToUse = this.value() || this.initialValue();
-            this.selectedOption.set(this.options().find(option => option.value === valueToUse) || null);
+            this.selectedOption.set(this.options().find((option) => option.value === valueToUse) || null);
         }
     }
     ngOnInit() {
         // Prioriza o valor do model, mas mantém compatibilidade com initialValue
         const valueToUse = this.value() || this.initialValue();
-        const foundOption = this.options().find(option => option.value === valueToUse) || null;
+        const foundOption = this.options().find((option) => option.value === valueToUse) || null;
         this.selectedOption.set(foundOption);
         // Se não havia valor no model mas havia initialValue, sincroniza o model
         if (!this.value() && this.initialValue() && foundOption) {
@@ -6878,7 +6917,7 @@ class TcRevDropdownGroupedComponent {
         }
         // Escuta mudanças no model e atualiza a opção selecionada
         this.value.subscribe((newValue) => {
-            const option = this.options().find(opt => opt.value === newValue) || null;
+            const option = this.options().find((opt) => opt.value === newValue) || null;
             if (this.selectedOption() !== option) {
                 this.selectedOption.set(option);
             }
@@ -6886,6 +6925,11 @@ class TcRevDropdownGroupedComponent {
     }
     toggleDropdown() {
         if (!this.disabled()) {
+            // Abertura do dropdown para mobile
+            if (this.isMobile()) {
+                this._deviceService.openDropdownDevice(this.menuTemplate);
+                return;
+            }
             this.isOpen = !this.isOpen;
             if (this.isOpen) {
                 this.searchTerm.set('');
@@ -6904,6 +6948,10 @@ class TcRevDropdownGroupedComponent {
             this.selectedOption.set(option);
             this.value.set(option.value); // Atualiza o model com two-way binding
             this.optionSelected.emit(option); // Emite a opção selecionada para compatibilidade
+            if (this.isMobile()) {
+                this._deviceService.closeDropdownDevice();
+                return;
+            }
             this.isOpen = false;
             this.searchTerm.set('');
         }
@@ -6915,7 +6963,7 @@ class TcRevDropdownGroupedComponent {
         const filtered = this.getFilteredOptions();
         const groups = {};
         // Agrupa as opções filtradas
-        filtered.forEach(option => {
+        filtered.forEach((option) => {
             const groupName = option.group || 'Sem grupo';
             if (!groups[groupName]) {
                 groups[groupName] = [];
@@ -6923,9 +6971,9 @@ class TcRevDropdownGroupedComponent {
             groups[groupName].push(option);
         });
         // Converte para array de grupos
-        return Object.keys(groups).map(groupName => ({
+        return Object.keys(groups).map((groupName) => ({
             groupName,
-            options: groups[groupName]
+            options: groups[groupName],
         }));
     }
     getFilteredOptions() {
@@ -6933,7 +6981,7 @@ class TcRevDropdownGroupedComponent {
         if (!search) {
             return this.options();
         }
-        return this.options().filter(option => option.displayValue.toLowerCase().includes(search) ||
+        return this.options().filter((option) => option.displayValue.toLowerCase().includes(search) ||
             (option.group && option.group.toLowerCase().includes(search)));
     }
     clearSearch() {
@@ -6943,7 +6991,7 @@ class TcRevDropdownGroupedComponent {
         return this.getFilteredOptions().length > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevDropdownGroupedComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TcRevDropdownGroupedComponent, isStandalone: true, selector: "tc-rev-dropdown-grouped", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tc-rev-dropdown-grouped\"\n  [class.disabled]=\"disabled()\">\n  <button\n    class=\"tc-rev-dropdown-toggle\"\n    [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n    [style.width]=\"this.width()\">\n    @if (label()) {\n      <b>{{label()}}</b>\n    }\n    {{ selectedOption() ? selectedOption()?.displayValue : placeholder() }}\n    <i class=\"fa-light fa-chevron-down mar-l-a\" [class.rotate]=\"isOpen\"></i>\n  </button>\n\n  <div\n    *ngIf=\"isOpen\"\n    class=\"tc-rev-dropdown-menu\"\n    [style.width]=\"this.width()\">\n    <!-- Input de busca -->\n    @if (showSearch()) {\n      <div class=\"tc-rev-dropdown-search\">\n        <tc-rev-search-input (onSearch)=\"onSearchChange($event)\" [placeholder]=\"this.searchPlaceholder()\" />\n      </div>\n      <!-- <div class=\"tc-rev-dropdown-search\">\n        <i class=\"fa-light fa-magnifying-glass search-icon\"></i>\n        <input\n          type=\"text\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"searchTerm()\"\n          (input)=\"onSearchChange($event)\"\n          class=\"search-input\">\n        @if (searchTerm()) {\n          <button\n            type=\"button\"\n            class=\"clear-search\"\n            (click)=\"clearSearch()\"\n            title=\"Limpar busca\">\n            <i class=\"fa-light fa-xmark\"></i>\n          </button>\n        }\n      </div> -->\n    }\n\n    <!-- Lista de op\u00E7\u00F5es agrupadas -->\n    @if (hasResults()) {\n      <ul class=\"tc-rev-dropdown-options\">\n        @for (group of getGroupedOptions(); track group.groupName) {\n          <li class=\"tc-rev-dropdown-group\">\n            <div class=\"tc-rev-dropdown-group-header\">\n              {{ group.groupName }}\n            </div>\n            <ul class=\"tc-rev-dropdown-group-options\">\n              @for (option of group.options; track option?.value) {\n                <li\n                  class=\"tc-rev-dropdown-menu-item\"\n                  (click)=\"selectOption(option)\">\n                  <button\n                    class=\"tc-rev-dropdown-menu-item-btn\"\n                    [class.selected]=\"selectedOption()?.value === option.value\"\n                    [disabled]=\"option?.disabled\">\n                    {{ option?.displayValue }}\n\n                    @if (selectedOption()?.value === option?.value) {\n                      <i class=\"fa-light fa-circle-check\"></i>\n                    }\n                  </button>\n                </li>\n              }\n            </ul>\n          </li>\n        }\n      </ul>\n    } @else {\n      <div class=\"tc-rev-dropdown-no-results f-family\">\n        <i class=\"fa-light fa-magnifying-glass\"></i>\n        <span>Nenhum resultado encontrado</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-grouped{position:relative;display:inline-block}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;align-items:center;justify-content:flex-start;gap:var(--size-4);font-family:var(--f-family);font-size:var(--f-size-12);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);min-width:5rem}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i.rotate{transform:rotate(-180deg)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i{transition:transform .2s ease}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:20rem;overflow:hidden;width:100%;min-width:10rem;z-index:1000;display:flex;flex-direction:column}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search{position:relative;padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);background-color:var(--c-neutral-50)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-icon{position:absolute;left:var(--size-20);top:50%;transform:translateY(-50%);color:var(--c-neutral-500);font-size:var(--f-size-14)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input{width:100%;height:var(--size-40);padding:var(--size-8) var(--size-12) var(--size-8) var(--size-36);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);outline:none;transition:border-color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input::placeholder{color:var(--c-neutral-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search{position:absolute;right:var(--size-20);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-4);border-radius:var(--bor-radius-4);transition:color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search:hover{color:var(--c-neutral-700)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-header{background-color:var(--c-neutral-100);color:var(--c-neutral-600);font-size:var(--f-size-12);font-weight:var(--f-weight-600);line-height:var(--l-height-16);padding:var(--size-8);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--c-neutral-200);position:sticky;top:0;z-index:1}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options{list-style:none;margin:0;padding:0}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{background-color:var(--c-neutral-50);border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled:hover{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-400)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--size-24);color:var(--c-neutral-500);text-align:center}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results i{font-size:var(--f-size-24);margin-bottom:var(--size-8);opacity:.5}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results span{font-size:var(--f-size-12);line-height:var(--l-height-16)}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle:hover{border-color:var(--c-neutral-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TcRevSearchInputComponent, selector: "tc-rev-search-input", inputs: ["searchText", "placeholder", "autoFocus"], outputs: ["searchTextChange", "onSearch"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TcRevDropdownGroupedComponent, isStandalone: true, selector: "tc-rev-dropdown-grouped", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tc-rev-dropdown-grouped\" [class.disabled]=\"disabled()\">\n  <button\n    class=\"tc-rev-dropdown-toggle\"\n    [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n    [style.width]=\"this.width()\"\n  >\n    @if (label()) {\n    <b>{{ label() }}</b>\n    }\n    {{ selectedOption() ? selectedOption()?.displayValue : placeholder() }}\n    <i class=\"fa-light fa-chevron-down mar-l-a\" [class.rotate]=\"isOpen\"></i>\n  </button>\n\n  <div\n    *ngIf=\"isOpen && isDesktop()\"\n    class=\"tc-rev-dropdown-menu\"\n    [style.width]=\"this.width()\"\n  >\n    <!-- Input de busca -->\n    @if (showSearch()) {\n    <div class=\"tc-rev-dropdown-search\">\n      <tc-rev-search-input\n        (onSearch)=\"onSearchChange($event)\"\n        [placeholder]=\"this.searchPlaceholder()\"\n      />\n    </div>\n    <!-- <div class=\"tc-rev-dropdown-search\">\n        <i class=\"fa-light fa-magnifying-glass search-icon\"></i>\n        <input\n          type=\"text\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"searchTerm()\"\n          (input)=\"onSearchChange($event)\"\n          class=\"search-input\">\n        @if (searchTerm()) {\n          <button\n            type=\"button\"\n            class=\"clear-search\"\n            (click)=\"clearSearch()\"\n            title=\"Limpar busca\">\n            <i class=\"fa-light fa-xmark\"></i>\n          </button>\n        }\n      </div> -->\n    }\n\n    <!-- Lista de op\u00E7\u00F5es agrupadas -->\n    @if (hasResults()) {\n    <ul class=\"tc-rev-dropdown-options\">\n      @for (group of getGroupedOptions(); track group.groupName) {\n      <li class=\"tc-rev-dropdown-group\">\n        <div class=\"tc-rev-dropdown-group-header\">\n          {{ group.groupName }}\n        </div>\n        <ul class=\"tc-rev-dropdown-group-options\">\n          @for (option of group.options; track option?.value) {\n          <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n            <button\n              class=\"tc-rev-dropdown-menu-item-btn\"\n              [class.selected]=\"selectedOption()?.value === option.value\"\n              [disabled]=\"option?.disabled\"\n            >\n              {{ option?.displayValue }}\n\n              @if (selectedOption()?.value === option?.value) {\n              <i class=\"fa-light fa-circle-check\"></i>\n              }\n            </button>\n          </li>\n          }\n        </ul>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"tc-rev-dropdown-no-results f-family\">\n      <i class=\"fa-light fa-magnifying-glass\"></i>\n      <span>Nenhum resultado encontrado</span>\n    </div>\n    }\n  </div>\n\n  <!-- Dropdown full screen -->\n  <ng-template #menuTemplate>\n    <div class=\"tc-rev-dropdown-menu tc-rev-dropdown-menu--device\">\n      <div class=\"tc-rev-dropdown-menu-section\">\n        <div class=\"tc-rev-dropdown-menu-header pad-b-24\">\n          <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n            {{ label() }}\n          </h3>\n          <button\n            tcRevIconButton=\"outline\"\n            color=\"dark\"\n            size=\"sm\"\n            (click)=\"_deviceService.closeDropdownDevice()\"\n          >\n            <i class=\"fa-light fa-times f-size-16\"></i>\n          </button>\n        </div>\n\n        @if (showSearch()) {\n        <div class=\"tc-rev-dropdown-search mar-b-12\">\n          <tc-rev-search-input\n            (onSearch)=\"onSearchChange($event)\"\n            [placeholder]=\"searchPlaceholder()\"\n          />\n        </div>\n        } @if (hasResults()) {\n        <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n          @for (group of getGroupedOptions(); track group.groupName) {\n          <li class=\"tc-rev-dropdown-group\">\n            <div class=\"tc-rev-dropdown-group-header\">\n              {{ group.groupName }}\n            </div>\n            <ul class=\"tc-rev-dropdown-group-options\">\n              @for (option of group.options; track option?.value) {\n              <li\n                class=\"tc-rev-dropdown-menu-item\"\n                (click)=\"selectOption(option)\"\n              >\n                <button\n                  class=\"tc-rev-dropdown-menu-item-btn\"\n                  [class.selected]=\"selectedOption()?.value === option.value\"\n                  [disabled]=\"option?.disabled\"\n                >\n                  {{ option?.displayValue }}\n\n                  @if (selectedOption()?.value === option?.value) {\n                  <i class=\"fa-light fa-circle-check f-size-16\"></i>\n                  }\n                </button>\n              </li>\n              }\n            </ul>\n          </li>\n          }\n        </ul>\n        }\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-grouped{position:relative;display:inline-block}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;align-items:center;justify-content:flex-start;gap:var(--size-4);font-family:var(--f-family);font-size:var(--f-size-12);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);min-width:5rem}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i.rotate{transform:rotate(-180deg)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i{transition:transform .2s ease}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:20rem;overflow:hidden;width:100%;min-width:10rem;z-index:1000;display:flex;flex-direction:column}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search{position:relative;padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);background-color:var(--c-neutral-50)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-icon{position:absolute;left:var(--size-20);top:50%;transform:translateY(-50%);color:var(--c-neutral-500);font-size:var(--f-size-14)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input{width:100%;height:var(--size-40);padding:var(--size-8) var(--size-12) var(--size-8) var(--size-36);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);outline:none;transition:border-color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input::placeholder{color:var(--c-neutral-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search{position:absolute;right:var(--size-20);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-4);border-radius:var(--bor-radius-4);transition:color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search:hover{color:var(--c-neutral-700)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-header{background-color:var(--c-neutral-100);color:var(--c-neutral-600);font-size:var(--f-size-14);font-weight:var(--f-weight-500);line-height:var(--l-height-16);padding:var(--size-10);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--c-neutral-200);position:sticky;top:0;z-index:1}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options{list-style:none;margin:0;padding:0}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{background-color:var(--c-neutral-50);border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled:hover{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-400)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--size-24);color:var(--c-neutral-500);text-align:center}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results i{font-size:var(--f-size-24);margin-bottom:var(--size-8);opacity:.5}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results span{font-size:var(--f-size-12);line-height:var(--l-height-16)}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle:hover{border-color:var(--c-neutral-300)}.tc-rev-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-section{display:contents}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-header{background-color:var(--c-neutral-100);color:var(--c-neutral-600);font-size:var(--f-size-14);font-weight:var(--f-weight-500);line-height:var(--l-height-16);padding:var(--size-10);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--c-neutral-200);position:sticky;top:0;z-index:1}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options{list-style:none;margin:0;padding:0}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TcRevSearchInputComponent, selector: "tc-rev-search-input", inputs: ["searchText", "placeholder", "autoFocus"], outputs: ["searchTextChange", "onSearch"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevDropdownGroupedComponent, decorators: [{
             type: Component,
@@ -6952,8 +7000,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         TcRevSearchInputComponent,
-                    ], template: "<div\n  class=\"tc-rev-dropdown-grouped\"\n  [class.disabled]=\"disabled()\">\n  <button\n    class=\"tc-rev-dropdown-toggle\"\n    [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n    [style.width]=\"this.width()\">\n    @if (label()) {\n      <b>{{label()}}</b>\n    }\n    {{ selectedOption() ? selectedOption()?.displayValue : placeholder() }}\n    <i class=\"fa-light fa-chevron-down mar-l-a\" [class.rotate]=\"isOpen\"></i>\n  </button>\n\n  <div\n    *ngIf=\"isOpen\"\n    class=\"tc-rev-dropdown-menu\"\n    [style.width]=\"this.width()\">\n    <!-- Input de busca -->\n    @if (showSearch()) {\n      <div class=\"tc-rev-dropdown-search\">\n        <tc-rev-search-input (onSearch)=\"onSearchChange($event)\" [placeholder]=\"this.searchPlaceholder()\" />\n      </div>\n      <!-- <div class=\"tc-rev-dropdown-search\">\n        <i class=\"fa-light fa-magnifying-glass search-icon\"></i>\n        <input\n          type=\"text\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"searchTerm()\"\n          (input)=\"onSearchChange($event)\"\n          class=\"search-input\">\n        @if (searchTerm()) {\n          <button\n            type=\"button\"\n            class=\"clear-search\"\n            (click)=\"clearSearch()\"\n            title=\"Limpar busca\">\n            <i class=\"fa-light fa-xmark\"></i>\n          </button>\n        }\n      </div> -->\n    }\n\n    <!-- Lista de op\u00E7\u00F5es agrupadas -->\n    @if (hasResults()) {\n      <ul class=\"tc-rev-dropdown-options\">\n        @for (group of getGroupedOptions(); track group.groupName) {\n          <li class=\"tc-rev-dropdown-group\">\n            <div class=\"tc-rev-dropdown-group-header\">\n              {{ group.groupName }}\n            </div>\n            <ul class=\"tc-rev-dropdown-group-options\">\n              @for (option of group.options; track option?.value) {\n                <li\n                  class=\"tc-rev-dropdown-menu-item\"\n                  (click)=\"selectOption(option)\">\n                  <button\n                    class=\"tc-rev-dropdown-menu-item-btn\"\n                    [class.selected]=\"selectedOption()?.value === option.value\"\n                    [disabled]=\"option?.disabled\">\n                    {{ option?.displayValue }}\n\n                    @if (selectedOption()?.value === option?.value) {\n                      <i class=\"fa-light fa-circle-check\"></i>\n                    }\n                  </button>\n                </li>\n              }\n            </ul>\n          </li>\n        }\n      </ul>\n    } @else {\n      <div class=\"tc-rev-dropdown-no-results f-family\">\n        <i class=\"fa-light fa-magnifying-glass\"></i>\n        <span>Nenhum resultado encontrado</span>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-grouped{position:relative;display:inline-block}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;align-items:center;justify-content:flex-start;gap:var(--size-4);font-family:var(--f-family);font-size:var(--f-size-12);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);min-width:5rem}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i.rotate{transform:rotate(-180deg)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i{transition:transform .2s ease}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:20rem;overflow:hidden;width:100%;min-width:10rem;z-index:1000;display:flex;flex-direction:column}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search{position:relative;padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);background-color:var(--c-neutral-50)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-icon{position:absolute;left:var(--size-20);top:50%;transform:translateY(-50%);color:var(--c-neutral-500);font-size:var(--f-size-14)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input{width:100%;height:var(--size-40);padding:var(--size-8) var(--size-12) var(--size-8) var(--size-36);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);outline:none;transition:border-color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input::placeholder{color:var(--c-neutral-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search{position:absolute;right:var(--size-20);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-4);border-radius:var(--bor-radius-4);transition:color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search:hover{color:var(--c-neutral-700)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-header{background-color:var(--c-neutral-100);color:var(--c-neutral-600);font-size:var(--f-size-12);font-weight:var(--f-weight-600);line-height:var(--l-height-16);padding:var(--size-8);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--c-neutral-200);position:sticky;top:0;z-index:1}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options{list-style:none;margin:0;padding:0}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{background-color:var(--c-neutral-50);border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled:hover{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-400)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--size-24);color:var(--c-neutral-500);text-align:center}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results i{font-size:var(--f-size-24);margin-bottom:var(--size-8);opacity:.5}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results span{font-size:var(--f-size-12);line-height:var(--l-height-16)}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle:hover{border-color:var(--c-neutral-300)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
+                        TcRevIconButtonDirective
+                    ], template: "<div class=\"tc-rev-dropdown-grouped\" [class.disabled]=\"disabled()\">\n  <button\n    class=\"tc-rev-dropdown-toggle\"\n    [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n    [style.width]=\"this.width()\"\n  >\n    @if (label()) {\n    <b>{{ label() }}</b>\n    }\n    {{ selectedOption() ? selectedOption()?.displayValue : placeholder() }}\n    <i class=\"fa-light fa-chevron-down mar-l-a\" [class.rotate]=\"isOpen\"></i>\n  </button>\n\n  <div\n    *ngIf=\"isOpen && isDesktop()\"\n    class=\"tc-rev-dropdown-menu\"\n    [style.width]=\"this.width()\"\n  >\n    <!-- Input de busca -->\n    @if (showSearch()) {\n    <div class=\"tc-rev-dropdown-search\">\n      <tc-rev-search-input\n        (onSearch)=\"onSearchChange($event)\"\n        [placeholder]=\"this.searchPlaceholder()\"\n      />\n    </div>\n    <!-- <div class=\"tc-rev-dropdown-search\">\n        <i class=\"fa-light fa-magnifying-glass search-icon\"></i>\n        <input\n          type=\"text\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"searchTerm()\"\n          (input)=\"onSearchChange($event)\"\n          class=\"search-input\">\n        @if (searchTerm()) {\n          <button\n            type=\"button\"\n            class=\"clear-search\"\n            (click)=\"clearSearch()\"\n            title=\"Limpar busca\">\n            <i class=\"fa-light fa-xmark\"></i>\n          </button>\n        }\n      </div> -->\n    }\n\n    <!-- Lista de op\u00E7\u00F5es agrupadas -->\n    @if (hasResults()) {\n    <ul class=\"tc-rev-dropdown-options\">\n      @for (group of getGroupedOptions(); track group.groupName) {\n      <li class=\"tc-rev-dropdown-group\">\n        <div class=\"tc-rev-dropdown-group-header\">\n          {{ group.groupName }}\n        </div>\n        <ul class=\"tc-rev-dropdown-group-options\">\n          @for (option of group.options; track option?.value) {\n          <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n            <button\n              class=\"tc-rev-dropdown-menu-item-btn\"\n              [class.selected]=\"selectedOption()?.value === option.value\"\n              [disabled]=\"option?.disabled\"\n            >\n              {{ option?.displayValue }}\n\n              @if (selectedOption()?.value === option?.value) {\n              <i class=\"fa-light fa-circle-check\"></i>\n              }\n            </button>\n          </li>\n          }\n        </ul>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"tc-rev-dropdown-no-results f-family\">\n      <i class=\"fa-light fa-magnifying-glass\"></i>\n      <span>Nenhum resultado encontrado</span>\n    </div>\n    }\n  </div>\n\n  <!-- Dropdown full screen -->\n  <ng-template #menuTemplate>\n    <div class=\"tc-rev-dropdown-menu tc-rev-dropdown-menu--device\">\n      <div class=\"tc-rev-dropdown-menu-section\">\n        <div class=\"tc-rev-dropdown-menu-header pad-b-24\">\n          <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n            {{ label() }}\n          </h3>\n          <button\n            tcRevIconButton=\"outline\"\n            color=\"dark\"\n            size=\"sm\"\n            (click)=\"_deviceService.closeDropdownDevice()\"\n          >\n            <i class=\"fa-light fa-times f-size-16\"></i>\n          </button>\n        </div>\n\n        @if (showSearch()) {\n        <div class=\"tc-rev-dropdown-search mar-b-12\">\n          <tc-rev-search-input\n            (onSearch)=\"onSearchChange($event)\"\n            [placeholder]=\"searchPlaceholder()\"\n          />\n        </div>\n        } @if (hasResults()) {\n        <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n          @for (group of getGroupedOptions(); track group.groupName) {\n          <li class=\"tc-rev-dropdown-group\">\n            <div class=\"tc-rev-dropdown-group-header\">\n              {{ group.groupName }}\n            </div>\n            <ul class=\"tc-rev-dropdown-group-options\">\n              @for (option of group.options; track option?.value) {\n              <li\n                class=\"tc-rev-dropdown-menu-item\"\n                (click)=\"selectOption(option)\"\n              >\n                <button\n                  class=\"tc-rev-dropdown-menu-item-btn\"\n                  [class.selected]=\"selectedOption()?.value === option.value\"\n                  [disabled]=\"option?.disabled\"\n                >\n                  {{ option?.displayValue }}\n\n                  @if (selectedOption()?.value === option?.value) {\n                  <i class=\"fa-light fa-circle-check f-size-16\"></i>\n                  }\n                </button>\n              </li>\n              }\n            </ul>\n          </li>\n          }\n        </ul>\n        }\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-grouped{position:relative;display:inline-block}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;align-items:center;justify-content:flex-start;gap:var(--size-4);font-family:var(--f-family);font-size:var(--f-size-12);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);min-width:5rem}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i.rotate{transform:rotate(-180deg)}.tc-rev-dropdown-grouped .tc-rev-dropdown-toggle i{transition:transform .2s ease}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:20rem;overflow:hidden;width:100%;min-width:10rem;z-index:1000;display:flex;flex-direction:column}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search{position:relative;padding:var(--size-8);border-bottom:1px solid var(--c-neutral-200);background-color:var(--c-neutral-50)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-icon{position:absolute;left:var(--size-20);top:50%;transform:translateY(-50%);color:var(--c-neutral-500);font-size:var(--f-size-14)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input{width:100%;height:var(--size-40);padding:var(--size-8) var(--size-12) var(--size-8) var(--size-36);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-4);font-size:var(--f-size-12);line-height:var(--l-height-16);outline:none;transition:border-color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .search-input::placeholder{color:var(--c-neutral-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search{position:absolute;right:var(--size-20);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--c-neutral-500);cursor:pointer;padding:var(--size-4);border-radius:var(--bor-radius-4);transition:color .2s ease;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-search .clear-search:hover{color:var(--c-neutral-700)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;font-family:var(--f-family)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-header{background-color:var(--c-neutral-100);color:var(--c-neutral-600);font-size:var(--f-size-14);font-weight:var(--f-weight-500);line-height:var(--l-height-16);padding:var(--size-10);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--c-neutral-200);position:sticky;top:0;z-index:1}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options{list-style:none;margin:0;padding:0}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{background-color:var(--c-neutral-50);border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-options .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled:hover{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-400)}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--size-24);color:var(--c-neutral-500);text-align:center}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results i{font-size:var(--f-size-24);margin-bottom:var(--size-8);opacity:.5}.tc-rev-dropdown-grouped .tc-rev-dropdown-menu .tc-rev-dropdown-no-results span{font-size:var(--f-size-12);line-height:var(--l-height-16)}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-grouped.disabled .tc-rev-dropdown-toggle:hover{border-color:var(--c-neutral-300)}.tc-rev-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-section{display:contents}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-header{background-color:var(--c-neutral-100);color:var(--c-neutral-600);font-size:var(--f-size-14);font-weight:var(--f-weight-500);line-height:var(--l-height-16);padding:var(--size-10);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--c-neutral-200);position:sticky;top:0;z-index:1}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options{list-style:none;margin:0;padding:0}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container .tc-rev-dropdown-group .tc-rev-dropdown-group-options .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
+                type: ViewChild,
+                args: ['menuTemplate']
+            }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -7383,40 +7435,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 args: ['mouseleave']
             }] } });
 
-class TcRevIconButtonDirective {
-    constructor(_el) {
-        this._el = _el;
-        this.color = input('primary');
-        this.size = input('sm');
-        this.tcRevIconButton = input('filled');
-        effect(() => {
-            this.setClasses();
-        });
-    }
-    setClasses() {
-        const tokenList = this._el.nativeElement.classList;
-        tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
-        let tcRevIconButton = this.tcRevIconButton();
-        if (!tcRevIconButton) {
-            tcRevIconButton = 'filled';
-        }
-        this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
-        this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}-icon`);
-        this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcRevIconButton}`);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevIconButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TcRevIconButtonDirective, isStandalone: true, selector: "button[tcRevIconButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tcRevIconButton: { classPropertyName: "tcRevIconButton", publicName: "tcRevIconButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-btn tc-rev-btn-icon" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevIconButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[tcRevIconButton]',
-                    host: {
-                        class: 'tc-rev-btn tc-rev-btn-icon'
-                    }
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
-
 var DropdownSize;
 (function (DropdownSize) {
     DropdownSize["sm"] = "sm";
@@ -7520,7 +7538,7 @@ class TcRevDropdownComponent {
         return isTextEllipsed(text, availableWidth);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TcRevDropdownComponent, isStandalone: true, selector: "tc-rev-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tc-rev-dropdown\"\n  [class.disabled]=\"disabled()\"\n  [style.width]=\"this.width()\">\n  <button\n    class=\"tc-rev-dropdown-toggle\"\n    [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\">\n    @if (label())\n    {\n      <b>{{label()}}</b>\n    }\n    <span class=\"tc-rev-dropdown-selected-text\">\n      {{ selectedOption() ? selectedOption()?.displayValue : 'Selecione' }}\n    </span>\n    <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n  </button>\n  <ul\n  *ngIf=\"isOpen && isDesktop()\" class=\"tc-rev-dropdown-menu\">\n    @for (option of options(); track option?.value)\n    {\n     <li\n        class=\"tc-rev-dropdown-menu-item\"\n        (click)=\"selectOption(option)\">\n        <button\n          class=\"tc-rev-dropdown-menu-item-btn\"\n          [class.selected]=\"selectedOption()?.value === option.value\"\n          [disabled]=\"option?.disabled\">\n          <span\n            class=\"tc-rev-dropdown-option-text\"\n            [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n            [tcRevTooltip]=\"isOptionEllipsed(option.displayValue) ? option.displayValue : ''\"\n            position=\"top\">\n            {{ option?.displayValue }}\n          </span>\n\n          @if (selectedOption()?.value === option?.value)\n          {\n            <i class=\"fa-light fa-circle-check\"></i>\n          }\n        </button>\n      </li>\n    }\n  </ul>\n\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n  <div class=\"tc-rev-dropdown-menu tc-rev-dropdown-menu--device\">\n  <div class=\"tc-rev-dropdown-menu-section\">\n    <div class=\"tc-rev-dropdown-menu-header pad-b-24\">\n      <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">{{ label() }}</h3>\n      <button tcRevIconButton=\"outline\" color=\"dark\" size=\"sm\" (click)=\"_deviceService.closeDropdownDevice()\">\n        <i class=\"fa-light fa-times f-size-16\"></i>\n      </button>  \n    </div>\n    <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n      @for (option of options(); track option?.value) {\n      <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n        <button\n          class=\"tc-rev-dropdown-menu-item-btn\"\n          [class.selected]=\"selectedOption()?.value === option.value\"\n          [disabled]=\"option?.disabled\"\n        >\n          {{ option?.displayValue }}\n\n          @if (selectedOption()?.value === option?.value) {\n          <i class=\"fa-light fa-circle-check f-size-16\"></i>\n          }\n        </button>\n      </li>\n      }\n    </ul>\n  </div>\n  </div>\n</ng-template>\n\n\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tc-rev-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-section{display:contents}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevTooltipDirective, selector: "[tcRevTooltip]", inputs: ["tcRevTooltip", "position"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TcRevDropdownComponent, isStandalone: true, selector: "tc-rev-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tc-rev-dropdown\"\n  [class.disabled]=\"disabled()\"\n  [style.width]=\"this.width()\"\n>\n  <button\n    class=\"tc-rev-dropdown-toggle\"\n    [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n  >\n    @if (label()) {\n    <b>{{ label() }}</b>\n    }\n    <span class=\"tc-rev-dropdown-selected-text\">\n      {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n    </span>\n    <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n  </button>\n  <ul *ngIf=\"isOpen && isDesktop()\" class=\"tc-rev-dropdown-menu\">\n    @for (option of options(); track option?.value) {\n    <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n      <button\n        class=\"tc-rev-dropdown-menu-item-btn\"\n        [class.selected]=\"selectedOption()?.value === option.value\"\n        [disabled]=\"option?.disabled\"\n      >\n        <span\n          class=\"tc-rev-dropdown-option-text\"\n          [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n          [tcRevTooltip]=\"\n            isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n          \"\n          position=\"top\"\n        >\n          {{ option?.displayValue }}\n        </span>\n\n        @if (selectedOption()?.value === option?.value) {\n        <i class=\"fa-light fa-circle-check\"></i>\n        }\n      </button>\n    </li>\n    }\n  </ul>\n\n  <!-- Dropdown full screen -->\n  <ng-template #menuTemplate>\n    <div class=\"tc-rev-dropdown-menu tc-rev-dropdown-menu--device\">\n      <div class=\"tc-rev-dropdown-menu-section\">\n        <div class=\"tc-rev-dropdown-menu-header pad-b-24\">\n          <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n            {{ label() }}\n          </h3>\n          <button\n            tcRevIconButton=\"outline\"\n            color=\"dark\"\n            size=\"sm\"\n            (click)=\"_deviceService.closeDropdownDevice()\"\n          >\n            <i class=\"fa-light fa-times f-size-16\"></i>\n          </button>\n        </div>\n        <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n          @for (option of options(); track option?.value) {\n          <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n            <button\n              class=\"tc-rev-dropdown-menu-item-btn\"\n              [class.selected]=\"selectedOption()?.value === option.value\"\n              [disabled]=\"option?.disabled\"\n            >\n              {{ option?.displayValue }}\n\n              @if (selectedOption()?.value === option?.value) {\n              <i class=\"fa-light fa-circle-check f-size-16\"></i>\n              }\n            </button>\n          </li>\n          }\n        </ul>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tc-rev-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-section{display:contents}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevTooltipDirective, selector: "[tcRevTooltip]", inputs: ["tcRevTooltip", "position"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevDropdownComponent, decorators: [{
             type: Component,
@@ -7530,7 +7548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         ReactiveFormsModule,
                         TcRevTooltipDirective,
                         TcRevIconButtonDirective
-                    ], template: "<div\n  class=\"tc-rev-dropdown\"\n  [class.disabled]=\"disabled()\"\n  [style.width]=\"this.width()\">\n  <button\n    class=\"tc-rev-dropdown-toggle\"\n    [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\">\n    @if (label())\n    {\n      <b>{{label()}}</b>\n    }\n    <span class=\"tc-rev-dropdown-selected-text\">\n      {{ selectedOption() ? selectedOption()?.displayValue : 'Selecione' }}\n    </span>\n    <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n  </button>\n  <ul\n  *ngIf=\"isOpen && isDesktop()\" class=\"tc-rev-dropdown-menu\">\n    @for (option of options(); track option?.value)\n    {\n     <li\n        class=\"tc-rev-dropdown-menu-item\"\n        (click)=\"selectOption(option)\">\n        <button\n          class=\"tc-rev-dropdown-menu-item-btn\"\n          [class.selected]=\"selectedOption()?.value === option.value\"\n          [disabled]=\"option?.disabled\">\n          <span\n            class=\"tc-rev-dropdown-option-text\"\n            [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n            [tcRevTooltip]=\"isOptionEllipsed(option.displayValue) ? option.displayValue : ''\"\n            position=\"top\">\n            {{ option?.displayValue }}\n          </span>\n\n          @if (selectedOption()?.value === option?.value)\n          {\n            <i class=\"fa-light fa-circle-check\"></i>\n          }\n        </button>\n      </li>\n    }\n  </ul>\n\n\n <!-- Dropdown full screen -->\n <ng-template #menuTemplate>\n  <div class=\"tc-rev-dropdown-menu tc-rev-dropdown-menu--device\">\n  <div class=\"tc-rev-dropdown-menu-section\">\n    <div class=\"tc-rev-dropdown-menu-header pad-b-24\">\n      <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">{{ label() }}</h3>\n      <button tcRevIconButton=\"outline\" color=\"dark\" size=\"sm\" (click)=\"_deviceService.closeDropdownDevice()\">\n        <i class=\"fa-light fa-times f-size-16\"></i>\n      </button>  \n    </div>\n    <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n      @for (option of options(); track option?.value) {\n      <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n        <button\n          class=\"tc-rev-dropdown-menu-item-btn\"\n          [class.selected]=\"selectedOption()?.value === option.value\"\n          [disabled]=\"option?.disabled\"\n        >\n          {{ option?.displayValue }}\n\n          @if (selectedOption()?.value === option?.value) {\n          <i class=\"fa-light fa-circle-check f-size-16\"></i>\n          }\n        </button>\n      </li>\n      }\n    </ul>\n  </div>\n  </div>\n</ng-template>\n\n\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tc-rev-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-section{display:contents}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
+                    ], template: "<div\n  class=\"tc-rev-dropdown\"\n  [class.disabled]=\"disabled()\"\n  [style.width]=\"this.width()\"\n>\n  <button\n    class=\"tc-rev-dropdown-toggle\"\n    [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n  >\n    @if (label()) {\n    <b>{{ label() }}</b>\n    }\n    <span class=\"tc-rev-dropdown-selected-text\">\n      {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n    </span>\n    <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n  </button>\n  <ul *ngIf=\"isOpen && isDesktop()\" class=\"tc-rev-dropdown-menu\">\n    @for (option of options(); track option?.value) {\n    <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n      <button\n        class=\"tc-rev-dropdown-menu-item-btn\"\n        [class.selected]=\"selectedOption()?.value === option.value\"\n        [disabled]=\"option?.disabled\"\n      >\n        <span\n          class=\"tc-rev-dropdown-option-text\"\n          [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n          [tcRevTooltip]=\"\n            isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n          \"\n          position=\"top\"\n        >\n          {{ option?.displayValue }}\n        </span>\n\n        @if (selectedOption()?.value === option?.value) {\n        <i class=\"fa-light fa-circle-check\"></i>\n        }\n      </button>\n    </li>\n    }\n  </ul>\n\n  <!-- Dropdown full screen -->\n  <ng-template #menuTemplate>\n    <div class=\"tc-rev-dropdown-menu tc-rev-dropdown-menu--device\">\n      <div class=\"tc-rev-dropdown-menu-section\">\n        <div class=\"tc-rev-dropdown-menu-header pad-b-24\">\n          <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n            {{ label() }}\n          </h3>\n          <button\n            tcRevIconButton=\"outline\"\n            color=\"dark\"\n            size=\"sm\"\n            (click)=\"_deviceService.closeDropdownDevice()\"\n          >\n            <i class=\"fa-light fa-times f-size-16\"></i>\n          </button>\n        </div>\n        <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n          @for (option of options(); track option?.value) {\n          <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n            <button\n              class=\"tc-rev-dropdown-menu-item-btn\"\n              [class.selected]=\"selectedOption()?.value === option.value\"\n              [disabled]=\"option?.disabled\"\n            >\n              {{ option?.displayValue }}\n\n              @if (selectedOption()?.value === option?.value) {\n              <i class=\"fa-light fa-circle-check f-size-16\"></i>\n              }\n            </button>\n          </li>\n          }\n        </ul>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tc-rev-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-section{display:contents}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
                 type: ViewChild,
                 args: ['menuTemplate']