@dev-tcloud/tcloud-ui 6.0.4 → 6.0.6

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

@@ -1,15 +1,12 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, Pipe, ViewEncapsulation, InjectionToken, Optional, Inject, Directive, HostListener, input, effect, NgModule, makeEnvironmentProviders, computed, output, signal, inject, ApplicationRef, model, viewChild, ChangeDetectionStrategy, ContentChildren } 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 * as i1 from '@angular/common';
 import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
 import { Subject, Subscription, debounceTime, distinctUntilChanged, map, BehaviorSubject } from 'rxjs';
 import { trigger, state, transition, style, animate, AnimationBuilder } from '@angular/animations';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormControl, ReactiveFormsModule, NG_VALIDATORS, FormGroup, Validators } from '@angular/forms';
-import { TCloudUiButtonDirective as TCloudUiButtonDirective$1 } from 'projects/tcloud-ui/src/lib/_directives/tcloud-button/tcloud-button.directive';
-import { TCloudUiFormDirective as TCloudUiFormDirective$1 } from 'projects/tcloud-ui/src/lib/_directives/tcloud-form/tcloud-form.directive';
-import * as i1$1 from 'projects/tcloud-ui/src/lib/_services/tcloud-ui-layout.services';
-import * as i1$2 from '@angular/router';
+import * as i1$1 from '@angular/router';
 import { RouterModule, Router } from '@angular/router';
 
 class TCloudUiAccordionService {
@@ -1109,6 +1106,54 @@ 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"],
@@ -1142,8 +1187,9 @@ class TCloudUiDatepickerComponent {
             this.onChange.emit(v);
         }
     }
