@dev-tcloud/tcloud-ui 6.6.3 → 6.7.0

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

@@ -1,8 +1,8 @@
 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, NgModule, makeEnvironmentProviders, output, ContentChildren, computed, ApplicationRef, 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, ContentChildren, NgModule, makeEnvironmentProviders, model, viewChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
-import { Subject, Subscription, debounceTime, distinctUntilChanged, map, BehaviorSubject } from 'rxjs';
+import { Subject, Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, map } from 'rxjs';
 import { trigger, state, style, transition, animate, AnimationBuilder } from '@angular/animations';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormControl, ReactiveFormsModule, NG_VALIDATORS, FormGroup, Validators } from '@angular/forms';
@@ -72,7 +72,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                             state('open', style({ height: '*' })),
                             transition('close <=> open', animate('0.35s ease-in-out')),
                         ]),
-                    ], standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-accordion-body tc-accordion-content\"  [class.show]=\"show\" [@expandAccordion]=\"(show) ? 'open' : 'close' \">\n    <ng-content></ng-content>\n</div>", styles: [".show{display:block!important;padding-top:15px;padding-bottom:15px}.tc-accordion-content{overflow:hidden}\n"] }]
+                    ], imports: [CommonModule], template: "<div class=\"tcloud-ui-accordion-body tc-accordion-content\"  [class.show]=\"show\" [@expandAccordion]=\"(show) ? 'open' : 'close' \">\n    <ng-content></ng-content>\n</div>", styles: [".show{display:block!important;padding-top:15px;padding-bottom:15px}.tc-accordion-content{overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: TCloudUiAccordionService }] });
 
 class TCloudUiAccordionTitleComponent {
@@ -122,7 +122,7 @@ class TCloudUiAccordionTitleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiAccordionTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-accordion-title', standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-accordion-title tc-accordion-title\">\n    <table class=\"tc-accordion-table\">\n        <tr>\n            <td class=\"area-title\" (click)=\"toggle_title()\" >\n                <ng-content></ng-content>\n            </td>\n            <td class=\"tc-accordion-actions\">\n                <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n                    <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n                    <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--tc-primary)}.area-title{width:100;cursor:pointer;color:var(--tc-primary)}\n"] }]
+            args: [{ selector: 'tcloud-ui-accordion-title', imports: [CommonModule], template: "<div class=\"tcloud-ui-accordion-title tc-accordion-title\">\n    <table class=\"tc-accordion-table\">\n        <tr>\n            <td class=\"area-title\" (click)=\"toggle_title()\" >\n                <ng-content></ng-content>\n            </td>\n            <td class=\"tc-accordion-actions\">\n                <button type=\"button\" class=\"tc-btn-accordion-toggle\" [disabled]=\"disabled\" (click)=\"toggle()\" >\n\n                    <i class=\"fas fa-chevron-right icon-toggle\" *ngIf=\"!show\"></i>\n                    <i class=\"fas fa-chevron-down icon-toggle\" *ngIf=\"show\"></i>\n\n                </button>\n            </td>\n        </tr>\n    </table>\n</div>", styles: [".tc-accordion-table{width:100%}.tc-accordion-actions{width:15px}.tc-btn-accordion-toggle{font-size:20px;border:none;background-color:transparent;background:none;cursor:pointer;margin:auto}.tc-btn-accordion-toggle:disabled{cursor:not-allowed!important;opacity:.6}.icon-toggle{color:var(--tc-primary)}.area-title{width:100;cursor:pointer;color:var(--tc-primary)}\n"] }]
         }], ctorParameters: () => [{ type: TCloudUiAccordionService }] });
 
 class TCloudUiAccordionComponent {
@@ -179,13 +179,13 @@ class TCloudUiAccordionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiAccordionComponent, deps: [{ token: TCloudUiAccordionService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiAccordionComponent, isStandalone: true, selector: "tcloud-ui-accordion", inputs: { disabled: "disabled", show: "show", loading: "loading" }, outputs: { onAction: "onAction" }, providers: [
             TCloudUiAccordionService
-        ], ngImport: i0, template: "<div class=\"tcloud-ui-accordion tc-accordion\" [class.tc-accordion-disabled]=\"disabled\">\n    <ng-content></ng-content>\n</div>", styles: [".tc-accordion{border:1px solid #ccc;padding:8px 12px;border-radius:15px;margin-bottom:5px}.tc-accordion-disabled{background-color:#e3e3e3;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+        ], ngImport: i0, template: "<div class=\"tcloud-ui-accordion tc-accordion\" [class.tc-accordion-disabled]=\"disabled\">\n    <ng-content></ng-content>\n</div>", styles: [".tc-accordion{background-color:#fff;border:1px solid #ccc;padding:8px 12px;border-radius:15px;margin-bottom:5px}.tc-accordion-disabled{background-color:#e3e3e3;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tcloud-ui-accordion', providers: [
                         TCloudUiAccordionService
-                    ], standalone: true, imports: [CommonModule, TCloudUiAccordionBodyComponent, TCloudUiAccordionTitleComponent], template: "<div class=\"tcloud-ui-accordion tc-accordion\" [class.tc-accordion-disabled]=\"disabled\">\n    <ng-content></ng-content>\n</div>", styles: [".tc-accordion{border:1px solid #ccc;padding:8px 12px;border-radius:15px;margin-bottom:5px}.tc-accordion-disabled{background-color:#e3e3e3;opacity:.6}\n"] }]
+                    ], imports: [CommonModule, TCloudUiAccordionBodyComponent, TCloudUiAccordionTitleComponent], template: "<div class=\"tcloud-ui-accordion tc-accordion\" [class.tc-accordion-disabled]=\"disabled\">\n    <ng-content></ng-content>\n</div>", styles: [".tc-accordion{background-color:#fff;border:1px solid #ccc;padding:8px 12px;border-radius:15px;margin-bottom:5px}.tc-accordion-disabled{background-color:#e3e3e3;opacity:.6}\n"] }]
         }], ctorParameters: () => [{ type: TCloudUiAccordionService }], propDecorators: { disabled: [{
                 type: Input
             }], show: [{
@@ -368,7 +368,7 @@ class TCloudUiDataListOptionComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDataListOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-data-list-option', standalone: true, imports: [CommonModule], template: "<button \n  [disabled]=\"disabled\"\n  [title]=\"select_options.description\"\n  id=\"{{id}}\"\n  [attr.data-description]=\"select_options.description\"\n  [attr.data-actived-value]=\"actived_value\"\n  class=\"tcloud-ui-data-list-option dropdown-item\" \n  [class.null-value]=\"value === undefined || value === null || value === ''\"\n  [class.active]=\"value === actived_value\" \n  [class.option-disabled]=\"disabled\"\n  type=\"button\" \n  [value]=\"value\"\n  (click)=\"setSelectedItem(value)\" >\n  <ng-content></ng-content>\n</button>\n", styles: ["button{color:#666;width:100%;padding:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background-color:#e5f5f9;color:#333}button.active{background-color:#ceedf5;color:#333}.null-value{height:35px}.option-disabled{background-color:#fff!important;color:#b5b5b5!important;cursor:not-allowed!important}\n"] }]
+            args: [{ selector: 'tcloud-ui-data-list-option', imports: [CommonModule], template: "<button \n  [disabled]=\"disabled\"\n  [title]=\"select_options.description\"\n  id=\"{{id}}\"\n  [attr.data-description]=\"select_options.description\"\n  [attr.data-actived-value]=\"actived_value\"\n  class=\"tcloud-ui-data-list-option dropdown-item\" \n  [class.null-value]=\"value === undefined || value === null || value === ''\"\n  [class.active]=\"value === actived_value\" \n  [class.option-disabled]=\"disabled\"\n  type=\"button\" \n  [value]=\"value\"\n  (click)=\"setSelectedItem(value)\" >\n  <ng-content></ng-content>\n</button>\n", styles: ["button{color:#666;width:100%;padding:10px;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background-color:#e5f5f9;color:#333}button.active{background-color:#ceedf5;color:#333}.null-value{height:35px}.option-disabled{background-color:#fff!important;color:#b5b5b5!important;cursor:not-allowed!important}\n"] }]
         }], ctorParameters: () => [{ type: DataListService }], propDecorators: { disabled: [{
                 type: Input
             }], value: [{
@@ -739,7 +739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             args: [{ selector: 'tcloud-ui-data-list', providers: [
                         DataListService,
                         CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$7
-                    ], standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListOptionComponent, TCloudUiFormDirective], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tcloud-ui-data-list tc-dropdown\" [class.disabled]=\"disabled || loading\">\n  <div *ngIf=\"loading\" class=\"loading-area\">\n    <i class=\"fas fa-spinner fa-spin\"></i>\n  </div>\n  <!-- [attr.data-bs-toggle]=\"'dropdown'\"  -->\n  <button \n    tcloudForm\n    #_option\n    [class.input-hidden]=\"!showInput\"\n    [class.in-border]=\"border\"\n    [class.loading-box]=\"loading\"\n    [disabled]=\"disabled || loading\"\n    class=\"dropdown-toggle button-select no-margin-bottom area-text\" \n    type=\"button\" \n    id=\"{{ id }}\" \n    \n    [attr.aria-haspopup]=\"'true'\" \n    [attr.aria-expanded]=\"'false'\" \n    (click)=\"toOpen();toInput(_option)\" >\n\n    <i class=\"tc-placeholder area-text\" *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\n    {{ selected_description }}\n    <span><i class=\"fas fa-angle-down\"></i></span>\n  </button>\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\n\n    <div class=\"line-search\" *ngIf=\"search\">\n      <table class=\"box-search\">\n        <tr>\n\n          <td class=\"area-input\">\n            <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \n          </td>\n\n          <td class=\"area-icon\">\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n          </td>\n          \n        </tr>\n      </table>\n    </div>\n    \n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\n      <ng-content></ng-content>  \n      <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n        <ng-container *ngFor=\"let item of listItems\">\n          <tcloud-ui-data-list-option [value]=\"item.value\" [disabled]=\"item?.disabled\" >{{ item?.description }}</tcloud-ui-data-list-option>\n          </ng-container>\n      </ng-container>    \n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"formulario\">\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\n  </form>\n</div>\n", styles: [".dropdown-toggle:after{display:none!important}i.tc-placeholder{font-style:italic;color:#999;text-transform:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666;padding-right:30px}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!important}\n"] }]
+                    ], imports: [CommonModule, FormsModule, ReactiveFormsModule, TCloudUiDataListOptionComponent, TCloudUiFormDirective], template: "<div *ngIf=\"formulario\" id=\"area-{{ id }}\" class=\"tcloud-ui-data-list tc-dropdown\" [class.disabled]=\"disabled || loading\">\n  <div *ngIf=\"loading\" class=\"loading-area\">\n    <i class=\"fas fa-spinner fa-spin\"></i>\n  </div>\n  <!-- [attr.data-bs-toggle]=\"'dropdown'\"  -->\n  <button \n    tcloudForm\n    #_option\n    [class.input-hidden]=\"!showInput\"\n    [class.in-border]=\"border\"\n    [class.loading-box]=\"loading\"\n    [disabled]=\"disabled || loading\"\n    class=\"dropdown-toggle button-select no-margin-bottom area-text\" \n    type=\"button\" \n    id=\"{{ id }}\" \n    \n    [attr.aria-haspopup]=\"'true'\" \n    [attr.aria-expanded]=\"'false'\" \n    (click)=\"toOpen();toInput(_option)\" >\n\n    <i class=\"tc-placeholder area-text\" *ngIf=\"(selected_description === undefined || selected_description === null || selected_description === '' ) && !loading \">{{ placeholder }}</i>\n    {{ selected_description }}\n    <span><i class=\"fas fa-angle-down\"></i></span>\n  </button>\n  <div class=\"tc-dropdown-menu {{ menu_on_top }}\" id=\"box-{{ id }}\" [attr.aria-labelledby]=\"id\" [class.to-hide]=\"!menu_show\" [style]=\"box_style\">\n\n    <div class=\"line-search\" *ngIf=\"search\">\n      <table class=\"box-search\">\n        <tr>\n\n          <td class=\"area-input\">\n            <input type=\"text\" class=\"tc-form-control\" [(ngModel)]=\"search_text\" (input)=\"toSearch($event)\" placeholder=\"Buscar...\" >            \n          </td>\n\n          <td class=\"area-icon\">\n            <i *ngIf=\"search_text === ''\" class=\"fas fa-search icon-search\"></i>\n            <button type=\"button\" *ngIf=\"search_text !== ''\" (click)=\"clearTextSearch()\"><i class=\"fas fa-times\"></i></button>\n          </td>\n          \n        </tr>\n      </table>\n    </div>\n    \n    <div class=\"area-options\" id=\"{{ id }}-options\" (click)=\"toClose()\">\n      <ng-content></ng-content>  \n      <ng-container *ngIf=\"listItems && (listItems).length > 0\">\n        <ng-container *ngFor=\"let item of listItems\">\n          <tcloud-ui-data-list-option [value]=\"item.value\" [disabled]=\"item?.disabled\" >{{ item?.description }}</tcloud-ui-data-list-option>\n          </ng-container>\n      </ng-container>    \n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"formulario\">\n  <form [formGroup]=\"formulario\" style=\"display: none;\" >\n    <input id=\"{{ id }}-hidden\" formControlName=\"selected_item\" type=\"hidden\">\n  </form>\n</div>\n", styles: [".dropdown-toggle:after{display:none!important}i.tc-placeholder{font-style:italic;color:#999;text-transform:none!important}.in-border{border:1px solid #ccc!important}.tc-dropdown{position:relative}.tc-dropdown .button-select{width:100%;background-color:#fff;border:none;height:35px;text-align:left;padding-left:15px;font-size:14px;color:#666;padding-right:30px}.tc-dropdown .button-select span{position:absolute;right:6px;top:7px}.tc-dropdown .area-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tc-dropdown .tc-dropdown-menu{width:100%;border:1px solid #ccc;background-color:#fff;position:absolute;z-index:1}.tc-dropdown .area-options{max-height:200px;overflow-y:scroll;overflow-x:hidden}.tc-dropdown .menu-on-top{position:absolute}.line-search{padding:3px}.line-search .box-search{width:100%;border-collapse:collapse}.line-search .box-search td.area-icon{padding:4px 0 2px 8px;width:35px}.line-search .box-search td.area-icon .icon-search{color:#666}.line-search .box-search td.area-icon button{border:none;background-color:transparent;color:#999;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.line-search .box-search td.area-input input{width:100%}.line-search .box-search td.area-input{border:none}.line-search .box-search input{width:100%;font-size:13px;height:33px;border:1px solid #ccc;padding:10px}.loading-area{line-height:0;position:relative;height:0;bottom:-10px;left:10px}button:disabled{background-color:#eee!important;border:1px solid #ececec!important;cursor:not-allowed}.loading-box{cursor:progress!important}.disabled i{color:#999!important}.to-hide{display:none}.no-margin-bottom{margin-bottom:0!important}.input-hidden{display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: DataListService }, { type: i2.FormBuilder }], propDecorators: { placeholder: [{
                 type: Input
             }], disabled: [{
@@ -2985,15 +2985,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 class TCloudUiLinhaLogoComponent {
+    set product(value) {
+        if ((`${value}`).toLowerCase() !== this._product) {
+            this._product = value;
+            this.toInit();
+        }
+    }
+    get product() {
+        return this._product;
+    }
     constructor() {
         this.url = `h` + `t` + `t` + `p` + `s` + `:` + `/` + `/` + `ateleia` + `-` + `email` + `.s3` + `-` + `sa` + `-` + `east` + `-` + `1` + `.` + `amazonaws` + `.` + `com` + `/`;
-        this.product = '';
+        this._product = '';
         this.logo_name = '';
         this.product_name = '';
         this.alt_product_name = '';
         this.font_size = '';
     }
     ngOnInit() {
+    }
+    toInit() {
         this.logo_name = this.getLogoName();
         this.product_name = this.getProductName();
         this.alt_product_name = (this.product_name).toUpperCase();
@@ -4496,6 +4507,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Output
             }] } });
 
