@dev-tcloud/tcloud-ui 6.7.0 → 6.8.1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, InjectionToken, Optional, Inject, input, effect, Directive, Pipe, ViewEncapsulation, signal, inject, HostListener, ChangeDetectorRef, ChangeDetectionStrategy, computed, ApplicationRef, output, ContentChildren, NgModule, makeEnvironmentProviders, model, viewChild } from '@angular/core';
+import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, InjectionToken, Optional, Inject, input, effect, Directive, Pipe, ViewEncapsulation, signal, inject, HostListener, ChangeDetectorRef, ChangeDetectionStrategy, computed, ApplicationRef, output, model, ContentChildren, NgModule, makeEnvironmentProviders, viewChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
 import { Subject, Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, map } from 'rxjs';
@@ -2894,6 +2894,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Output
             }] } });
 
+class TCloudUiInputContainerComponent {
+    constructor() {
+        this.fullWidth = input(false);
+        this.inputId = input('');
+        this.label = input('');
+        this.labelPosition = input('top');
+        this.required = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiInputContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiInputContainerComponent, isStandalone: true, selector: "tcloud-ui-input-container", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"{{ 'tcloud-ui-input-container ' + 'label-' + this.labelPosition() }}\"\n  [class.full-width]=\"this.fullWidth()\">\n  @if (this.label()) {\n    @if (this.inputId()) {\n      <label\n        class=\"tcloud-ui-input-label cursor-pointer\" [for]=\"this.inputId()\">\n        {{this.label()}}\n        @if (this.required()) {\n          <ng-container *ngTemplateOutlet=\"required\" />\n        }\n      </label>\n    }\n    @else {\n      <label\n        class=\"tcloud-ui-input-label\">\n        {{this.label()}}\n        @if (this.required()) {\n          <ng-container *ngTemplateOutlet=\"required\" />\n        }\n      </label>\n    }\n  }\n  <ng-content />\n</div>\n\n\n<ng-template #required>\n  <span class=\"c-danger-500\">*</span>\n</ng-template>\n", styles: [":host{display:block}.tcloud-ui-input-container{display:inline-flex;gap:var(--size-4)}.tcloud-ui-input-container.full-width{width:100%}.tcloud-ui-input-container .tcloud-ui-input-label{font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);color:var(--c-neutral-700);line-height:var(--l-height-20);margin:0}.tcloud-ui-input-container.label-top{flex-direction:column}.tcloud-ui-input-container.label-right{align-items:center;flex-direction:row-reverse}.tcloud-ui-input-container.label-bottom{flex-direction:column-reverse}.tcloud-ui-input-container.label-left{align-items:center;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiInputContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-input-container', imports: [CommonModule], template: "<div\n  class=\"{{ 'tcloud-ui-input-container ' + 'label-' + this.labelPosition() }}\"\n  [class.full-width]=\"this.fullWidth()\">\n  @if (this.label()) {\n    @if (this.inputId()) {\n      <label\n        class=\"tcloud-ui-input-label cursor-pointer\" [for]=\"this.inputId()\">\n        {{this.label()}}\n        @if (this.required()) {\n          <ng-container *ngTemplateOutlet=\"required\" />\n        }\n      </label>\n    }\n    @else {\n      <label\n        class=\"tcloud-ui-input-label\">\n        {{this.label()}}\n        @if (this.required()) {\n          <ng-container *ngTemplateOutlet=\"required\" />\n        }\n      </label>\n    }\n  }\n  <ng-content />\n</div>\n\n\n<ng-template #required>\n  <span class=\"c-danger-500\">*</span>\n</ng-template>\n", styles: [":host{display:block}.tcloud-ui-input-container{display:inline-flex;gap:var(--size-4)}.tcloud-ui-input-container.full-width{width:100%}.tcloud-ui-input-container .tcloud-ui-input-label{font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);color:var(--c-neutral-700);line-height:var(--l-height-20);margin:0}.tcloud-ui-input-container.label-top{flex-direction:column}.tcloud-ui-input-container.label-right{align-items:center;flex-direction:row-reverse}.tcloud-ui-input-container.label-bottom{flex-direction:column-reverse}.tcloud-ui-input-container.label-left{align-items:center;flex-direction:row}\n"] }]
+        }] });
+
 class Step {
     constructor() {
         this.status = '';
@@ -5387,6 +5403,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }] } });
 
+class TCloudUiCheckboxDirective {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiCheckboxDirective, isStandalone: true, selector: "input[type=\"checkbox\"][tcloudUiCheckbox]", host: { classAttribute: "tcloud-ui-checkbox" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[type="checkbox"][tcloudUiCheckbox]',
+                    host: {
+                        class: 'tcloud-ui-checkbox'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
 class TCloudUiCurrencyDirective {
     constructor(el, renderer) {
         this.el = el;
@@ -6666,192 +6697,966 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             args: [{ selector: 'tcloud-ui-card-title', imports: [], template: "<div class=\"tcloud-ui-card-title c-neutral-700\">\n    <span class=\"tcloud-ui-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n        <ng-content select=\"[icon]\"></ng-content>\n    </span>\n\n    <h2 class=\"tcloud-ui-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tcloud-ui-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tcloud-ui-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tcloud-ui-card-title__text{cursor:default}@media(max-width:480px){.tcloud-ui-card-title{max-height:var(--size-32);min-height:var(--size-32)}.tcloud-ui-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32);font-size:var(--f-size-16)}.tcloud-ui-card-title__text{font-size:var(--f-size-16);line-height:var(--l-height-16);font-weight:var(--f-weight-600);text-transform:inherit;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;line-clamp:2;-webkit-line-clamp:2}}\n"] }]
         }] });
 
-class TCloudUiSubNavbarItemComponent {
-    constructor() {
-        this.isMenuExpanded = false;
-        this.label = input.required();
-        this.onClick = output();
-        this.active = input(false);
-        this.routerLink = input(null);
-        this.queryParams = input(null);
+class TcRevButtonDirective {
+    constructor(_el) {
+        this._el = _el;
+        this.color = input('primary');
+        this.size = input('sm');
+        this.fullWidth = input(false);
+        this.tcRevButton = input('filled');
+        effect(() => {
+            this.setClasses();
+        });
     }
-    handleClick(_ev) {
-        this.onClick.emit(_ev);
+    setClasses() {
+        const tokenList = this._el.nativeElement.classList;
+        tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
+        let tcRevButton = this.tcRevButton();
+        if (!tcRevButton) {
+            tcRevButton = 'filled';
+        }
+        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()}-${tcRevButton}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiSubNavbarItemComponent, isStandalone: true, selector: "tcloud-ui-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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TcRevButtonDirective, isStandalone: true, selector: "button[tcRevButton]", 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 }, tcRevButton: { classPropertyName: "tcRevButton", publicName: "tcRevButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-btn" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tcloud-ui-sub-navbar-item', imports: [
-                        CommonModule,
-                        RouterModule,
-                    ], 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"] }]
-        }], propDecorators: { isMenuExpanded: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tcRevButton]',
+                    host: {
+                        class: 'tc-rev-btn'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
-class TCloudUiSubNavbarComponent {
+class TcRevCardTitleComponent {
     constructor() {
-        this.isMenuExpanded = signal(true);
-        this.onSubMenuExpandChange = output();
+        this.title = input.required();
     }
-    ngAfterContentInit() {
-        setTimeout(() => this.setExpandedMenuValueToChildrend(), 0);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TcRevCardTitleComponent, isStandalone: true, selector: "tc-rev-card-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"tc-rev-card-title c-neutral-700\">\n    <span class=\"tc-rev-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n        <ng-content select=\"[icon]\"></ng-content>\n    </span>\n\n    <h2 class=\"tc-rev-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__text{cursor:default}@media(max-width:480px){.tc-rev-card-title{max-height:var(--size-32);min-height:var(--size-32)}.tc-rev-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32);font-size:var(--f-size-16)}.tc-rev-card-title__text{font-size:var(--f-size-16);line-height:var(--l-height-16);font-weight:var(--f-weight-600);text-transform:inherit;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevCardTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tc-rev-card-title', imports: [], template: "<div class=\"tc-rev-card-title c-neutral-700\">\n    <span class=\"tc-rev-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n        <ng-content select=\"[icon]\"></ng-content>\n    </span>\n\n    <h2 class=\"tc-rev-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__text{cursor:default}@media(max-width:480px){.tc-rev-card-title{max-height:var(--size-32);min-height:var(--size-32)}.tc-rev-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32);font-size:var(--f-size-16)}.tc-rev-card-title__text{font-size:var(--f-size-16);line-height:var(--l-height-16);font-weight:var(--f-weight-600);text-transform:inherit;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}}\n"] }]
+        }] });
+
+class TCloudUiCardAccordionComponent {
+    constructor() {
+        this._viewPort = inject(TCloudUiDeviceUtilsService);
+        this.toggle = output();
+        this.title = input('');
+        this.iconClass = input('fa-light fa-hard-drive');
+        this.showMoreText = input('Exibir mais');
+        this.showLessText = input('Exibir menos');
+        this.badge = input(null);
+        this.isOpen = model(false);
+        this.isDesktop = this._viewPort.isDesktop;
     }
-    handleExpandMenu() {
-        this.isMenuExpanded.update((value) => !value);
-        this.setExpandedMenuValueToChildrend();
+    toggleAccordion() {
+        this.isOpen.update((current) => !current);
+        this.toggle.emit(this.isOpen());
     }
-    setExpandedMenuValueToChildrend() {
-        if (!this.subNavbarItems?.length)
-            return;
-        this.subNavbarItems.forEach((x) => {
-            x.isMenuExpanded = this.isMenuExpanded();
-        });
-        this.onSubMenuExpandChange.emit(this.isMenuExpanded());
+    /**
+     * APPLY FUNCTIONS RESPONSIVE < 500PX
+     */
+    get accordionExtraClasses() {
+        if (this.isDesktop()) {
+            return ['pad-16'];
+        }
+        //Responsive Classes
+        return ['pad-14'];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiSubNavbarComponent, isStandalone: true, selector: "tcloud-ui-sub-navbar", outputs: { onSubMenuExpandChange: "onSubMenuExpandChange" }, queries: [{ propertyName: "subNavbarItems", predicate: TCloudUiSubNavbarItemComponent }], ngImport: i0, template: "<nav class=\"tc-sub-navbar\">\n  <ul\n    class=\"tc-sub-navbar-list\"\n    [class.tc-rev-submenu-expanded]=\"isMenuExpanded()\"\n  >\n    <tcloud-ui-sub-navbar-item\n      [isMenuExpanded]=\"isMenuExpanded()\"\n      (click)=\"handleExpandMenu()\"\n      label=\"Minimizar\"\n    >\n      <i\n        class=\"fa-light\"\n        [class.fa-arrow-left-to-line]=\"isMenuExpanded()\"\n        [class.fa-arrow-right-to-line]=\"!isMenuExpanded()\"\n        icon\n      ></i>\n    </tcloud-ui-sub-navbar-item>\n    <ng-content></ng-content>\n  </ul>\n</nav>\n", styles: [":host{display:block;height:100%}.tc-sub-navbar{height:100%;margin:var(--size-0);padding:var(--size-0)}.tc-sub-navbar .tc-sub-navbar-list{background-color:var(--c-neutral-50);color:var(--c-neutral-700);box-shadow:var(--shadow-xs);border-radius:var(--bor-radius-8);display:flex;flex-direction:column;gap:var(--size-8);height:100%;list-style:none;margin:var(--size-0);overflow:hidden auto;padding:var(--size-8);width:var(--size-52)}.tc-sub-navbar .tc-sub-navbar-list::-webkit-scrollbar{display:none}.tc-sub-navbar .tc-sub-navbar-list.tc-rev-submenu-expanded{width:14.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TCloudUiSubNavbarItemComponent, selector: "tcloud-ui-sub-navbar-item", inputs: ["isMenuExpanded", "label", "active", "routerLink", "queryParams"], outputs: ["onClick"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCardAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiCardAccordionComponent, isStandalone: true, selector: "tcloud-ui-card-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, showMoreText: { classPropertyName: "showMoreText", publicName: "showMoreText", isSignal: true, isRequired: false, transformFunction: null }, showLessText: { classPropertyName: "showLessText", publicName: "showLessText", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle", isOpen: "isOpenChange" }, ngImport: i0, template: "<div class=\"tcloud-ui-card-accordion tcloud-ui-card bg-c-neutral-50  bor-xs bor-rad-16\"\n[ngClass]=\"accordionExtraClasses\"\n>\n  <tc-rev-card-title [title]=\"title()\" [class]=\"isOpen() ? 'pad-b-16' : '' \">\n    <i [class]=\"iconClass()\" icon></i>\n\n    <div\n      *ngIf=\"badge()\"\n      class=\"f-size-12 f-weight-600 pad-x-4 pad-y-2 bor-xs bor-rad-xs\"\n      [ngClass]=\"badge()?.class\"\n      [class.mar-l-8]=\"isDesktop()\"\n      >\n      {{ badge()?.text }}\n    </div>\n\n    @if(isDesktop()){\n      <button tcRevButton=\"outline\" color=\"dark\" size=\"sm\" class=\"mar-l-a\" (click)=\"toggleAccordion()\">\n        {{ isOpen() ? showLessText() : showMoreText() }}\n        <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n      </button>\n    }\n\n    @if(!isDesktop()){\n      <button tcRevButton=\"link\" color=\"dark\" size=\"md\" (click)=\"toggleAccordion()\" class=\"tcloud-ui-card-accordion__arrow-mobile mar-l-a\">\n        <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n      </button>\n    }\n\n  </tc-rev-card-title>\n  <ng-content *ngIf=\"isOpen()\"></ng-content>\n</div>\n", styles: [":host{display:block}.tcloud-ui-card-accordion{border-color:var(--c-neutral-400)}@media(max-width:480px){.tcloud-ui-card-accordion__arrow-mobile{font-size:var(--f-size-16);padding:0 var(--size-6)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TcRevCardTitleComponent, selector: "tc-rev-card-title", inputs: ["title"] }, { kind: "directive", type: TcRevButtonDirective, selector: "button[tcRevButton]", inputs: ["color", "size", "fullWidth", "tcRevButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCardAccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-sub-navbar', imports: [
-                        CommonModule,
-                        TCloudUiSubNavbarItemComponent,
-                    ], template: "<nav class=\"tc-sub-navbar\">\n  <ul\n    class=\"tc-sub-navbar-list\"\n    [class.tc-rev-submenu-expanded]=\"isMenuExpanded()\"\n  >\n    <tcloud-ui-sub-navbar-item\n      [isMenuExpanded]=\"isMenuExpanded()\"\n      (click)=\"handleExpandMenu()\"\n      label=\"Minimizar\"\n    >\n      <i\n        class=\"fa-light\"\n        [class.fa-arrow-left-to-line]=\"isMenuExpanded()\"\n        [class.fa-arrow-right-to-line]=\"!isMenuExpanded()\"\n        icon\n      ></i>\n    </tcloud-ui-sub-navbar-item>\n    <ng-content></ng-content>\n  </ul>\n</nav>\n", styles: [":host{display:block;height:100%}.tc-sub-navbar{height:100%;margin:var(--size-0);padding:var(--size-0)}.tc-sub-navbar .tc-sub-navbar-list{background-color:var(--c-neutral-50);color:var(--c-neutral-700);box-shadow:var(--shadow-xs);border-radius:var(--bor-radius-8);display:flex;flex-direction:column;gap:var(--size-8);height:100%;list-style:none;margin:var(--size-0);overflow:hidden auto;padding:var(--size-8);width:var(--size-52)}.tc-sub-navbar .tc-sub-navbar-list::-webkit-scrollbar{display:none}.tc-sub-navbar .tc-sub-navbar-list.tc-rev-submenu-expanded{width:14.5rem}\n"] }]
-        }], propDecorators: { subNavbarItems: [{
-                type: ContentChildren,
-                args: [TCloudUiSubNavbarItemComponent]
-            }] } });
+            args: [{ selector: 'tcloud-ui-card-accordion', imports: [CommonModule, TcRevCardTitleComponent, TcRevButtonDirective], template: "<div class=\"tcloud-ui-card-accordion tcloud-ui-card bg-c-neutral-50  bor-xs bor-rad-16\"\n[ngClass]=\"accordionExtraClasses\"\n>\n  <tc-rev-card-title [title]=\"title()\" [class]=\"isOpen() ? 'pad-b-16' : '' \">\n    <i [class]=\"iconClass()\" icon></i>\n\n    <div\n      *ngIf=\"badge()\"\n      class=\"f-size-12 f-weight-600 pad-x-4 pad-y-2 bor-xs bor-rad-xs\"\n      [ngClass]=\"badge()?.class\"\n      [class.mar-l-8]=\"isDesktop()\"\n      >\n      {{ badge()?.text }}\n    </div>\n\n    @if(isDesktop()){\n      <button tcRevButton=\"outline\" color=\"dark\" size=\"sm\" class=\"mar-l-a\" (click)=\"toggleAccordion()\">\n        {{ isOpen() ? showLessText() : showMoreText() }}\n        <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n      </button>\n    }\n\n    @if(!isDesktop()){\n      <button tcRevButton=\"link\" color=\"dark\" size=\"md\" (click)=\"toggleAccordion()\" class=\"tcloud-ui-card-accordion__arrow-mobile mar-l-a\">\n        <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n      </button>\n    }\n\n  </tc-rev-card-title>\n  <ng-content *ngIf=\"isOpen()\"></ng-content>\n</div>\n", styles: [":host{display:block}.tcloud-ui-card-accordion{border-color:var(--c-neutral-400)}@media(max-width:480px){.tcloud-ui-card-accordion__arrow-mobile{font-size:var(--f-size-16);padding:0 var(--size-6)}}\n"] }]
+        }] });
 