-    constructor(_DateBRPipe) {
+    constructor(_DateBRPipe, _tCloudUiLayoutService) {
         this._DateBRPipe = _DateBRPipe;
+        this._tCloudUiLayoutService = _tCloudUiLayoutService;
         // multiple permite selecionar multiplas datas
         this.multiple = false;
         // maxNumberOfDates - Maximum number of dates users can select. No limit is applied if 0 is set.
@@ -1176,6 +1222,9 @@ class TCloudUiDatepickerComponent {
         this.onTouchedCallback = noop$6;
         this.onChangeCallback = noop$6;
     }
+    get layout() {
+        return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
+    }
     ngOnInit() {
         this.ID = this.generateID();
         Datepicker.locales.ptBR = translation.ptBR;
@@ -1499,13 +1548,13 @@ class TCloudUiDatepickerComponent {
     registerOnTouched(fn) {
         this.onTouchedCallback = fn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiDatepickerComponent, deps: [{ token: DateBRPipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TCloudUiDatepickerComponent, isStandalone: true, selector: "tcloud-ui-datepicker", inputs: { multiple: "multiple", maxNumberOfDates: "maxNumberOfDates", daysOfWeekDisabled: "daysOfWeekDisabled", minDate: "minDate", maxDate: "maxDate", datesDisabled: "datesDisabled", modeInput: "modeInput", useBorder: "useBorder", childInputDateTime: "childInputDateTime", startViewInMinDate: "startViewInMinDate", startViewInMaxDate: "startViewInMaxDate", disabled: "disabled", ngModel: "ngModel", code: "code" }, outputs: { onChange: "onChange", ngModelChange: "ngModelChange", onCheckDate: "onCheckDate" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$6, DateBRPipe], viewQueries: [{ propertyName: "input_datepicker", first: true, predicate: ["input_datepicker"], descendants: true }], ngImport: i0, template: "<!-- Input mode -->\n<ng-container *ngIf=\"modeInput\">\n\n  <div class=\"tcloud-ui-datepicker input-tc-datepicker\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n    <table class=\"table-box-input\">\n      <tr>\n        <td class=\"td-icon\">\n          <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\n        </td>\n        <td class=\"td-date\">\n          <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\n        </td>\n      </tr>\n    </table>\n  </div>\n</ng-container>\n\n<!-- Inline mode -->\n<ng-container *ngIf=\"!modeInput\">  \n  <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\n</ng-container>\n\n<!-- EX de uso \n  <tc-datepicker \n    [multiple]=\"false\"\n    [daysOfWeekDisabled]=\"[0,6]\"\n    [minDate]=\"'18/11/2021'\"\n    [maxDate]=\"'18/12/2023'\"\n    [datesDisabled]=\"['12/10/2022','25/12/2022']\"\n    [modeInput]=\"false\"\n    (onChange)=\"($event)\"\n    (onCheckDate)=\"onCheckDate($event)\"\n    [(ngModel)]=\"dateValue\" >\n  </tc-datepicker>\n  \n  // multiple = false\n  // dateValue - string - pode ser: 12/12/2022 \n\n  // multiple = true\n  // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \n\n  <pre>data: {{ dateValue }}</pre>\n-->\n", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color:#fff;border:1px solid var(--tc-gray-300);border-radius:3px;height:40px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input .td-icon{width:14px}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon i{position:relative;left:1px;opacity:.5}.input-tc-datepicker .table-box-input .td-date{min-width:30px;width:101px input;width-width:100%}.input-tc-datepicker .table-box-input input{border:none;margin-top:2px;font-size:13px!important}.child-input-date-time{height:28px!important}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media(max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media(max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".tcloud-ui-datepicker .datepicker-cell.focused:not(.selected){background-color:inherit!important}.tcloud-ui-datepicker .datepicker-cell.highlighted:not(.selected){background-color:#f5f5f5!important}.datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiDatepickerComponent, deps: [{ token: DateBRPipe }, { token: TCloudUiLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TCloudUiDatepickerComponent, isStandalone: true, selector: "tcloud-ui-datepicker", inputs: { multiple: "multiple", maxNumberOfDates: "maxNumberOfDates", daysOfWeekDisabled: "daysOfWeekDisabled", minDate: "minDate", maxDate: "maxDate", datesDisabled: "datesDisabled", modeInput: "modeInput", useBorder: "useBorder", childInputDateTime: "childInputDateTime", startViewInMinDate: "startViewInMinDate", startViewInMaxDate: "startViewInMaxDate", disabled: "disabled", ngModel: "ngModel", code: "code" }, outputs: { onChange: "onChange", ngModelChange: "ngModelChange", onCheckDate: "onCheckDate" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$6, DateBRPipe], viewQueries: [{ propertyName: "input_datepicker", first: true, predicate: ["input_datepicker"], descendants: true }], ngImport: i0, template: "<!-- Input mode -->\n<ng-container *ngIf=\"modeInput\">\n\n  <div class=\"tcloud-ui-datepicker input-tc-datepicker {{layout}}\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n    <table class=\"table-box-input\">\n      <tr>\n        @if (layout === 'classic') {\n          <td class=\"td-icon\">\n            <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\n          </td>\n        }\n        <td class=\"td-date\">\n          <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\n        </td>\n        @if (layout === 'modern') {\n          <td class=\"td-icon\">\n            <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fa-light fa-calendar c-neutral-900\"></i></div>\n          </td>\n        }\n      </tr>\n    </table>\n  </div>\n</ng-container>\n\n<!-- Inline mode -->\n<ng-container *ngIf=\"!modeInput\">\n  <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\n</ng-container>\n\n<!-- EX de uso \n  <tc-datepicker \n    [multiple]=\"false\"\n    [daysOfWeekDisabled]=\"[0,6]\"\n    [minDate]=\"'18/11/2021'\"\n    [maxDate]=\"'18/12/2023'\"\n    [datesDisabled]=\"['12/10/2022','25/12/2022']\"\n    [modeInput]=\"false\"\n    (onChange)=\"($event)\"\n    (onCheckDate)=\"onCheckDate($event)\"\n    [(ngModel)]=\"dateValue\" >\n  </tc-datepicker>\n  \n  // multiple = false\n  // dateValue - string - pode ser: 12/12/2022 \n\n  // multiple = true\n  // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \n\n  <pre>data: {{ dateValue }}</pre>\n-->", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color:#fff;border:1px solid var(--tc-gray-300);border-radius:3px;height:40px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input .td-icon{width:14px}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon i{position:relative;left:1px;opacity:.5}.input-tc-datepicker .table-box-input .td-date{min-width:30px;width:101px input;width-width:100%}.input-tc-datepicker .table-box-input input{border:none;margin-top:2px;font-size:13px!important}.child-input-date-time{height:28px!important}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media(max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media(max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".tcloud-ui-datepicker .datepicker-cell.focused:not(.selected){background-color:inherit!important}.tcloud-ui-datepicker .datepicker-cell.highlighted:not(.selected){background-color:#f5f5f5!important}.datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-datepicker', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$6, DateBRPipe], encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, FormsModule, DateBRPipe], template: "<!-- Input mode -->\n<ng-container *ngIf=\"modeInput\">\n\n  <div class=\"tcloud-ui-datepicker input-tc-datepicker\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n    <table class=\"table-box-input\">\n      <tr>\n        <td class=\"td-icon\">\n          <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\n        </td>\n        <td class=\"td-date\">\n          <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\n        </td>\n      </tr>\n    </table>\n  </div>\n</ng-container>\n\n<!-- Inline mode -->\n<ng-container *ngIf=\"!modeInput\">  \n  <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\n</ng-container>\n\n<!-- EX de uso \n  <tc-datepicker \n    [multiple]=\"false\"\n    [daysOfWeekDisabled]=\"[0,6]\"\n    [minDate]=\"'18/11/2021'\"\n    [maxDate]=\"'18/12/2023'\"\n    [datesDisabled]=\"['12/10/2022','25/12/2022']\"\n    [modeInput]=\"false\"\n    (onChange)=\"($event)\"\n    (onCheckDate)=\"onCheckDate($event)\"\n    [(ngModel)]=\"dateValue\" >\n  </tc-datepicker>\n  \n  // multiple = false\n  // dateValue - string - pode ser: 12/12/2022 \n\n  // multiple = true\n  // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \n\n  <pre>data: {{ dateValue }}</pre>\n-->\n", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color:#fff;border:1px solid var(--tc-gray-300);border-radius:3px;height:40px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input .td-icon{width:14px}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon i{position:relative;left:1px;opacity:.5}.input-tc-datepicker .table-box-input .td-date{min-width:30px;width:101px input;width-width:100%}.input-tc-datepicker .table-box-input input{border:none;margin-top:2px;font-size:13px!important}.child-input-date-time{height:28px!important}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media(max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media(max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".tcloud-ui-datepicker .datepicker-cell.focused:not(.selected){background-color:inherit!important}.tcloud-ui-datepicker .datepicker-cell.highlighted:not(.selected){background-color:#f5f5f5!important}.datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"] }]
-        }], ctorParameters: () => [{ type: DateBRPipe }], propDecorators: { multiple: [{
+            args: [{ selector: 'tcloud-ui-datepicker', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$6, DateBRPipe], encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, FormsModule, DateBRPipe], template: "<!-- Input mode -->\n<ng-container *ngIf=\"modeInput\">\n\n  <div class=\"tcloud-ui-datepicker input-tc-datepicker {{layout}}\" [class.no-border]=\"!useBorder\" [class.child-input-date-time]=\"childInputDateTime\" >\n    <table class=\"table-box-input\">\n      <tr>\n        @if (layout === 'classic') {\n          <td class=\"td-icon\">\n            <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fas fa-calendar-alt\"></i></div>\n          </td>\n        }\n        <td class=\"td-date\">\n          <input #input_datepicker type=\"text\" name=\"{{ID}}\" id=\"{{ID}}\" class=\"form-control\" [title]=\"innerValue\" >\n        </td>\n        @if (layout === 'modern') {\n          <td class=\"td-icon\">\n            <div class=\"delimiter-time-icon\" (click)=\"toClickIn(ID)\" ><i class=\"fa-light fa-calendar c-neutral-900\"></i></div>\n          </td>\n        }\n      </tr>\n    </table>\n  </div>\n</ng-container>\n\n<!-- Inline mode -->\n<ng-container *ngIf=\"!modeInput\">\n  <div class=\"tcloud-ui-datepicker tcloud-ui-datepicker-second\" #input_datepicker id=\"{{ID}}\" pattern=\"/^\\d{2}\\/\\d{2}\\/\\d{4}$/\" [title]=\"innerValue\"></div>\n</ng-container>\n\n<!-- EX de uso \n  <tc-datepicker \n    [multiple]=\"false\"\n    [daysOfWeekDisabled]=\"[0,6]\"\n    [minDate]=\"'18/11/2021'\"\n    [maxDate]=\"'18/12/2023'\"\n    [datesDisabled]=\"['12/10/2022','25/12/2022']\"\n    [modeInput]=\"false\"\n    (onChange)=\"($event)\"\n    (onCheckDate)=\"onCheckDate($event)\"\n    [(ngModel)]=\"dateValue\" >\n  </tc-datepicker>\n  \n  // multiple = false\n  // dateValue - string - pode ser: 12/12/2022 \n\n  // multiple = true\n  // dateValue - string - pode ser: 11/12/2022,12/12/2022 ... \n\n  <pre>data: {{ dateValue }}</pre>\n-->", styles: [".input_datepicker{width:100%;max-width:290px}.input-tc-datepicker{background-color:#fff;border:1px solid var(--tc-gray-300);border-radius:3px;height:40px}.input-tc-datepicker.no-border{border:none!important}.input-tc-datepicker .table-box-input{width:100%}.input-tc-datepicker .table-box-input .td-icon{width:14px}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon{text-align:center;cursor:pointer}.input-tc-datepicker .table-box-input .td-icon .delimiter-time-icon i{position:relative;left:1px;opacity:.5}.input-tc-datepicker .table-box-input .td-date{min-width:30px;width:101px input;width-width:100%}.input-tc-datepicker .table-box-input input{border:none;margin-top:2px;font-size:13px!important}.child-input-date-time{height:28px!important}\n", ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{left:0;padding-top:4px;position:absolute;top:0;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:inline-block}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a}.datepicker-picker span{-webkit-touch-callout:none;border:0;border-radius:4px;cursor:default;display:block;flex:1;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px #0a0a0a1a}.datepicker-controls,.datepicker-grid,.datepicker-view,.datepicker-view .days-of-week{display:flex}.datepicker-grid{flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px #0a0a0a1a;font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #3273dc40}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em #ffffff40}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{box-shadow:none}.datepicker-footer .datepicker-controls .button{border-radius:2px;font-size:.75rem;margin:calc(.375rem - 1px) .375rem;width:100%}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-btn,.datepicker-controls .prev-btn{padding-left:.375rem;padding-right:.375rem;width:2.25rem}.datepicker-controls .next-btn.disabled,.datepicker-controls .prev-btn.disabled{visibility:hidden}.datepicker-view .dow{font-size:.875rem;font-weight:700;height:1.5rem;line-height:1.5rem}.datepicker-view .week{color:#b5b5b5;font-size:.75rem;width:2.25rem}@media(max-width:22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media(max-width:22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dbdbdb;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em #2366d133}\n", ".tcloud-ui-datepicker .datepicker-cell.focused:not(.selected){background-color:inherit!important}.tcloud-ui-datepicker .datepicker-cell.highlighted:not(.selected){background-color:#f5f5f5!important}.datepicker-picker{border:1px solid #ccc;padding:10px 15px}\n"] }]
+        }], ctorParameters: () => [{ type: DateBRPipe }, { type: TCloudUiLayoutService }], propDecorators: { multiple: [{
                 type: Input
             }], maxNumberOfDates: [{
                 type: Input
@@ -1863,9 +1912,11 @@ var TCFiltersType;
     TCFiltersType["number"] = "number";
     TCFiltersType["select"] = "select";
     TCFiltersType["boolean"] = "boolean";
-    TCFiltersType["datetime"] = "datetime-local";
     TCFiltersType["hidden"] = "hidden";
     TCFiltersType["date"] = "date-local";
+    TCFiltersType["datetime"] = "datetime-local";
+    TCFiltersType["browserdate"] = "date";
+    TCFiltersType["browserdatetime"] = "datetime";
 })(TCFiltersType || (TCFiltersType = {}));
 var TCCondition;
 (function (TCCondition) {
@@ -2084,6 +2135,42 @@ 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));
@@ -2099,8 +2186,9 @@ class TCloudUiFiltersComponent {
         }
     }
     get submitText() { return this._submitText; }
-    constructor(datepipe) {
+    constructor(datepipe, _tCloudUiLayoutService) {
         this.datepipe = datepipe;
+        this._tCloudUiLayoutService = _tCloudUiLayoutService;
         this.datepickers = [];
         this.inputs = [];
         this.show_filters = false;
@@ -2125,6 +2213,9 @@ class TCloudUiFiltersComponent {
         this.first = true;
         this.start_filter_fc = undefined;
     }
+    get layout() {
+        return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
+    }
     ngOnInit() {
         setTimeout(() => {
             if (this.filters && (this.filters).length > 0) {
@@ -2316,6 +2407,22 @@ class TCloudUiFiltersComponent {
         }
         this.first = false;
     }
+    convertDateNativeToNumber(dataString, withTime) {
+        try {
+            if (withTime) {
+                const [date, time] = dataString.split('T');
+                const [ano, mes, dia] = date.split('-');
+                const [hora, minuto] = time.split(':');
+                return +(`${ano}${mes}${dia}${hora}${minuto}`);
+            }
+            else {
+                const [ano, mes, dia] = dataString.split('-');
+                return +(`${ano}${mes}${dia}`);
+            }
+        }
+        catch (error) { }
+        return 0;
+    }
     convertDataToNumber(dataString) {
         try {
             const [dia, mes, ano] = dataString.split('/');
@@ -2325,6 +2432,8 @@ class TCloudUiFiltersComponent {
         return 0;
     }
     searchIn(item, event) {
+        console.log('event', event);
+        // 2025-12-09
         this.start_filter_fc = undefined;
         let isValid = true;
         if (event === 'sync' && isValid) {
@@ -2361,6 +2470,24 @@ class TCloudUiFiltersComponent {
             item.searchText = `${this.convertDataToNumber(item.value)}`;
             this.onChange.emit(true);
         }
+        if (item.type === TCFiltersType.browserdate && item.value) {
+            isValid = false;
+            console.log('item', item);
+            const onlyNumbers = (item.value).replace(/\D/g, '');
+            if ((onlyNumbers && (onlyNumbers).length === 8)) {
+                item.searchText = `${this.convertDateNativeToNumber(item.value)}`;
+                this.onChange.emit(true);
+            }
+        }
+        if (item.type === TCFiltersType.browserdatetime && item.value) {
+            isValid = false;
+            console.log('item', item);
+            const onlyNumbers = (item.value).replace(/\D/g, '');
+            if ((onlyNumbers && (onlyNumbers).length === 12)) {
+                item.searchText = `${this.convertDateNativeToNumber(item.value, true)}`;
+                this.onChange.emit(true);
+            }
+        }
         if (event && event.result && (event.result.start || event.result.stop)) {
             isValid = false;
             this.onChange.emit(true);
@@ -2574,13 +2701,13 @@ 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 }], target: i0.ɵɵFactoryTarget.Component }); }
-    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=\"tcloud-ui-filters area-filter\" [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-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 }}\"><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 \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 !== 'date-local'\">\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            </ng-container>\n                        \n            <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local'\">\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                            #_input\n                            [(ngModel)]=\"item.value\"\n                            placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                            name=\"input_{{i+1}}\" \n                            type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \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 }}\"><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                        <select \n                            #_input\n                            [(ngModel)]=\"item.value\"\n                            name=\"input_{{i+1}}\" \n                            class=\"tc-form-control\"                     \n                            (change)=\"searchIn(item, $event)\">\n                            <option [ngValue]=\"\"></option>\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\">\n                        <label>\n                            {{ item.placeholder }}\n                            <input \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}\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"] }] }); }
+    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            @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=\"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            @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            <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            @if (layout === 'classic') {\n              <i [class.to-active]=\"_input.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            <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              <option [ngValue]=\"\"></option>\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], providers: [DatePipe], template: "<div *ngIf=\"show_filters\" class=\"tcloud-ui-filters area-filter\" [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-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 }}\"><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 \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 !== 'date-local'\">\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            </ng-container>\n                        \n            <ng-container *ngIf=\"item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local'\">\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                            #_input\n                            [(ngModel)]=\"item.value\"\n                            placeholder=\"{{ (item.placeholder !== '') ? item.placeholder : '' }}\"\n                            name=\"input_{{i+1}}\" \n                            type=\"{{ (item.type === 'number') ? 'text' : item.type }}\" \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 }}\"><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                        <select \n                            #_input\n                            [(ngModel)]=\"item.value\"\n                            name=\"input_{{i+1}}\" \n                            class=\"tc-form-control\"                     \n                            (change)=\"searchIn(item, $event)\">\n                            <option [ngValue]=\"\"></option>\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\">\n                        <label>\n                            {{ item.placeholder }}\n                            <input \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}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DatePipe }], propDecorators: { _formulario: [{
+            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            @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=\"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            @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            <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            @if (layout === 'classic') {\n              <i [class.to-active]=\"_input.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            <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              <option [ngValue]=\"\"></option>\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']
             }], border: [{
@@ -2979,53 +3106,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             type: Injectable
         }] });
 
-/**
- * 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() {
-        try {
-            return this.layoutService?.getCurrentLayout();
-        }
-        catch (error) {
-            // console.warn('getCurrentLayout', error);
-        }
-        return '';
-    }
-    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 TCloudUiModalComponent {
     /**
      * confirm boolean - Indica se será um modal do tipo confirmação - default false
@@ -3260,6 +3340,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }] } });
 
+class TCloudUiButtonDirective {
+    constructor(_tCloudUiLayoutService, _el) {
+        this._tCloudUiLayoutService = _tCloudUiLayoutService;
+        this._el = _el;
+        this.color = input('primary');
+        this.size = input('sm');
+        this.fullWidth = input(false);
+        this.tcloudButton = input('filled');
+        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.startsWith('tc-btn')));
+        tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
+        let tcloudButton = this.tcloudButton();
+        if (!tcloudButton) {
+            tcloudButton = 'filled';
+        }
+        if (layout === 'modern') {
+            this._el.nativeElement.classList.add('tc-rev-btn');
+            this.fullWidth() ? this._el.nativeElement.classList.add('tc-rev-btn--full-width') : null;
+            this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
+            this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcloudButton}`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiButtonDirective, deps: [{ token: TCloudUiLayoutService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TCloudUiButtonDirective, isStandalone: true, selector: "[tcloudButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, tcloudButton: { classPropertyName: "tcloudButton", publicName: "tcloudButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tcloudButton]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: i0.ElementRef }] });
+
 class TCloudUiModalFooterComponent {
     constructor(_tCloudUiLayoutService, tcloudModalService) {
         this._tCloudUiLayoutService = _tCloudUiLayoutService;
@@ -3303,13 +3428,13 @@ class TCloudUiModalFooterComponent {
             this.subscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiModalFooterComponent, deps: [{ token: i1$1.TCloudUiLayoutService }, { token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TCloudUiModalFooterComponent, isStandalone: true, selector: "tcloud-ui-modal-footer", inputs: { btnCloseText: "btnCloseText", btnCancelText: "btnCancelText", btnConfirmText: "btnConfirmText" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], ngImport: i0, template: "<div class=\"tcloud-ui-modal-footer tc-modal-footer\">\n\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\n    \n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\n      <input \n        tcloudForm\n        [disabled]=\"loading\"\n        placeholder=\"{{ param_confirm.confirmText }}\"\n        name=\"txt_value\" \n        [(ngModel)]=\"txt_value\" \n        type=\"text\" \n        class=\"tc-form-confirm tc-form-control\" \n        required \n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\n    </form>\n\n  </div>\n\n  <hr>\n\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\n    <!-- {{ param_confirm | json }} -->\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toClose()\">{{ btnCloseText }}</button>\n\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn tc-btn-primary margin-l-5\" tcloudButton=\"filled\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\n\n  </div>\n</div>\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}.margin-l-5{margin-left:5px}.tc-form-confirm{max-width:240px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.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: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TCloudUiButtonDirective$1, selector: "[tcloudButton]", inputs: ["color", "size", "fullWidth", "tcloudButton"] }, { kind: "directive", type: TCloudUiFormDirective$1, selector: "[tcloudForm]", inputs: ["fullWidth"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiModalFooterComponent, deps: [{ token: TCloudUiLayoutService }, { token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TCloudUiModalFooterComponent, isStandalone: true, selector: "tcloud-ui-modal-footer", inputs: { btnCloseText: "btnCloseText", btnCancelText: "btnCancelText", btnConfirmText: "btnConfirmText" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], ngImport: i0, template: "<div class=\"tcloud-ui-modal-footer tc-modal-footer\">\n\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\n    \n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\n      <input \n        tcloudForm\n        [disabled]=\"loading\"\n        placeholder=\"{{ param_confirm.confirmText }}\"\n        name=\"txt_value\" \n        [(ngModel)]=\"txt_value\" \n        type=\"text\" \n        class=\"tc-form-confirm tc-form-control\" \n        required \n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\n    </form>\n\n  </div>\n\n  <hr>\n\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\n    <!-- {{ param_confirm | json }} -->\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toClose()\">{{ btnCloseText }}</button>\n\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn tc-btn-primary margin-l-5\" tcloudButton=\"filled\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\n\n  </div>\n</div>\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}.margin-l-5{margin-left:5px}.tc-form-confirm{max-width:240px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.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: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TCloudUiButtonDirective, selector: "[tcloudButton]", inputs: ["color", "size", "fullWidth", "tcloudButton"] }, { kind: "directive", type: TCloudUiFormDirective, selector: "[tcloudForm]", inputs: ["fullWidth"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiModalFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-modal-footer', standalone: true, imports: [CommonModule, FormsModule, TCloudUiButtonDirective$1, TCloudUiFormDirective$1], template: "<div class=\"tcloud-ui-modal-footer tc-modal-footer\">\n\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\n    \n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\n      <input \n        tcloudForm\n        [disabled]=\"loading\"\n        placeholder=\"{{ param_confirm.confirmText }}\"\n        name=\"txt_value\" \n        [(ngModel)]=\"txt_value\" \n        type=\"text\" \n        class=\"tc-form-confirm tc-form-control\" \n        required \n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\n    </form>\n\n  </div>\n\n  <hr>\n\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\n    <!-- {{ param_confirm | json }} -->\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toClose()\">{{ btnCloseText }}</button>\n\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn tc-btn-primary margin-l-5\" tcloudButton=\"filled\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\n\n  </div>\n</div>\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}.margin-l-5{margin-left:5px}.tc-form-confirm{max-width:240px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.TCloudUiLayoutService }, { type: TcloudModalService }], propDecorators: { btnCloseText: [{
+            args: [{ selector: 'tcloud-ui-modal-footer', standalone: true, imports: [CommonModule, FormsModule, TCloudUiButtonDirective, TCloudUiFormDirective], template: "<div class=\"tcloud-ui-modal-footer tc-modal-footer\">\n\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\n    \n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\n      <input \n        tcloudForm\n        [disabled]=\"loading\"\n        placeholder=\"{{ param_confirm.confirmText }}\"\n        name=\"txt_value\" \n        [(ngModel)]=\"txt_value\" \n        type=\"text\" \n        class=\"tc-form-confirm tc-form-control\" \n        required \n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\n    </form>\n\n  </div>\n\n  <hr>\n\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\n    <!-- {{ param_confirm | json }} -->\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toClose()\">{{ btnCloseText }}</button>\n\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn tc-btn-primary margin-l-5\" tcloudButton=\"filled\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\n\n  </div>\n</div>\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}.margin-l-5{margin-left:5px}.tc-form-confirm{max-width:240px}\n"] }]
+        }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: TcloudModalService }], propDecorators: { btnCloseText: [{
                 type: Input
             }], btnCancelText: [{
                 type: Input
@@ -3818,12 +3943,12 @@ class TabMenuService {
             // do not trigger navigation
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TabMenuService, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TabMenuService, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TabMenuService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TabMenuService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }] });
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }] });
 
 class TCloudUiTabMenuComponent {
     set loading(loading) {
@@ -6022,91 +6147,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 args: ['paste', ['$event']]
             }] } });
 
-class TCloudUiButtonDirective {
-    constructor(_tCloudUiLayoutService, _el) {
-        this._tCloudUiLayoutService = _tCloudUiLayoutService;
-        this._el = _el;
-        this.color = input('primary');
-        this.size = input('sm');
-        this.fullWidth = input(false);
-        this.tcloudButton = input('filled');
-        effect(() => {
-            this.setClasses();
-        });
-    }
-    layout() {
-        return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
-    }
-    setClasses() {
-        const layout = this.layout();
-        if (layout === '') {
-            return;
-        }
-        const tokenList = this._el.nativeElement.classList;
-        tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-btn')));
-        tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
-        let tcloudButton = this.tcloudButton();
-        if (!tcloudButton) {
-            tcloudButton = 'filled';
-        }
-        if (layout === 'modern') {
-            this.fullWidth() ? this._el.nativeElement.classList.add('tc-rev-btn--full-width') : null;
-            this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
-            this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcloudButton}`);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiButtonDirective, deps: [{ token: TCloudUiLayoutService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TCloudUiButtonDirective, isStandalone: true, selector: "[tcloudButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, tcloudButton: { classPropertyName: "tcloudButton", publicName: "tcloudButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-btn" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tcloudButton]',
-                    host: {
-                        class: 'tc-rev-btn'
-                    },
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: i0.ElementRef }] });
-
-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 === '') {
-            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.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 } }, host: { classAttribute: "tc-rev-input-control" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFormDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tcloudForm]',
-                    host: {
-                        class: 'tc-rev-input-control'
-                    },
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: i0.ElementRef }] });
-
 const COMPONENTS = [
     TCloudUiAccordionComponent,
     TCloudUiAccordionBodyComponent,
@@ -8155,7 +8195,7 @@ class TcRevTabItemComponent {
         this.fullWidth = input(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: TcRevTabItemComponent, isStandalone: true, selector: "tc-rev-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<a\n  *ngIf=\"this.url()\"\n  class=\"tc-rev-tab-item\"\n  [class.disabled]=\"this.disabled()\"\n  [class.full-width]=\"this.fullWidth()\"\n  [routerLinkActive]=\"'active'\"\n  [routerLink]=\"[this.url()]\"\n  (click)=\"this.onClick.emit($event)\">\n  <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n  *ngIf=\"!this.url()\"\n  class=\"tc-rev-tab-item\"\n  [class.active]=\"this.active()\"\n  [class.full-width]=\"this.fullWidth()\"\n  [disabled]=\"this.disabled()\"\n  (click)=\"this.onClick.emit($event)\">\n  <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tc-rev-tab-item.full-width,.tc-rev-tab-item:link.full-width{width:100%}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}@media(max-width:480px){:host{display:contents}:host .tc-rev-tab-item{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: TcRevTabItemComponent, isStandalone: true, selector: "tc-rev-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<a\n  *ngIf=\"this.url()\"\n  class=\"tc-rev-tab-item\"\n  [class.disabled]=\"this.disabled()\"\n  [class.full-width]=\"this.fullWidth()\"\n  [routerLinkActive]=\"'active'\"\n  [routerLink]=\"[this.url()]\"\n  (click)=\"this.onClick.emit($event)\">\n  <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n  *ngIf=\"!this.url()\"\n  class=\"tc-rev-tab-item\"\n  [class.active]=\"this.active()\"\n  [class.full-width]=\"this.fullWidth()\"\n  [disabled]=\"this.disabled()\"\n  (click)=\"this.onClick.emit($event)\">\n  <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tc-rev-tab-item.full-width,.tc-rev-tab-item:link.full-width{width:100%}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}@media(max-width:480px){:host{display:contents}:host .tc-rev-tab-item{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevTabItemComponent, decorators: [{
             type: Component,
@@ -8245,7 +8285,7 @@ class TcRevSubNavbarItemComponent {
         this.onClick.emit(_ev);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevSubNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TcRevSubNavbarItemComponent, isStandalone: true, selector: "tc-rev-sub-navbar-item", inputs: { isMenuExpanded: { classPropertyName: "isMenuExpanded", publicName: "isMenuExpanded", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<li\n    class=\"tc-sub-navbar-item\"\n    [class.tc-rev-submenu-expanded]=\"isMenuExpanded\">\n        <a\n            class=\"tc-sub-navbar-item-link\"\n            [class.selected]=\"active()\"\n            [routerLink]=\"routerLink()\"\n            routerLinkActive=\"active\"\n            [queryParams]=\"queryParams()\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n            [title]=\"label()\"\n            (click)=\"handleClick($event)\">\n\n            <div class=\"navbar-item-icon-container\">\n              <ng-content select=\"[icon]\"></ng-content>\n            </div>\n\n            @if (isMenuExpanded)\n            {\n                <div class=\"navbar-item-label\">\n                    {{label()}}\n                </div>\n            }\n        </a>\n</li>\n", styles: [":host{display:block}.tc-sub-navbar-item{list-style:none;margin:0;padding:0}.tc-sub-navbar-item .tc-sub-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;font-family:var(--f-family);display:flex;transition:all .2s ease;text-decoration:none}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container{text-align:center;align-content:center;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);font-size:var(--f-size-20);height:var(--size-36);width:var(--size-36);transition:all .2s ease;min-height:var(--size-36);min-width:var(--size-36);max-height:var(--size-36);max-width:var(--size-36)}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container:hover,.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container:focus{background-color:var(--c-neutral-200);color:var(--c-primary-500)}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-label{align-content:center;color:var(--c-neutral-700);font-size:var(--f-size-14);height:var(--size-36);padding-left:var(--size-8);transition:all .2s ease;min-height:var(--size-36);max-height:var(--size-36)}.tc-sub-navbar-item .tc-sub-navbar-item-link:hover,.tc-sub-navbar-item .tc-sub-navbar-item-link:focus{color:var(--c-primary-500)}.tc-sub-navbar-item .tc-sub-navbar-item-link.active .navbar-item-icon-container,.tc-sub-navbar-item .tc-sub-navbar-item-link.selected .navbar-item-icon-container,.tc-sub-navbar-item .tc-sub-navbar-item-link:active .navbar-item-icon-container{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link .navbar-item-icon-container{background-color:var(--c-neutral-200)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link:hover .navbar-item-label,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link:focus .navbar-item-label{color:var(--c-primary-500)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active .navbar-item-icon-container,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected .navbar-item-icon-container{background-color:var(--c-primary-300)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active .navbar-item-label,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected .navbar-item-label{color:var(--c-primary-500);font-weight:var(--f-weight-700)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TcRevSubNavbarItemComponent, isStandalone: true, selector: "tc-rev-sub-navbar-item", inputs: { isMenuExpanded: { classPropertyName: "isMenuExpanded", publicName: "isMenuExpanded", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<li\n    class=\"tc-sub-navbar-item\"\n    [class.tc-rev-submenu-expanded]=\"isMenuExpanded\">\n        <a\n            class=\"tc-sub-navbar-item-link\"\n            [class.selected]=\"active()\"\n            [routerLink]=\"routerLink()\"\n            routerLinkActive=\"active\"\n            [queryParams]=\"queryParams()\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n            [title]=\"label()\"\n            (click)=\"handleClick($event)\">\n\n            <div class=\"navbar-item-icon-container\">\n              <ng-content select=\"[icon]\"></ng-content>\n            </div>\n\n            @if (isMenuExpanded)\n            {\n                <div class=\"navbar-item-label\">\n                    {{label()}}\n                </div>\n            }\n        </a>\n</li>\n", styles: [":host{display:block}.tc-sub-navbar-item{list-style:none;margin:0;padding:0}.tc-sub-navbar-item .tc-sub-navbar-item-link{align-items:center;border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;font-family:var(--f-family);display:flex;transition:all .2s ease;text-decoration:none}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container{text-align:center;align-content:center;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);font-size:var(--f-size-20);height:var(--size-36);width:var(--size-36);transition:all .2s ease;min-height:var(--size-36);min-width:var(--size-36);max-height:var(--size-36);max-width:var(--size-36)}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container:hover,.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-icon-container:focus{background-color:var(--c-neutral-200);color:var(--c-primary-500)}.tc-sub-navbar-item .tc-sub-navbar-item-link .navbar-item-label{align-content:center;color:var(--c-neutral-700);font-size:var(--f-size-14);height:var(--size-36);padding-left:var(--size-8);transition:all .2s ease;min-height:var(--size-36);max-height:var(--size-36)}.tc-sub-navbar-item .tc-sub-navbar-item-link:hover,.tc-sub-navbar-item .tc-sub-navbar-item-link:focus{color:var(--c-primary-500)}.tc-sub-navbar-item .tc-sub-navbar-item-link.active .navbar-item-icon-container,.tc-sub-navbar-item .tc-sub-navbar-item-link.selected .navbar-item-icon-container,.tc-sub-navbar-item .tc-sub-navbar-item-link:active .navbar-item-icon-container{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link .navbar-item-icon-container{background-color:var(--c-neutral-200)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link:hover .navbar-item-label,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link:focus .navbar-item-label{color:var(--c-primary-500)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active .navbar-item-icon-container,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected .navbar-item-icon-container{background-color:var(--c-primary-300)}.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.active .navbar-item-label,.tc-sub-navbar-item.tc-rev-submenu-expanded .tc-sub-navbar-item-link.selected .navbar-item-label{color:var(--c-primary-500);font-weight:var(--f-weight-700)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevSubNavbarItemComponent, decorators: [{
             type: Component,
@@ -8380,7 +8420,7 @@ class TcRevBreadcrumbComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TcRevBreadcrumbComponent, isStandalone: true, selector: "tc-rev-breadcrumb", ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"tc-rev-breadcrumb\">\n    <ol class=\"tc-rev-breadcrumb-list\">\n        <!-- Link para o Dashboard -->\n        <li class=\"tc-rev-breadcrumb-item\">\n          <a [routerLink]=\"['/dashboard']\"><i class=\"fa-light fa-house-blank\"></i>\n            @if (breadcrumbs.length > 0)\n            {\n              <i class=\"fa-light fa-chevron-right\"></i>\n            }\n            @else\n            {\n              P\u00E1gina inicial\n            }\n          </a>\n        </li>\n\n        <!-- Itera\u00E7\u00E3o sobre os itens do breadcrumb -->\n        <li\n            *ngFor=\"let breadcrumb of breadcrumbs; let i = index; let last = last\"\n            class=\"tc-rev-breadcrumb-item\"\n            [ngClass]=\"{ 'active': last }\"\n            [attr.aria-current]=\"last ? 'page' : null\">\n            <ng-container *ngIf=\"!last\">\n                <a (click)=\"navigate(breadcrumb.url, i)\">{{ breadcrumb.label }}</a>\n                <i class=\"fa-light fa-chevron-right\"></i>\n            </ng-container>\n            <ng-container *ngIf=\"last\">\n                {{ breadcrumb.label }}\n            </ng-container>\n        </li>\n    </ol>\n</nav>", styles: [":host{display:block}.tc-rev-breadcrumb-list{display:flex;list-style:none;padding:0;margin:0;margin-bottom:var(--size-24)}.tc-rev-breadcrumb-item{display:flex;align-items:center;color:var(--c-neutral-700);font-size:var(--f-size-14);font-family:var(--f-family)}.tc-rev-breadcrumb-item a{text-decoration:none;color:inherit;cursor:pointer}.tc-rev-breadcrumb-item a:hover{text-decoration:underline}.tc-rev-breadcrumb-item i{margin:0}.tc-rev-breadcrumb-item i.fa-chevron-right{margin:0 var(--size-12)}.tc-rev-breadcrumb-item.active{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TcRevBreadcrumbComponent, isStandalone: true, selector: "tc-rev-breadcrumb", ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"tc-rev-breadcrumb\">\n    <ol class=\"tc-rev-breadcrumb-list\">\n        <!-- Link para o Dashboard -->\n        <li class=\"tc-rev-breadcrumb-item\">\n          <a [routerLink]=\"['/dashboard']\"><i class=\"fa-light fa-house-blank\"></i>\n            @if (breadcrumbs.length > 0)\n            {\n              <i class=\"fa-light fa-chevron-right\"></i>\n            }\n            @else\n            {\n              P\u00E1gina inicial\n            }\n          </a>\n        </li>\n\n        <!-- Itera\u00E7\u00E3o sobre os itens do breadcrumb -->\n        <li\n            *ngFor=\"let breadcrumb of breadcrumbs; let i = index; let last = last\"\n            class=\"tc-rev-breadcrumb-item\"\n            [ngClass]=\"{ 'active': last }\"\n            [attr.aria-current]=\"last ? 'page' : null\">\n            <ng-container *ngIf=\"!last\">\n                <a (click)=\"navigate(breadcrumb.url, i)\">{{ breadcrumb.label }}</a>\n                <i class=\"fa-light fa-chevron-right\"></i>\n            </ng-container>\n            <ng-container *ngIf=\"last\">\n                {{ breadcrumb.label }}\n            </ng-container>\n        </li>\n    </ol>\n</nav>", styles: [":host{display:block}.tc-rev-breadcrumb-list{display:flex;list-style:none;padding:0;margin:0;margin-bottom:var(--size-24)}.tc-rev-breadcrumb-item{display:flex;align-items:center;color:var(--c-neutral-700);font-size:var(--f-size-14);font-family:var(--f-family)}.tc-rev-breadcrumb-item a{text-decoration:none;color:inherit;cursor:pointer}.tc-rev-breadcrumb-item a:hover{text-decoration:underline}.tc-rev-breadcrumb-item i{margin:0}.tc-rev-breadcrumb-item i.fa-chevron-right{margin:0 var(--size-12)}.tc-rev-breadcrumb-item.active{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevBreadcrumbComponent, decorators: [{
             type: Component,