+class TCloudUiToastComponent {
+    constructor() {
+        this.type = input('info');
+        this.fullWidth = input(false);
+        this.size = input('md');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TCloudUiToastComponent, isStandalone: true, selector: "tcloud-ui-toast", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tcloud-ui-toast c-neutral-700\">\n  <div\n    class=\"tcloud-ui-toast__icon\"\n    [ngClass]=\"[\n      'tcloud-ui-toast__icon--' + type(),\n      'tcloud-ui-toast__icon--' + size()\n    ]\"\n  >\n    <ng-content select=\"[icon]\" />\n  </div>\n\n  <div\n    class=\"tcloud-ui-toast__content\"\n    [ngClass]=\"[\n      'tcloud-ui-toast__content--' + type(),\n      'tcloud-ui-toast__content--' + size()\n    ]\"\n    [class.full-width]=\"fullWidth()\"\n  >\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block}.tcloud-ui-toast{display:flex}.tcloud-ui-toast__icon{align-items:center;border-radius:var(--bor-radius-8) 0 0 var(--bor-radius-8);display:flex;justify-content:center}.tcloud-ui-toast__icon--info{background-color:var(--c-primary-500)}.tcloud-ui-toast__icon--success{background-color:var(--c-success-500)}.tcloud-ui-toast__icon--alert{background-color:var(--c-alert-500)}.tcloud-ui-toast__icon--danger{background-color:var(--c-danger-500)}.tcloud-ui-toast__icon--sm{font-size:var(--f-size-20);padding:var(--size-14)}.tcloud-ui-toast__icon--md{font-size:var(--f-size-24);padding:var(--size-16)}.tcloud-ui-toast__icon--lg{font-size:var(--f-size-24);padding:var(--size-18)}.tcloud-ui-toast__content{align-items:center;border-radius:0 var(--bor-radius-8) var(--bor-radius-8) 0;display:flex;font-family:var(--f-family)}.tcloud-ui-toast__content--info{background-color:var(--c-primary-300)}.tcloud-ui-toast__content--success{background-color:var(--c-success-300)}.tcloud-ui-toast__content--alert{background-color:var(--c-alert-300)}.tcloud-ui-toast__content--danger{background-color:var(--c-danger-300)}.tcloud-ui-toast__content--sm{padding:var(--size-12);font-size:var(--f-size-12);line-height:var(--l-height-16)}.tcloud-ui-toast__content--md{padding:var(--size-16);font-size:var(--f-size-14);line-height:var(--l-height-20)}.tcloud-ui-toast__content--lg{padding:var(--size-18);font-size:var(--f-size-16);line-height:var(--l-height-24)}.tcloud-ui-toast__content.full-width{flex-grow:1}\n"], dependencies: [{ 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: TCloudUiToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-toast', standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-toast c-neutral-700\">\n  <div\n    class=\"tcloud-ui-toast__icon\"\n    [ngClass]=\"[\n      'tcloud-ui-toast__icon--' + type(),\n      'tcloud-ui-toast__icon--' + size()\n    ]\"\n  >\n    <ng-content select=\"[icon]\" />\n  </div>\n\n  <div\n    class=\"tcloud-ui-toast__content\"\n    [ngClass]=\"[\n      'tcloud-ui-toast__content--' + type(),\n      'tcloud-ui-toast__content--' + size()\n    ]\"\n    [class.full-width]=\"fullWidth()\"\n  >\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block}.tcloud-ui-toast{display:flex}.tcloud-ui-toast__icon{align-items:center;border-radius:var(--bor-radius-8) 0 0 var(--bor-radius-8);display:flex;justify-content:center}.tcloud-ui-toast__icon--info{background-color:var(--c-primary-500)}.tcloud-ui-toast__icon--success{background-color:var(--c-success-500)}.tcloud-ui-toast__icon--alert{background-color:var(--c-alert-500)}.tcloud-ui-toast__icon--danger{background-color:var(--c-danger-500)}.tcloud-ui-toast__icon--sm{font-size:var(--f-size-20);padding:var(--size-14)}.tcloud-ui-toast__icon--md{font-size:var(--f-size-24);padding:var(--size-16)}.tcloud-ui-toast__icon--lg{font-size:var(--f-size-24);padding:var(--size-18)}.tcloud-ui-toast__content{align-items:center;border-radius:0 var(--bor-radius-8) var(--bor-radius-8) 0;display:flex;font-family:var(--f-family)}.tcloud-ui-toast__content--info{background-color:var(--c-primary-300)}.tcloud-ui-toast__content--success{background-color:var(--c-success-300)}.tcloud-ui-toast__content--alert{background-color:var(--c-alert-300)}.tcloud-ui-toast__content--danger{background-color:var(--c-danger-300)}.tcloud-ui-toast__content--sm{padding:var(--size-12);font-size:var(--f-size-12);line-height:var(--l-height-16)}.tcloud-ui-toast__content--md{padding:var(--size-16);font-size:var(--f-size-14);line-height:var(--l-height-20)}.tcloud-ui-toast__content--lg{padding:var(--size-18);font-size:var(--f-size-16);line-height:var(--l-height-24)}.tcloud-ui-toast__content.full-width{flex-grow:1}\n"] }]
+        }] });
+
 class TCloudUiLineStepTitleComponent {
     constructor() {
         this.showStepCounter = true;
@@ -5203,11 +5228,11 @@ class TCloudUiReorderItemsComponent {
         return items;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiReorderItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiReorderItemsComponent, isStandalone: true, selector: "tcloud-ui-reorder-items", inputs: { items: "items" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<ng-container *ngIf=\"sort_items\">\n\n\n\n    <table class=\"table-sort-items\">\n\n    \n\n\n        <ng-container *ngFor=\"let item of sort_items; let i = index\">\n\n            <tr>\n\n                <td class=\"area-name-description-item\">\n                    {{ item }}\n                    <div *ngIf=\"get_description(item)\" class=\"item-description\">\n                        {{ get_description(item) }}\n                    </div>\n                </td>\n\n                <td class=\"area-action-item\">\n                \n                    <ng-container>\n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i-1))\" title=\"Alterar para cima\" [disabled]=\"i===0\">\n                                <i class=\"fas fa-caret-up p-up\" ></i>\n                            </button>\n                        </div>\n                         \n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i+1))\" title=\"Alterar para baixo\" [disabled]=\"(i+1) === (sort_items).length\">\n                                <i class=\"fas fa-caret-down p-down\"></i>\n                            </button>\n                        \n                        </div>\n                    </ng-container>\n                </td>\n\n            </tr>\n        </ng-container>  \n\n    </table>\n  \n  </ng-container>", styles: [".table-sort-items{width:100%;border-collapse:initial}.order-control{text-align:center}.btn-item-action-arrow{border:none;background:none;cursor:pointer;padding:0;color:var(--tc-primary);font-size:16px;line-height:0}.btn-item-action-arrow:disabled{opacity:.4;cursor:not-allowed!important}.item-description{color:#a2a2a2}.area-name-description-item{border-radius:13px 0 0 13px;border:1px solid #ccc;padding:3px 13px}.area-action-item{background-color:var(--tc-gray-50);border-radius:0 13px 13px 0;border:1px solid #ccc;padding:3px;width:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiReorderItemsComponent, isStandalone: true, selector: "tcloud-ui-reorder-items", inputs: { items: "items" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<ng-container *ngIf=\"sort_items\">\n\n\n\n    <table class=\"table-sort-items\">\n\n    \n\n\n        <ng-container *ngFor=\"let item of sort_items; let i = index\">\n\n            <tr>\n\n                <td class=\"area-name-description-item\">\n                    {{ item }}\n                    <div *ngIf=\"get_description(item)\" class=\"item-description\">\n                        {{ get_description(item) }}\n                    </div>\n                </td>\n\n                <td class=\"area-action-item\">\n                \n                    <ng-container>\n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i-1))\" title=\"Alterar para cima\" [disabled]=\"i===0\">\n                                <i class=\"fas fa-caret-up p-up\" ></i>\n                            </button>\n                        </div>\n                         \n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i+1))\" title=\"Alterar para baixo\" [disabled]=\"(i+1) === (sort_items).length\">\n                                <i class=\"fas fa-caret-down p-down\"></i>\n                            </button>\n                        \n                        </div>\n                    </ng-container>\n                </td>\n\n            </tr>\n        </ng-container>  \n\n    </table>\n  \n  </ng-container>", styles: [".table-sort-items{width:100%;border-collapse:initial}.order-control{text-align:center}.btn-item-action-arrow{border:none;background:none;cursor:pointer;padding:0;color:var(--tc-primary);font-size:16px;line-height:0}.btn-item-action-arrow:disabled{opacity:.4;cursor:not-allowed!important}.item-description{color:#a2a2a2}.area-name-description-item{background-color:#fff;border-radius:13px 0 0 13px;border:1px solid #ccc;padding:3px 13px}.area-action-item{background-color:var(--tc-gray-50);border-radius:0 13px 13px 0;border:1px solid #ccc;padding:3px;width:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiReorderItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-reorder-items', standalone: true, imports: [CommonModule], template: "<ng-container *ngIf=\"sort_items\">\n\n\n\n    <table class=\"table-sort-items\">\n\n    \n\n\n        <ng-container *ngFor=\"let item of sort_items; let i = index\">\n\n            <tr>\n\n                <td class=\"area-name-description-item\">\n                    {{ item }}\n                    <div *ngIf=\"get_description(item)\" class=\"item-description\">\n                        {{ get_description(item) }}\n                    </div>\n                </td>\n\n                <td class=\"area-action-item\">\n                \n                    <ng-container>\n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i-1))\" title=\"Alterar para cima\" [disabled]=\"i===0\">\n                                <i class=\"fas fa-caret-up p-up\" ></i>\n                            </button>\n                        </div>\n                         \n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i+1))\" title=\"Alterar para baixo\" [disabled]=\"(i+1) === (sort_items).length\">\n                                <i class=\"fas fa-caret-down p-down\"></i>\n                            </button>\n                        \n                        </div>\n                    </ng-container>\n                </td>\n\n            </tr>\n        </ng-container>  \n\n    </table>\n  \n  </ng-container>", styles: [".table-sort-items{width:100%;border-collapse:initial}.order-control{text-align:center}.btn-item-action-arrow{border:none;background:none;cursor:pointer;padding:0;color:var(--tc-primary);font-size:16px;line-height:0}.btn-item-action-arrow:disabled{opacity:.4;cursor:not-allowed!important}.item-description{color:#a2a2a2}.area-name-description-item{border-radius:13px 0 0 13px;border:1px solid #ccc;padding:3px 13px}.area-action-item{background-color:var(--tc-gray-50);border-radius:0 13px 13px 0;border:1px solid #ccc;padding:3px;width:40px}\n"] }]
+            args: [{ selector: 'tcloud-ui-reorder-items', standalone: true, imports: [CommonModule], template: "<ng-container *ngIf=\"sort_items\">\n\n\n\n    <table class=\"table-sort-items\">\n\n    \n\n\n        <ng-container *ngFor=\"let item of sort_items; let i = index\">\n\n            <tr>\n\n                <td class=\"area-name-description-item\">\n                    {{ item }}\n                    <div *ngIf=\"get_description(item)\" class=\"item-description\">\n                        {{ get_description(item) }}\n                    </div>\n                </td>\n\n                <td class=\"area-action-item\">\n                \n                    <ng-container>\n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i-1))\" title=\"Alterar para cima\" [disabled]=\"i===0\">\n                                <i class=\"fas fa-caret-up p-up\" ></i>\n                            </button>\n                        </div>\n                         \n                        <div class=\"order-control\">\n                            <button class=\"btn-item-action-arrow\" (click)=\"move(item, i, (i+1))\" title=\"Alterar para baixo\" [disabled]=\"(i+1) === (sort_items).length\">\n                                <i class=\"fas fa-caret-down p-down\"></i>\n                            </button>\n                        \n                        </div>\n                    </ng-container>\n                </td>\n\n            </tr>\n        </ng-container>  \n\n    </table>\n  \n  </ng-container>", styles: [".table-sort-items{width:100%;border-collapse:initial}.order-control{text-align:center}.btn-item-action-arrow{border:none;background:none;cursor:pointer;padding:0;color:var(--tc-primary);font-size:16px;line-height:0}.btn-item-action-arrow:disabled{opacity:.4;cursor:not-allowed!important}.item-description{color:#a2a2a2}.area-name-description-item{background-color:#fff;border-radius:13px 0 0 13px;border:1px solid #ccc;padding:3px 13px}.area-action-item{background-color:var(--tc-gray-50);border-radius:0 13px 13px 0;border:1px solid #ccc;padding:3px;width:40px}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], itemsChange: [{
@@ -5282,11 +5307,11 @@ class TCloudUiContainerComponent {
         this._containerService.set_expanded_signal(this._expanded);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiContainerComponent, isStandalone: true, selector: "tcloud-ui-container", inputs: { expanded: "expanded" }, providers: [ContainerService], ngImport: i0, template: "<div class=\"tc-rev-container f-family c-neutral-900 mar-b-24\" [class.container-expanded]=\"expanded\">\n  <ng-content></ng-content>                                                                                                                                                      \n</div>", styles: [":host{display:block}.tc-rev-container{display:flex;gap:24px}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiContainerComponent, isStandalone: true, selector: "tcloud-ui-container", inputs: { expanded: "expanded" }, providers: [ContainerService], ngImport: i0, template: "<div class=\"tc-rev-container f-family c-neutral-900 mar-b-24\" [class.container-expanded]=\"expanded\">\n  <ng-content></ng-content>                                                                                                                                                      \n</div>", styles: [":host{display:block}.tc-rev-container{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-container', imports: [], providers: [ContainerService], template: "<div class=\"tc-rev-container f-family c-neutral-900 mar-b-24\" [class.container-expanded]=\"expanded\">\n  <ng-content></ng-content>                                                                                                                                                      \n</div>", styles: [":host{display:block}.tc-rev-container{display:flex;gap:24px}\n"] }]
+            args: [{ selector: 'tcloud-ui-container', imports: [], providers: [ContainerService], template: "<div class=\"tc-rev-container f-family c-neutral-900 mar-b-24\" [class.container-expanded]=\"expanded\">\n  <ng-content></ng-content>                                                                                                                                                      \n</div>", styles: [":host{display:block}.tc-rev-container{display:block}\n"] }]
         }], propDecorators: { expanded: [{
                 type: Input
             }] } });
@@ -5299,11 +5324,11 @@ class TCloudUiContainerColComponent {
         return this._containerService.expanded_signal();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiContainerColComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiContainerColComponent, isStandalone: true, selector: "tcloud-ui-container-col", ngImport: i0, template: "\n<div class=\"tc-rev-container-col\" [class.col-expanded]=\"expanded\">\n  <ng-content></ng-content>\n</div>", styles: [".tc-rev-container-col{height:calc(100vh - 10.875rem);display:flex;position:fixed}\n", ":host{display:block}.tc-rev-container{display:flex;gap:24px}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiContainerColComponent, isStandalone: true, selector: "tcloud-ui-container-col", ngImport: i0, template: "\n<div class=\"tc-rev-container-col\" [class.col-expanded]=\"expanded\">\n  <ng-content></ng-content>\n</div>", styles: [".tc-rev-container-col{height:calc(100vh - 10.875rem);display:flex;position:fixed}\n", ":host{display:block}.tc-rev-container{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiContainerColComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-container-col', imports: [], template: "\n<div class=\"tc-rev-container-col\" [class.col-expanded]=\"expanded\">\n  <ng-content></ng-content>\n</div>", styles: [".tc-rev-container-col{height:calc(100vh - 10.875rem);display:flex;position:fixed}\n", ":host{display:block}.tc-rev-container{display:flex;gap:24px}\n"] }]
+            args: [{ selector: 'tcloud-ui-container-col', imports: [], template: "\n<div class=\"tc-rev-container-col\" [class.col-expanded]=\"expanded\">\n  <ng-content></ng-content>\n</div>", styles: [".tc-rev-container-col{height:calc(100vh - 10.875rem);display:flex;position:fixed}\n", ":host{display:block}.tc-rev-container{display:block}\n"] }]
         }] });
 
 class TCloudUiContainerContentComponent {
@@ -5314,11 +5339,11 @@ class TCloudUiContainerContentComponent {
         return this._containerService.expanded_signal();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiContainerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiContainerContentComponent, isStandalone: true, selector: "tcloud-ui-container-content", ngImport: i0, template: "\n<div class=\"tc-rev-container-content\" [class.content-expanded]=\"expanded\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block;width:100%;padding-right:24px}.tc-rev-container-content{padding-left:52px}.content-expanded{padding-left:232px}\n", ":host{display:block}.tc-rev-container{display:flex;gap:24px}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiContainerContentComponent, isStandalone: true, selector: "tcloud-ui-container-content", ngImport: i0, template: "\n<div class=\"tc-rev-container-content\" [class.content-expanded]=\"expanded\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block;width:100%;padding-left:24px}.tc-rev-container-content{padding-left:52px}.content-expanded{padding-left:232px}\n", ":host{display:block}.tc-rev-container{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiContainerContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-container-content', imports: [], template: "\n<div class=\"tc-rev-container-content\" [class.content-expanded]=\"expanded\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block;width:100%;padding-right:24px}.tc-rev-container-content{padding-left:52px}.content-expanded{padding-left:232px}\n", ":host{display:block}.tc-rev-container{display:flex;gap:24px}\n"] }]
