@dev-tcloud/tcloud-ui 5.3.0 → 5.3.2

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

@@ -4656,6 +4656,11 @@ class TCloudUiTooltipDirective {
         if (tooltip) {
             this.info_text = typeof tooltip === 'object' ? '' : tooltip;
             if (this.tooltipVisible && this.tooltipElement) {
+                // Se não há texto válido, remove o tooltip
+                if (!this.isValidTooltipText(this.info_text)) {
+                    this.removeTooltip();
+                    return;
+                }
                 // Atualiza o conteúdo do tooltip diretamente
                 this.tooltipElement.innerHTML = this.info_text;
                 // Reaplica a posição calculada anteriormente para manter a centralização
@@ -4679,7 +4684,7 @@ class TCloudUiTooltipDirective {
         this._direction = 'top';
     }
     onDocumentClick(event) {
-        if (this.tooltipMode === 'click' && this.tooltipVisible && this.info_text) {
+        if (this.tooltipMode === 'click' && this.tooltipVisible && this.isValidTooltipText(this.info_text)) {
             const clickedInside = this.el.nativeElement.contains(event.target) || (this.tooltipElement?.contains(event.target));
             if (!clickedInside) {
                 this.removeTooltip();
@@ -4687,7 +4692,7 @@ class TCloudUiTooltipDirective {
         }
     }
     onMouseOver(event) {
-        if (this.tooltipMode === 'hover' && !this.tooltipVisible && this.info_text) {
+        if (this.tooltipMode === 'hover' && !this.tooltipVisible && this.isValidTooltipText(this.info_text)) {
             this.createTooltip(event);
             this.tooltipVisible = true;
         }
@@ -4705,12 +4710,15 @@ class TCloudUiTooltipDirective {
             if (this.tooltipVisible) {
                 this.removeTooltip();
             }
-            else {
+            else if (this.isValidTooltipText(this.info_text)) {
                 this.createTooltip(event);
             }
             this.tooltipVisible = !this.tooltipVisible;
         }
     }
+    isValidTooltipText(text) {
+        return !!(text && text.trim().length > 0);
+    }
     createTooltip(event) {
         const scrollTop = window?.scrollY || window?.pageYOffset;
         const tooltip = this.renderer.createElement('div');
@@ -7714,6 +7722,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+/**
+ *
+ * @param echarts echars instance
+ * @param chartData chart info to build the config
+ * @returns a bar chart config for echarts with the given data
+ */
+function echartBarConfig(echarts, chartData) {
+    const { xAxisName, xAxisLabels, seriesData, tooltipFormatter, yAxisLabelFormatter, xAxisLabelFormatter } = chartData;
+    return {
+        grid: {
+            left: '6.5%',
+            top: 48,
+            right: '2%',
+            bottom: 56
+        },
+        tooltip: {
+            trigger: 'axis',
+            backgroundColor: '#131313',
+            formatter: tooltipFormatter,
+            textStyle: {
+                color: '#f3f3f3',
+                fontSize: 12,
+                fontFamily: 'Nunito Sans'
+            }
+        },
+        xAxis: {
+            type: 'category',
+            axisLabel: {
+                color: '#131313',
+                fontSize: 14,
+                fontFamily: 'Nunito Sans',
+                margin: 16,
+                formatter: xAxisLabelFormatter,
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#BAC0C6'
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            data: xAxisLabels,
+            name: xAxisName,
+            nameLocation: 'start',
+            nameTextStyle: {
+                align: 'left',
+                color: '#131313',
+                fontFamily: 'Nunito Sans',
+                fontSize: 14,
+                fontWeight: 700,
+                padding: [0, 0, -46, -36]
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                formatter: yAxisLabelFormatter,
+                align: 'left',
+                color: '#131313',
+                fontSize: 14,
+                fontFamily: 'Nunito Sans',
+                inside: false,
+                padding: [-40, 0, 0, -40]
+            }
+        },
+        series: seriesData.map((serie) => ({
+            name: serie.serieName,
+            type: 'bar',
+            data: serie.values,
+            itemStyle: {
+                barBorderRadius: [8, 8, 8, 8],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#0897E9' },
+                    { offset: 1, color: '#75D8FF' }
+                ])
+            }
+        }))
+    };
+}
+
 class TcRevEmptyContentComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevEmptyContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TcRevEmptyContentComponent, isStandalone: true, selector: "tc-rev-empty-content", ngImport: i0, template: "<div class=\"tc-rev-empty-content f-family f-sm c-neutral-700 pad-x-16 pad-y-16 bg-c-neutral-200 bor-rad-8\">\n  <ng-content></ng-content>\n</div>\n", styles: [""] }); }
@@ -7852,6 +7948,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Verifica se um elemento de texto está elipsado (texto cortado com ...)
+ * @param element - O elemento HTML que contém o texto
+ * @returns true se o texto estiver elipsado, false caso contrário
+ */
+function isElementTextEllipsed(element) {
+    if (!element)
+        return false;
+    // Verifica se o scrollWidth é maior que o clientWidth
+    // Isso indica que o texto está sendo cortado
+    return element.scrollWidth > element.clientWidth;
+}
+/**
+ * Verifica se um texto específico estaria elipsado baseado no texto fornecido
+ * @param text - O texto a ser verificado
+ * @param containerWidth - Largura do container (opcional, usa o padrão se não informado)
+ * @returns true se o texto seria elipsado
+ */
+function isTextEllipsed(text, containerWidth) {
+    if (!text)
+        return false;
+    // Cria um elemento temporário para medir o texto
+    const tempElement = document.createElement('span');
+    tempElement.style.visibility = 'hidden';
+    tempElement.style.position = 'absolute';
+    tempElement.style.whiteSpace = 'nowrap';
+    tempElement.style.fontSize = '1rem'; // f-md
+    tempElement.style.fontWeight = '500'; // f-weight-500
+    tempElement.style.fontFamily = getComputedStyle(document.body).fontFamily;
+    tempElement.textContent = text;
+    document.body.appendChild(tempElement);
+    const textWidth = tempElement.scrollWidth;
+    // Calcula a largura máxima disponível: largura do container menos espaço do botão e margins
+    const maxWidth = containerWidth || 150; // ~150px considerando o botão de 24px + margens
+    document.body.removeChild(tempElement);
+    return textWidth > maxWidth;
+}
+// export class EllipsedTextHelper
+// {
+//   public static isEllipsed(id: string): boolean
+//   {
+//     const element = document.querySelector<any>(`#${id}`);
+//     return element ? (element.offsetWidth < element.scrollWidth) : false;
+//   }
+//   /**
+//    *
+//    * @param _textField - Stands for the text you want to compare
+//    * @param _fontProperties - Text CSS properties (font-size & font-family)
+//    * @param _divId - divId you want to compare
+//    * @param _isEllipsed - is it Ellipsed? (optional)
+//    */
+//   public static calculate( _textField: string, _fontProperties: string, _divId: string, _isEllipsed: boolean = false, _whiteSpaceNoWrap = true): boolean
+//   {
+//     if (_isEllipsed)
+//     {
+//       return true;
+//     }
+//     const textDiv = document.getElementById(_divId);
+//     if (textDiv)
+//     {
+//       const widthText = this.textWidthCalc(_textField, _fontProperties, _whiteSpaceNoWrap);
+//       return widthText > textDiv.clientWidth;
+//     }
+//     return false
+//   }
+//   public static textWidthCalc(_text: string, _fontProperties: string, _whiteSpaceNoWrap: boolean): number
+//   {
+//     let tag = document.createElement('div');
+//     tag.style.position = 'absolute';
+//     tag.style.left = '-99in';
+//     tag.style.font = _fontProperties;
+//     tag.innerHTML = _text;
+//     if (_whiteSpaceNoWrap)
+//     {
+//       tag.style.whiteSpace = 'nowrap';
+//     }
+//     document.body.appendChild(tag);
+//     const result = tag.clientWidth;
+//     document.body.removeChild(tag);
+//     return result;
+//   }
+// }
+
 class TcRevMultiInputComponent {
     constructor() {
         this.autoFocus = false;
@@ -7900,7 +8079,10 @@ class TcRevMultiInputComponent {
             if (this.autoFocus) {
                 this.multiInputRef?.nativeElement?.focus();
             }
-        });
+        }, 0);
+    }
+    isEllipsed(text) {
+        return isTextEllipsed(text);
     }
     addItem() {
         const newItem = this.multiInputForm.get('multiInput').value;
@@ -7926,14 +8108,15 @@ class TcRevMultiInputComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevMultiInputComponent, isStandalone: true, selector: "tc-rev-multi-input", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: false, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, initialList: { classPropertyName: "initialList", publicName: "initialList", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", onChangeList: "onChangeList" }, viewQueries: [{ propertyName: "multiInputRef", first: true, predicate: ["multiInputRef "], descendants: true }], ngImport: i0, template: "<div class=\"tc-rev-multi-input\">\n\t<div class=\"tc-rev-multi-input__input-container\">\n\t\t<form\n      [formGroup]=\"multiInputForm\"\n      (ngSubmit)=\"addItem()\">\n\n      <input\n        #multiInputRef\n        type=\"text\"\n        class=\"tc-rev-input-control\"\n        formControlName=\"multiInput\"\n      />\n\n      <button\n        class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--primary-filled add-button\"\n        type=\"submit\"\n        [disabled]=\"multiInputForm.invalid || disabled()\">\n\t\t\t\tAdicionar\n\t\t\t</button>\n\t\t</form>\n\t</div>\n\n\t@if (description()) {\n    <span class=\"description f-sm c-neutral-700 mar-t-4 mar-b-16 d-block\">\n      {{ description() }}\n    </span>\n\t}\n\n  @if (itemsList().length > 0) {\n    <div class=\"tc-rev-multi-input__added-list\">\n      @for (item of itemsList(); track item; let i = $index) {\n        <div class=\"list-item h-28 pad-x-8 f-md f-weight-500 bor-rad-4 bg-c-neutral-100\">\n          <span class=\"c-primary-500 mar-r-4\">{{ item }}</span>\n\n          <button class=\"h-24 w-24 d-inline-block cursor-pointer bg-c-transparent c-neutral-700 bor-none\" (click)=\"removeItem(i)\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.tc-rev-multi-input__input-container{height:var(--size-40);position:relative}.tc-rev-multi-input__input-container .tc-rev-input-control{height:var(--size-40);position:absolute;top:0;left:0;width:100%;z-index:1}.tc-rev-multi-input__input-container .add-button{display:block;height:var(--size-34);min-height:var(--size-34);max-height:var(--size-34);position:absolute;right:3px;top:3px;width:6.125rem;z-index:2}.tc-rev-multi-input__added-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.tc-rev-multi-input__added-list .list-item{align-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevMultiInputComponent, isStandalone: true, selector: "tc-rev-multi-input", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: false, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, initialList: { classPropertyName: "initialList", publicName: "initialList", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", onChangeList: "onChangeList" }, viewQueries: [{ propertyName: "multiInputRef", first: true, predicate: ["multiInputRef "], descendants: true }], ngImport: i0, template: "<div class=\"tc-rev-multi-input\">\n\t<div class=\"tc-rev-multi-input__input-container\">\n\t\t<form\n      [formGroup]=\"multiInputForm\"\n      (ngSubmit)=\"addItem()\">\n\n      <input\n        #multiInputRef\n        type=\"text\"\n        class=\"tc-rev-input-control\"\n        formControlName=\"multiInput\"\n      />\n\n      <button\n        class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--primary-filled add-button\"\n        type=\"submit\"\n        [disabled]=\"multiInputForm.invalid || disabled()\">\n\t\t\t\tAdicionar\n\t\t\t</button>\n\t\t</form>\n\t</div>\n\n\t@if (description()) {\n    <span class=\"description f-sm c-neutral-700 mar-t-4 mar-b-16 d-block\">\n      {{ description() }}\n    </span>\n\t}\n\n  @if (itemsList().length > 0) {\n    <div class=\"tc-rev-multi-input__added-list\">\n      @for (item of itemsList(); track item; let i = $index) {\n        <div class=\"list-item h-28 pad-x-8 f-md f-weight-500 bor-rad-4 bg-c-neutral-100\">\n          <span\n            class=\"c-primary-500 mar-r-4 list-item__text\"\n            [TCtooltip]=\"isEllipsed(item) ? item : ''\"\n            TCdirection=\"top\">{{ item }}</span>\n\n          <button class=\"h-24 w-24 d-inline-block cursor-pointer bg-c-transparent c-neutral-700 bor-none\" (click)=\"removeItem(i)\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.tc-rev-multi-input__input-container{height:var(--size-40);position:relative}.tc-rev-multi-input__input-container .tc-rev-input-control{height:var(--size-40);position:absolute;top:0;left:0;width:100%;z-index:1}.tc-rev-multi-input__input-container .add-button{display:block;height:var(--size-34);min-height:var(--size-34);max-height:var(--size-34);position:absolute;right:3px;top:3px;width:6.125rem;z-index:2}.tc-rev-multi-input__added-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.tc-rev-multi-input__added-list .list-item{align-content:center;max-width:12.5rem;display:flex;align-items:center}.tc-rev-multi-input__added-list .list-item__text{flex:1;max-width:calc(100% - 1.75rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TCloudUiDirectiveModule }, { kind: "directive", type: TCloudUiTooltipDirective, selector: "[TCtooltip]", inputs: ["tooltipMode", "TCtooltip", "TCdirection"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevMultiInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tc-rev-multi-input', imports: [
                         CommonModule,
-                        ReactiveFormsModule
-                    ], template: "<div class=\"tc-rev-multi-input\">\n\t<div class=\"tc-rev-multi-input__input-container\">\n\t\t<form\n      [formGroup]=\"multiInputForm\"\n      (ngSubmit)=\"addItem()\">\n\n      <input\n        #multiInputRef\n        type=\"text\"\n        class=\"tc-rev-input-control\"\n        formControlName=\"multiInput\"\n      />\n\n      <button\n        class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--primary-filled add-button\"\n        type=\"submit\"\n        [disabled]=\"multiInputForm.invalid || disabled()\">\n\t\t\t\tAdicionar\n\t\t\t</button>\n\t\t</form>\n\t</div>\n\n\t@if (description()) {\n    <span class=\"description f-sm c-neutral-700 mar-t-4 mar-b-16 d-block\">\n      {{ description() }}\n    </span>\n\t}\n\n  @if (itemsList().length > 0) {\n    <div class=\"tc-rev-multi-input__added-list\">\n      @for (item of itemsList(); track item; let i = $index) {\n        <div class=\"list-item h-28 pad-x-8 f-md f-weight-500 bor-rad-4 bg-c-neutral-100\">\n          <span class=\"c-primary-500 mar-r-4\">{{ item }}</span>\n\n          <button class=\"h-24 w-24 d-inline-block cursor-pointer bg-c-transparent c-neutral-700 bor-none\" (click)=\"removeItem(i)\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.tc-rev-multi-input__input-container{height:var(--size-40);position:relative}.tc-rev-multi-input__input-container .tc-rev-input-control{height:var(--size-40);position:absolute;top:0;left:0;width:100%;z-index:1}.tc-rev-multi-input__input-container .add-button{display:block;height:var(--size-34);min-height:var(--size-34);max-height:var(--size-34);position:absolute;right:3px;top:3px;width:6.125rem;z-index:2}.tc-rev-multi-input__added-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.tc-rev-multi-input__added-list .list-item{align-content:center}\n"] }]
+                        ReactiveFormsModule,
+                        TCloudUiDirectiveModule
+                    ], template: "<div class=\"tc-rev-multi-input\">\n\t<div class=\"tc-rev-multi-input__input-container\">\n\t\t<form\n      [formGroup]=\"multiInputForm\"\n      (ngSubmit)=\"addItem()\">\n\n      <input\n        #multiInputRef\n        type=\"text\"\n        class=\"tc-rev-input-control\"\n        formControlName=\"multiInput\"\n      />\n\n      <button\n        class=\"tc-rev-btn tc-rev-btn--sm tc-rev-btn--primary-filled add-button\"\n        type=\"submit\"\n        [disabled]=\"multiInputForm.invalid || disabled()\">\n\t\t\t\tAdicionar\n\t\t\t</button>\n\t\t</form>\n\t</div>\n\n\t@if (description()) {\n    <span class=\"description f-sm c-neutral-700 mar-t-4 mar-b-16 d-block\">\n      {{ description() }}\n    </span>\n\t}\n\n  @if (itemsList().length > 0) {\n    <div class=\"tc-rev-multi-input__added-list\">\n      @for (item of itemsList(); track item; let i = $index) {\n        <div class=\"list-item h-28 pad-x-8 f-md f-weight-500 bor-rad-4 bg-c-neutral-100\">\n          <span\n            class=\"c-primary-500 mar-r-4 list-item__text\"\n            [TCtooltip]=\"isEllipsed(item) ? item : ''\"\n            TCdirection=\"top\">{{ item }}</span>\n\n          <button class=\"h-24 w-24 d-inline-block cursor-pointer bg-c-transparent c-neutral-700 bor-none\" (click)=\"removeItem(i)\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.tc-rev-multi-input__input-container{height:var(--size-40);position:relative}.tc-rev-multi-input__input-container .tc-rev-input-control{height:var(--size-40);position:absolute;top:0;left:0;width:100%;z-index:1}.tc-rev-multi-input__input-container .add-button{display:block;height:var(--size-34);min-height:var(--size-34);max-height:var(--size-34);position:absolute;right:3px;top:3px;width:6.125rem;z-index:2}.tc-rev-multi-input__added-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.tc-rev-multi-input__added-list .list-item{align-content:center;max-width:12.5rem;display:flex;align-items:center}.tc-rev-multi-input__added-list .list-item__text{flex:1;max-width:calc(100% - 1.75rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { autoFocus: [{
                 type: Input
             }], multiInputRef: [{
@@ -8241,16 +8424,17 @@ class TcRevTabItemComponent {
         this.active = input(false);
         this.url = input('');
         this.disabled = input(false);
+        this.fullWidth = input(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TcRevTabItemComponent, isStandalone: true, selector: "tc-rev-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<a\n  *ngIf=\"this.url()\"\n  class=\"tc-rev-tab-item\"\n  [class.disabled]=\"this.disabled()\"\n  [routerLinkActive]=\"'active'\"\n  [routerLink]=\"[this.url()]\"\n  (click)=\"this.onClick.emit($event)\">\n  <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n  *ngIf=\"!this.url()\"\n  class=\"tc-rev-tab-item\"\n  [class.active]=\"this.active()\"\n  [disabled]=\"this.disabled()\"\n  (click)=\"this.onClick.emit($event)\">\n  <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TcRevTabItemComponent, isStandalone: true, selector: "tc-rev-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<a\n  *ngIf=\"this.url()\"\n  class=\"tc-rev-tab-item\"\n  [class.disabled]=\"this.disabled()\"\n  [class.full-width]=\"this.fullWidth()\"\n  [routerLinkActive]=\"'active'\"\n  [routerLink]=\"[this.url()]\"\n  (click)=\"this.onClick.emit($event)\">\n  <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n  *ngIf=\"!this.url()\"\n  class=\"tc-rev-tab-item\"\n  [class.active]=\"this.active()\"\n  [class.full-width]=\"this.fullWidth()\"\n  [disabled]=\"this.disabled()\"\n  (click)=\"this.onClick.emit($event)\">\n  <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tc-rev-tab-item.full-width,.tc-rev-tab-item:link.full-width{width:100%}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevTabItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tc-rev-tab-item', imports: [
                         CommonModule,
                         RouterModule
-                    ], template: "<a\n  *ngIf=\"this.url()\"\n  class=\"tc-rev-tab-item\"\n  [class.disabled]=\"this.disabled()\"\n  [routerLinkActive]=\"'active'\"\n  [routerLink]=\"[this.url()]\"\n  (click)=\"this.onClick.emit($event)\">\n  <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n  *ngIf=\"!this.url()\"\n  class=\"tc-rev-tab-item\"\n  [class.active]=\"this.active()\"\n  [disabled]=\"this.disabled()\"\n  (click)=\"this.onClick.emit($event)\">\n  <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}\n"] }]
+                    ], template: "<a\n  *ngIf=\"this.url()\"\n  class=\"tc-rev-tab-item\"\n  [class.disabled]=\"this.disabled()\"\n  [class.full-width]=\"this.fullWidth()\"\n  [routerLinkActive]=\"'active'\"\n  [routerLink]=\"[this.url()]\"\n  (click)=\"this.onClick.emit($event)\">\n  <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n  *ngIf=\"!this.url()\"\n  class=\"tc-rev-tab-item\"\n  [class.active]=\"this.active()\"\n  [class.full-width]=\"this.fullWidth()\"\n  [disabled]=\"this.disabled()\"\n  (click)=\"this.onClick.emit($event)\">\n  <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}.tc-rev-tab-item,.tc-rev-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tc-rev-tab-item.full-width,.tc-rev-tab-item:link.full-width{width:100%}.tc-rev-tab-item:hover,.tc-rev-tab-item:focus,.tc-rev-tab-item:link:hover,.tc-rev-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:active,.tc-rev-tab-item.selected,.tc-rev-tab-item.active,.tc-rev-tab-item:link:active,.tc-rev-tab-item:link.selected,.tc-rev-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tc-rev-tab-item:disabled,.tc-rev-tab-item.disabled,.tc-rev-tab-item:link:disabled,.tc-rev-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}\n"] }]
         }] });
 
 var TagColorsEnum;