-const COMPONENTS = [
-    TCloudUiAccordionComponent,
-    TCloudUiAccordionBodyComponent,
-    TCloudUiAccordionTitleComponent,
-    TCloudUiChoiceIssuesComponent,
-    TCloudUiDataListComponent,
-    TCloudUiDataListOptionComponent,
-    TCloudUiDatepickerTimeComponent,
-    TCloudUiDatepickerComponent,
-    TCloudUiFiltersComponent,
-    TCloudUiRangeDateComponent,
-    TCloudUiInputSearchComponent,
-    TCloudUiLineStepCircleComponent,
-    TCloudUiLinhaLogoComponent,
-    TCloudUiModalComponent,
-    TCloudUiModalBodyComponent,
-    TCloudUiModalHeaderComponent,
-    TCloudUiModalFooterComponent,
-    TCloudUiMultiInputComponent,
-    TCloudUiMultiSelectComponent,
-    TCloudUiNotFoundComponent,
-    TCloudUiNumberStepComponent,
-    TCloudUiScrollBoxComponent,
-    TCloudUiTabMenuComponent,
-    TCloudUiTabHeadComponent,
-    TCloudUiTabContentComponent,
-    TCloudUiTabTitleComponent,
-    TCloudUiTabSubtitleComponent,
-    TCloudUiTableComponent,
-    TCloudUiInputPasswordComponent,
-    TCloudUiLabelTokenComponent,
-    TCloudUiToastComponent,
-    TCloudUiLineStepTitleComponent,
-    TCloudUiLoadingComponent,
-    TCloudUiCubesComponent,
-    TCloudUiMultiplesValuesComponent,
-    TCloudUiProgressBarComponent,
-    TCloudUiReorderItemsComponent,
-    TCloudUiWelcomeComponent,
-    TCloudUiContainerComponent,
-    TCloudUiContainerColComponent,
-    TCloudUiContainerContentComponent,
-    TCloudUiPaginationComponent,
-    TCloudUiCardComponent,
-    TCloudUiCardTitleComponent,
-    TCloudUiSubNavbarComponent,
-    TCloudUiSubNavbarItemComponent
-];
-const DIRECTIVES = [
-    TCloudUiAlignDirective,
-    TCloudUiCurrencyDirective,
-    TCloudUiElCopyDirective,
-    TCloudUiHoverParentDirective,
-    TCloudUiCheckAccessDirective,
-    TCloudUiNgCheckAccessDirective,
-    TCloudUiNgFeatureFlagsDirective,
-    TCloudUiTooltipDirective,
-    TCloudUiDigitOnlyDirective,
-    TCloudUiHighLightDirective,
-    TCloudUiIpMaskDirective,
-    TCloudUiButtonDirective,
-    TCloudUiFormDirective
-];
-const PIPES = [
-    ToTextPipe,
-    BytesPipe,
-    CNPJPipe,
-    CPFPipe,
-    DateBRPipe,
-    MonthNamePipe,
-    RespectivePipe,
-    StatusInfoPipe,
-    TCloudUiPaginationPipe
-];
-class TCloudUiModule {
-    static forRoot(config) {
-        const providers = [
-            // Configuração principal
-            { provide: TCLOUD_UI_CONFIG, useValue: config?.data ?? {} },
-            DatePipe,
-            StatusInfoPipe
-        ];
-        // Adiciona serviços customizados se fornecidos
-        if (config?.services?.userService) {
-            providers.push({ provide: TCLOUD_UI_USER_SERVICE, useClass: config.services.userService });
-        }
-        if (config?.services?.layoutService) {
-            providers.push({ provide: TCLOUD_UI_LAYOUT_SERVICE, useClass: config.services.layoutService });
-        }
-        if (config?.services?.viewportService) {
-            providers.push({ provide: TCLOUD_UI_VIEWPORT_SERVICE, useClass: config.services.viewportService });
-        }
-        return {
-            ngModule: TCloudUiModule,
-            providers
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModule, imports: [TCloudUiAccordionComponent,
-            TCloudUiAccordionBodyComponent,
-            TCloudUiAccordionTitleComponent,
-            TCloudUiChoiceIssuesComponent,
-            TCloudUiDataListComponent,
-            TCloudUiDataListOptionComponent,
-            TCloudUiDatepickerTimeComponent,
-            TCloudUiDatepickerComponent,
-            TCloudUiFiltersComponent,
-            TCloudUiRangeDateComponent,
-            TCloudUiInputSearchComponent,
-            TCloudUiLineStepCircleComponent,
-            TCloudUiLinhaLogoComponent,
-            TCloudUiModalComponent,
-            TCloudUiModalBodyComponent,
-            TCloudUiModalHeaderComponent,
-            TCloudUiModalFooterComponent,
-            TCloudUiMultiInputComponent,
-            TCloudUiMultiSelectComponent,
-            TCloudUiNotFoundComponent,
-            TCloudUiNumberStepComponent,
-            TCloudUiScrollBoxComponent,
-            TCloudUiTabMenuComponent,
-            TCloudUiTabHeadComponent,
-            TCloudUiTabContentComponent,
-            TCloudUiTabTitleComponent,
-            TCloudUiTabSubtitleComponent,
-            TCloudUiTableComponent,
-            TCloudUiInputPasswordComponent,
+/**
+ * Verifica se um elemento de texto está elipsado (texto cortado com ...)
+ * @param element - O elemento HTML que contém o texto
+ * @returns true se o texto estiver elipsado, false caso contrário
+ */
+function isElementTextEllipsed(element) {
+    if (!element)
+        return false;
+    // Verifica se o scrollWidth é maior que o clientWidth
+    // Isso indica que o texto está sendo cortado
+    return element.scrollWidth > element.clientWidth;
+}
+/**
+ * Verifica se um texto específico estaria elipsado baseado no texto fornecido
+ * @param text - O texto a ser verificado
+ * @param containerWidth - Largura do container (opcional, usa o padrão se não informado)
+ * @returns true se o texto seria elipsado
+ */
+function isTextEllipsed(text, containerWidth) {
+    if (!text)
+        return false;
+    // Cria um elemento temporário para medir o texto
+    const tempElement = document.createElement('span');
+    tempElement.style.visibility = 'hidden';
+    tempElement.style.position = 'absolute';
+    tempElement.style.whiteSpace = 'nowrap';
+    tempElement.style.fontSize = '1rem'; // f-md
+    tempElement.style.fontWeight = '500'; // f-weight-500
+    tempElement.style.fontFamily = getComputedStyle(document.body).fontFamily;
+    tempElement.textContent = text;
+    document.body.appendChild(tempElement);
+    const textWidth = tempElement.scrollWidth;
+    // Calcula a largura máxima disponível: largura do container menos espaço do botão e margins
+    const maxWidth = containerWidth || 150; // ~150px considerando o botão de 24px + margens
+    document.body.removeChild(tempElement);
+    return textWidth > maxWidth;
+}
+// export class EllipsedTextHelper
+// {
+//   public static isEllipsed(id: string): boolean
+//   {
+//     const element = document.querySelector<any>(`#${id}`);
+//     return element ? (element.offsetWidth < element.scrollWidth) : false;
+//   }
+//   /**
+//    *
+//    * @param _textField - Stands for the text you want to compare
+//    * @param _fontProperties - Text CSS properties (font-size & font-family)
+//    * @param _divId - divId you want to compare
+//    * @param _isEllipsed - is it Ellipsed? (optional)
+//    */
+//   public static calculate( _textField: string, _fontProperties: string, _divId: string, _isEllipsed: boolean = false, _whiteSpaceNoWrap = true): boolean
+//   {
+//     if (_isEllipsed)
+//     {
+//       return true;
+//     }
+//     const textDiv = document.getElementById(_divId);
+//     if (textDiv)
+//     {
+//       const widthText = this.textWidthCalc(_textField, _fontProperties, _whiteSpaceNoWrap);
+//       return widthText > textDiv.clientWidth;
+//     }
+//     return false
+//   }
+//   public static textWidthCalc(_text: string, _fontProperties: string, _whiteSpaceNoWrap: boolean): number
+//   {
+//     let tag = document.createElement('div');
+//     tag.style.position = 'absolute';
+//     tag.style.left = '-99in';
+//     tag.style.font = _fontProperties;
+//     tag.innerHTML = _text;
+//     if (_whiteSpaceNoWrap)
+//     {
+//       tag.style.whiteSpace = 'nowrap';
+//     }
+//     document.body.appendChild(tag);
+//     const result = tag.clientWidth;
+//     document.body.removeChild(tag);
+//     return result;
+//   }
+// }
+
+class TcRevTooltipDirective {
+    constructor(_el, _renderer, _vcr) {
+        this._el = _el;
+        this._renderer = _renderer;
+        this._vcr = _vcr;
+        this.tcRevTooltip = input('');
+        this.position = input('top');
+        this.tooltipElement = null;
+    }
+    onMouseEnter() {
+        const tooltipText = this.tcRevTooltip();
+        if (this.isValidTooltipText(tooltipText)) {
+            this.showTooltip(tooltipText);
+        }
+    }
+    onMouseLeave() {
+        this.hideTooltip();
+    }
+    isValidTooltipText(text) {
+        return text && text.trim().length > 0;
+    }
+    showTooltip(text) {
+        if (this.tooltipElement) {
+            this.hideTooltip();
+        }
+        // Create tooltip element
+        this.tooltipElement = this._renderer.createElement('div');
+        // Add text content
+        const textNode = this._renderer.createText(text);
+        this._renderer.appendChild(this.tooltipElement, textNode);
+        // Add CSS classes
+        this._renderer.addClass(this.tooltipElement, 'tc-rev-tooltip');
+        this._renderer.addClass(this.tooltipElement, `tc-rev-tooltip--${this.position()}`);
+        // Set initial styles
+        this._renderer.setStyle(this.tooltipElement, 'position', 'absolute');
+        this._renderer.setStyle(this.tooltipElement, 'z-index', '9999');
+        this._renderer.setStyle(this.tooltipElement, 'visibility', 'hidden');
+        // this._renderer.setStyle(this.tooltipElement, 'opacity', '0');
+        // Append to body
+        this._renderer.appendChild(document.body, this.tooltipElement);
+        // Position tooltip
+        this.positionTooltip();
+        // Show tooltip with animation
+        this._renderer.setStyle(this.tooltipElement, 'visibility', 'visible');
+        this._renderer.addClass(this.tooltipElement, 'tc-rev-tooltip--visible');
+    }
+    hideTooltip() {
+        if (this.tooltipElement) {
+            this._renderer.removeChild(document.body, this.tooltipElement);
+            this.tooltipElement = null;
+        }
+    }
+    positionTooltip() {
+        if (!this.tooltipElement)
+            return;
+        const hostRect = this._el.nativeElement.getBoundingClientRect();
+        const tooltipRect = this.tooltipElement.getBoundingClientRect();
+        const position = this.position();
+        let top = 0;
+        let left = 0;
+        switch (position) {
+            case 'top':
+                top = hostRect.top + window.scrollY - tooltipRect.height - 8;
+                left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
+                break;
+            case 'bottom':
+                top = hostRect.bottom + window.scrollY + 8;
+                left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
+                break;
+            case 'left':
+                top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
+                left = hostRect.left + window.scrollX - tooltipRect.width - 8;
+                break;
+            case 'right':
+                top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
+                left = hostRect.right + window.scrollX + 8;
+                break;
+        }
+        this._renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
+        this._renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TcRevTooltipDirective, isStandalone: true, selector: "[tcRevTooltip]", inputs: { tcRevTooltip: { classPropertyName: "tcRevTooltip", publicName: "tcRevTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tcRevTooltip]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class TcRevIconButtonDirective {
+    constructor(_el) {
+        this._el = _el;
+        this.color = input('primary');
+        this.size = input('sm');
+        this.tcRevIconButton = input('filled');
+        effect(() => {
+            this.setClasses();
+        });
+    }
+    setClasses() {
+        const tokenList = this._el.nativeElement.classList;
+        tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
+        let tcRevIconButton = this.tcRevIconButton();
+        if (!tcRevIconButton) {
+            tcRevIconButton = 'filled';
+        }
+        this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
+        this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}-icon`);
+        this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcRevIconButton}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevIconButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TcRevIconButtonDirective, isStandalone: true, selector: "button[tcRevIconButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tcRevIconButton: { classPropertyName: "tcRevIconButton", publicName: "tcRevIconButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-btn tc-rev-btn-icon" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevIconButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tcRevIconButton]',
+                    host: {
+                        class: 'tc-rev-btn tc-rev-btn-icon'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+var DropdownSize$1;
+(function (DropdownSize) {
+    DropdownSize["sm"] = "sm";
+    DropdownSize["md"] = "md";
+    DropdownSize["lg"] = "lg";
+})(DropdownSize$1 || (DropdownSize$1 = {}));
+class TCloudUiDropdownComponent {
+    onDocumentClick(event) {
+        if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this._deviceService = inject(TCloudUiDeviceUtilsService);
+        this.label = input(''); // Label que será exibida
+        this.disabled = input(false); // Desabilita o dropdown
+        this.options = input.required(); // Lista de opções no novo formato
+        this.initialValue = input(null); // Valor pré-selecionado (deprecated - use value instead)
+        this.value = model(null); // Two-way binding para o valor selecionado
+        this.size = input(DropdownSize$1.sm);
+        this.width = input(''); // Largura específica do dropdown (ex: '300px', '50%'). Se não informado, ocupa 100% do pai
+        this.optionSelected = output(); // Emissor para o valor selecionado
+        this.selectedOption = signal(null); // Opção selecionada
+        this.isOpen = false; // Controla se o dropdown está aberto
+        this.dropdownSize = DropdownSize$1;
+        this.isDesktop = this._deviceService.isDesktop;
+        this.isMobile = this._deviceService.isMobile;
+    }
+    ngOnChanges(_simpleChanges) {
+        // Atualiza a opção selecionada quando o valor pré-selecionado muda
+        if (_simpleChanges['initialValue'] ||
+            _simpleChanges['options'] ||
+            _simpleChanges['value']) {
+            const valueToUse = this.value() || this.initialValue();
+            this.selectedOption.set(this.options().find((option) => option.value === valueToUse) || null);
+        }
+    }
+    ngOnInit() {
+        // Prioriza o valor do model, mas mantém compatibilidade com initialValue
+        const valueToUse = this.value() || this.initialValue();
+        const foundOption = this.options().find((option) => option.value === valueToUse) || null;
+        this.selectedOption.set(foundOption);
+        // Se não havia valor no model mas havia initialValue, sincroniza o model
+        if (!this.value() && this.initialValue() && foundOption) {
+            this.value.set(foundOption.value);
+        }
+        // Escuta mudanças no model e atualiza a opção selecionada
+        this.value.subscribe((newValue) => {
+            const option = this.options().find((opt) => opt.value === newValue) || null;
+            if (this.selectedOption() !== option) {
+                this.selectedOption.set(option);
+            }
+        });
+    }
+    toggleDropdown() {
+        // Abertura do dropdown para mobile
+        if (this.isMobile()) {
+            this._deviceService.openDropdownDevice(this.menuTemplate);
+            return;
+        }
+        this.isOpen = !this.isOpen;
+    }
+    selectOption(option) {
+        this.selectedOption.set(option);
+        this.value.set(option.value); // Atualiza o model com two-way binding
+        this.optionSelected.emit(option); // Emite a opção selecionada para compatibilidade
+        // Fechamento dd dropdown para mobile
+        if (this.isMobile()) {
+            this._deviceService.closeDropdownDevice();
+            return;
+        }
+        this.isOpen = false; // Fecha o dropdown
+    }
+    /**
+     * Verifica se o texto de uma opção na lista está elipsado
+     * @param text - Texto a ser verificado
+     * @returns true se o texto estiver elipsado
+     */
+    isOptionEllipsed(text) {
+        if (!text)
+            return false;
+        // Calcula a largura disponível para o texto nas opções da lista
+        const menuElement = this.elementRef.nativeElement.querySelector('.tcloud-ui-dropdown-menu');
+        if (!menuElement) {
+            // Se o menu não está aberto, usa a largura do dropdown
+            const dropdownElement = this.elementRef.nativeElement.querySelector('.tcloud-ui-dropdown');
+            if (!dropdownElement)
+                return false;
+            const dropdownWidth = dropdownElement.clientWidth;
+            const padding = 16; // 8px de cada lado do botão
+            const iconSpace = 24; // Espaço do ícone de check quando selecionado
+            const availableWidth = Math.max(50, dropdownWidth - padding - iconSpace);
+            return isTextEllipsed(text, availableWidth);
+        }
+        // Largura do menu menos padding do item (16px total) e espaço do ícone de check (24px)
+        const menuWidth = menuElement.clientWidth;
+        const padding = 16; // 8px de cada lado do botão do item
+        const iconSpace = 24; // Espaço do ícone de check quando selecionado
+        const availableWidth = Math.max(50, menuWidth - padding - iconSpace);
+        return isTextEllipsed(text, availableWidth);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiDropdownComponent, isStandalone: true, selector: "tcloud-ui-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tcloud-ui-dropdown\"\n  [class.disabled]=\"disabled()\"\n  [style.width]=\"this.width()\"\n>\n  <button\n    class=\"tcloud-ui-dropdown-toggle\"\n    [class.tcloud-ui-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tcloud-ui-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tcloud-ui-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n  >\n    @if (label()) {\n    <b>{{ label() }}</b>\n    }\n    <span class=\"tcloud-ui-dropdown-selected-text\">\n      {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n    </span>\n    <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n  </button>\n  <ul *ngIf=\"isOpen && isDesktop()\" class=\"tcloud-ui-dropdown-menu\">\n    @for (option of options(); track option?.value) {\n    <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n      <button\n        class=\"tcloud-ui-dropdown-menu-item-btn\"\n        [class.selected]=\"selectedOption()?.value === option.value\"\n        [disabled]=\"option?.disabled\"\n      >\n        <span\n          class=\"tcloud-ui-dropdown-option-text\"\n          [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n          [tcRevTooltip]=\"\n            isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n          \"\n          position=\"top\"\n        >\n          {{ option?.displayValue }}\n        </span>\n\n        @if (selectedOption()?.value === option?.value) {\n        <i class=\"fa-light fa-circle-check\"></i>\n        }\n      </button>\n    </li>\n    }\n  </ul>\n\n  <!-- Dropdown full screen -->\n  <ng-template #menuTemplate>\n    <div class=\"tcloud-ui-dropdown-menu tcloud-ui-dropdown-menu--device\">\n      <div class=\"tcloud-ui-dropdown-menu-section\">\n        <div class=\"tcloud-ui-dropdown-menu-header pad-b-24\">\n          <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n            {{ label() }}\n          </h3>\n          <button\n            tcRevIconButton=\"outline\"\n            color=\"dark\"\n            size=\"sm\"\n            (click)=\"_deviceService.closeDropdownDevice()\"\n          >\n            <i class=\"fa-light fa-times f-size-16\"></i>\n          </button>\n        </div>\n        <ul class=\"tcloud-ui-dropdown-menu-container mar-t-8\">\n          @for (option of options(); track option?.value) {\n          <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n            <button\n              class=\"tcloud-ui-dropdown-menu-item-btn\"\n              [class.selected]=\"selectedOption()?.value === option.value\"\n              [disabled]=\"option?.disabled\"\n            >\n              {{ option?.displayValue }}\n\n              @if (selectedOption()?.value === option?.value) {\n              <i class=\"fa-light fa-circle-check f-size-16\"></i>\n              }\n            </button>\n          </li>\n          }\n        </ul>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".tcloud-ui-dropdown{position:relative;display:block;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle .tcloud-ui-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:hover,.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-section{display:contents}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevTooltipDirective, selector: "[tcRevTooltip]", inputs: ["tcRevTooltip", "position"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-dropdown', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TcRevTooltipDirective,
+                        TcRevIconButtonDirective
+                    ], template: "<div\n  class=\"tcloud-ui-dropdown\"\n  [class.disabled]=\"disabled()\"\n  [style.width]=\"this.width()\"\n>\n  <button\n    class=\"tcloud-ui-dropdown-toggle\"\n    [class.tcloud-ui-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tcloud-ui-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tcloud-ui-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n  >\n    @if (label()) {\n    <b>{{ label() }}</b>\n    }\n    <span class=\"tcloud-ui-dropdown-selected-text\">\n      {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n    </span>\n    <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n  </button>\n  <ul *ngIf=\"isOpen && isDesktop()\" class=\"tcloud-ui-dropdown-menu\">\n    @for (option of options(); track option?.value) {\n    <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n      <button\n        class=\"tcloud-ui-dropdown-menu-item-btn\"\n        [class.selected]=\"selectedOption()?.value === option.value\"\n        [disabled]=\"option?.disabled\"\n      >\n        <span\n          class=\"tcloud-ui-dropdown-option-text\"\n          [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n          [tcRevTooltip]=\"\n            isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n          \"\n          position=\"top\"\n        >\n          {{ option?.displayValue }}\n        </span>\n\n        @if (selectedOption()?.value === option?.value) {\n        <i class=\"fa-light fa-circle-check\"></i>\n        }\n      </button>\n    </li>\n    }\n  </ul>\n\n  <!-- Dropdown full screen -->\n  <ng-template #menuTemplate>\n    <div class=\"tcloud-ui-dropdown-menu tcloud-ui-dropdown-menu--device\">\n      <div class=\"tcloud-ui-dropdown-menu-section\">\n        <div class=\"tcloud-ui-dropdown-menu-header pad-b-24\">\n          <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n            {{ label() }}\n          </h3>\n          <button\n            tcRevIconButton=\"outline\"\n            color=\"dark\"\n            size=\"sm\"\n            (click)=\"_deviceService.closeDropdownDevice()\"\n          >\n            <i class=\"fa-light fa-times f-size-16\"></i>\n          </button>\n        </div>\n        <ul class=\"tcloud-ui-dropdown-menu-container mar-t-8\">\n          @for (option of options(); track option?.value) {\n          <li class=\"tcloud-ui-dropdown-menu-item\" (click)=\"selectOption(option)\">\n            <button\n              class=\"tcloud-ui-dropdown-menu-item-btn\"\n              [class.selected]=\"selectedOption()?.value === option.value\"\n              [disabled]=\"option?.disabled\"\n            >\n              {{ option?.displayValue }}\n\n              @if (selectedOption()?.value === option?.value) {\n              <i class=\"fa-light fa-circle-check f-size-16\"></i>\n              }\n            </button>\n          </li>\n          }\n        </ul>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".tcloud-ui-dropdown{position:relative;display:block;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle .tcloud-ui-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:hover,.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn .tcloud-ui-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown .tcloud-ui-dropdown-menu .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tcloud-ui-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-section{display:contents}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tcloud-ui-dropdown-menu--device .tcloud-ui-dropdown-menu-item .tcloud-ui-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
+                type: ViewChild,
+                args: ['menuTemplate']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+var DropdownMultiSize$1;
+(function (DropdownMultiSize) {
+    DropdownMultiSize["sm"] = "sm";
+    DropdownMultiSize["md"] = "md";
+    DropdownMultiSize["lg"] = "lg";
+})(DropdownMultiSize$1 || (DropdownMultiSize$1 = {}));
+class TCloudUiDropdownMultiComponent {
+    onDocumentClick(event) {
+        if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.label = input(''); // Label que será exibida
+        this.disabled = input(false); // Desabilita o dropdown
+        this.options = input.required(); // Lista de opções no novo formato
+        this.initialValues = input([]); // Valores pré-selecionados (deprecated - use values instead)
+        this.values = model([]); // Two-way binding para os valores selecionados
+        this.size = input(DropdownMultiSize$1.sm);
+        this.width = input(''); // Largura do dropdown
+        this.placeholder = input('Selecione'); // Placeholder quando nenhum item estiver selecionado
+        this.maxDisplayItems = input(2); // Máximo de itens a serem exibidos no botão
+        this.optionsSelected = output(); // Emissor para os valores selecionados
+        this.selectedOptions = signal([]); // Opções selecionadas
+        this.isOpen = false; // Controla se o dropdown está aberto
+        this.dropdownSize = DropdownMultiSize$1;
+    }
+    ngOnChanges(_simpleChanges) {
+        // Atualiza as opções selecionadas quando os valores pré-selecionados mudam
+        if (_simpleChanges['initialValues'] || _simpleChanges['options'] || _simpleChanges['values']) {
+            const valuesToUse = this.values().length > 0 ? this.values() : this.initialValues();
+            const selected = this.options().filter(option => valuesToUse.includes(option.value));
+            this.selectedOptions.set(selected);
+        }
+    }
+    ngOnInit() {
+        // Prioriza os valores do model, mas mantém compatibilidade com initialValues
+        const valuesToUse = this.values().length > 0 ? this.values() : this.initialValues();
+        const selected = this.options().filter(option => valuesToUse.includes(option.value));
+        this.selectedOptions.set(selected);
+        // Se não havia valores no model mas havia initialValues, sincroniza o model
+        if (this.values().length === 0 && this.initialValues().length > 0) {
+            this.values.set([...this.initialValues()]);
+        }
+        // Escuta mudanças no model e atualiza as opções selecionadas
+        this.values.subscribe((newValues) => {
+            const newSelected = this.options().filter(option => newValues.includes(option.value));
+            // Só atualiza se realmente mudou para evitar loops
+            const currentSelectedValues = this.selectedOptions().map(opt => opt.value);
+            const newSelectedValues = newSelected.map(opt => opt.value);
+            if (JSON.stringify(currentSelectedValues.sort()) !== JSON.stringify(newSelectedValues.sort())) {
+                this.selectedOptions.set(newSelected);
+            }
+        });
+    }
+    toggleDropdown() {
+        if (!this.disabled()) {
+            this.isOpen = !this.isOpen;
+        }
+    }
+    toggleOption(option, event) {
+        event.stopPropagation();
+        if (option.disabled)
+            return;
+        const currentSelected = this.selectedOptions();
+        const isSelected = currentSelected.some(selected => selected.value === option.value);
+        let newSelected;
+        if (isSelected) {
+            // Remove a opção se já estiver selecionada
+            newSelected = currentSelected.filter(selected => selected.value !== option.value);
+        }
+        else {
+            // Adiciona a opção se não estiver selecionada
+            newSelected = [...currentSelected, option];
+        }
+        const newValues = newSelected.map(opt => opt.value);
+        this.selectedOptions.set(newSelected);
+        this.values.set(newValues); // Atualiza o model com two-way binding
+        this.optionsSelected.emit(newValues); // Emite os valores para compatibilidade
+    }
+    isOptionSelected(option) {
+        return this.selectedOptions().some(selected => selected.value === option.value);
+    }
+    getDisplayText() {
+        const selected = this.selectedOptions();
+        if (selected.length === 0) {
+            return this.placeholder();
+        }
+        // Se todos os itens (não desabilitados) estão selecionados, mostra "Todos"
+        if (this.isAllSelected()) {
+            return 'Todos';
+        }
+        const maxDisplay = this.maxDisplayItems();
+        if (selected.length <= maxDisplay) {
+            return selected.map(opt => opt.displayValue).join(', ');
+        }
+        const firstItems = selected.slice(0, maxDisplay).map(opt => opt.displayValue).join(', ');
+        const remaining = selected.length - maxDisplay;
+        return `${firstItems} (+${remaining})`;
+    }
+    clearAll() {
+        this.selectedOptions.set([]);
+        this.values.set([]); // Atualiza o model com two-way binding
+        this.optionsSelected.emit([]);
+    }
+    selectAll() {
+        const enabledOptions = this.options().filter(option => !option.disabled);
+        const allValues = enabledOptions.map(opt => opt.value);
+        this.selectedOptions.set(enabledOptions);
+        this.values.set(allValues); // Atualiza o model com two-way binding
+        this.optionsSelected.emit(allValues);
+    }
+    isAllSelected() {
+        const enabledOptions = this.options().filter(option => !option.disabled);
+        const selectedOptions = this.selectedOptions();
+        if (enabledOptions.length === 0)
+            return false;
+        return enabledOptions.every(option => selectedOptions.some(selected => selected.value === option.value));
+    }
+    isSomeSelected() {
+        const enabledOptions = this.options().filter(option => !option.disabled);
+        const selectedOptions = this.selectedOptions();
+        if (enabledOptions.length === 0 || selectedOptions.length === 0)
+            return false;
+        const selectedCount = enabledOptions.filter(option => selectedOptions.some(selected => selected.value === option.value)).length;
+        return selectedCount > 0 && selectedCount < enabledOptions.length;
+    }
+    toggleSelectAll(event) {
+        event.stopPropagation();
+        if (this.isAllSelected()) {
+            this.clearAll();
+        }
+        else {
+            this.selectAll();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDropdownMultiComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiDropdownMultiComponent, isStandalone: true, selector: "tcloud-ui-dropdown-multi", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxDisplayItems: { classPropertyName: "maxDisplayItems", publicName: "maxDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", optionsSelected: "optionsSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tcloud-ui-dropdown-multi\"\n  [class.disabled]=\"disabled()\">\n  <button\n    class=\"tcloud-ui-dropdown-multi-toggle\"\n    [class.tcloud-ui-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tcloud-ui-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tcloud-ui-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"isOpen\"\n    [style.width]=\"this.width()\">\n    @if (label())\n    {\n      <b>{{label()}}</b>\n    }\n    <span class=\"selected-text\">{{ getDisplayText() }}</span>\n    <i class=\"fa-light fa-chevron-down\"></i>\n  </button>\n\n  <div\n    *ngIf=\"isOpen\"\n    class=\"tcloud-ui-dropdown-multi-menu\"\n    [style.width]=\"this.width()\">\n\n    <!-- Checkbox Selecionar/Limpar Todos -->\n    <div class=\"tcloud-ui-dropdown-multi-actions\">\n      <label\n        class=\"tcloud-ui-dropdown-multi-select-all-label\"\n        [class.selected]=\"isAllSelected()\">\n        <input\n          type=\"checkbox\"\n          tcloudUiCheckbox\n          [disabled]=\"disabled()\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"isSomeSelected()\"\n          (change)=\"toggleSelectAll($event)\">\n        <span class=\"tcloud-ui-dropdown-multi-select-all-text\">Todos</span>\n      </label>\n    </div>\n\n    <ul class=\"tcloud-ui-dropdown-multi-options\">\n      @for (option of options(); track option?.value)\n      {\n        <li class=\"tcloud-ui-dropdown-multi-menu-item\">\n          <label\n            class=\"tcloud-ui-dropdown-multi-menu-item-label\"\n            [class.disabled]=\"option?.disabled\"\n            [class.selected]=\"isOptionSelected(option)\">\n            <input\n              type=\"checkbox\"\n              tcloudUiCheckbox\n              [checked]=\"isOptionSelected(option)\"\n              [disabled]=\"option?.disabled\"\n              (change)=\"toggleOption(option, $event)\">\n\n            <span class=\"tcloud-ui-dropdown-multi-text\">\n              {{ option?.displayValue }}\n            </span>\n          </label>\n        </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: [":host{display:inline-block}.tcloud-ui-dropdown-multi{position:relative;display:inline-block}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label .tcloud-ui-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label .tcloud-ui-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tcloud-ui-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TCloudUiCheckboxDirective, selector: "input[type=\"checkbox\"][tcloudUiCheckbox]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDropdownMultiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-dropdown-multi', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TCloudUiCheckboxDirective
+                    ], template: "<div\n  class=\"tcloud-ui-dropdown-multi\"\n  [class.disabled]=\"disabled()\">\n  <button\n    class=\"tcloud-ui-dropdown-multi-toggle\"\n    [class.tcloud-ui-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tcloud-ui-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tcloud-ui-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"isOpen\"\n    [style.width]=\"this.width()\">\n    @if (label())\n    {\n      <b>{{label()}}</b>\n    }\n    <span class=\"selected-text\">{{ getDisplayText() }}</span>\n    <i class=\"fa-light fa-chevron-down\"></i>\n  </button>\n\n  <div\n    *ngIf=\"isOpen\"\n    class=\"tcloud-ui-dropdown-multi-menu\"\n    [style.width]=\"this.width()\">\n\n    <!-- Checkbox Selecionar/Limpar Todos -->\n    <div class=\"tcloud-ui-dropdown-multi-actions\">\n      <label\n        class=\"tcloud-ui-dropdown-multi-select-all-label\"\n        [class.selected]=\"isAllSelected()\">\n        <input\n          type=\"checkbox\"\n          tcloudUiCheckbox\n          [disabled]=\"disabled()\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"isSomeSelected()\"\n          (change)=\"toggleSelectAll($event)\">\n        <span class=\"tcloud-ui-dropdown-multi-select-all-text\">Todos</span>\n      </label>\n    </div>\n\n    <ul class=\"tcloud-ui-dropdown-multi-options\">\n      @for (option of options(); track option?.value)\n      {\n        <li class=\"tcloud-ui-dropdown-multi-menu-item\">\n          <label\n            class=\"tcloud-ui-dropdown-multi-menu-item-label\"\n            [class.disabled]=\"option?.disabled\"\n            [class.selected]=\"isOptionSelected(option)\">\n            <input\n              type=\"checkbox\"\n              tcloudUiCheckbox\n              [checked]=\"isOptionSelected(option)\"\n              [disabled]=\"option?.disabled\"\n              (change)=\"toggleOption(option, $event)\">\n\n            <span class=\"tcloud-ui-dropdown-multi-text\">\n              {{ option?.displayValue }}\n            </span>\n          </label>\n        </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: [":host{display:inline-block}.tcloud-ui-dropdown-multi{position:relative;display:inline-block}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--sm{height:var(--size-40)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--md{height:var(--size-44)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle--lg{height:var(--size-48)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle:disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-actions .tcloud-ui-dropdown-multi-select-all-label .tcloud-ui-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label.disabled:hover,.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tcloud-ui-dropdown-multi .tcloud-ui-dropdown-multi-menu .tcloud-ui-dropdown-multi-options .tcloud-ui-dropdown-multi-menu-item .tcloud-ui-dropdown-multi-menu-item-label .tcloud-ui-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tcloud-ui-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class TCloudUiEmptyContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiEmptyContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiEmptyContentComponent, isStandalone: true, selector: "tcloud-ui-empty-content", ngImport: i0, template: "<div class=\"tcloud-ui-empty-content f-family f-sm c-neutral-700 pad-x-16 pad-y-16 bg-c-neutral-200 bor-rad-8\">\n  <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiEmptyContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-empty-content', imports: [], template: "<div class=\"tcloud-ui-empty-content f-family f-sm c-neutral-700 pad-x-16 pad-y-16 bg-c-neutral-200 bor-rad-8\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+class TCloudUiFaqComponent {
+    constructor() {
+        this.title = 'Dúvidas frequentes';
+        this.questions = [];
+        this.openIndex = signal(null);
+    }
+    toggle(index) {
+        if (this.openIndex() === index) {
+            this.openIndex.set(null);
+        }
+        else {
+            this.openIndex.set(index);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiFaqComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiFaqComponent, isStandalone: true, selector: "tcloud-ui-faq", inputs: { title: "title", questions: "questions" }, ngImport: i0, template: "<div class=\"tcloud-ui-faq\">\n  <div class=\"tcloud-ui-faq-list\">\n    <div\n      class=\"tcloud-ui-faq-item f-family c-neutral-700 f-size-16\"\n      [class.open]=\"openIndex() === i\"\n      *ngFor=\"let q of questions; let i = index\"\n      (click)=\"toggle(i)\"\n    >\n      <div class=\"tcloud-ui-faq-question\">\n        <p>{{ q.question }}</p>\n        <i class=\"fa-light fa-angle-down arrow\" [class.open]=\"openIndex() === i\"></i>\n      </div>\n\n      <div\n        class=\"tcloud-ui-faq-answer\"\n      >\n        <p>{{ q.answer }}</p>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [":host{display:block}.tcloud-ui-faq{background-color:var(--c-neutral-50)}.tcloud-ui-faq .faq-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.tcloud-ui-faq .faq-header .icon{width:48px;height:48px;background:var(--c-neutral-200);border-radius:var(--bor-radius-rounded);display:flex;align-items:center;justify-content:center;color:var(--c-neutral-700)}.tcloud-ui-faq .faq-header .icon i{font-size:1.5rem;color:var(--c-neutral-700)}.tcloud-ui-faq .faq-header h2{font-size:var(--f-size-20);font-weight:var(--f-weight-700);font-family:var(--f-family)}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item{border-top:1px solid var(--c-neutral-300);cursor:pointer;height:var(--size-56);overflow:hidden;padding:var(--size-16);transition:all .2s ease}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item.open{height:auto;overflow:visible}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item:first-child{border-top:none}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question{display:flex;justify-content:space-between;align-items:center}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question p{margin:0}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question .arrow{transition:all .3s ease}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question .arrow.open{transform:rotate(180deg)}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-answer{border:0;margin-top:1rem;padding:0}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-answer p{margin:0;line-height:1.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiFaqComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-faq', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tcloud-ui-faq\">\n  <div class=\"tcloud-ui-faq-list\">\n    <div\n      class=\"tcloud-ui-faq-item f-family c-neutral-700 f-size-16\"\n      [class.open]=\"openIndex() === i\"\n      *ngFor=\"let q of questions; let i = index\"\n      (click)=\"toggle(i)\"\n    >\n      <div class=\"tcloud-ui-faq-question\">\n        <p>{{ q.question }}</p>\n        <i class=\"fa-light fa-angle-down arrow\" [class.open]=\"openIndex() === i\"></i>\n      </div>\n\n      <div\n        class=\"tcloud-ui-faq-answer\"\n      >\n        <p>{{ q.answer }}</p>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [":host{display:block}.tcloud-ui-faq{background-color:var(--c-neutral-50)}.tcloud-ui-faq .faq-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.tcloud-ui-faq .faq-header .icon{width:48px;height:48px;background:var(--c-neutral-200);border-radius:var(--bor-radius-rounded);display:flex;align-items:center;justify-content:center;color:var(--c-neutral-700)}.tcloud-ui-faq .faq-header .icon i{font-size:1.5rem;color:var(--c-neutral-700)}.tcloud-ui-faq .faq-header h2{font-size:var(--f-size-20);font-weight:var(--f-weight-700);font-family:var(--f-family)}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item{border-top:1px solid var(--c-neutral-300);cursor:pointer;height:var(--size-56);overflow:hidden;padding:var(--size-16);transition:all .2s ease}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item.open{height:auto;overflow:visible}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item:first-child{border-top:none}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question{display:flex;justify-content:space-between;align-items:center}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question p{margin:0}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question .arrow{transition:all .3s ease}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-question .arrow.open{transform:rotate(180deg)}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-answer{border:0;margin-top:1rem;padding:0}.tcloud-ui-faq .tcloud-ui-faq-list .tcloud-ui-faq-item .tcloud-ui-faq-answer p{margin:0;line-height:1.6}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], questions: [{
+                type: Input
+            }] } });
+
+class TCloudUiMessageComponent {
+    constructor() {
+        this.message = '';
+        this.type = 'info';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiMessageComponent, isStandalone: true, selector: "tcloud-ui-message", inputs: { message: "message", type: "type" }, ngImport: i0, template: "<div class=\"message\" [ngClass]=\"type\" *ngIf=\"message\">\n  <i class=\"icon fas\" [ngClass]=\"{\n    'fa-check': type === 'success',\n    'fa-times': type === 'error',\n    'fa-info-circle': type === 'info',\n    'fa-exclamation-triangle': type === 'warning'\n  }\"></i>\n  <i class=\"text\">{{ message }}</i>\n</div>\n\n", styles: [":host{display:block}.message{padding:.75rem 1rem;border-radius:6px;font-size:14px;display:flex;align-items:center;gap:.5rem;margin:8px 0}.message.success{background-color:var(--c-success-300);color:var(--c-success-500);border:1px solid var(--c-success-300)}.message.error{background-color:var(--c-danger-300);color:var(--c-danger-500);border:1px solid var(--c-danger-300)}.message.info{background-color:var(--c-info-300);color:var(--c-info-500);border:1px solid var(--c-info-300)}.message.warning{background-color:var(--c-alert-300);color:var(--c-alert-500);border:1px solid var(--c-alert-300)}.message .icon{font-size:16px}.message .text{flex:1;font-style:normal}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-message', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message\" [ngClass]=\"type\" *ngIf=\"message\">\n  <i class=\"icon fas\" [ngClass]=\"{\n    'fa-check': type === 'success',\n    'fa-times': type === 'error',\n    'fa-info-circle': type === 'info',\n    'fa-exclamation-triangle': type === 'warning'\n  }\"></i>\n  <i class=\"text\">{{ message }}</i>\n</div>\n\n", styles: [":host{display:block}.message{padding:.75rem 1rem;border-radius:6px;font-size:14px;display:flex;align-items:center;gap:.5rem;margin:8px 0}.message.success{background-color:var(--c-success-300);color:var(--c-success-500);border:1px solid var(--c-success-300)}.message.error{background-color:var(--c-danger-300);color:var(--c-danger-500);border:1px solid var(--c-danger-300)}.message.info{background-color:var(--c-info-300);color:var(--c-info-500);border:1px solid var(--c-info-300)}.message.warning{background-color:var(--c-alert-300);color:var(--c-alert-500);border:1px solid var(--c-alert-300)}.message .icon{font-size:16px}.message .text{flex:1;font-style:normal}\n"] }]
+        }], propDecorators: { message: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+class TCloudUiSkeletonLoadingComponent {
+    constructor() {
+        /** Params of the loading skeleton accepts string with CSS units (px, rem, em) */
+        this.width = input('10rem');
+        this.height = input('1.25rem');
+        this.borderRadius = input('0.3rem');
+        this.style = new TCloudUiSkeletonLoadingComponentStyle();
+    }
+    ngOnInit() {
+        this.style.width = this.width();
+        this.style.height = this.height();
+        this.style.borderRadius = this.borderRadius();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSkeletonLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TCloudUiSkeletonLoadingComponent, isStandalone: true, selector: "tcloud-ui-skeleton-loading", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tcloud-ui-skeleton-loading\" [ngStyle]=\"this.style\"></div>\n\n", styles: [":host{display:block}.tcloud-ui-skeleton-loading{background:linear-gradient(90deg,#eee 25%,#fff,#eee 75%);background-size:400% 100%;animation:shimmer 2s infinite linear}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSkeletonLoadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-skeleton-loading', imports: [CommonModule], template: "<div class=\"tcloud-ui-skeleton-loading\" [ngStyle]=\"this.style\"></div>\n\n", styles: [":host{display:block}.tcloud-ui-skeleton-loading{background:linear-gradient(90deg,#eee 25%,#fff,#eee 75%);background-size:400% 100%;animation:shimmer 2s infinite linear}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }] });
+class TCloudUiSkeletonLoadingComponentStyle {
+}
+
+var TagColorsEnum$1;
+(function (TagColorsEnum) {
+    TagColorsEnum["neutral-50"] = "neutral-50";
+    TagColorsEnum["neutral-100"] = "neutral-100";
+    TagColorsEnum["neutral-200"] = "neutral-200";
+    TagColorsEnum["neutral-300"] = "neutral-300";
+    TagColorsEnum["neutral-400"] = "neutral-400";
+    TagColorsEnum["neutral-500"] = "neutral-500";
+    TagColorsEnum["neutral-600"] = "neutral-600";
+    TagColorsEnum["neutral-700"] = "neutral-700";
+    TagColorsEnum["neutral-800"] = "neutral-800";
+    TagColorsEnum["neutral-900"] = "neutral-900";
+    // Primary
+    TagColorsEnum["primary-300"] = "primary-300";
+    TagColorsEnum["primary-400"] = "primary-400";
+    TagColorsEnum["primary-500"] = "primary-500";
+    TagColorsEnum["primary-600"] = "primary-600";
+    TagColorsEnum["primary-700"] = "primary-700";
+    // Danger
+    TagColorsEnum["danger-300"] = "danger-300";
+    TagColorsEnum["danger-400"] = "danger-400";
+    TagColorsEnum["danger-500"] = "danger-500";
+    // Alert
+    TagColorsEnum["alert-300"] = "alert-300";
+    TagColorsEnum["alert-400"] = "alert-400";
+    TagColorsEnum["alert-500"] = "alert-500";
+    // Info
+    TagColorsEnum["info-300"] = "info-300";
+    TagColorsEnum["info-400"] = "info-400";
+    TagColorsEnum["info-500"] = "info-500";
+    // Success
+    TagColorsEnum["success-300"] = "success-300";
+    TagColorsEnum["success-400"] = "success-400";
+    TagColorsEnum["success-500"] = "success-500";
+})(TagColorsEnum$1 || (TagColorsEnum$1 = {}));
+
+class TCloudUiTagComponent {
+    constructor() {
+        this.size = input('md');
+        this.color = input(TagColorsEnum$1['primary-500']);
+        this.variant = input('filled');
+        this.shape = input('rectangle');
+        this.fullWidth = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TCloudUiTagComponent, isStandalone: true, selector: "tcloud-ui-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n    [class.tcloud-ui-tag--sm]=\"size() === 'sm'\"\n    [class.tcloud-ui-tag--md]=\"size() === 'md' || size() === 'regular'\"\n    [class.tcloud-ui-tag--lg]=\"size() === 'lg'\"\n    [class.tcloud-ui-tag--pill]=\"shape() === 'pill'\"\n    [class.tcloud-ui-tag--full-width]=\"fullWidth()\"\n    class=\"{{!color() && !variant() ? '' : 'tcloud-ui-tag tcloud-ui-tag--c-' + color() + '-' + variant()}}\">\n    <ng-content></ng-content>\n</span>\n", styles: [":host{display:block}.tcloud-ui-tag,.tcloud-ui-tag--lg,.tcloud-ui-tag--md,.tcloud-ui-tag--sm{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:default;display:inline-flex;align-items:center;justify-content:center;gap:var(--size-8);font-family:var(--f-family);font-size:var(--f-size-12);font-weight:var(--f-weight-500);padding:var(--size-2) var(--size-4);height:var(--size-22);max-height:var(--size-22);min-height:var(--size-22)}.tcloud-ui-tag--full-width{width:100%}.tcloud-ui-tag--sm{padding:var(--size-2) var(--size-4);height:var(--size-22);max-height:var(--size-22);min-height:var(--size-22)}.tcloud-ui-tag--md{padding:var(--size-4);height:var(--size-26);max-height:var(--size-26);min-height:var(--size-26)}.tcloud-ui-tag--lg{padding:var(--size-8);height:var(--size-34);max-height:var(--size-34);min-height:var(--size-34)}.tcloud-ui-tag--pill{border-radius:var(--bor-radius-pill)}.tcloud-ui-tag--c-neutral-50-filled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-100-filled{background-color:var(--c-neutral-100);border-color:var(--c-neutral-100);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-200-filled{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-300-filled{background-color:var(--c-neutral-300);border-color:var(--c-neutral-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-400-filled{background-color:var(--c-neutral-400);border-color:var(--c-neutral-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-500-filled{background-color:var(--c-neutral-500);border-color:var(--c-neutral-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-neutral-600-filled{background-color:var(--c-neutral-600);border-color:var(--c-neutral-600);color:var(--c-neutral-50)}.tcloud-ui-tag--c-neutral-700-filled,.tcloud-ui-tag--c-neutral-800-filled{background-color:var(--c-neutral-700);border-color:var(--c-neutral-700);color:var(--c-neutral-50)}.tcloud-ui-tag--c-primary-300-filled{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-primary-400-filled{background-color:var(--c-primary-400);border-color:var(--c-primary-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-primary-500-filled{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-primary-600-filled{background-color:var(--c-primary-600);border-color:var(--c-primary-600);color:var(--c-neutral-50)}.tcloud-ui-tag--c-primary-700-filled{background-color:var(--c-primary-700);border-color:var(--c-primary-700);color:var(--c-neutral-50)}.tcloud-ui-tag--c-danger-300-filled{background-color:var(--c-danger-300);border-color:var(--c-danger-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-danger-400-filled{background-color:var(--c-danger-400);border-color:var(--c-danger-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-danger-500-filled{background-color:var(--c-danger-500);border-color:var(--c-danger-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-alert-300-filled{background-color:var(--c-alert-300);border-color:var(--c-alert-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-alert-400-filled{background-color:var(--c-alert-400);border-color:var(--c-alert-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-alert-500-filled{background-color:var(--c-alert-500);border-color:var(--c-alert-500);color:var(--c-neutral-700)}.tcloud-ui-tag--c-info-300-filled{background-color:var(--c-info-300);border-color:var(--c-info-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-info-400-filled{background-color:var(--c-info-400);border-color:var(--c-info-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-info-500-filled{background-color:var(--c-info-500);border-color:var(--c-info-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-success-300-filled{background-color:var(--c-success-300);border-color:var(--c-success-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-success-400-filled{background-color:var(--c-success-400);border-color:var(--c-success-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-success-500-filled{background-color:var(--c-success-500);border-color:var(--c-success-500);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-50-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-50)}.tcloud-ui-tag--c-neutral-100-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-100);color:var(--c-neutral-100)}.tcloud-ui-tag--c-neutral-200-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-200);color:var(--c-neutral-200)}.tcloud-ui-tag--c-neutral-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-300)}.tcloud-ui-tag--c-neutral-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tcloud-ui-tag--c-neutral-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-500);color:var(--c-neutral-500)}.tcloud-ui-tag--c-neutral-600-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-600);color:var(--c-neutral-600)}.tcloud-ui-tag--c-neutral-700-outline,.tcloud-ui-tag--c-neutral-800-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-700);color:var(--c-neutral-700)}.tcloud-ui-tag--c-primary-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-300);color:var(--c-primary-300)}.tcloud-ui-tag--c-primary-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-400);color:var(--c-primary-400)}.tcloud-ui-tag--c-primary-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-tag--c-primary-600-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-600);color:var(--c-primary-600)}.tcloud-ui-tag--c-primary-700-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-700);color:var(--c-primary-700)}.tcloud-ui-tag--c-danger-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-300);color:var(--c-danger-300)}.tcloud-ui-tag--c-danger-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-400);color:var(--c-danger-400)}.tcloud-ui-tag--c-danger-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-500);color:var(--c-danger-500)}.tcloud-ui-tag--c-alert-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-300);color:var(--c-alert-300)}.tcloud-ui-tag--c-alert-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-400);color:var(--c-alert-400)}.tcloud-ui-tag--c-alert-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-500);color:var(--c-alert-500)}.tcloud-ui-tag--c-info-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-300);color:var(--c-info-300)}.tcloud-ui-tag--c-info-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-400);color:var(--c-info-400)}.tcloud-ui-tag--c-info-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-500);color:var(--c-info-500)}.tcloud-ui-tag--c-success-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-300);color:var(--c-success-300)}.tcloud-ui-tag--c-success-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-400);color:var(--c-success-400)}.tcloud-ui-tag--c-success-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-500);color:var(--c-success-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiTagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-tag', imports: [
+                        CommonModule
+                    ], template: "<span\n    [class.tcloud-ui-tag--sm]=\"size() === 'sm'\"\n    [class.tcloud-ui-tag--md]=\"size() === 'md' || size() === 'regular'\"\n    [class.tcloud-ui-tag--lg]=\"size() === 'lg'\"\n    [class.tcloud-ui-tag--pill]=\"shape() === 'pill'\"\n    [class.tcloud-ui-tag--full-width]=\"fullWidth()\"\n    class=\"{{!color() && !variant() ? '' : 'tcloud-ui-tag tcloud-ui-tag--c-' + color() + '-' + variant()}}\">\n    <ng-content></ng-content>\n</span>\n", styles: [":host{display:block}.tcloud-ui-tag,.tcloud-ui-tag--lg,.tcloud-ui-tag--md,.tcloud-ui-tag--sm{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:default;display:inline-flex;align-items:center;justify-content:center;gap:var(--size-8);font-family:var(--f-family);font-size:var(--f-size-12);font-weight:var(--f-weight-500);padding:var(--size-2) var(--size-4);height:var(--size-22);max-height:var(--size-22);min-height:var(--size-22)}.tcloud-ui-tag--full-width{width:100%}.tcloud-ui-tag--sm{padding:var(--size-2) var(--size-4);height:var(--size-22);max-height:var(--size-22);min-height:var(--size-22)}.tcloud-ui-tag--md{padding:var(--size-4);height:var(--size-26);max-height:var(--size-26);min-height:var(--size-26)}.tcloud-ui-tag--lg{padding:var(--size-8);height:var(--size-34);max-height:var(--size-34);min-height:var(--size-34)}.tcloud-ui-tag--pill{border-radius:var(--bor-radius-pill)}.tcloud-ui-tag--c-neutral-50-filled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-100-filled{background-color:var(--c-neutral-100);border-color:var(--c-neutral-100);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-200-filled{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-300-filled{background-color:var(--c-neutral-300);border-color:var(--c-neutral-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-400-filled{background-color:var(--c-neutral-400);border-color:var(--c-neutral-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-500-filled{background-color:var(--c-neutral-500);border-color:var(--c-neutral-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-neutral-600-filled{background-color:var(--c-neutral-600);border-color:var(--c-neutral-600);color:var(--c-neutral-50)}.tcloud-ui-tag--c-neutral-700-filled,.tcloud-ui-tag--c-neutral-800-filled{background-color:var(--c-neutral-700);border-color:var(--c-neutral-700);color:var(--c-neutral-50)}.tcloud-ui-tag--c-primary-300-filled{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-primary-400-filled{background-color:var(--c-primary-400);border-color:var(--c-primary-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-primary-500-filled{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-primary-600-filled{background-color:var(--c-primary-600);border-color:var(--c-primary-600);color:var(--c-neutral-50)}.tcloud-ui-tag--c-primary-700-filled{background-color:var(--c-primary-700);border-color:var(--c-primary-700);color:var(--c-neutral-50)}.tcloud-ui-tag--c-danger-300-filled{background-color:var(--c-danger-300);border-color:var(--c-danger-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-danger-400-filled{background-color:var(--c-danger-400);border-color:var(--c-danger-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-danger-500-filled{background-color:var(--c-danger-500);border-color:var(--c-danger-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-alert-300-filled{background-color:var(--c-alert-300);border-color:var(--c-alert-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-alert-400-filled{background-color:var(--c-alert-400);border-color:var(--c-alert-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-alert-500-filled{background-color:var(--c-alert-500);border-color:var(--c-alert-500);color:var(--c-neutral-700)}.tcloud-ui-tag--c-info-300-filled{background-color:var(--c-info-300);border-color:var(--c-info-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-info-400-filled{background-color:var(--c-info-400);border-color:var(--c-info-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-info-500-filled{background-color:var(--c-info-500);border-color:var(--c-info-500);color:var(--c-neutral-50)}.tcloud-ui-tag--c-success-300-filled{background-color:var(--c-success-300);border-color:var(--c-success-300);color:var(--c-neutral-700)}.tcloud-ui-tag--c-success-400-filled{background-color:var(--c-success-400);border-color:var(--c-success-400);color:var(--c-neutral-700)}.tcloud-ui-tag--c-success-500-filled{background-color:var(--c-success-500);border-color:var(--c-success-500);color:var(--c-neutral-700)}.tcloud-ui-tag--c-neutral-50-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-50)}.tcloud-ui-tag--c-neutral-100-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-100);color:var(--c-neutral-100)}.tcloud-ui-tag--c-neutral-200-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-200);color:var(--c-neutral-200)}.tcloud-ui-tag--c-neutral-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-300)}.tcloud-ui-tag--c-neutral-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tcloud-ui-tag--c-neutral-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-500);color:var(--c-neutral-500)}.tcloud-ui-tag--c-neutral-600-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-600);color:var(--c-neutral-600)}.tcloud-ui-tag--c-neutral-700-outline,.tcloud-ui-tag--c-neutral-800-outline{background-color:var(--c-neutral-50);border-color:var(--c-neutral-700);color:var(--c-neutral-700)}.tcloud-ui-tag--c-primary-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-300);color:var(--c-primary-300)}.tcloud-ui-tag--c-primary-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-400);color:var(--c-primary-400)}.tcloud-ui-tag--c-primary-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-500);color:var(--c-primary-500)}.tcloud-ui-tag--c-primary-600-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-600);color:var(--c-primary-600)}.tcloud-ui-tag--c-primary-700-outline{background-color:var(--c-neutral-50);border-color:var(--c-primary-700);color:var(--c-primary-700)}.tcloud-ui-tag--c-danger-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-300);color:var(--c-danger-300)}.tcloud-ui-tag--c-danger-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-400);color:var(--c-danger-400)}.tcloud-ui-tag--c-danger-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-danger-500);color:var(--c-danger-500)}.tcloud-ui-tag--c-alert-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-300);color:var(--c-alert-300)}.tcloud-ui-tag--c-alert-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-400);color:var(--c-alert-400)}.tcloud-ui-tag--c-alert-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-alert-500);color:var(--c-alert-500)}.tcloud-ui-tag--c-info-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-300);color:var(--c-info-300)}.tcloud-ui-tag--c-info-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-400);color:var(--c-info-400)}.tcloud-ui-tag--c-info-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-info-500);color:var(--c-info-500)}.tcloud-ui-tag--c-success-300-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-300);color:var(--c-success-300)}.tcloud-ui-tag--c-success-400-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-400);color:var(--c-success-400)}.tcloud-ui-tag--c-success-500-outline{background-color:var(--c-neutral-50);border-color:var(--c-success-500);color:var(--c-success-500)}\n"] }]
+        }] });
+
+class TCloudUiSubNavbarItemComponent {
+    constructor() {
+        this.isMenuExpanded = false;
+        this.label = input.required();
+        this.onClick = output();
+        this.active = input(false);
+        this.routerLink = input(null);
+        this.queryParams = input(null);
+    }
+    handleClick(_ev) {
+        this.onClick.emit(_ev);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiSubNavbarItemComponent, isStandalone: true, selector: "tcloud-ui-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.18", ngImport: i0, type: TCloudUiSubNavbarItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-sub-navbar-item', imports: [
+                        CommonModule,
+                        RouterModule,
+                    ], 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"] }]
+        }], propDecorators: { isMenuExpanded: [{
+                type: Input
+            }] } });
+
+class TCloudUiSubNavbarComponent {
+    constructor() {
+        this.isMenuExpanded = signal(true);
+        this.onSubMenuExpandChange = output();
+    }
+    ngAfterContentInit() {
+        setTimeout(() => this.setExpandedMenuValueToChildrend(), 0);
+    }
+    handleExpandMenu() {
+        this.isMenuExpanded.update((value) => !value);
+        this.setExpandedMenuValueToChildrend();
+    }
+    setExpandedMenuValueToChildrend() {
+        if (!this.subNavbarItems?.length)
+            return;
+        this.subNavbarItems.forEach((x) => {
+            x.isMenuExpanded = this.isMenuExpanded();
+        });
+        this.onSubMenuExpandChange.emit(this.isMenuExpanded());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiSubNavbarComponent, isStandalone: true, selector: "tcloud-ui-sub-navbar", outputs: { onSubMenuExpandChange: "onSubMenuExpandChange" }, queries: [{ propertyName: "subNavbarItems", predicate: TCloudUiSubNavbarItemComponent }], ngImport: i0, template: "<nav class=\"tc-sub-navbar\">\n  <ul\n    class=\"tc-sub-navbar-list\"\n    [class.tc-rev-submenu-expanded]=\"isMenuExpanded()\"\n  >\n    <tcloud-ui-sub-navbar-item\n      [isMenuExpanded]=\"isMenuExpanded()\"\n      (click)=\"handleExpandMenu()\"\n      label=\"Minimizar\"\n    >\n      <i\n        class=\"fa-light\"\n        [class.fa-arrow-left-to-line]=\"isMenuExpanded()\"\n        [class.fa-arrow-right-to-line]=\"!isMenuExpanded()\"\n        icon\n      ></i>\n    </tcloud-ui-sub-navbar-item>\n    <ng-content></ng-content>\n  </ul>\n</nav>\n", styles: [":host{display:block;height:100%}.tc-sub-navbar{height:100%;margin:var(--size-0);padding:var(--size-0)}.tc-sub-navbar .tc-sub-navbar-list{background-color:var(--c-neutral-50);color:var(--c-neutral-700);box-shadow:var(--shadow-xs);border-radius:var(--bor-radius-8);display:flex;flex-direction:column;gap:var(--size-8);height:100%;list-style:none;margin:var(--size-0);overflow:hidden auto;padding:var(--size-8);width:var(--size-52)}.tc-sub-navbar .tc-sub-navbar-list::-webkit-scrollbar{display:none}.tc-sub-navbar .tc-sub-navbar-list.tc-rev-submenu-expanded{width:14.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TCloudUiSubNavbarItemComponent, selector: "tcloud-ui-sub-navbar-item", inputs: ["isMenuExpanded", "label", "active", "routerLink", "queryParams"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSubNavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-sub-navbar', imports: [
+                        CommonModule,
+                        TCloudUiSubNavbarItemComponent,
+                    ], template: "<nav class=\"tc-sub-navbar\">\n  <ul\n    class=\"tc-sub-navbar-list\"\n    [class.tc-rev-submenu-expanded]=\"isMenuExpanded()\"\n  >\n    <tcloud-ui-sub-navbar-item\n      [isMenuExpanded]=\"isMenuExpanded()\"\n      (click)=\"handleExpandMenu()\"\n      label=\"Minimizar\"\n    >\n      <i\n        class=\"fa-light\"\n        [class.fa-arrow-left-to-line]=\"isMenuExpanded()\"\n        [class.fa-arrow-right-to-line]=\"!isMenuExpanded()\"\n        icon\n      ></i>\n    </tcloud-ui-sub-navbar-item>\n    <ng-content></ng-content>\n  </ul>\n</nav>\n", styles: [":host{display:block;height:100%}.tc-sub-navbar{height:100%;margin:var(--size-0);padding:var(--size-0)}.tc-sub-navbar .tc-sub-navbar-list{background-color:var(--c-neutral-50);color:var(--c-neutral-700);box-shadow:var(--shadow-xs);border-radius:var(--bor-radius-8);display:flex;flex-direction:column;gap:var(--size-8);height:100%;list-style:none;margin:var(--size-0);overflow:hidden auto;padding:var(--size-8);width:var(--size-52)}.tc-sub-navbar .tc-sub-navbar-list::-webkit-scrollbar{display:none}.tc-sub-navbar .tc-sub-navbar-list.tc-rev-submenu-expanded{width:14.5rem}\n"] }]
+        }], propDecorators: { subNavbarItems: [{
+                type: ContentChildren,
+                args: [TCloudUiSubNavbarItemComponent]
+            }] } });
+
+class TCloudUiTabGroupComponent {
+    constructor() {
+        this.isCarouselOverflowed = false;
+    }
+    onResize() {
+        this.checkCarouselOverflow();
+    }
+    ngOnInit() {
+        this.checkCarouselOverflow();
+    }
+    checkCarouselOverflow() {
+        setTimeout(() => {
+            const el = this.tabGroupCarousel?.nativeElement;
+            this.isCarouselOverflowed = !!el && el.scrollWidth > el.clientWidth;
+        });
+    }
+    scrollTabsCarousel(direction) {
+        const el = this.tabGroupCarousel?.nativeElement;
+        if (!el)
+            return;
+        const scrollAmount = 200;
+        if (direction === 'left') {
+            el.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
+        }
+        else {
+            el.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiTabGroupComponent, isStandalone: true, selector: "tcloud-ui-tab-group", host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "tabGroupCarousel", first: true, predicate: ["tabGroupCarousel"], descendants: true }], ngImport: i0, template: "<div class=\"tcloud-ui-tab-group\">\n  <button\n    *ngIf=\"isCarouselOverflowed\"\n    class=\"tcloud-ui-tab-item carousel-arrow left\"\n    (click)=\"this.scrollTabsCarousel('left')\"\n    aria-label=\"Scroll left\">\n    <i class=\"fa-light fa-chevron-left\"></i>\n  </button>\n\n  <div\n    class=\"tcloud-ui-tab-group-carousel\"\n    [class.overflowed]=\"isCarouselOverflowed\"\n    #tabGroupCarousel>\n    <ng-content></ng-content>\n  </div>\n\n  <button\n    *ngIf=\"isCarouselOverflowed\"\n    class=\"tcloud-ui-tab-item carousel-arrow right\"\n    (click)=\"this.scrollTabsCarousel('right')\"\n    aria-label=\"Scroll right\">\n    <i class=\"fa-light fa-chevron-right\"></i>\n  </button>\n</div>\n\n<!-- <div class=\"products-carousel-container f-family\">\n  <button\n    *ngIf=\"isCarouselOverflowed\"\n    class=\"tcloud-ui-tab-item carousel-arrow left\"\n    (click)=\"scrollProductsCarousel('left')\"\n    aria-label=\"Scroll left\">\n    <i class=\"fa-light fa-chevron-left\"></i>\n  </button>\n\n  <div\n    #productsCarousel\n    class=\"products-carousel\"\n    [class.overflowed]=\"isCarouselOverflowed\">\n    @for (productName of topologiesData.availableProductsNames(); track productName)\n    {\n      <button\n        class=\"tcloud-ui-tab-item\"\n        [class.active]=\"filter().product === productName\"\n        (click)=\"handleChangeTopologiesByProduct(productName)\">\n        {{ productName | topologyProduct }}\n      </button>\n    }\n  </div>\n\n  <button\n    *ngIf=\"isCarouselOverflowed\"\n    class=\"tcloud-ui-tab-item carousel-arrow right\"\n    (click)=\"scrollProductsCarousel('right')\"\n    aria-label=\"Scroll right\">\n    <i class=\"fa-light fa-chevron-right\"></i>\n  </button>\n</div> -->\n", styles: [":host{display:block}.tcloud-ui-tab-group{position:relative;height:var(--size-40);width:100%}.tcloud-ui-tab-group .tcloud-ui-tab-group-carousel{display:flex;gap:var(--size-8);height:var(--size-40);left:0;margin:0;overflow:hidden;position:absolute;scroll-behavior:smooth;top:0;width:calc(100% - 6.25rem);z-index:1}.tcloud-ui-tab-group .tcloud-ui-tab-group-carousel.overflowed{left:var(--size-20);margin:0 var(--size-32)}.tcloud-ui-tab-group .tcloud-ui-tab-group-carousel.full-width{width:100%}.tcloud-ui-tab-group .carousel-arrow{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;font-size:var(--f-size-14);font-weight:600;height:var(--size-40);line-height:var(--l-height-20);padding:0;text-wrap:nowrap;transition:all .2s ease;width:var(--size-40)}.tcloud-ui-tab-group .carousel-arrow:hover,.tcloud-ui-tab-group .carousel-arrow:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tcloud-ui-tab-group .carousel-arrow:active,.tcloud-ui-tab-group .carousel-arrow.selected,.tcloud-ui-tab-group .carousel-arrow.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:700}.tcloud-ui-tab-group .carousel-arrow: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)}.tcloud-ui-tab-group .carousel-arrow.left{left:0;position:absolute;z-index:1}.tcloud-ui-tab-group .carousel-arrow.right{position:absolute;right:0;z-index:1}@media(max-width:480px){:host{display:block;position:relative;height:var(--size-40)}:host .carousel-arrow{display:none}:host .tcloud-ui-tab-group-carousel{width:100%!important;overflow-x:auto!important;scrollbar-width:none;-ms-overflow-style:none;white-space:nowrap;padding-left:var(--size-40);padding-right:var(--size-40)}:host .tcloud-ui-tab-group-carousel.overflowed{left:auto!important;margin:0!important}:host .tcloud-ui-tab-group-carousel::-webkit-scrollbar{display:none}:host .tcloud-ui-tab-group{left:calc(-1 * var(--size-40));width:calc(100% + var(--size-80))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiTabGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-tab-group', imports: [CommonModule], template: "<div class=\"tcloud-ui-tab-group\">\n  <button\n    *ngIf=\"isCarouselOverflowed\"\n    class=\"tcloud-ui-tab-item carousel-arrow left\"\n    (click)=\"this.scrollTabsCarousel('left')\"\n    aria-label=\"Scroll left\">\n    <i class=\"fa-light fa-chevron-left\"></i>\n  </button>\n\n  <div\n    class=\"tcloud-ui-tab-group-carousel\"\n    [class.overflowed]=\"isCarouselOverflowed\"\n    #tabGroupCarousel>\n    <ng-content></ng-content>\n  </div>\n\n  <button\n    *ngIf=\"isCarouselOverflowed\"\n    class=\"tcloud-ui-tab-item carousel-arrow right\"\n    (click)=\"this.scrollTabsCarousel('right')\"\n    aria-label=\"Scroll right\">\n    <i class=\"fa-light fa-chevron-right\"></i>\n  </button>\n</div>\n\n<!-- <div class=\"products-carousel-container f-family\">\n  <button\n    *ngIf=\"isCarouselOverflowed\"\n    class=\"tcloud-ui-tab-item carousel-arrow left\"\n    (click)=\"scrollProductsCarousel('left')\"\n    aria-label=\"Scroll left\">\n    <i class=\"fa-light fa-chevron-left\"></i>\n  </button>\n\n  <div\n    #productsCarousel\n    class=\"products-carousel\"\n    [class.overflowed]=\"isCarouselOverflowed\">\n    @for (productName of topologiesData.availableProductsNames(); track productName)\n    {\n      <button\n        class=\"tcloud-ui-tab-item\"\n        [class.active]=\"filter().product === productName\"\n        (click)=\"handleChangeTopologiesByProduct(productName)\">\n        {{ productName | topologyProduct }}\n      </button>\n    }\n  </div>\n\n  <button\n    *ngIf=\"isCarouselOverflowed\"\n    class=\"tcloud-ui-tab-item carousel-arrow right\"\n    (click)=\"scrollProductsCarousel('right')\"\n    aria-label=\"Scroll right\">\n    <i class=\"fa-light fa-chevron-right\"></i>\n  </button>\n</div> -->\n", styles: [":host{display:block}.tcloud-ui-tab-group{position:relative;height:var(--size-40);width:100%}.tcloud-ui-tab-group .tcloud-ui-tab-group-carousel{display:flex;gap:var(--size-8);height:var(--size-40);left:0;margin:0;overflow:hidden;position:absolute;scroll-behavior:smooth;top:0;width:calc(100% - 6.25rem);z-index:1}.tcloud-ui-tab-group .tcloud-ui-tab-group-carousel.overflowed{left:var(--size-20);margin:0 var(--size-32)}.tcloud-ui-tab-group .tcloud-ui-tab-group-carousel.full-width{width:100%}.tcloud-ui-tab-group .carousel-arrow{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;font-size:var(--f-size-14);font-weight:600;height:var(--size-40);line-height:var(--l-height-20);padding:0;text-wrap:nowrap;transition:all .2s ease;width:var(--size-40)}.tcloud-ui-tab-group .carousel-arrow:hover,.tcloud-ui-tab-group .carousel-arrow:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tcloud-ui-tab-group .carousel-arrow:active,.tcloud-ui-tab-group .carousel-arrow.selected,.tcloud-ui-tab-group .carousel-arrow.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:700}.tcloud-ui-tab-group .carousel-arrow: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)}.tcloud-ui-tab-group .carousel-arrow.left{left:0;position:absolute;z-index:1}.tcloud-ui-tab-group .carousel-arrow.right{position:absolute;right:0;z-index:1}@media(max-width:480px){:host{display:block;position:relative;height:var(--size-40)}:host .carousel-arrow{display:none}:host .tcloud-ui-tab-group-carousel{width:100%!important;overflow-x:auto!important;scrollbar-width:none;-ms-overflow-style:none;white-space:nowrap;padding-left:var(--size-40);padding-right:var(--size-40)}:host .tcloud-ui-tab-group-carousel.overflowed{left:auto!important;margin:0!important}:host .tcloud-ui-tab-group-carousel::-webkit-scrollbar{display:none}:host .tcloud-ui-tab-group{left:calc(-1 * var(--size-40));width:calc(100% + var(--size-80))}}\n"] }]
+        }], propDecorators: { onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], tabGroupCarousel: [{
+                type: ViewChild,
+                args: ['tabGroupCarousel']
+            }] } });
+
+class TCloudUiTabItemComponent {
+    constructor() {
+        this.onClick = output();
+        this.active = input(false);
+        this.url = input('');
+        this.disabled = input(false);
+        this.fullWidth = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TCloudUiTabItemComponent, isStandalone: true, selector: "tcloud-ui-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=\"tcloud-ui-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=\"tcloud-ui-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\n", styles: [":host{display:block}.tcloud-ui-tab-item,.tcloud-ui-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}.tcloud-ui-tab-item.full-width,.tcloud-ui-tab-item:link.full-width{width:100%}.tcloud-ui-tab-item:hover,.tcloud-ui-tab-item:focus,.tcloud-ui-tab-item:link:hover,.tcloud-ui-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tcloud-ui-tab-item:active,.tcloud-ui-tab-item.selected,.tcloud-ui-tab-item.active,.tcloud-ui-tab-item:link:active,.tcloud-ui-tab-item:link.selected,.tcloud-ui-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tcloud-ui-tab-item:disabled,.tcloud-ui-tab-item.disabled,.tcloud-ui-tab-item:link:disabled,.tcloud-ui-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 .tcloud-ui-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.18", ngImport: i0, type: TCloudUiTabItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-tab-item', imports: [
+                        CommonModule,
+                        RouterModule
+                    ], template: "<a\n  *ngIf=\"this.url()\"\n  class=\"tcloud-ui-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=\"tcloud-ui-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\n", styles: [":host{display:block}.tcloud-ui-tab-item,.tcloud-ui-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}.tcloud-ui-tab-item.full-width,.tcloud-ui-tab-item:link.full-width{width:100%}.tcloud-ui-tab-item:hover,.tcloud-ui-tab-item:focus,.tcloud-ui-tab-item:link:hover,.tcloud-ui-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tcloud-ui-tab-item:active,.tcloud-ui-tab-item.selected,.tcloud-ui-tab-item.active,.tcloud-ui-tab-item:link:active,.tcloud-ui-tab-item:link.selected,.tcloud-ui-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tcloud-ui-tab-item:disabled,.tcloud-ui-tab-item.disabled,.tcloud-ui-tab-item:link:disabled,.tcloud-ui-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 .tcloud-ui-tab-item{width:100%}}\n"] }]
+        }] });
+
+const COMPONENTS = [
+    TCloudUiAccordionComponent,
+    TCloudUiAccordionBodyComponent,
+    TCloudUiAccordionTitleComponent,
+    TCloudUiChoiceIssuesComponent,
+    TCloudUiDataListComponent,
+    TCloudUiDataListOptionComponent,
+    TCloudUiDatepickerTimeComponent,
+    TCloudUiDatepickerComponent,
+    TCloudUiFiltersComponent,
+    TCloudUiRangeDateComponent,
+    TCloudUiInputSearchComponent,
+    TCloudUiInputContainerComponent,
+    TCloudUiLineStepCircleComponent,
+    TCloudUiLinhaLogoComponent,
+    TCloudUiModalComponent,
+    TCloudUiModalBodyComponent,
+    TCloudUiModalHeaderComponent,
+    TCloudUiModalFooterComponent,
+    TCloudUiMultiInputComponent,
+    TCloudUiMultiSelectComponent,
+    TCloudUiNotFoundComponent,
+    TCloudUiNumberStepComponent,
+    TCloudUiScrollBoxComponent,
+    TCloudUiTabMenuComponent,
+    TCloudUiTabHeadComponent,
+    TCloudUiTabContentComponent,
+    TCloudUiTabTitleComponent,
+    TCloudUiTabSubtitleComponent,
+    TCloudUiTableComponent,
+    TCloudUiInputPasswordComponent,
+    TCloudUiLabelTokenComponent,
+    TCloudUiToastComponent,
+    TCloudUiLineStepTitleComponent,
+    TCloudUiLoadingComponent,
+    TCloudUiCubesComponent,
+    TCloudUiMultiplesValuesComponent,
+    TCloudUiProgressBarComponent,
+    TCloudUiReorderItemsComponent,
+    TCloudUiWelcomeComponent,
+    TCloudUiContainerComponent,
+    TCloudUiContainerColComponent,
+    TCloudUiContainerContentComponent,
+    TCloudUiPaginationComponent,
+    TCloudUiCardComponent,
+    TCloudUiCardTitleComponent,
+    TCloudUiCardAccordionComponent,
+    TCloudUiDropdownComponent,
+    TCloudUiDropdownMultiComponent,
+    TCloudUiEmptyContentComponent,
+    TCloudUiFaqComponent,
+    TCloudUiMessageComponent,
+    TCloudUiSkeletonLoadingComponent,
+    TCloudUiTagComponent,
+    TCloudUiSubNavbarComponent,
+    TCloudUiSubNavbarItemComponent,
+    TCloudUiTabGroupComponent,
+    TCloudUiTabItemComponent
+];
+const DIRECTIVES = [
+    TCloudUiAlignDirective,
+    TCloudUiCheckboxDirective,
+    TCloudUiCurrencyDirective,
+    TCloudUiElCopyDirective,
+    TCloudUiHoverParentDirective,
+    TCloudUiCheckAccessDirective,
+    TCloudUiNgCheckAccessDirective,
+    TCloudUiNgFeatureFlagsDirective,
+    TCloudUiTooltipDirective,
+    TCloudUiDigitOnlyDirective,
+    TCloudUiHighLightDirective,
+    TCloudUiIpMaskDirective,
+    TCloudUiButtonDirective,
+    TCloudUiFormDirective
+];
+const PIPES = [
+    ToTextPipe,
+    BytesPipe,
+    CNPJPipe,
+    CPFPipe,
+    DateBRPipe,
+    MonthNamePipe,
+    RespectivePipe,
+    StatusInfoPipe,
+    TCloudUiPaginationPipe
+];
+class TCloudUiModule {
+    static forRoot(config) {
+        const providers = [
+            // Configuração principal
+            { provide: TCLOUD_UI_CONFIG, useValue: config?.data ?? {} },
+            DatePipe,
+            StatusInfoPipe
+        ];
+        // Adiciona serviços customizados se fornecidos
+        if (config?.services?.userService) {
+            providers.push({ provide: TCLOUD_UI_USER_SERVICE, useClass: config.services.userService });
+        }
+        if (config?.services?.layoutService) {
+            providers.push({ provide: TCLOUD_UI_LAYOUT_SERVICE, useClass: config.services.layoutService });
+        }
+        if (config?.services?.viewportService) {
+            providers.push({ provide: TCLOUD_UI_VIEWPORT_SERVICE, useClass: config.services.viewportService });
+        }
+        return {
+            ngModule: TCloudUiModule,
+            providers
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModule, imports: [TCloudUiAccordionComponent,
+            TCloudUiAccordionBodyComponent,
+            TCloudUiAccordionTitleComponent,
+            TCloudUiChoiceIssuesComponent,
+            TCloudUiDataListComponent,
+            TCloudUiDataListOptionComponent,
+            TCloudUiDatepickerTimeComponent,
+            TCloudUiDatepickerComponent,
+            TCloudUiFiltersComponent,
+            TCloudUiRangeDateComponent,
+            TCloudUiInputSearchComponent,
+            TCloudUiInputContainerComponent,
+            TCloudUiLineStepCircleComponent,
+            TCloudUiLinhaLogoComponent,
+            TCloudUiModalComponent,
+            TCloudUiModalBodyComponent,
+            TCloudUiModalHeaderComponent,
+            TCloudUiModalFooterComponent,
+            TCloudUiMultiInputComponent,
+            TCloudUiMultiSelectComponent,
+            TCloudUiNotFoundComponent,
+            TCloudUiNumberStepComponent,
+            TCloudUiScrollBoxComponent,
+            TCloudUiTabMenuComponent,
+            TCloudUiTabHeadComponent,
+            TCloudUiTabContentComponent,
+            TCloudUiTabTitleComponent,
+            TCloudUiTabSubtitleComponent,
+            TCloudUiTableComponent,
+            TCloudUiInputPasswordComponent,
             TCloudUiLabelTokenComponent,
             TCloudUiToastComponent,
             TCloudUiLineStepTitleComponent,
@@ -6867,8 +7672,19 @@ class TCloudUiModule {
             TCloudUiPaginationComponent,
             TCloudUiCardComponent,
             TCloudUiCardTitleComponent,
+            TCloudUiCardAccordionComponent,
+            TCloudUiDropdownComponent,
+            TCloudUiDropdownMultiComponent,
+            TCloudUiEmptyContentComponent,
+            TCloudUiFaqComponent,
+            TCloudUiMessageComponent,
+            TCloudUiSkeletonLoadingComponent,
+            TCloudUiTagComponent,
             TCloudUiSubNavbarComponent,
-            TCloudUiSubNavbarItemComponent, TCloudUiAlignDirective,
+            TCloudUiSubNavbarItemComponent,
+            TCloudUiTabGroupComponent,
+            TCloudUiTabItemComponent, TCloudUiAlignDirective,
+            TCloudUiCheckboxDirective,
             TCloudUiCurrencyDirective,
             TCloudUiElCopyDirective,
             TCloudUiHoverParentDirective,
@@ -6899,6 +7715,7 @@ class TCloudUiModule {
             TCloudUiFiltersComponent,
             TCloudUiRangeDateComponent,
             TCloudUiInputSearchComponent,
+            TCloudUiInputContainerComponent,
             TCloudUiLineStepCircleComponent,
             TCloudUiLinhaLogoComponent,
             TCloudUiModalComponent,
@@ -6932,8 +7749,19 @@ class TCloudUiModule {
             TCloudUiPaginationComponent,
             TCloudUiCardComponent,
             TCloudUiCardTitleComponent,
+            TCloudUiCardAccordionComponent,
+            TCloudUiDropdownComponent,
+            TCloudUiDropdownMultiComponent,
+            TCloudUiEmptyContentComponent,
+            TCloudUiFaqComponent,
+            TCloudUiMessageComponent,
+            TCloudUiSkeletonLoadingComponent,
+            TCloudUiTagComponent,
             TCloudUiSubNavbarComponent,
-            TCloudUiSubNavbarItemComponent, TCloudUiAlignDirective,
+            TCloudUiSubNavbarItemComponent,
+            TCloudUiTabGroupComponent,
+            TCloudUiTabItemComponent, TCloudUiAlignDirective,
+            TCloudUiCheckboxDirective,
             TCloudUiCurrencyDirective,
             TCloudUiElCopyDirective,
             TCloudUiHoverParentDirective,
@@ -6969,6 +7797,7 @@ class TCloudUiModule {
             TCloudUiFiltersComponent,
             TCloudUiRangeDateComponent,
             TCloudUiInputSearchComponent,
+            TCloudUiInputContainerComponent,
             TCloudUiLineStepCircleComponent,
             TCloudUiLinhaLogoComponent,
             TCloudUiModalComponent,
@@ -6998,8 +7827,17 @@ class TCloudUiModule {
             TCloudUiWelcomeComponent,
             TCloudUiPaginationComponent,
             TCloudUiCardComponent,
+            TCloudUiCardAccordionComponent,
+            TCloudUiDropdownComponent,
+            TCloudUiDropdownMultiComponent,
+            TCloudUiFaqComponent,
+            TCloudUiMessageComponent,
+            TCloudUiSkeletonLoadingComponent,
+            TCloudUiTagComponent,
             TCloudUiSubNavbarComponent,
-            TCloudUiSubNavbarItemComponent] }); }
+            TCloudUiSubNavbarItemComponent,
+            TCloudUiTabGroupComponent,
+            TCloudUiTabItemComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModule, decorators: [{
             type: NgModule,
@@ -7181,41 +8019,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-class TcRevButtonDirective {
-    constructor(_el) {
-        this._el = _el;
-        this.color = input('primary');
-        this.size = input('sm');
-        this.fullWidth = input(false);
-        this.tcRevButton = input('filled');
-        effect(() => {
-            this.setClasses();
-        });
-    }
-    setClasses() {
-        const tokenList = this._el.nativeElement.classList;
-        tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
-        let tcRevButton = this.tcRevButton();
-        if (!tcRevButton) {
-            tcRevButton = 'filled';
-        }
-        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()}-${tcRevButton}`);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TcRevButtonDirective, isStandalone: true, selector: "button[tcRevButton]", 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 }, tcRevButton: { classPropertyName: "tcRevButton", publicName: "tcRevButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-btn" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[tcRevButton]',
-                    host: {
-                        class: 'tc-rev-btn'
-                    }
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
-
 class TcRevCalendarComponent {
     constructor() {
         this.appointments = []; // Updated to use the new type
@@ -7342,18 +8145,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }] } });
 
-class TcRevCardTitleComponent {
-    constructor() {
-        this.title = input.required();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TcRevCardTitleComponent, isStandalone: true, selector: "tc-rev-card-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"tc-rev-card-title c-neutral-700\">\n    <span class=\"tc-rev-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n        <ng-content select=\"[icon]\"></ng-content>\n    </span>\n\n    <h2 class=\"tc-rev-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__text{cursor:default}@media(max-width:480px){.tc-rev-card-title{max-height:var(--size-32);min-height:var(--size-32)}.tc-rev-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32);font-size:var(--f-size-16)}.tc-rev-card-title__text{font-size:var(--f-size-16);line-height:var(--l-height-16);font-weight:var(--f-weight-600);text-transform:inherit;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevCardTitleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tc-rev-card-title', imports: [], template: "<div class=\"tc-rev-card-title c-neutral-700\">\n    <span class=\"tc-rev-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n        <ng-content select=\"[icon]\"></ng-content>\n    </span>\n\n    <h2 class=\"tc-rev-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__text{cursor:default}@media(max-width:480px){.tc-rev-card-title{max-height:var(--size-32);min-height:var(--size-32)}.tc-rev-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32);font-size:var(--f-size-16)}.tc-rev-card-title__text{font-size:var(--f-size-16);line-height:var(--l-height-16);font-weight:var(--f-weight-600);text-transform:inherit;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}}\n"] }]
-        }] });
-
 class TcRevCardAccordionComponent {
     constructor() {
         this._viewPort = inject(TCloudUiDeviceUtilsService);
@@ -7426,6 +8217,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+var DropdownSize;
+(function (DropdownSize) {
+    DropdownSize["sm"] = "sm";
+    DropdownSize["md"] = "md";
+    DropdownSize["lg"] = "lg";
+})(DropdownSize || (DropdownSize = {}));
+class TcRevDropdownComponent {
+    onDocumentClick(event) {
+        if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this._deviceService = inject(TCloudUiDeviceUtilsService);
+        this.label = input(''); // Label que será exibida
+        this.disabled = input(false); // Desabilita o dropdown
+        this.options = input.required(); // Lista de opções no novo formato
+        this.initialValue = input(null); // Valor pré-selecionado (deprecated - use value instead)
+        this.value = model(null); // Two-way binding para o valor selecionado
+        this.size = input(DropdownSize.sm);
+        this.width = input(''); // Largura específica do dropdown (ex: '300px', '50%'). Se não informado, ocupa 100% do pai
+        this.optionSelected = output(); // Emissor para o valor selecionado
+        this.selectedOption = signal(null); // Opção selecionada
+        this.isOpen = false; // Controla se o dropdown está aberto
+        this.dropdownSize = DropdownSize;
+        this.isDesktop = this._deviceService.isDesktop;
+        this.isMobile = this._deviceService.isMobile;
+    }
+    ngOnChanges(_simpleChanges) {
+        // Atualiza a opção selecionada quando o valor pré-selecionado muda
+        if (_simpleChanges['initialValue'] ||
+            _simpleChanges['options'] ||
+            _simpleChanges['value']) {
+            const valueToUse = this.value() || this.initialValue();
+            this.selectedOption.set(this.options().find((option) => option.value === valueToUse) || null);
+        }
+    }
+    ngOnInit() {
+        // Prioriza o valor do model, mas mantém compatibilidade com initialValue
+        const valueToUse = this.value() || this.initialValue();
+        const foundOption = this.options().find((option) => option.value === valueToUse) || null;
+        this.selectedOption.set(foundOption);
+        // Se não havia valor no model mas havia initialValue, sincroniza o model
+        if (!this.value() && this.initialValue() && foundOption) {
+            this.value.set(foundOption.value);
+        }
+        // Escuta mudanças no model e atualiza a opção selecionada
+        this.value.subscribe((newValue) => {
+            const option = this.options().find((opt) => opt.value === newValue) || null;
+            if (this.selectedOption() !== option) {
+                this.selectedOption.set(option);
+            }
+        });
+    }
+    toggleDropdown() {
+        // Abertura do dropdown para mobile
+        if (this.isMobile()) {
+            this._deviceService.openDropdownDevice(this.menuTemplate);
+            return;
+        }
+        this.isOpen = !this.isOpen;
+    }
+    selectOption(option) {
+        this.selectedOption.set(option);
+        this.value.set(option.value); // Atualiza o model com two-way binding
+        this.optionSelected.emit(option); // Emite a opção selecionada para compatibilidade
+        // Fechamento dd dropdown para mobile
+        if (this.isMobile()) {
+            this._deviceService.closeDropdownDevice();
+            return;
+        }
+        this.isOpen = false; // Fecha o dropdown
+    }
+    /**
+     * Verifica se o texto de uma opção na lista está elipsado
+     * @param text - Texto a ser verificado
+     * @returns true se o texto estiver elipsado
+     */
+    isOptionEllipsed(text) {
+        if (!text)
+            return false;
+        // Calcula a largura disponível para o texto nas opções da lista
+        const menuElement = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown-menu');
+        if (!menuElement) {
+            // Se o menu não está aberto, usa a largura do dropdown
+            const dropdownElement = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown');
+            if (!dropdownElement)
+                return false;
+            const dropdownWidth = dropdownElement.clientWidth;
+            const padding = 16; // 8px de cada lado do botão
+            const iconSpace = 24; // Espaço do ícone de check quando selecionado
+            const availableWidth = Math.max(50, dropdownWidth - padding - iconSpace);
+            return isTextEllipsed(text, availableWidth);
+        }
+        // Largura do menu menos padding do item (16px total) e espaço do ícone de check (24px)
+        const menuWidth = menuElement.clientWidth;
+        const padding = 16; // 8px de cada lado do botão do item
+        const iconSpace = 24; // Espaço do ícone de check quando selecionado
+        const availableWidth = Math.max(50, menuWidth - padding - iconSpace);
+        return isTextEllipsed(text, availableWidth);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownComponent, isStandalone: true, selector: "tc-rev-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tc-rev-dropdown\"\n  [class.disabled]=\"disabled()\"\n  [style.width]=\"this.width()\"\n>\n  <button\n    class=\"tc-rev-dropdown-toggle\"\n    [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n  >\n    @if (label()) {\n    <b>{{ label() }}</b>\n    }\n    <span class=\"tc-rev-dropdown-selected-text\">\n      {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n    </span>\n    <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n  </button>\n  <ul *ngIf=\"isOpen && isDesktop()\" class=\"tc-rev-dropdown-menu\">\n    @for (option of options(); track option?.value) {\n    <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n      <button\n        class=\"tc-rev-dropdown-menu-item-btn\"\n        [class.selected]=\"selectedOption()?.value === option.value\"\n        [disabled]=\"option?.disabled\"\n      >\n        <span\n          class=\"tc-rev-dropdown-option-text\"\n          [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n          [tcRevTooltip]=\"\n            isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n          \"\n          position=\"top\"\n        >\n          {{ option?.displayValue }}\n        </span>\n\n        @if (selectedOption()?.value === option?.value) {\n        <i class=\"fa-light fa-circle-check\"></i>\n        }\n      </button>\n    </li>\n    }\n  </ul>\n\n  <!-- Dropdown full screen -->\n  <ng-template #menuTemplate>\n    <div class=\"tc-rev-dropdown-menu tc-rev-dropdown-menu--device\">\n      <div class=\"tc-rev-dropdown-menu-section\">\n        <div class=\"tc-rev-dropdown-menu-header pad-b-24\">\n          <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n            {{ label() }}\n          </h3>\n          <button\n            tcRevIconButton=\"outline\"\n            color=\"dark\"\n            size=\"sm\"\n            (click)=\"_deviceService.closeDropdownDevice()\"\n          >\n            <i class=\"fa-light fa-times f-size-16\"></i>\n          </button>\n        </div>\n        <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n          @for (option of options(); track option?.value) {\n          <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n            <button\n              class=\"tc-rev-dropdown-menu-item-btn\"\n              [class.selected]=\"selectedOption()?.value === option.value\"\n              [disabled]=\"option?.disabled\"\n            >\n              {{ option?.displayValue }}\n\n              @if (selectedOption()?.value === option?.value) {\n              <i class=\"fa-light fa-circle-check f-size-16\"></i>\n              }\n            </button>\n          </li>\n          }\n        </ul>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tc-rev-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-section{display:contents}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevTooltipDirective, selector: "[tcRevTooltip]", inputs: ["tcRevTooltip", "position"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tc-rev-dropdown', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TcRevTooltipDirective,
+                        TcRevIconButtonDirective
+                    ], template: "<div\n  class=\"tc-rev-dropdown\"\n  [class.disabled]=\"disabled()\"\n  [style.width]=\"this.width()\"\n>\n  <button\n    class=\"tc-rev-dropdown-toggle\"\n    [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n  >\n    @if (label()) {\n    <b>{{ label() }}</b>\n    }\n    <span class=\"tc-rev-dropdown-selected-text\">\n      {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n    </span>\n    <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n  </button>\n  <ul *ngIf=\"isOpen && isDesktop()\" class=\"tc-rev-dropdown-menu\">\n    @for (option of options(); track option?.value) {\n    <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n      <button\n        class=\"tc-rev-dropdown-menu-item-btn\"\n        [class.selected]=\"selectedOption()?.value === option.value\"\n        [disabled]=\"option?.disabled\"\n      >\n        <span\n          class=\"tc-rev-dropdown-option-text\"\n          [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n          [tcRevTooltip]=\"\n            isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n          \"\n          position=\"top\"\n        >\n          {{ option?.displayValue }}\n        </span>\n\n        @if (selectedOption()?.value === option?.value) {\n        <i class=\"fa-light fa-circle-check\"></i>\n        }\n      </button>\n    </li>\n    }\n  </ul>\n\n  <!-- Dropdown full screen -->\n  <ng-template #menuTemplate>\n    <div class=\"tc-rev-dropdown-menu tc-rev-dropdown-menu--device\">\n      <div class=\"tc-rev-dropdown-menu-section\">\n        <div class=\"tc-rev-dropdown-menu-header pad-b-24\">\n          <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n            {{ label() }}\n          </h3>\n          <button\n            tcRevIconButton=\"outline\"\n            color=\"dark\"\n            size=\"sm\"\n            (click)=\"_deviceService.closeDropdownDevice()\"\n          >\n            <i class=\"fa-light fa-times f-size-16\"></i>\n          </button>\n        </div>\n        <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n          @for (option of options(); track option?.value) {\n          <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n            <button\n              class=\"tc-rev-dropdown-menu-item-btn\"\n              [class.selected]=\"selectedOption()?.value === option.value\"\n              [disabled]=\"option?.disabled\"\n            >\n              {{ option?.displayValue }}\n\n              @if (selectedOption()?.value === option?.value) {\n              <i class=\"fa-light fa-circle-check f-size-16\"></i>\n              }\n            </button>\n          </li>\n          }\n        </ul>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tc-rev-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-section{display:contents}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
+                type: ViewChild,
+                args: ['menuTemplate']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 class TcRevSearchInputComponent {
     constructor() {
         this.searchTextChange = new EventEmitter();
@@ -7452,54 +8365,20 @@ class TcRevSearchInputComponent {
     }
     ngAfterViewInit() {
         if (this.autoFocus() && this.searchInput) {
-            this.searchInput().nativeElement.focus();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.18", type: TcRevSearchInputComponent, isStandalone: true, selector: "tc-rev-search-input", inputs: { searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTextChange: "searchTextChange", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<form class=\"tc-rev-search-input-container\">\n  <input\n    type=\"text\"\n    class=\"tc-rev-search-input-control\"\n    [formControl]=\"this.searchTextForm\"\n    [placeholder]=\"this.placeholder()\"\n    #searchInput\n  />\n\n  <button class=\"tc-rev-search-input-btn\">\n    <i class=\"fa-light fa-magnifying-glass\"></i>\n  </button>\n</form>\n\n\n", styles: [":host{display:block}.tc-rev-search-input-container{position:relative;max-height:var(--size-40);min-height:var(--size-40);height:var(--size-40);min-width:7.5rem}.tc-rev-search-input-container .tc-rev-search-input-control{border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);display:inline-block;font-family:var(--f-family);font-size:var(--f-size-14);line-height:var(--l-height-20);outline:none;height:var(--size-40);transition:.2s ease;padding:0 var(--size-16);position:absolute;top:0;left:0;padding-right:var(--size-44);width:100%;z-index:1}.tc-rev-search-input-container .tc-rev-search-input-control:hover,.tc-rev-search-input-container .tc-rev-search-input-control:focus{border-color:var(--c-primary-500)}.tc-rev-search-input-container .tc-rev-search-input-btn{cursor:pointer;display:block;position:absolute;right:4px;top:4px;z-index:2;background-color:var(--c-primary-500);border-radius:var(--bor-radius-rounded);border:none;width:var(--size-32);height:var(--size-32);color:var(--c-neutral-50);font-size:var(--f-size-16)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevSearchInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tc-rev-search-input', imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<form class=\"tc-rev-search-input-container\">\n  <input\n    type=\"text\"\n    class=\"tc-rev-search-input-control\"\n    [formControl]=\"this.searchTextForm\"\n    [placeholder]=\"this.placeholder()\"\n    #searchInput\n  />\n\n  <button class=\"tc-rev-search-input-btn\">\n    <i class=\"fa-light fa-magnifying-glass\"></i>\n  </button>\n</form>\n\n\n", styles: [":host{display:block}.tc-rev-search-input-container{position:relative;max-height:var(--size-40);min-height:var(--size-40);height:var(--size-40);min-width:7.5rem}.tc-rev-search-input-container .tc-rev-search-input-control{border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);display:inline-block;font-family:var(--f-family);font-size:var(--f-size-14);line-height:var(--l-height-20);outline:none;height:var(--size-40);transition:.2s ease;padding:0 var(--size-16);position:absolute;top:0;left:0;padding-right:var(--size-44);width:100%;z-index:1}.tc-rev-search-input-container .tc-rev-search-input-control:hover,.tc-rev-search-input-container .tc-rev-search-input-control:focus{border-color:var(--c-primary-500)}.tc-rev-search-input-container .tc-rev-search-input-btn{cursor:pointer;display:block;position:absolute;right:4px;top:4px;z-index:2;background-color:var(--c-primary-500);border-radius:var(--bor-radius-rounded);border:none;width:var(--size-32);height:var(--size-32);color:var(--c-neutral-50);font-size:var(--f-size-16)}\n"] }]
-        }], propDecorators: { searchText: [{
-                type: Input
-            }], searchTextChange: [{
-                type: Output
-            }] } });
-
-class TcRevIconButtonDirective {
-    constructor(_el) {
-        this._el = _el;
-        this.color = input('primary');
-        this.size = input('sm');
-        this.tcRevIconButton = input('filled');
-        effect(() => {
-            this.setClasses();
-        });
-    }
-    setClasses() {
-        const tokenList = this._el.nativeElement.classList;
-        tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
-        let tcRevIconButton = this.tcRevIconButton();
-        if (!tcRevIconButton) {
-            tcRevIconButton = 'filled';
+            this.searchInput().nativeElement.focus();
         }
-        this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
-        this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}-icon`);
-        this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcRevIconButton}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevIconButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TcRevIconButtonDirective, isStandalone: true, selector: "button[tcRevIconButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tcRevIconButton: { classPropertyName: "tcRevIconButton", publicName: "tcRevIconButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-btn tc-rev-btn-icon" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.18", type: TcRevSearchInputComponent, isStandalone: true, selector: "tc-rev-search-input", inputs: { searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTextChange: "searchTextChange", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<form class=\"tc-rev-search-input-container\">\n  <input\n    type=\"text\"\n    class=\"tc-rev-search-input-control\"\n    [formControl]=\"this.searchTextForm\"\n    [placeholder]=\"this.placeholder()\"\n    #searchInput\n  />\n\n  <button class=\"tc-rev-search-input-btn\">\n    <i class=\"fa-light fa-magnifying-glass\"></i>\n  </button>\n</form>\n\n\n", styles: [":host{display:block}.tc-rev-search-input-container{position:relative;max-height:var(--size-40);min-height:var(--size-40);height:var(--size-40);min-width:7.5rem}.tc-rev-search-input-container .tc-rev-search-input-control{border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);display:inline-block;font-family:var(--f-family);font-size:var(--f-size-14);line-height:var(--l-height-20);outline:none;height:var(--size-40);transition:.2s ease;padding:0 var(--size-16);position:absolute;top:0;left:0;padding-right:var(--size-44);width:100%;z-index:1}.tc-rev-search-input-container .tc-rev-search-input-control:hover,.tc-rev-search-input-container .tc-rev-search-input-control:focus{border-color:var(--c-primary-500)}.tc-rev-search-input-container .tc-rev-search-input-btn{cursor:pointer;display:block;position:absolute;right:4px;top:4px;z-index:2;background-color:var(--c-primary-500);border-radius:var(--bor-radius-rounded);border:none;width:var(--size-32);height:var(--size-32);color:var(--c-neutral-50);font-size:var(--f-size-16)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevIconButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[tcRevIconButton]',
-                    host: {
-                        class: 'tc-rev-btn tc-rev-btn-icon'
-                    }
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevSearchInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tc-rev-search-input', imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<form class=\"tc-rev-search-input-container\">\n  <input\n    type=\"text\"\n    class=\"tc-rev-search-input-control\"\n    [formControl]=\"this.searchTextForm\"\n    [placeholder]=\"this.placeholder()\"\n    #searchInput\n  />\n\n  <button class=\"tc-rev-search-input-btn\">\n    <i class=\"fa-light fa-magnifying-glass\"></i>\n  </button>\n</form>\n\n\n", styles: [":host{display:block}.tc-rev-search-input-container{position:relative;max-height:var(--size-40);min-height:var(--size-40);height:var(--size-40);min-width:7.5rem}.tc-rev-search-input-container .tc-rev-search-input-control{border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);display:inline-block;font-family:var(--f-family);font-size:var(--f-size-14);line-height:var(--l-height-20);outline:none;height:var(--size-40);transition:.2s ease;padding:0 var(--size-16);position:absolute;top:0;left:0;padding-right:var(--size-44);width:100%;z-index:1}.tc-rev-search-input-container .tc-rev-search-input-control:hover,.tc-rev-search-input-container .tc-rev-search-input-control:focus{border-color:var(--c-primary-500)}.tc-rev-search-input-container .tc-rev-search-input-btn{cursor:pointer;display:block;position:absolute;right:4px;top:4px;z-index:2;background-color:var(--c-primary-500);border-radius:var(--bor-radius-rounded);border:none;width:var(--size-32);height:var(--size-32);color:var(--c-neutral-50);font-size:var(--f-size-16)}\n"] }]
+        }], propDecorators: { searchText: [{
+                type: Input
+            }], searchTextChange: [{
+                type: Output
+            }] } });
 
 var DropdownGroupedSize;
 (function (DropdownGroupedSize) {
@@ -7647,97 +8526,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
-class TcRevDropdownSubMenuComponent {
-    constructor() {
-        this.items = input.required();
-        this.position = input('right');
-        this.parentOffsetTop = input.required();
-        this.selectedOption = input();
-        this.onOptionSelected = output();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownSubMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownSubMenuComponent, isStandalone: true, selector: "tc-rev-dropdown-sub-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, parentOffsetTop: { classPropertyName: "parentOffsetTop", publicName: "parentOffsetTop", isSignal: true, isRequired: true, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionSelected: "onOptionSelected" }, ngImport: i0, template: "<ul\n  class=\"sub-menu\"\n  [ngClass]=\"this.position()\"\n  [style.top.px]=\"this.parentOffsetTop()\">\n  @for (item of this.items(); track item.value)\n  {\n    <li\n      class=\"sub-menu-item\"\n      [class.selected]=\"this.selectedOption()?.value === item.value\"\n      (click)=\"this.onOptionSelected.emit(item)\">\n      {{ item.displayValue }}\n      @if (this.selectedOption()?.value === item?.value)\n      {\n        <i class=\"fa-light fa-circle-check\"></i>\n      }\n      @if (item.children?.length)\n      {\n        <tc-rev-dropdown-sub-menu\n          [items]=\"item.children\"\n          [position]=\"this.position()\"\n          [parentOffsetTop]=\"0\"\n          [selectedOption]=\"this.selectedOption()\">\n        </tc-rev-dropdown-sub-menu>\n      }\n    </li>\n  }\n</ul>\n", styles: [".sub-menu{background-color:var(--c-neutral-50);box-shadow:var(--shadow-md);list-style:none;max-height:15.625rem;min-width:160px;overflow-y:auto;padding:0;position:absolute;margin:0;z-index:1001}.sub-menu.right{left:100%}.sub-menu.left{right:100%}.sub-menu-item{padding:8px 16px;white-space:nowrap;position:relative;align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.sub-menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.sub-menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.sub-menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: TcRevDropdownSubMenuComponent, selector: "tc-rev-dropdown-sub-menu", inputs: ["items", "position", "parentOffsetTop", "selectedOption"], outputs: ["onOptionSelected"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownSubMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tc-rev-dropdown-sub-menu', imports: [CommonModule], template: "<ul\n  class=\"sub-menu\"\n  [ngClass]=\"this.position()\"\n  [style.top.px]=\"this.parentOffsetTop()\">\n  @for (item of this.items(); track item.value)\n  {\n    <li\n      class=\"sub-menu-item\"\n      [class.selected]=\"this.selectedOption()?.value === item.value\"\n      (click)=\"this.onOptionSelected.emit(item)\">\n      {{ item.displayValue }}\n      @if (this.selectedOption()?.value === item?.value)\n      {\n        <i class=\"fa-light fa-circle-check\"></i>\n      }\n      @if (item.children?.length)\n      {\n        <tc-rev-dropdown-sub-menu\n          [items]=\"item.children\"\n          [position]=\"this.position()\"\n          [parentOffsetTop]=\"0\"\n          [selectedOption]=\"this.selectedOption()\">\n        </tc-rev-dropdown-sub-menu>\n      }\n    </li>\n  }\n</ul>\n", styles: [".sub-menu{background-color:var(--c-neutral-50);box-shadow:var(--shadow-md);list-style:none;max-height:15.625rem;min-width:160px;overflow-y:auto;padding:0;position:absolute;margin:0;z-index:1001}.sub-menu.right{left:100%}.sub-menu.left{right:100%}.sub-menu-item{padding:8px 16px;white-space:nowrap;position:relative;align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.sub-menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.sub-menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.sub-menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
-        }] });
-
-var MultiLevelDropdownSize;
-(function (MultiLevelDropdownSize) {
-    MultiLevelDropdownSize["sm"] = "sm";
-    MultiLevelDropdownSize["md"] = "md";
-    MultiLevelDropdownSize["lg"] = "lg";
-})(MultiLevelDropdownSize || (MultiLevelDropdownSize = {}));
-class TcRevDropdownMultiLevelComponent {
-    onDocumentClick(event) {
-        if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
-            this.isOpen = false;
-        }
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.dropdownSize = MultiLevelDropdownSize;
-        this.menu = input.required();
-        this.subMenuPosition = input('right');
-        this.disabled = input(false);
-        this.size = input(MultiLevelDropdownSize.sm);
-        this.initialValue = input(null); // Valor pré-selecionado
-        this.optionSelected = output();
-        this.selectedOption = signal(null);
-        this.selectedParentOption = signal(null);
-        this.hoveredIndex = null;
-        this.isOpen = false;
-    }
-    ngOnChanges(_simpleChanges) {
-        // Atualiza a opção selecionada quando o valor pré-selecionado muda
-        if (_simpleChanges['initialValue'] || _simpleChanges['menu']) {
-            this.selectedOption.set(null);
-            this.selectedParentOption.set(null);
-        }
-    }
-    getItemOffsetTop(index) {
-        if (!this.menuRoot)
-            return 0;
-        const items = this.menuRoot.nativeElement.querySelectorAll('.menu-item');
-        if (items && items[index]) {
-            return items[index].offsetTop;
-        }
-        return 0;
-    }
-    toggleDropdown() {
-        this.isOpen = !this.isOpen;
-    }
-    selectOption(option, parentOption) {
-        this.selectedOption.set(option);
-        this.selectedParentOption.set(parentOption);
-        this.optionSelected.emit({ option, parentOption }); // Emite apenas o valor da opção selecionada
-        // this.isOpen = false; // Fecha o dropdown
-        // this.hoveredIndex = null;
-    }
-    selectParentItem($event, option, parentOption) {
-        $event.stopPropagation();
-        if (parentOption?.children?.length)
-            return;
-        this.selectOption(option, parentOption);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiLevelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownMultiLevelComponent, isStandalone: true, selector: "tc-rev-dropdown-multi-level", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, subMenuPosition: { classPropertyName: "subMenuPosition", publicName: "subMenuPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuRoot", first: true, predicate: ["menuRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tc-rev-dropdown-multi-level\">\n  <button\n    class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--dark-outline tc-rev-dropdown-toggle\"\n    [class.tc-rev-btn--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-btn--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-btn--lg]=\"this.size() === dropdownSize.lg\"\n    [class.active]=\"isOpen\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\">\n    <ng-content></ng-content>\n  </button>\n\n\t<ul class=\"tc-rev-dropdown-multi-level__menu-list\" #menuRoot>\n\t\t@if (isOpen)\n    {\n      @for (item of menu(); track $index; let i = $index)\n      {\n        <li \n          class=\"menu-item\"\n          [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n          (mouseenter)=\"hoveredIndex = i\"\n          (mouseleave)=\"hoveredIndex = null\"\n          (click)=\"this.selectParentItem($event, item, item)\">\n          {{ item.displayValue }}\n          @if (this.selectedParentOption()?.value === item?.value)\n          {\n            <i class=\"fa-light fa-circle-check c-primary-500 mar-l-a\"></i>\n          }\n          @if (item?.children?.length && hoveredIndex === i)\n          {\n            <tc-rev-dropdown-sub-menu\n              [items]=\"item.children\"\n              [position]=\"subMenuPosition()\"\n              [parentOffsetTop]=\"getItemOffsetTop(i)\"\n              [selectedOption]=\"this.selectedOption()\"\n              (onOptionSelected)=\"this.selectOption($event, item)\">\n            </tc-rev-dropdown-sub-menu>\n          }\n        </li>\n      }\n    }\n\t</ul>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-multi-level{position:relative;display:inline-block}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);gap:var(--size-8);line-height:var(--l-height-20);outline:none;transition:.2s ease;padding:0 var(--size-16)}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle.active{background-color:var(--c-neutral-500);color:var(--c-neutral-50);border-color:var(--c-neutral-700)}.tc-rev-dropdown-multi-level__menu-list{background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);box-shadow:var(--shadow-md);color:var(--c-neutral-700);left:0;list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;position:absolute;top:110%;width:100%;z-index:1000}.tc-rev-dropdown-multi-level__menu-list .menu-item{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi-level__menu-list .menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-multi-level__menu-list .menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi-level__menu-list .menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TcRevDropdownSubMenuComponent, selector: "tc-rev-dropdown-sub-menu", inputs: ["items", "position", "parentOffsetTop", "selectedOption"], outputs: ["onOptionSelected"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiLevelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tc-rev-dropdown-multi-level', imports: [
-                        CommonModule,
-                        TcRevDropdownSubMenuComponent
-                    ], template: "<div class=\"tc-rev-dropdown-multi-level\">\n  <button\n    class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--dark-outline tc-rev-dropdown-toggle\"\n    [class.tc-rev-btn--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-btn--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-btn--lg]=\"this.size() === dropdownSize.lg\"\n    [class.active]=\"isOpen\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\">\n    <ng-content></ng-content>\n  </button>\n\n\t<ul class=\"tc-rev-dropdown-multi-level__menu-list\" #menuRoot>\n\t\t@if (isOpen)\n    {\n      @for (item of menu(); track $index; let i = $index)\n      {\n        <li \n          class=\"menu-item\"\n          [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n          (mouseenter)=\"hoveredIndex = i\"\n          (mouseleave)=\"hoveredIndex = null\"\n          (click)=\"this.selectParentItem($event, item, item)\">\n          {{ item.displayValue }}\n          @if (this.selectedParentOption()?.value === item?.value)\n          {\n            <i class=\"fa-light fa-circle-check c-primary-500 mar-l-a\"></i>\n          }\n          @if (item?.children?.length && hoveredIndex === i)\n          {\n            <tc-rev-dropdown-sub-menu\n              [items]=\"item.children\"\n              [position]=\"subMenuPosition()\"\n              [parentOffsetTop]=\"getItemOffsetTop(i)\"\n              [selectedOption]=\"this.selectedOption()\"\n              (onOptionSelected)=\"this.selectOption($event, item)\">\n            </tc-rev-dropdown-sub-menu>\n          }\n        </li>\n      }\n    }\n\t</ul>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-multi-level{position:relative;display:inline-block}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);gap:var(--size-8);line-height:var(--l-height-20);outline:none;transition:.2s ease;padding:0 var(--size-16)}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle.active{background-color:var(--c-neutral-500);color:var(--c-neutral-50);border-color:var(--c-neutral-700)}.tc-rev-dropdown-multi-level__menu-list{background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);box-shadow:var(--shadow-md);color:var(--c-neutral-700);left:0;list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;position:absolute;top:110%;width:100%;z-index:1000}.tc-rev-dropdown-multi-level__menu-list .menu-item{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi-level__menu-list .menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-multi-level__menu-list .menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi-level__menu-list .menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }], menuRoot: [{
-                type: ViewChild,
-                args: ['menuRoot', { static: false }]
-            }] } });
-
 var DropdownMultiSize;
 (function (DropdownMultiSize) {
     DropdownMultiSize["sm"] = "sm";
@@ -7854,231 +8642,66 @@ class TcRevDropdownMultiComponent {
     isAllSelected() {
         const enabledOptions = this.options().filter(option => !option.disabled);
         const selectedOptions = this.selectedOptions();
-        if (enabledOptions.length === 0)
-            return false;
-        return enabledOptions.every(option => selectedOptions.some(selected => selected.value === option.value));
-    }
-    isSomeSelected() {
-        const enabledOptions = this.options().filter(option => !option.disabled);
-        const selectedOptions = this.selectedOptions();
-        if (enabledOptions.length === 0 || selectedOptions.length === 0)
-            return false;
-        const selectedCount = enabledOptions.filter(option => selectedOptions.some(selected => selected.value === option.value)).length;
-        return selectedCount > 0 && selectedCount < enabledOptions.length;
-    }
-    toggleSelectAll(event) {
-        event.stopPropagation();
-        if (this.isAllSelected()) {
-            this.clearAll();
-        }
-        else {
-            this.selectAll();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownMultiComponent, isStandalone: true, selector: "tc-rev-dropdown-multi", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxDisplayItems: { classPropertyName: "maxDisplayItems", publicName: "maxDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", optionsSelected: "optionsSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tc-rev-dropdown-multi\"\n  [class.disabled]=\"disabled()\">\n  <button\n    class=\"tc-rev-dropdown-multi-toggle\"\n    [class.tc-rev-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"isOpen\"\n    [style.width]=\"this.width()\">\n    @if (label())\n    {\n      <b>{{label()}}</b>\n    }\n    <span class=\"selected-text\">{{ getDisplayText() }}</span>\n    <i class=\"fa-light fa-chevron-down\"></i>\n  </button>\n\n  <div\n    *ngIf=\"isOpen\"\n    class=\"tc-rev-dropdown-multi-menu\"\n    [style.width]=\"this.width()\">\n\n    <!-- Checkbox Selecionar/Limpar Todos -->\n    <div class=\"tc-rev-dropdown-multi-actions\">\n      <label\n        class=\"tc-rev-dropdown-multi-select-all-label\"\n        [class.selected]=\"isAllSelected()\">\n        <input\n          type=\"checkbox\"\n          tcRevCheckbox\n          [disabled]=\"disabled()\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"isSomeSelected()\"\n          (change)=\"toggleSelectAll($event)\">\n        <span class=\"tc-rev-dropdown-multi-select-all-text\">Todos</span>\n      </label>\n    </div>\n\n    <ul class=\"tc-rev-dropdown-multi-options\">\n      @for (option of options(); track option?.value)\n      {\n        <li class=\"tc-rev-dropdown-multi-menu-item\">\n          <label\n            class=\"tc-rev-dropdown-multi-menu-item-label\"\n            [class.disabled]=\"option?.disabled\"\n            [class.selected]=\"isOptionSelected(option)\">\n            <input\n              type=\"checkbox\"\n              tcRevCheckbox\n              [checked]=\"isOptionSelected(option)\"\n              [disabled]=\"option?.disabled\"\n              (change)=\"toggleOption(option, $event)\">\n\n            <span class=\"tc-rev-dropdown-multi-text\">\n              {{ option?.displayValue }}\n            </span>\n          </label>\n        </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: ["input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{position:initial;margin:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:after,input[type=checkbox].tc-rev-checkbox:before{content:\"\";position:initial;border-radius:initial;background:initial;z-index:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{height:initial;width:initial;left:initial;top:initial;margin:initial;border:initial}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:initial;height:initial;width:initial;margin:initial;z-index:initial;left:initial;top:initial;border:initial;border-width:initial;transform:initial}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{border-color:initial}input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid var(--c-neutral-700);border-radius:2px;background:#fff;cursor:pointer;position:relative;outline:none;transition:border-color .2s,background .2s;display:inline-block;vertical-align:middle}input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:before{content:\"\";display:block;width:100%;height:100%;border-radius:2px;background:var(--c-neutral-50);transition:background .2s,border-color .2s;position:absolute;top:0;left:0;z-index:1}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{content:\"\";display:block;position:absolute;top:4px;left:2px;width:14px;height:10px;background:none;mask:none;-webkit-mask:none;pointer-events:none;z-index:2;transition:background .2s}input[type=checkbox].tc-rev-input-checkbox:checked,input[type=checkbox].tc-rev-checkbox:checked{border-color:var(--c-primary-500);background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{background:#fff;mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain;-webkit-mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain}input[type=checkbox].tc-rev-input-checkbox:disabled,input[type=checkbox].tc-rev-checkbox:disabled{border-color:var(--c-neutral-300);cursor:not-allowed}input[type=checkbox].tc-rev-input-checkbox:disabled:checked,input[type=checkbox].tc-rev-checkbox:disabled:checked{background:var(--c-neutral-300)}input[type=checkbox].tc-rev-input-checkbox:disabled:checked:before,input[type=checkbox].tc-rev-checkbox:disabled:checked:before{background:var(--c-neutral-300)}:host{display:inline-block}.tc-rev-dropdown-multi{position:relative;display:inline-block}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--md{height:var(--size-44)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label .tc-rev-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label .tc-rev-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-rev-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevCheckboxDirective, selector: "input[type=\"checkbox\"][tcRevCheckbox]" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tc-rev-dropdown-multi', imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        TcRevCheckboxDirective
-                    ], template: "<div\n  class=\"tc-rev-dropdown-multi\"\n  [class.disabled]=\"disabled()\">\n  <button\n    class=\"tc-rev-dropdown-multi-toggle\"\n    [class.tc-rev-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"isOpen\"\n    [style.width]=\"this.width()\">\n    @if (label())\n    {\n      <b>{{label()}}</b>\n    }\n    <span class=\"selected-text\">{{ getDisplayText() }}</span>\n    <i class=\"fa-light fa-chevron-down\"></i>\n  </button>\n\n  <div\n    *ngIf=\"isOpen\"\n    class=\"tc-rev-dropdown-multi-menu\"\n    [style.width]=\"this.width()\">\n\n    <!-- Checkbox Selecionar/Limpar Todos -->\n    <div class=\"tc-rev-dropdown-multi-actions\">\n      <label\n        class=\"tc-rev-dropdown-multi-select-all-label\"\n        [class.selected]=\"isAllSelected()\">\n        <input\n          type=\"checkbox\"\n          tcRevCheckbox\n          [disabled]=\"disabled()\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"isSomeSelected()\"\n          (change)=\"toggleSelectAll($event)\">\n        <span class=\"tc-rev-dropdown-multi-select-all-text\">Todos</span>\n      </label>\n    </div>\n\n    <ul class=\"tc-rev-dropdown-multi-options\">\n      @for (option of options(); track option?.value)\n      {\n        <li class=\"tc-rev-dropdown-multi-menu-item\">\n          <label\n            class=\"tc-rev-dropdown-multi-menu-item-label\"\n            [class.disabled]=\"option?.disabled\"\n            [class.selected]=\"isOptionSelected(option)\">\n            <input\n              type=\"checkbox\"\n              tcRevCheckbox\n              [checked]=\"isOptionSelected(option)\"\n              [disabled]=\"option?.disabled\"\n              (change)=\"toggleOption(option, $event)\">\n\n            <span class=\"tc-rev-dropdown-multi-text\">\n              {{ option?.displayValue }}\n            </span>\n          </label>\n        </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: ["input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{position:initial;margin:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:after,input[type=checkbox].tc-rev-checkbox:before{content:\"\";position:initial;border-radius:initial;background:initial;z-index:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{height:initial;width:initial;left:initial;top:initial;margin:initial;border:initial}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:initial;height:initial;width:initial;margin:initial;z-index:initial;left:initial;top:initial;border:initial;border-width:initial;transform:initial}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{border-color:initial}input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid var(--c-neutral-700);border-radius:2px;background:#fff;cursor:pointer;position:relative;outline:none;transition:border-color .2s,background .2s;display:inline-block;vertical-align:middle}input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:before{content:\"\";display:block;width:100%;height:100%;border-radius:2px;background:var(--c-neutral-50);transition:background .2s,border-color .2s;position:absolute;top:0;left:0;z-index:1}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{content:\"\";display:block;position:absolute;top:4px;left:2px;width:14px;height:10px;background:none;mask:none;-webkit-mask:none;pointer-events:none;z-index:2;transition:background .2s}input[type=checkbox].tc-rev-input-checkbox:checked,input[type=checkbox].tc-rev-checkbox:checked{border-color:var(--c-primary-500);background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{background:#fff;mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain;-webkit-mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain}input[type=checkbox].tc-rev-input-checkbox:disabled,input[type=checkbox].tc-rev-checkbox:disabled{border-color:var(--c-neutral-300);cursor:not-allowed}input[type=checkbox].tc-rev-input-checkbox:disabled:checked,input[type=checkbox].tc-rev-checkbox:disabled:checked{background:var(--c-neutral-300)}input[type=checkbox].tc-rev-input-checkbox:disabled:checked:before,input[type=checkbox].tc-rev-checkbox:disabled:checked:before{background:var(--c-neutral-300)}:host{display:inline-block}.tc-rev-dropdown-multi{position:relative;display:inline-block}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--md{height:var(--size-44)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label .tc-rev-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label .tc-rev-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-rev-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
-/**
- * Verifica se um elemento de texto está elipsado (texto cortado com ...)
- * @param element - O elemento HTML que contém o texto
- * @returns true se o texto estiver elipsado, false caso contrário
- */
-function isElementTextEllipsed(element) {
-    if (!element)
-        return false;
-    // Verifica se o scrollWidth é maior que o clientWidth
-    // Isso indica que o texto está sendo cortado
-    return element.scrollWidth > element.clientWidth;
-}
-/**
- * Verifica se um texto específico estaria elipsado baseado no texto fornecido
- * @param text - O texto a ser verificado
- * @param containerWidth - Largura do container (opcional, usa o padrão se não informado)
- * @returns true se o texto seria elipsado
- */
-function isTextEllipsed(text, containerWidth) {
-    if (!text)
-        return false;
-    // Cria um elemento temporário para medir o texto
-    const tempElement = document.createElement('span');
-    tempElement.style.visibility = 'hidden';
-    tempElement.style.position = 'absolute';
-    tempElement.style.whiteSpace = 'nowrap';
-    tempElement.style.fontSize = '1rem'; // f-md
-    tempElement.style.fontWeight = '500'; // f-weight-500
-    tempElement.style.fontFamily = getComputedStyle(document.body).fontFamily;
-    tempElement.textContent = text;
-    document.body.appendChild(tempElement);
-    const textWidth = tempElement.scrollWidth;
-    // Calcula a largura máxima disponível: largura do container menos espaço do botão e margins
-    const maxWidth = containerWidth || 150; // ~150px considerando o botão de 24px + margens
-    document.body.removeChild(tempElement);
-    return textWidth > maxWidth;
-}
-// export class EllipsedTextHelper
-// {
-//   public static isEllipsed(id: string): boolean
-//   {
-//     const element = document.querySelector<any>(`#${id}`);
-//     return element ? (element.offsetWidth < element.scrollWidth) : false;
-//   }
-//   /**
-//    *
-//    * @param _textField - Stands for the text you want to compare
-//    * @param _fontProperties - Text CSS properties (font-size & font-family)
-//    * @param _divId - divId you want to compare
-//    * @param _isEllipsed - is it Ellipsed? (optional)
-//    */
-//   public static calculate( _textField: string, _fontProperties: string, _divId: string, _isEllipsed: boolean = false, _whiteSpaceNoWrap = true): boolean
-//   {
-//     if (_isEllipsed)
-//     {
-//       return true;
-//     }
-//     const textDiv = document.getElementById(_divId);
-//     if (textDiv)
-//     {
-//       const widthText = this.textWidthCalc(_textField, _fontProperties, _whiteSpaceNoWrap);
-//       return widthText > textDiv.clientWidth;
-//     }
-//     return false
-//   }
-//   public static textWidthCalc(_text: string, _fontProperties: string, _whiteSpaceNoWrap: boolean): number
-//   {
-//     let tag = document.createElement('div');
-//     tag.style.position = 'absolute';
-//     tag.style.left = '-99in';
-//     tag.style.font = _fontProperties;
-//     tag.innerHTML = _text;
-//     if (_whiteSpaceNoWrap)
-//     {
-//       tag.style.whiteSpace = 'nowrap';
-//     }
-//     document.body.appendChild(tag);
-//     const result = tag.clientWidth;
-//     document.body.removeChild(tag);
-//     return result;
-//   }
-// }
-
-class TcRevTooltipDirective {
-    constructor(_el, _renderer, _vcr) {
-        this._el = _el;
-        this._renderer = _renderer;
-        this._vcr = _vcr;
-        this.tcRevTooltip = input('');
-        this.position = input('top');
-        this.tooltipElement = null;
-    }
-    onMouseEnter() {
-        const tooltipText = this.tcRevTooltip();
-        if (this.isValidTooltipText(tooltipText)) {
-            this.showTooltip(tooltipText);
-        }
-    }
-    onMouseLeave() {
-        this.hideTooltip();
-    }
-    isValidTooltipText(text) {
-        return text && text.trim().length > 0;
+        if (enabledOptions.length === 0)
+            return false;
+        return enabledOptions.every(option => selectedOptions.some(selected => selected.value === option.value));
     }
-    showTooltip(text) {
-        if (this.tooltipElement) {
-            this.hideTooltip();
-        }
-        // Create tooltip element
-        this.tooltipElement = this._renderer.createElement('div');
-        // Add text content
-        const textNode = this._renderer.createText(text);
-        this._renderer.appendChild(this.tooltipElement, textNode);
-        // Add CSS classes
-        this._renderer.addClass(this.tooltipElement, 'tc-rev-tooltip');
-        this._renderer.addClass(this.tooltipElement, `tc-rev-tooltip--${this.position()}`);
-        // Set initial styles
-        this._renderer.setStyle(this.tooltipElement, 'position', 'absolute');
-        this._renderer.setStyle(this.tooltipElement, 'z-index', '9999');
-        this._renderer.setStyle(this.tooltipElement, 'visibility', 'hidden');
-        // this._renderer.setStyle(this.tooltipElement, 'opacity', '0');
-        // Append to body
-        this._renderer.appendChild(document.body, this.tooltipElement);
-        // Position tooltip
-        this.positionTooltip();
-        // Show tooltip with animation
-        this._renderer.setStyle(this.tooltipElement, 'visibility', 'visible');
-        this._renderer.addClass(this.tooltipElement, 'tc-rev-tooltip--visible');
+    isSomeSelected() {
+        const enabledOptions = this.options().filter(option => !option.disabled);
+        const selectedOptions = this.selectedOptions();
+        if (enabledOptions.length === 0 || selectedOptions.length === 0)
+            return false;
+        const selectedCount = enabledOptions.filter(option => selectedOptions.some(selected => selected.value === option.value)).length;
+        return selectedCount > 0 && selectedCount < enabledOptions.length;
     }
-    hideTooltip() {
-        if (this.tooltipElement) {
-            this._renderer.removeChild(document.body, this.tooltipElement);
-            this.tooltipElement = null;
+    toggleSelectAll(event) {
+        event.stopPropagation();
+        if (this.isAllSelected()) {
+            this.clearAll();
         }
-    }
-    positionTooltip() {
-        if (!this.tooltipElement)
-            return;
-        const hostRect = this._el.nativeElement.getBoundingClientRect();
-        const tooltipRect = this.tooltipElement.getBoundingClientRect();
-        const position = this.position();
-        let top = 0;
-        let left = 0;
-        switch (position) {
-            case 'top':
-                top = hostRect.top + window.scrollY - tooltipRect.height - 8;
-                left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
-                break;
-            case 'bottom':
-                top = hostRect.bottom + window.scrollY + 8;
-                left = hostRect.left + window.scrollX + (hostRect.width - tooltipRect.width) / 2;
-                break;
-            case 'left':
-                top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
-                left = hostRect.left + window.scrollX - tooltipRect.width - 8;
-                break;
-            case 'right':
-                top = hostRect.top + window.scrollY + (hostRect.height - tooltipRect.height) / 2;
-                left = hostRect.right + window.scrollX + 8;
-                break;
+        else {
+            this.selectAll();
         }
-        this._renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
-        this._renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TcRevTooltipDirective, isStandalone: true, selector: "[tcRevTooltip]", inputs: { tcRevTooltip: { classPropertyName: "tcRevTooltip", publicName: "tcRevTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownMultiComponent, isStandalone: true, selector: "tc-rev-dropdown-multi", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxDisplayItems: { classPropertyName: "maxDisplayItems", publicName: "maxDisplayItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", optionsSelected: "optionsSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tc-rev-dropdown-multi\"\n  [class.disabled]=\"disabled()\">\n  <button\n    class=\"tc-rev-dropdown-multi-toggle\"\n    [class.tc-rev-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"isOpen\"\n    [style.width]=\"this.width()\">\n    @if (label())\n    {\n      <b>{{label()}}</b>\n    }\n    <span class=\"selected-text\">{{ getDisplayText() }}</span>\n    <i class=\"fa-light fa-chevron-down\"></i>\n  </button>\n\n  <div\n    *ngIf=\"isOpen\"\n    class=\"tc-rev-dropdown-multi-menu\"\n    [style.width]=\"this.width()\">\n\n    <!-- Checkbox Selecionar/Limpar Todos -->\n    <div class=\"tc-rev-dropdown-multi-actions\">\n      <label\n        class=\"tc-rev-dropdown-multi-select-all-label\"\n        [class.selected]=\"isAllSelected()\">\n        <input\n          type=\"checkbox\"\n          tcRevCheckbox\n          [disabled]=\"disabled()\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"isSomeSelected()\"\n          (change)=\"toggleSelectAll($event)\">\n        <span class=\"tc-rev-dropdown-multi-select-all-text\">Todos</span>\n      </label>\n    </div>\n\n    <ul class=\"tc-rev-dropdown-multi-options\">\n      @for (option of options(); track option?.value)\n      {\n        <li class=\"tc-rev-dropdown-multi-menu-item\">\n          <label\n            class=\"tc-rev-dropdown-multi-menu-item-label\"\n            [class.disabled]=\"option?.disabled\"\n            [class.selected]=\"isOptionSelected(option)\">\n            <input\n              type=\"checkbox\"\n              tcRevCheckbox\n              [checked]=\"isOptionSelected(option)\"\n              [disabled]=\"option?.disabled\"\n              (change)=\"toggleOption(option, $event)\">\n\n            <span class=\"tc-rev-dropdown-multi-text\">\n              {{ option?.displayValue }}\n            </span>\n          </label>\n        </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: ["input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{position:initial;margin:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:after,input[type=checkbox].tc-rev-checkbox:before{content:\"\";position:initial;border-radius:initial;background:initial;z-index:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{height:initial;width:initial;left:initial;top:initial;margin:initial;border:initial}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:initial;height:initial;width:initial;margin:initial;z-index:initial;left:initial;top:initial;border:initial;border-width:initial;transform:initial}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{border-color:initial}input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid var(--c-neutral-700);border-radius:2px;background:#fff;cursor:pointer;position:relative;outline:none;transition:border-color .2s,background .2s;display:inline-block;vertical-align:middle}input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:before{content:\"\";display:block;width:100%;height:100%;border-radius:2px;background:var(--c-neutral-50);transition:background .2s,border-color .2s;position:absolute;top:0;left:0;z-index:1}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{content:\"\";display:block;position:absolute;top:4px;left:2px;width:14px;height:10px;background:none;mask:none;-webkit-mask:none;pointer-events:none;z-index:2;transition:background .2s}input[type=checkbox].tc-rev-input-checkbox:checked,input[type=checkbox].tc-rev-checkbox:checked{border-color:var(--c-primary-500);background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{background:#fff;mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain;-webkit-mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain}input[type=checkbox].tc-rev-input-checkbox:disabled,input[type=checkbox].tc-rev-checkbox:disabled{border-color:var(--c-neutral-300);cursor:not-allowed}input[type=checkbox].tc-rev-input-checkbox:disabled:checked,input[type=checkbox].tc-rev-checkbox:disabled:checked{background:var(--c-neutral-300)}input[type=checkbox].tc-rev-input-checkbox:disabled:checked:before,input[type=checkbox].tc-rev-checkbox:disabled:checked:before{background:var(--c-neutral-300)}:host{display:inline-block}.tc-rev-dropdown-multi{position:relative;display:inline-block}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--md{height:var(--size-44)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label .tc-rev-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label .tc-rev-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-rev-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevCheckboxDirective, selector: "input[type=\"checkbox\"][tcRevCheckbox]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevTooltipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tcRevTooltip]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tc-rev-dropdown-multi', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TcRevCheckboxDirective
+                    ], template: "<div\n  class=\"tc-rev-dropdown-multi\"\n  [class.disabled]=\"disabled()\">\n  <button\n    class=\"tc-rev-dropdown-multi-toggle\"\n    [class.tc-rev-dropdown-multi-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-multi-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-multi-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"isOpen\"\n    [style.width]=\"this.width()\">\n    @if (label())\n    {\n      <b>{{label()}}</b>\n    }\n    <span class=\"selected-text\">{{ getDisplayText() }}</span>\n    <i class=\"fa-light fa-chevron-down\"></i>\n  </button>\n\n  <div\n    *ngIf=\"isOpen\"\n    class=\"tc-rev-dropdown-multi-menu\"\n    [style.width]=\"this.width()\">\n\n    <!-- Checkbox Selecionar/Limpar Todos -->\n    <div class=\"tc-rev-dropdown-multi-actions\">\n      <label\n        class=\"tc-rev-dropdown-multi-select-all-label\"\n        [class.selected]=\"isAllSelected()\">\n        <input\n          type=\"checkbox\"\n          tcRevCheckbox\n          [disabled]=\"disabled()\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"isSomeSelected()\"\n          (change)=\"toggleSelectAll($event)\">\n        <span class=\"tc-rev-dropdown-multi-select-all-text\">Todos</span>\n      </label>\n    </div>\n\n    <ul class=\"tc-rev-dropdown-multi-options\">\n      @for (option of options(); track option?.value)\n      {\n        <li class=\"tc-rev-dropdown-multi-menu-item\">\n          <label\n            class=\"tc-rev-dropdown-multi-menu-item-label\"\n            [class.disabled]=\"option?.disabled\"\n            [class.selected]=\"isOptionSelected(option)\">\n            <input\n              type=\"checkbox\"\n              tcRevCheckbox\n              [checked]=\"isOptionSelected(option)\"\n              [disabled]=\"option?.disabled\"\n              (change)=\"toggleOption(option, $event)\">\n\n            <span class=\"tc-rev-dropdown-multi-text\">\n              {{ option?.displayValue }}\n            </span>\n          </label>\n        </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: ["input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{position:initial;margin:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:after,input[type=checkbox].tc-rev-checkbox:before{content:\"\";position:initial;border-radius:initial;background:initial;z-index:initial}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{height:initial;width:initial;left:initial;top:initial;margin:initial;border:initial}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:initial;height:initial;width:initial;margin:initial;z-index:initial;left:initial;top:initial;border:initial;border-width:initial;transform:initial}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{border-color:initial}input[type=checkbox].tc-rev-input-checkbox,input[type=checkbox].tc-rev-checkbox{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid var(--c-neutral-700);border-radius:2px;background:#fff;cursor:pointer;position:relative;outline:none;transition:border-color .2s,background .2s;display:inline-block;vertical-align:middle}input[type=checkbox].tc-rev-input-checkbox:before,input[type=checkbox].tc-rev-checkbox:before{content:\"\";display:block;width:100%;height:100%;border-radius:2px;background:var(--c-neutral-50);transition:background .2s,border-color .2s;position:absolute;top:0;left:0;z-index:1}input[type=checkbox].tc-rev-input-checkbox:after,input[type=checkbox].tc-rev-checkbox:after{content:\"\";display:block;position:absolute;top:4px;left:2px;width:14px;height:10px;background:none;mask:none;-webkit-mask:none;pointer-events:none;z-index:2;transition:background .2s}input[type=checkbox].tc-rev-input-checkbox:checked,input[type=checkbox].tc-rev-checkbox:checked{border-color:var(--c-primary-500);background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:before,input[type=checkbox].tc-rev-checkbox:checked:before{background:var(--c-primary-500)}input[type=checkbox].tc-rev-input-checkbox:checked:after,input[type=checkbox].tc-rev-checkbox:checked:after{background:#fff;mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain;-webkit-mask:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"10\" viewBox=\"0 0 14 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 5.5L5 9L13 1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') no-repeat center/contain}input[type=checkbox].tc-rev-input-checkbox:disabled,input[type=checkbox].tc-rev-checkbox:disabled{border-color:var(--c-neutral-300);cursor:not-allowed}input[type=checkbox].tc-rev-input-checkbox:disabled:checked,input[type=checkbox].tc-rev-checkbox:disabled:checked{background:var(--c-neutral-300)}input[type=checkbox].tc-rev-input-checkbox:disabled:checked:before,input[type=checkbox].tc-rev-checkbox:disabled:checked:before{background:var(--c-neutral-300)}:host{display:inline-block}.tc-rev-dropdown-multi{position:relative;display:inline-block}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-family);font-size:var(--f-size-12);min-width:6.25rem;line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);text-align:left;gap:var(--size-4)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--sm{height:var(--size-40)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--md{height:var(--size-44)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle--lg{height:var(--size-48)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle:disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle.disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle .selected-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle i{flex-shrink:0;transition:transform .2s ease}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-toggle[aria-expanded=true] i{transform:rotate(-180deg)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);max-height:18.75rem;min-width:6.25rem;overflow:hidden;width:100%;z-index:1000;border:1px solid var(--c-neutral-200)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-actions .tc-rev-dropdown-multi-select-all-label .tc-rev-dropdown-multi-select-all-text{flex:1;-webkit-user-select:none;user-select:none}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options{list-style:none;margin:0;padding:0;max-height:15rem;overflow-y:auto}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-8);justify-content:space-between;line-height:var(--l-height-16);height:var(--size-32);margin:0;padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:hover{background-color:var(--c-primary-50);border-color:var(--c-primary-500)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.selected:hover{border-color:transparent}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled{color:var(--c-neutral-400);cursor:not-allowed}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label.disabled:hover,.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label:disabled:hover{background-color:transparent;border-color:var(--c-neutral-50)}.tc-rev-dropdown-multi .tc-rev-dropdown-multi-menu .tc-rev-dropdown-multi-options .tc-rev-dropdown-multi-menu-item .tc-rev-dropdown-multi-menu-item-label .tc-rev-dropdown-multi-text{flex:1;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-rev-dropdown-multi-menu{animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
                 type: HostListener,
-                args: ['mouseleave']
+                args: ['document:click', ['$event']]
             }] } });
 
-var DropdownSize;
-(function (DropdownSize) {
-    DropdownSize["sm"] = "sm";
-    DropdownSize["md"] = "md";
-    DropdownSize["lg"] = "lg";
-})(DropdownSize || (DropdownSize = {}));
-class TcRevDropdownComponent {
+class TcRevDropdownSubMenuComponent {
+    constructor() {
+        this.items = input.required();
+        this.position = input('right');
+        this.parentOffsetTop = input.required();
+        this.selectedOption = input();
+        this.onOptionSelected = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownSubMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownSubMenuComponent, isStandalone: true, selector: "tc-rev-dropdown-sub-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, parentOffsetTop: { classPropertyName: "parentOffsetTop", publicName: "parentOffsetTop", isSignal: true, isRequired: true, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionSelected: "onOptionSelected" }, ngImport: i0, template: "<ul\n  class=\"sub-menu\"\n  [ngClass]=\"this.position()\"\n  [style.top.px]=\"this.parentOffsetTop()\">\n  @for (item of this.items(); track item.value)\n  {\n    <li\n      class=\"sub-menu-item\"\n      [class.selected]=\"this.selectedOption()?.value === item.value\"\n      (click)=\"this.onOptionSelected.emit(item)\">\n      {{ item.displayValue }}\n      @if (this.selectedOption()?.value === item?.value)\n      {\n        <i class=\"fa-light fa-circle-check\"></i>\n      }\n      @if (item.children?.length)\n      {\n        <tc-rev-dropdown-sub-menu\n          [items]=\"item.children\"\n          [position]=\"this.position()\"\n          [parentOffsetTop]=\"0\"\n          [selectedOption]=\"this.selectedOption()\">\n        </tc-rev-dropdown-sub-menu>\n      }\n    </li>\n  }\n</ul>\n", styles: [".sub-menu{background-color:var(--c-neutral-50);box-shadow:var(--shadow-md);list-style:none;max-height:15.625rem;min-width:160px;overflow-y:auto;padding:0;position:absolute;margin:0;z-index:1001}.sub-menu.right{left:100%}.sub-menu.left{right:100%}.sub-menu-item{padding:8px 16px;white-space:nowrap;position:relative;align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.sub-menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.sub-menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.sub-menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: TcRevDropdownSubMenuComponent, selector: "tc-rev-dropdown-sub-menu", inputs: ["items", "position", "parentOffsetTop", "selectedOption"], outputs: ["onOptionSelected"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownSubMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tc-rev-dropdown-sub-menu', imports: [CommonModule], template: "<ul\n  class=\"sub-menu\"\n  [ngClass]=\"this.position()\"\n  [style.top.px]=\"this.parentOffsetTop()\">\n  @for (item of this.items(); track item.value)\n  {\n    <li\n      class=\"sub-menu-item\"\n      [class.selected]=\"this.selectedOption()?.value === item.value\"\n      (click)=\"this.onOptionSelected.emit(item)\">\n      {{ item.displayValue }}\n      @if (this.selectedOption()?.value === item?.value)\n      {\n        <i class=\"fa-light fa-circle-check\"></i>\n      }\n      @if (item.children?.length)\n      {\n        <tc-rev-dropdown-sub-menu\n          [items]=\"item.children\"\n          [position]=\"this.position()\"\n          [parentOffsetTop]=\"0\"\n          [selectedOption]=\"this.selectedOption()\">\n        </tc-rev-dropdown-sub-menu>\n      }\n    </li>\n  }\n</ul>\n", styles: [".sub-menu{background-color:var(--c-neutral-50);box-shadow:var(--shadow-md);list-style:none;max-height:15.625rem;min-width:160px;overflow-y:auto;padding:0;position:absolute;margin:0;z-index:1001}.sub-menu.right{left:100%}.sub-menu.left{right:100%}.sub-menu-item{padding:8px 16px;white-space:nowrap;position:relative;align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.sub-menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.sub-menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.sub-menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
+        }] });
+
+var MultiLevelDropdownSize;
+(function (MultiLevelDropdownSize) {
+    MultiLevelDropdownSize["sm"] = "sm";
+    MultiLevelDropdownSize["md"] = "md";
+    MultiLevelDropdownSize["lg"] = "lg";
+})(MultiLevelDropdownSize || (MultiLevelDropdownSize = {}));
+class TcRevDropdownMultiLevelComponent {
     onDocumentClick(event) {
         if (this.isOpen && !this.elementRef.nativeElement.contains(event.target)) {
             this.isOpen = false;
@@ -8086,112 +8709,65 @@ class TcRevDropdownComponent {
     }
     constructor(elementRef) {
         this.elementRef = elementRef;
-        this._deviceService = inject(TCloudUiDeviceUtilsService);
-        this.label = input(''); // Label que será exibida
-        this.disabled = input(false); // Desabilita o dropdown
-        this.options = input.required(); // Lista de opções no novo formato
-        this.initialValue = input(null); // Valor pré-selecionado (deprecated - use value instead)
-        this.value = model(null); // Two-way binding para o valor selecionado
-        this.size = input(DropdownSize.sm);
-        this.width = input(''); // Largura específica do dropdown (ex: '300px', '50%'). Se não informado, ocupa 100% do pai
-        this.optionSelected = output(); // Emissor para o valor selecionado
-        this.selectedOption = signal(null); // Opção selecionada
-        this.isOpen = false; // Controla se o dropdown está aberto
-        this.dropdownSize = DropdownSize;
-        this.isDesktop = this._deviceService.isDesktop;
-        this.isMobile = this._deviceService.isMobile;
+        this.dropdownSize = MultiLevelDropdownSize;
+        this.menu = input.required();
+        this.subMenuPosition = input('right');
+        this.disabled = input(false);
+        this.size = input(MultiLevelDropdownSize.sm);
+        this.initialValue = input(null); // Valor pré-selecionado
+        this.optionSelected = output();
+        this.selectedOption = signal(null);
+        this.selectedParentOption = signal(null);
+        this.hoveredIndex = null;
+        this.isOpen = false;
     }
     ngOnChanges(_simpleChanges) {
         // Atualiza a opção selecionada quando o valor pré-selecionado muda
-        if (_simpleChanges['initialValue'] ||
-            _simpleChanges['options'] ||
-            _simpleChanges['value']) {
-            const valueToUse = this.value() || this.initialValue();
-            this.selectedOption.set(this.options().find((option) => option.value === valueToUse) || null);
+        if (_simpleChanges['initialValue'] || _simpleChanges['menu']) {
+            this.selectedOption.set(null);
+            this.selectedParentOption.set(null);
         }
     }
-    ngOnInit() {
-        // Prioriza o valor do model, mas mantém compatibilidade com initialValue
-        const valueToUse = this.value() || this.initialValue();
-        const foundOption = this.options().find((option) => option.value === valueToUse) || null;
-        this.selectedOption.set(foundOption);
-        // Se não havia valor no model mas havia initialValue, sincroniza o model
-        if (!this.value() && this.initialValue() && foundOption) {
-            this.value.set(foundOption.value);
+    getItemOffsetTop(index) {
+        if (!this.menuRoot)
+            return 0;
+        const items = this.menuRoot.nativeElement.querySelectorAll('.menu-item');
+        if (items && items[index]) {
+            return items[index].offsetTop;
         }
-        // Escuta mudanças no model e atualiza a opção selecionada
-        this.value.subscribe((newValue) => {
-            const option = this.options().find((opt) => opt.value === newValue) || null;
-            if (this.selectedOption() !== option) {
-                this.selectedOption.set(option);
-            }
-        });
+        return 0;
     }
     toggleDropdown() {
-        // Abertura do dropdown para mobile
-        if (this.isMobile()) {
-            this._deviceService.openDropdownDevice(this.menuTemplate);
-            return;
-        }
         this.isOpen = !this.isOpen;
     }
-    selectOption(option) {
+    selectOption(option, parentOption) {
         this.selectedOption.set(option);
-        this.value.set(option.value); // Atualiza o model com two-way binding
-        this.optionSelected.emit(option); // Emite a opção selecionada para compatibilidade
-        // Fechamento dd dropdown para mobile
-        if (this.isMobile()) {
-            this._deviceService.closeDropdownDevice();
-            return;
-        }
-        this.isOpen = false; // Fecha o dropdown
+        this.selectedParentOption.set(parentOption);
+        this.optionSelected.emit({ option, parentOption }); // Emite apenas o valor da opção selecionada
+        // this.isOpen = false; // Fecha o dropdown
+        // this.hoveredIndex = null;
     }
-    /**
-     * Verifica se o texto de uma opção na lista está elipsado
-     * @param text - Texto a ser verificado
-     * @returns true se o texto estiver elipsado
-     */
-    isOptionEllipsed(text) {
-        if (!text)
-            return false;
-        // Calcula a largura disponível para o texto nas opções da lista
-        const menuElement = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown-menu');
-        if (!menuElement) {
-            // Se o menu não está aberto, usa a largura do dropdown
-            const dropdownElement = this.elementRef.nativeElement.querySelector('.tc-rev-dropdown');
-            if (!dropdownElement)
-                return false;
-            const dropdownWidth = dropdownElement.clientWidth;
-            const padding = 16; // 8px de cada lado do botão
-            const iconSpace = 24; // Espaço do ícone de check quando selecionado
-            const availableWidth = Math.max(50, dropdownWidth - padding - iconSpace);
-            return isTextEllipsed(text, availableWidth);
-        }
-        // Largura do menu menos padding do item (16px total) e espaço do ícone de check (24px)
-        const menuWidth = menuElement.clientWidth;
-        const padding = 16; // 8px de cada lado do botão do item
-        const iconSpace = 24; // Espaço do ícone de check quando selecionado
-        const availableWidth = Math.max(50, menuWidth - padding - iconSpace);
-        return isTextEllipsed(text, availableWidth);
+    selectParentItem($event, option, parentOption) {
+        $event.stopPropagation();
+        if (parentOption?.children?.length)
+            return;
+        this.selectOption(option, parentOption);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownComponent, isStandalone: true, selector: "tc-rev-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tc-rev-dropdown\"\n  [class.disabled]=\"disabled()\"\n  [style.width]=\"this.width()\"\n>\n  <button\n    class=\"tc-rev-dropdown-toggle\"\n    [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n  >\n    @if (label()) {\n    <b>{{ label() }}</b>\n    }\n    <span class=\"tc-rev-dropdown-selected-text\">\n      {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n    </span>\n    <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n  </button>\n  <ul *ngIf=\"isOpen && isDesktop()\" class=\"tc-rev-dropdown-menu\">\n    @for (option of options(); track option?.value) {\n    <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n      <button\n        class=\"tc-rev-dropdown-menu-item-btn\"\n        [class.selected]=\"selectedOption()?.value === option.value\"\n        [disabled]=\"option?.disabled\"\n      >\n        <span\n          class=\"tc-rev-dropdown-option-text\"\n          [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n          [tcRevTooltip]=\"\n            isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n          \"\n          position=\"top\"\n        >\n          {{ option?.displayValue }}\n        </span>\n\n        @if (selectedOption()?.value === option?.value) {\n        <i class=\"fa-light fa-circle-check\"></i>\n        }\n      </button>\n    </li>\n    }\n  </ul>\n\n  <!-- Dropdown full screen -->\n  <ng-template #menuTemplate>\n    <div class=\"tc-rev-dropdown-menu tc-rev-dropdown-menu--device\">\n      <div class=\"tc-rev-dropdown-menu-section\">\n        <div class=\"tc-rev-dropdown-menu-header pad-b-24\">\n          <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n            {{ label() }}\n          </h3>\n          <button\n            tcRevIconButton=\"outline\"\n            color=\"dark\"\n            size=\"sm\"\n            (click)=\"_deviceService.closeDropdownDevice()\"\n          >\n            <i class=\"fa-light fa-times f-size-16\"></i>\n          </button>\n        </div>\n        <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n          @for (option of options(); track option?.value) {\n          <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n            <button\n              class=\"tc-rev-dropdown-menu-item-btn\"\n              [class.selected]=\"selectedOption()?.value === option.value\"\n              [disabled]=\"option?.disabled\"\n            >\n              {{ option?.displayValue }}\n\n              @if (selectedOption()?.value === option?.value) {\n              <i class=\"fa-light fa-circle-check f-size-16\"></i>\n              }\n            </button>\n          </li>\n          }\n        </ul>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tc-rev-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-section{display:contents}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TcRevTooltipDirective, selector: "[tcRevTooltip]", inputs: ["tcRevTooltip", "position"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiLevelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TcRevDropdownMultiLevelComponent, isStandalone: true, selector: "tc-rev-dropdown-multi-level", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, subMenuPosition: { classPropertyName: "subMenuPosition", publicName: "subMenuPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuRoot", first: true, predicate: ["menuRoot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tc-rev-dropdown-multi-level\">\n  <button\n    class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--dark-outline tc-rev-dropdown-toggle\"\n    [class.tc-rev-btn--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-btn--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-btn--lg]=\"this.size() === dropdownSize.lg\"\n    [class.active]=\"isOpen\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\">\n    <ng-content></ng-content>\n  </button>\n\n\t<ul class=\"tc-rev-dropdown-multi-level__menu-list\" #menuRoot>\n\t\t@if (isOpen)\n    {\n      @for (item of menu(); track $index; let i = $index)\n      {\n        <li \n          class=\"menu-item\"\n          [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n          (mouseenter)=\"hoveredIndex = i\"\n          (mouseleave)=\"hoveredIndex = null\"\n          (click)=\"this.selectParentItem($event, item, item)\">\n          {{ item.displayValue }}\n          @if (this.selectedParentOption()?.value === item?.value)\n          {\n            <i class=\"fa-light fa-circle-check c-primary-500 mar-l-a\"></i>\n          }\n          @if (item?.children?.length && hoveredIndex === i)\n          {\n            <tc-rev-dropdown-sub-menu\n              [items]=\"item.children\"\n              [position]=\"subMenuPosition()\"\n              [parentOffsetTop]=\"getItemOffsetTop(i)\"\n              [selectedOption]=\"this.selectedOption()\"\n              (onOptionSelected)=\"this.selectOption($event, item)\">\n            </tc-rev-dropdown-sub-menu>\n          }\n        </li>\n      }\n    }\n\t</ul>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-multi-level{position:relative;display:inline-block}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);gap:var(--size-8);line-height:var(--l-height-20);outline:none;transition:.2s ease;padding:0 var(--size-16)}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle.active{background-color:var(--c-neutral-500);color:var(--c-neutral-50);border-color:var(--c-neutral-700)}.tc-rev-dropdown-multi-level__menu-list{background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);box-shadow:var(--shadow-md);color:var(--c-neutral-700);left:0;list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;position:absolute;top:110%;width:100%;z-index:1000}.tc-rev-dropdown-multi-level__menu-list .menu-item{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi-level__menu-list .menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-multi-level__menu-list .menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi-level__menu-list .menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TcRevDropdownSubMenuComponent, selector: "tc-rev-dropdown-sub-menu", inputs: ["items", "position", "parentOffsetTop", "selectedOption"], outputs: ["onOptionSelected"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TcRevDropdownMultiLevelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tc-rev-dropdown', imports: [
+            args: [{ selector: 'tc-rev-dropdown-multi-level', imports: [
                         CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        TcRevTooltipDirective,
-                        TcRevIconButtonDirective
-                    ], template: "<div\n  class=\"tc-rev-dropdown\"\n  [class.disabled]=\"disabled()\"\n  [style.width]=\"this.width()\"\n>\n  <button\n    class=\"tc-rev-dropdown-toggle\"\n    [class.tc-rev-dropdown-toggle--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-dropdown-toggle--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-dropdown-toggle--lg]=\"this.size() === dropdownSize.lg\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\"\n    [disabled]=\"disabled()\"\n  >\n    @if (label()) {\n    <b>{{ label() }}</b>\n    }\n    <span class=\"tc-rev-dropdown-selected-text\">\n      {{ selectedOption() ? selectedOption()?.displayValue : \"Selecione\" }}\n    </span>\n    <i class=\"fa-light fa-chevron-down mar-l-a\"></i>\n  </button>\n  <ul *ngIf=\"isOpen && isDesktop()\" class=\"tc-rev-dropdown-menu\">\n    @for (option of options(); track option?.value) {\n    <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n      <button\n        class=\"tc-rev-dropdown-menu-item-btn\"\n        [class.selected]=\"selectedOption()?.value === option.value\"\n        [disabled]=\"option?.disabled\"\n      >\n        <span\n          class=\"tc-rev-dropdown-option-text\"\n          [class.ellipsed]=\"isOptionEllipsed(option.displayValue)\"\n          [tcRevTooltip]=\"\n            isOptionEllipsed(option.displayValue) ? option.displayValue : ''\n          \"\n          position=\"top\"\n        >\n          {{ option?.displayValue }}\n        </span>\n\n        @if (selectedOption()?.value === option?.value) {\n        <i class=\"fa-light fa-circle-check\"></i>\n        }\n      </button>\n    </li>\n    }\n  </ul>\n\n  <!-- Dropdown full screen -->\n  <ng-template #menuTemplate>\n    <div class=\"tc-rev-dropdown-menu tc-rev-dropdown-menu--device\">\n      <div class=\"tc-rev-dropdown-menu-section\">\n        <div class=\"tc-rev-dropdown-menu-header pad-b-24\">\n          <h3 class=\"mar-none f-h2 f-weight-600 c-neutral-600\">\n            {{ label() }}\n          </h3>\n          <button\n            tcRevIconButton=\"outline\"\n            color=\"dark\"\n            size=\"sm\"\n            (click)=\"_deviceService.closeDropdownDevice()\"\n          >\n            <i class=\"fa-light fa-times f-size-16\"></i>\n          </button>\n        </div>\n        <ul class=\"tc-rev-dropdown-menu-container mar-t-8\">\n          @for (option of options(); track option?.value) {\n          <li class=\"tc-rev-dropdown-menu-item\" (click)=\"selectOption(option)\">\n            <button\n              class=\"tc-rev-dropdown-menu-item-btn\"\n              [class.selected]=\"selectedOption()?.value === option.value\"\n              [disabled]=\"option?.disabled\"\n            >\n              {{ option?.displayValue }}\n\n              @if (selectedOption()?.value === option?.value) {\n              <i class=\"fa-light fa-circle-check f-size-16\"></i>\n              }\n            </button>\n          </li>\n          }\n        </ul>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".tc-rev-dropdown{position:relative;display:block;width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-400);border-radius:var(--bor-radius-pill);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-12);gap:var(--size-4);line-height:var(--l-height-16);outline:none;transition:.2s ease;padding:0 var(--size-16);width:100%}.tc-rev-dropdown .tc-rev-dropdown-toggle .tc-rev-dropdown-selected-text{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-toggle--sm{height:var(--size-40)}.tc-rev-dropdown .tc-rev-dropdown-toggle--md{height:var(--size-44)}.tc-rev-dropdown .tc-rev-dropdown-toggle--lg{height:var(--size-48)}.tc-rev-dropdown .tc-rev-dropdown-toggle:hover,.tc-rev-dropdown .tc-rev-dropdown-toggle:focus{border-color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-toggle:disabled{border-color:var(--c-neutral-300);color:var(--c-neutral-300);cursor:not-allowed}.tc-rev-dropdown .tc-rev-dropdown-menu{box-shadow:var(--shadow-md);position:absolute;top:110%;left:0;background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;width:100%;z-index:1000}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-700);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text{flex:1;overflow:hidden;text-align:left;white-space:nowrap}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn .tc-rev-dropdown-option-text.ellipsed{text-overflow:ellipsis}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown .tc-rev-dropdown-menu .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}.tc-rev-dropdown-menu--device{height:100%;overflow-y:auto;background-color:var(--c-neutral-50);padding:var(--size-16)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-section{display:contents}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-header{align-items:center;display:flex;gap:var(--size-16);justify-content:space-between}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-container{list-style:none;margin:0;padding:0;gap:.5rem;display:flex;flex-direction:column}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);color:var(--c-neutral-900);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-14);line-height:var(--l-height-16);height:var(--size-40);padding:var(--size-12);text-align:left;text-wrap:nowrap;transition:all .2s ease;width:100%}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:active:not(:disabled):not(.selected){background-color:var(--c-primary-200);border-color:var(--c-primary-200);color:var(--c-primary-500);transform:scale(.98)}.tc-rev-dropdown-menu--device .tc-rev-dropdown-menu-item .tc-rev-dropdown-menu-item-btn:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTemplate: [{
-                type: ViewChild,
-                args: ['menuTemplate']
-            }], onDocumentClick: [{
+                        TcRevDropdownSubMenuComponent
+                    ], template: "<div class=\"tc-rev-dropdown-multi-level\">\n  <button\n    class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--dark-outline tc-rev-dropdown-toggle\"\n    [class.tc-rev-btn--sm]=\"this.size() === dropdownSize.sm\"\n    [class.tc-rev-btn--md]=\"this.size() === dropdownSize.md\"\n    [class.tc-rev-btn--lg]=\"this.size() === dropdownSize.lg\"\n    [class.active]=\"isOpen\"\n    (click)=\"toggleDropdown()\"\n    [class.disabled]=\"disabled()\">\n    <ng-content></ng-content>\n  </button>\n\n\t<ul class=\"tc-rev-dropdown-multi-level__menu-list\" #menuRoot>\n\t\t@if (isOpen)\n    {\n      @for (item of menu(); track $index; let i = $index)\n      {\n        <li \n          class=\"menu-item\"\n          [class.c-primary-500]=\"this.selectedParentOption()?.value === item?.value\"\n          (mouseenter)=\"hoveredIndex = i\"\n          (mouseleave)=\"hoveredIndex = null\"\n          (click)=\"this.selectParentItem($event, item, item)\">\n          {{ item.displayValue }}\n          @if (this.selectedParentOption()?.value === item?.value)\n          {\n            <i class=\"fa-light fa-circle-check c-primary-500 mar-l-a\"></i>\n          }\n          @if (item?.children?.length && hoveredIndex === i)\n          {\n            <tc-rev-dropdown-sub-menu\n              [items]=\"item.children\"\n              [position]=\"subMenuPosition()\"\n              [parentOffsetTop]=\"getItemOffsetTop(i)\"\n              [selectedOption]=\"this.selectedOption()\"\n              (onOptionSelected)=\"this.selectOption($event, item)\">\n            </tc-rev-dropdown-sub-menu>\n          }\n        </li>\n      }\n    }\n\t</ul>\n</div>\n", styles: [":host{display:inline-block}.tc-rev-dropdown-multi-level{position:relative;display:inline-block}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle{align-items:center;background-color:var(--c-neutral-50);display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:var(--f-weight-600);gap:var(--size-8);line-height:var(--l-height-20);outline:none;transition:.2s ease;padding:0 var(--size-16)}.tc-rev-dropdown-multi-level .tc-rev-dropdown-toggle.active{background-color:var(--c-neutral-500);color:var(--c-neutral-50);border-color:var(--c-neutral-700)}.tc-rev-dropdown-multi-level__menu-list{background-color:var(--c-neutral-50);border-radius:var(--bor-radius-4);box-shadow:var(--shadow-md);color:var(--c-neutral-700);left:0;list-style:none;margin:0;max-height:15.625rem;overflow-y:auto;padding:0;position:absolute;top:110%;width:100%;z-index:1000}.tc-rev-dropdown-multi-level__menu-list .menu-item{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-50);border-radius:var(--bor-radius-4);cursor:pointer;display:flex;justify-content:space-between;font-size:var(--f-size-12);line-height:var(--l-height-16);height:var(--size-32);padding:var(--size-8);text-align:left;text-wrap:nowrap;transition:.2s ease;width:100%}.tc-rev-dropdown-multi-level__menu-list .menu-item:hover{border-color:var(--c-primary-500);color:var(--c-primary-500)}.tc-rev-dropdown-multi-level__menu-list .menu-item.selected{background-color:var(--c-primary-300);border-color:var(--c-primary-300);color:var(--c-primary-500);font-weight:var(--f-weight-700)}.tc-rev-dropdown-multi-level__menu-list .menu-item:disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-300);color:var(--c-neutral-500);cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
+            }], menuRoot: [{
+                type: ViewChild,
+                args: ['menuRoot', { static: false }]
             }] } });
 
 /**
@@ -9272,5 +9848,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize, DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDigitOnlyDirective, TCloudUiElCopyDirective, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchInObjectService, TCloudUiSubNavbarComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiWelcomeComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
+export { BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiInputContainerComponent, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchInObjectService, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSubNavbarComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiWelcomeComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
 //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map