+            args: [{ selector: 'tcloud-ui-container-content', imports: [], template: "\n<div class=\"tc-rev-container-content\" [class.content-expanded]=\"expanded\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block;width:100%;padding-left:24px}.tc-rev-container-content{padding-left:52px}.content-expanded{padding-left:232px}\n", ":host{display:block}.tc-rev-container{display:block}\n"] }]
         }] });
 
 class TCloudUiAlignDirective {
@@ -6530,6 +6555,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Output
             }] } });
 
+class TCloudUiDeviceUtilsService {
+    constructor(rendererFactory) {
+        /*** Viewport mobile ***/
+        this.DESKTOP_MIN = 480;
+        this.widthScreen = signal(window.innerWidth);
+        // largura atual da viewport
+        this.width = computed(() => this.widthScreen());
+        this.isDesktop = computed(() => this.width() > this.DESKTOP_MIN);
+        this.isMobile = computed(() => this.width() <= this.DESKTOP_MIN);
+        this.menuHost = null;
+        this.embeddedView = null;
+        this.appRef = inject(ApplicationRef);
+        this.animationBuilder = inject(AnimationBuilder);
+        this.player = null;
+        this.renderer = rendererFactory.createRenderer(null, null);
+        window.addEventListener('resize', () => {
+            this.widthScreen.set(window.innerWidth);
+        });
+    }
+    openDropdownDevice(menuTemplate) {
+        this.menuHost = this.renderer.createElement('div');
+        this.renderer.setStyle(this.menuHost, 'position', 'fixed');
+        this.renderer.setStyle(this.menuHost, 'top', '0');
+        this.renderer.setStyle(this.menuHost, 'left', '0');
+        this.renderer.setStyle(this.menuHost, 'width', '100vw');
+        this.renderer.setStyle(this.menuHost, 'height', '100vh');
+        this.renderer.setStyle(this.menuHost, 'z-index', '9999');
+        this.renderer.setStyle(this.menuHost, 'opacity', '0');
+        this.renderer.appendChild(document.body, this.menuHost);
+        // Impede scroll da página externa enquanto o dropdown está aberto
+        this.renderer.setStyle(document.body, 'overflow', 'hidden');
+        this.renderer.setStyle(document.body, 'touch-action', 'none');
+        this.embeddedView = menuTemplate.createEmbeddedView({});
+        this.appRef.attachView(this.embeddedView);
+        this.embeddedView.rootNodes.forEach((node) => {
+            this.renderer.appendChild(this.menuHost, node);
+        });
+        const fadeIn = this.animationBuilder.build([
+            style({ opacity: 0 }),
+            animate('200ms ease', style({ opacity: 1 })),
+        ]);
+        this.player = fadeIn.create(this.menuHost);
+        this.player.play();
+    }
+    closeDropdownDevice() {
+        if (!this.menuHost)
+            return;
+        const fadeOut = this.animationBuilder.build([
+            style({ opacity: 1 }),
+            animate('200ms ease', style({ opacity: 0 })),
+        ]);
+        this.player = fadeOut.create(this.menuHost);
+        this.player.play();
+        this.player.onDone(() => {
+            this.renderer.removeStyle(document.body, 'overflow');
+            this.renderer.removeStyle(document.body, 'touch-action');
+            if (this.embeddedView) {
+                this.appRef.detachView(this.embeddedView);
+                this.embeddedView.destroy();
+                this.embeddedView = null;
+            }
+            this.renderer.removeChild(document.body, this.menuHost);
+            this.menuHost = null;
+            this.player = null;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDeviceUtilsService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDeviceUtilsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDeviceUtilsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
+
+class TCloudUiCardComponent {
+    constructor() {
+        this._viewPort = inject(TCloudUiDeviceUtilsService);
+        this.isDesktop = this._viewPort.isDesktop;
+    }
+    /**
+    * APPLY FUNCTIONS RESPONSIVE < 480PX
+    */
+    get extraClasses() {
+        if (this.isDesktop()) {
+            return ['shadow-md', 'pad-16'];
+        }
+        //Responsive Classes
+        return ['shadow-sm', 'pad-14'];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiCardComponent, isStandalone: true, selector: "tcloud-ui-card", ngImport: i0, template: "<div class=\"tcloud-ui-card bg-c-neutral-50 bor-rad-16\"\n[ngClass]=\"extraClasses\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ 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: TCloudUiCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-card', imports: [CommonModule], template: "<div class=\"tcloud-ui-card bg-c-neutral-50 bor-rad-16\"\n[ngClass]=\"extraClasses\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+class TCloudUiCardTitleComponent {
+    constructor() {
+        this.title = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TCloudUiCardTitleComponent, isStandalone: true, selector: "tcloud-ui-card-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, 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"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCardTitleComponent, decorators: [{
+            type: Component,
+            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);
+    }
+    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]
+            }] } });
+
 const COMPONENTS = [
     TCloudUiAccordionComponent,
     TCloudUiAccordionBodyComponent,
@@ -6561,6 +6756,7 @@ const COMPONENTS = [
     TCloudUiTableComponent,
     TCloudUiInputPasswordComponent,
     TCloudUiLabelTokenComponent,
+    TCloudUiToastComponent,
     TCloudUiLineStepTitleComponent,
     TCloudUiLoadingComponent,
     TCloudUiCubesComponent,
@@ -6571,7 +6767,11 @@ const COMPONENTS = [
     TCloudUiContainerComponent,
     TCloudUiContainerColComponent,
     TCloudUiContainerContentComponent,
-    TCloudUiPaginationComponent
+    TCloudUiPaginationComponent,
+    TCloudUiCardComponent,
+    TCloudUiCardTitleComponent,
+    TCloudUiSubNavbarComponent,
+    TCloudUiSubNavbarItemComponent
 ];
 const DIRECTIVES = [
     TCloudUiAlignDirective,
@@ -6653,6 +6853,7 @@ class TCloudUiModule {
             TCloudUiTableComponent,
             TCloudUiInputPasswordComponent,
             TCloudUiLabelTokenComponent,
+            TCloudUiToastComponent,
             TCloudUiLineStepTitleComponent,
             TCloudUiLoadingComponent,
             TCloudUiCubesComponent,
@@ -6663,7 +6864,11 @@ class TCloudUiModule {
             TCloudUiContainerComponent,
             TCloudUiContainerColComponent,
             TCloudUiContainerContentComponent,
-            TCloudUiPaginationComponent, TCloudUiAlignDirective,
+            TCloudUiPaginationComponent,
+            TCloudUiCardComponent,
+            TCloudUiCardTitleComponent,
+            TCloudUiSubNavbarComponent,
+            TCloudUiSubNavbarItemComponent, TCloudUiAlignDirective,
             TCloudUiCurrencyDirective,
             TCloudUiElCopyDirective,
             TCloudUiHoverParentDirective,
@@ -6713,6 +6918,7 @@ class TCloudUiModule {
             TCloudUiTableComponent,
             TCloudUiInputPasswordComponent,
             TCloudUiLabelTokenComponent,
+            TCloudUiToastComponent,
             TCloudUiLineStepTitleComponent,
             TCloudUiLoadingComponent,
             TCloudUiCubesComponent,
@@ -6723,7 +6929,11 @@ class TCloudUiModule {
             TCloudUiContainerComponent,
             TCloudUiContainerColComponent,
             TCloudUiContainerContentComponent,
-            TCloudUiPaginationComponent, TCloudUiAlignDirective,
+            TCloudUiPaginationComponent,
+            TCloudUiCardComponent,
+            TCloudUiCardTitleComponent,
+            TCloudUiSubNavbarComponent,
+            TCloudUiSubNavbarItemComponent, TCloudUiAlignDirective,
             TCloudUiCurrencyDirective,
             TCloudUiElCopyDirective,
             TCloudUiHoverParentDirective,
@@ -6778,6 +6988,7 @@ class TCloudUiModule {
             TCloudUiTableComponent,
             TCloudUiInputPasswordComponent,
             TCloudUiLabelTokenComponent,
+            TCloudUiToastComponent,
             TCloudUiLineStepTitleComponent,
             TCloudUiLoadingComponent,
             TCloudUiCubesComponent,
@@ -6785,7 +6996,10 @@ class TCloudUiModule {
             TCloudUiProgressBarComponent,
             TCloudUiReorderItemsComponent,
             TCloudUiWelcomeComponent,
-            TCloudUiPaginationComponent] }); }
+            TCloudUiPaginationComponent,
+            TCloudUiCardComponent,
+            TCloudUiSubNavbarComponent,
+            TCloudUiSubNavbarItemComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModule, decorators: [{
             type: NgModule,
@@ -6855,6 +7069,68 @@ function provideTCloudUi(config) {
     return makeEnvironmentProviders(providers);
 }
 
+class TCloudUiBreadcrumbService {
+    constructor() {
+        this.breadcrumbsSubject = new BehaviorSubject([]);
+        this.breadcrumbs$ = this.breadcrumbsSubject.asObservable();
+    }
+    setBreadcrumb(items) {
+        this.breadcrumbsSubject.next(items);
+    }
+    addLevel(item) {
+        const currentItems = this.breadcrumbsSubject.getValue();
+        this.breadcrumbsSubject.next([...currentItems, item]);
+    }
+    removeLastLevel() {
+        const currentItems = this.breadcrumbsSubject.getValue();
+        if (currentItems.length > 0) {
+            const newItems = [...currentItems];
+            newItems.pop();
+            this.breadcrumbsSubject.next(newItems);
+        }
+    }
+    clear() {
+        this.breadcrumbsSubject.next([]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiBreadcrumbService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiBreadcrumbService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class TCloudUiBreadcrumbComponent {
+    constructor() {
+        this.breadcrumbs = [];
+        this.router = inject(Router);
+        this.breadcrumbService = inject(TCloudUiBreadcrumbService);
+    }
+    ngOnInit() {
+        this.breadcrumbService.breadcrumbs$.subscribe(items => this.breadcrumbs = items);
+    }
+    navigate(url, index) {
+        if (url) {
+            this.router.navigateByUrl(url);
+            // Opcional: remover níveis do breadcrumb após o clicado
+            if (index !== undefined && index < this.breadcrumbs.length - 1) {
+                this.breadcrumbService.setBreadcrumb(this.breadcrumbs.slice(0, index + 1));
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiBreadcrumbComponent, isStandalone: true, selector: "tcloud-ui-breadcrumb", ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"tcloud-ui-breadcrumb\">\n    <ol class=\"tcloud-ui-breadcrumb-list\">\n        <!-- Link para o Dashboard -->\n        <li class=\"tcloud-ui-breadcrumb-item\">\n          <a [routerLink]=\"['/dashboard']\"><i class=\"fa-light fa-house-blank\"></i>\n            @if (breadcrumbs.length > 0)\n            {\n              <i class=\"fa-light fa-chevron-right\"></i>\n            }\n            @else\n            {\n              P\u00E1gina inicial\n            }\n          </a>\n        </li>\n\n        <!-- Itera\u00E7\u00E3o sobre os itens do breadcrumb -->\n        <li\n            *ngFor=\"let breadcrumb of breadcrumbs; let i = index; let last = last\"\n            class=\"tcloud-ui-breadcrumb-item\"\n            [ngClass]=\"{ 'active': last }\"\n            [attr.aria-current]=\"last ? 'page' : null\">\n            <ng-container *ngIf=\"!last\">\n                <a (click)=\"navigate(breadcrumb.url, i)\">{{ breadcrumb.label }}</a>\n                <i class=\"fa-light fa-chevron-right\"></i>\n            </ng-container>\n            <ng-container *ngIf=\"last\">\n                {{ breadcrumb.label }}\n            </ng-container>\n        </li>\n    </ol>\n</nav>\n", styles: [":host{display:block}.tcloud-ui-breadcrumb-list{display:flex;list-style:none;padding:0;margin:0;margin-bottom:var(--size-24)}.tcloud-ui-breadcrumb-item{display:flex;align-items:center;color:var(--c-neutral-700);font-size:var(--f-size-14);font-family:var(--f-family)}.tcloud-ui-breadcrumb-item a{text-decoration:none;color:inherit;cursor:pointer}.tcloud-ui-breadcrumb-item a:hover{text-decoration:underline}.tcloud-ui-breadcrumb-item i{margin:0}.tcloud-ui-breadcrumb-item i.fa-chevron-right{margin:0 var(--size-12)}.tcloud-ui-breadcrumb-item.active{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-breadcrumb', imports: [
+                        CommonModule,
+                        RouterModule
+                    ], template: "<nav aria-label=\"breadcrumb\" class=\"tcloud-ui-breadcrumb\">\n    <ol class=\"tcloud-ui-breadcrumb-list\">\n        <!-- Link para o Dashboard -->\n        <li class=\"tcloud-ui-breadcrumb-item\">\n          <a [routerLink]=\"['/dashboard']\"><i class=\"fa-light fa-house-blank\"></i>\n            @if (breadcrumbs.length > 0)\n            {\n              <i class=\"fa-light fa-chevron-right\"></i>\n            }\n            @else\n            {\n              P\u00E1gina inicial\n            }\n          </a>\n        </li>\n\n        <!-- Itera\u00E7\u00E3o sobre os itens do breadcrumb -->\n        <li\n            *ngFor=\"let breadcrumb of breadcrumbs; let i = index; let last = last\"\n            class=\"tcloud-ui-breadcrumb-item\"\n            [ngClass]=\"{ 'active': last }\"\n            [attr.aria-current]=\"last ? 'page' : null\">\n            <ng-container *ngIf=\"!last\">\n                <a (click)=\"navigate(breadcrumb.url, i)\">{{ breadcrumb.label }}</a>\n                <i class=\"fa-light fa-chevron-right\"></i>\n            </ng-container>\n            <ng-container *ngIf=\"last\">\n                {{ breadcrumb.label }}\n            </ng-container>\n        </li>\n    </ol>\n</nav>\n", styles: [":host{display:block}.tcloud-ui-breadcrumb-list{display:flex;list-style:none;padding:0;margin:0;margin-bottom:var(--size-24)}.tcloud-ui-breadcrumb-item{display:flex;align-items:center;color:var(--c-neutral-700);font-size:var(--f-size-14);font-family:var(--f-family)}.tcloud-ui-breadcrumb-item a{text-decoration:none;color:inherit;cursor:pointer}.tcloud-ui-breadcrumb-item a:hover{text-decoration:underline}.tcloud-ui-breadcrumb-item i{margin:0}.tcloud-ui-breadcrumb-item i.fa-chevron-right{margin:0 var(--size-12)}.tcloud-ui-breadcrumb-item.active{pointer-events:none}\n"] }]
+        }], ctorParameters: () => [] });
+
 class TCloudUiLoadingTransitionsService {
     constructor() {
         this.ID = 'tcloud-ui-loading-transitions';
@@ -6905,64 +7181,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-class TCloudUiSubNavbarItemComponent {
-    constructor() {
-        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: "tc-rev-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: 'tc-rev-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 TcRevButtonDirective {
     constructor(_el) {
         this._el = _el;
@@ -7136,82 +7354,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             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 TCloudUiDeviceUtilsService {
-    constructor(rendererFactory) {
-        /*** Viewport mobile ***/
-        this.DESKTOP_MIN = 480;
-        this.widthScreen = signal(window.innerWidth);
-        // largura atual da viewport
-        this.width = computed(() => this.widthScreen());
-        this.isDesktop = computed(() => this.width() > this.DESKTOP_MIN);
-        this.isMobile = computed(() => this.width() <= this.DESKTOP_MIN);
-        this.menuHost = null;
-        this.embeddedView = null;
-        this.appRef = inject(ApplicationRef);
-        this.animationBuilder = inject(AnimationBuilder);
-        this.player = null;
-        this.renderer = rendererFactory.createRenderer(null, null);
-        window.addEventListener('resize', () => {
-            this.widthScreen.set(window.innerWidth);
-        });
-    }
-    openDropdownDevice(menuTemplate) {
-        this.menuHost = this.renderer.createElement('div');
-        this.renderer.setStyle(this.menuHost, 'position', 'fixed');
-        this.renderer.setStyle(this.menuHost, 'top', '0');
-        this.renderer.setStyle(this.menuHost, 'left', '0');
-        this.renderer.setStyle(this.menuHost, 'width', '100vw');
-        this.renderer.setStyle(this.menuHost, 'height', '100vh');
-        this.renderer.setStyle(this.menuHost, 'z-index', '9999');
-        this.renderer.setStyle(this.menuHost, 'opacity', '0');
-        this.renderer.appendChild(document.body, this.menuHost);
-        // Impede scroll da página externa enquanto o dropdown está aberto
-        this.renderer.setStyle(document.body, 'overflow', 'hidden');
-        this.renderer.setStyle(document.body, 'touch-action', 'none');
-        this.embeddedView = menuTemplate.createEmbeddedView({});
-        this.appRef.attachView(this.embeddedView);
-        this.embeddedView.rootNodes.forEach((node) => {
-            this.renderer.appendChild(this.menuHost, node);
-        });
-        const fadeIn = this.animationBuilder.build([
-            style({ opacity: 0 }),
-            animate('200ms ease', style({ opacity: 1 })),
-        ]);
-        this.player = fadeIn.create(this.menuHost);
-        this.player.play();
-    }
-    closeDropdownDevice() {
-        if (!this.menuHost)
-            return;
-        const fadeOut = this.animationBuilder.build([
-            style({ opacity: 1 }),
-            animate('200ms ease', style({ opacity: 0 })),
-        ]);
-        this.player = fadeOut.create(this.menuHost);
-        this.player.play();
-        this.player.onDone(() => {
-            this.renderer.removeStyle(document.body, 'overflow');
-            this.renderer.removeStyle(document.body, 'touch-action');
-            if (this.embeddedView) {
-                this.appRef.detachView(this.embeddedView);
-                this.embeddedView.destroy();
-                this.embeddedView = null;
-            }
-            this.renderer.removeChild(document.body, this.menuHost);
-            this.menuHost = null;
-            this.player = null;
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDeviceUtilsService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDeviceUtilsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiDeviceUtilsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
-
 class TcRevCardAccordionComponent {
     constructor() {
         this._viewPort = inject(TCloudUiDeviceUtilsService);
@@ -9130,5 +9272,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, TCloudUiButtonDirective, 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, 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, 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 };
 //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map