@@ -8655,5 +8839,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionModule, TCloudUiAccordionTitleComponent, TCloudUiAlignDirective, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiChoiceIssuesComponent, TCloudUiChoiceIssuesModule, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerModule, TCloudUiDatepickerTimeComponent, TCloudUiDatepickerTimeModule, TCloudUiDigitOnlyDirective, TCloudUiDirectiveModule, TCloudUiElCopyDirective, TCloudUiFiltersComponent, TCloudUiFiltersModule, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiInputPasswordComponent, TCloudUiInputPasswordModule, TCloudUiInputSearchComponent, TCloudUiInputSearchModule, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLabelTokenModule, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLineStepTitleComponent, TCloudUiLineStepTitleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiLoadingComponent, TCloudUiLoadingModule, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiInputModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiMultiplesValuesComponent, TCloudUiMultiplesValuesModule, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNotFoundModule, TCloudUiNumberStepComponent, TCloudUiNumberStepModule, TCloudUiPipesModule, TCloudUiProgressBarComponent, TCloudUiProgressBarModule, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiReorderItemsModule, TCloudUiScrollBoxComponent, TCloudUiScrollBoxModule, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTableModule, TCloudUiTooltipDirective, TCloudUiWelcomeComponent, TCloudUiWelcomeModule, 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, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevWizardStepsComponent, ToTextPipe };
+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, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionModule, TCloudUiAccordionTitleComponent, TCloudUiAlignDirective, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiChoiceIssuesComponent, TCloudUiChoiceIssuesModule, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListModule, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerModule, TCloudUiDatepickerTimeComponent, TCloudUiDatepickerTimeModule, TCloudUiDigitOnlyDirective, TCloudUiDirectiveModule, TCloudUiElCopyDirective, TCloudUiFiltersComponent, TCloudUiFiltersModule, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiInputPasswordComponent, TCloudUiInputPasswordModule, TCloudUiInputSearchComponent, TCloudUiInputSearchModule, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLabelTokenModule, TCloudUiLineStepCircleComponent, TCloudUiLineStepCircleModule, TCloudUiLineStepTitleComponent, TCloudUiLineStepTitleModule, TCloudUiLinhaLogoComponent, TCloudUiLinhaLogoModule, TCloudUiLoadingComponent, TCloudUiLoadingModule, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModalModule, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiInputModule, TCloudUiMultiSelectComponent, TCloudUiMultiSelectModule, TCloudUiMultiplesValuesComponent, TCloudUiMultiplesValuesModule, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNotFoundModule, TCloudUiNumberStepComponent, TCloudUiNumberStepModule, TCloudUiPipesModule, TCloudUiProgressBarComponent, TCloudUiProgressBarModule, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiReorderItemsModule, TCloudUiScrollBoxComponent, TCloudUiScrollBoxModule, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabMenuModule, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTableModule, TCloudUiTooltipDirective, TCloudUiWelcomeComponent, TCloudUiWelcomeModule, 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, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevWizardStepsComponent, ToTextPipe, echartBarConfig, isTextEllipsed };
 //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map