@dev-tcloud/tcloud-ui 2.3.2 → 2.3.4

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

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Component, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, Injectable, EventEmitter, Output, ViewChild, forwardRef, Pipe, ViewEncapsulation, Directive, HostListener } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
-import { Subject } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
@@ -98,6 +98,8 @@ class TabMenuService {
         this.info_tab = [];
         this.scrollSubject = new Subject();
         this.scrollState$ = this.scrollSubject.asObservable();
+        this.bottom_lineSubject = new Subject();
+        this.bottom_lineState$ = this.bottom_lineSubject.asObservable();
         this.tabSubject = new Subject();
         this.tabState$ = this.tabSubject.asObservable();
         this.loadingSubject = new Subject();
@@ -112,6 +114,13 @@ class TabMenuService {
     getTabScroll() {
         return this._scroll;
     }
+    setTabBottomLine(bottom_line) {
+        this._bottom_line = bottom_line;
+        this.bottom_lineSubject.next(bottom_line);
+    }
+    getTabBottomLine() {
+        return this._bottom_line;
+    }
     setTabLoading(loading) {
         this._loading = loading;
         this.loadingSubject.next(loading);
@@ -285,7 +294,9 @@ class TCloudUiTabTitleComponent {
         this.tab = '';
         this.active = false;
         this.loading = false;
+        this.bottom_line = false;
         this._disabled = false;
+        this.subscription = new Subscription();
     }
     ngOnInit() {
         if (!this.disabled) {
@@ -293,16 +304,23 @@ class TCloudUiTabTitleComponent {
             if (this.tab !== '') {
                 this.active = (tab === this.tab);
             }
+            const bottom_line = this.tabMenuService.getTabBottomLine();
+            if (typeof bottom_line === 'boolean') {
+                this.bottom_line = bottom_line;
+            }
         }
-        this.subscription = this.tabMenuService.tabState$.subscribe((tab) => {
+        this.subscription?.add(this.tabMenuService.tabState$.subscribe((tab) => {
             if (this.tab !== '') {
                 this.active = (tab === this.tab);
             }
-        });
+        }));
         this.loading = this.tabMenuService.getTabLoading();
-        this.subscription2 = this.tabMenuService.loadingState$.subscribe((loading) => {
+        this.subscription?.add(this.tabMenuService.loadingState$.subscribe((loading) => {
             this.loading = loading;
-        });
+        }));
+        this.subscription?.add(this.tabMenuService.bottom_lineState$.subscribe((bottom_line) => {
+            this.bottom_line = bottom_line;
+        }));
     }
     toTab() {
         if (!this.disabled) {
@@ -315,16 +333,13 @@ class TCloudUiTabTitleComponent {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
-        if (this.subscription2) {
-            this.subscription2.unsubscribe();
-        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiTabTitleComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiTabTitleComponent, selector: "tcloud-ui-tab-title", inputs: { tab: "tab", title: "title", active: "active", disabled: "disabled" }, ngImport: i0, template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-title tab-title\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{border-radius:0!important;height:initial;display:inline-block;margin:0!important;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title-active{background:var(--tc-primary);color:#fff}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiTabTitleComponent, selector: "tcloud-ui-tab-title", inputs: { tab: "tab", title: "title", active: "active", disabled: "disabled" }, ngImport: i0, template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-title tab-title\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n<div class=\"bottom-line\" [class.bottom-line-hover]=\"bottom_line\" ></div>", styles: [".tab-title{border-radius:0!important;height:initial;display:inline-block;margin:0!important;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title-active{background:var(--tc-primary);color:#fff}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiTabTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-tab-title', template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-title tab-title\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-title{border-radius:0!important;height:initial;display:inline-block;margin:0!important;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title-active{background:var(--tc-primary);color:#fff}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}\n"] }]
+            args: [{ selector: 'tcloud-ui-tab-title', template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-title-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-title tab-title\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n<div class=\"bottom-line\" [class.bottom-line-hover]=\"bottom_line\" ></div>", styles: [".tab-title{border-radius:0!important;height:initial;display:inline-block;margin:0!important;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:20px;cursor:pointer;min-width:60px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .25s}.tab-title-active{background:var(--tc-primary);color:#fff}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}@media (max-width: 1580px){.tab-title{font-size:11px;padding:20px 14px}}@media (max-width: 1440px){.tab-title{font-size:10px;padding:20px 13px}}\n"] }]
         }], ctorParameters: function () { return [{ type: TabMenuService }]; }, propDecorators: { tab: [{
                 type: Input
             }], title: [{
@@ -347,6 +362,8 @@ class TCloudUiTabSubtitleComponent {
         this.active = false;
         this._disabled = false;
         this.loading = false;
+        this.bottom_line = false;
+        this.subscription = new Subscription();
     }
     ngOnInit() {
         if (!this.disabled) {
@@ -354,16 +371,23 @@ class TCloudUiTabSubtitleComponent {
             if (this.tab !== '') {
                 this.active = (tab === this.tab);
             }
+            const bottom_line = this.tabMenuService.getTabBottomLine();
+            if (typeof bottom_line === 'boolean') {
+                this.bottom_line = bottom_line;
+            }
         }
-        this.subscription = this.tabMenuService.tabState$.subscribe((tab) => {
+        this.subscription?.add(this.tabMenuService.tabState$.subscribe((tab) => {
             if (this.tab !== '') {
                 this.active = (tab === this.tab);
             }
-        });
+        }));
         this.loading = this.tabMenuService.getTabLoading();
-        this.subscription2 = this.tabMenuService.loadingState$.subscribe((loading) => {
+        this.subscription?.add(this.tabMenuService.loadingState$.subscribe((loading) => {
             this.loading = loading;
-        });
+        }));
+        this.subscription?.add(this.tabMenuService.bottom_lineState$.subscribe((bottom_line) => {
+            this.bottom_line = bottom_line;
+        }));
     }
     toTab() {
         if (!this.disabled) {
@@ -376,16 +400,13 @@ class TCloudUiTabSubtitleComponent {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
-        if (this.subscription2) {
-            this.subscription2.unsubscribe();
-        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiTabSubtitleComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiTabSubtitleComponent, selector: "tcloud-ui-tab-subtitle", inputs: { tab: "tab", active: "active", disabled: "disabled" }, ngImport: i0, template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-subtitle-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-subtitle tab-subtitle\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-subtitle{cursor:pointer;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:0;margin:20px 10px}.tab-subtitle-active{color:var(--tc-primary)}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiTabSubtitleComponent, selector: "tcloud-ui-tab-subtitle", inputs: { tab: "tab", active: "active", disabled: "disabled" }, ngImport: i0, template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-subtitle-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-subtitle tab-subtitle\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n<div class=\"bottom-line\" [class.bottom-line-hover]=\"bottom_line\" ></div>\r\n", styles: [".tab-subtitle{cursor:pointer;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:0;margin:20px 10px;opacity:.8}.tab-subtitle:hover{opacity:1}.tab-subtitle-active{color:var(--tc-primary);opacity:1}.loading{cursor:progress!important}button:disabled{opacity:.6;cursor:not-allowed!important}button:disabled:hover{opacity:.6!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiTabSubtitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-tab-subtitle', template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-subtitle-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-subtitle tab-subtitle\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n", styles: [".tab-subtitle{cursor:pointer;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:0;margin:20px 10px}.tab-subtitle-active{color:var(--tc-primary)}.loading{cursor:progress!important}button:disabled{opacity:.7;cursor:not-allowed!important}\n"] }]
+            args: [{ selector: 'tcloud-ui-tab-subtitle', template: "<button [class.loading]=\"loading\" [attr.data-id]=\"tab\" [class.tab-subtitle-active]=\"active\" [disabled]=\"disabled || loading\" type=\"button\" (click)=\"toTab()\" class=\"tcloud-ui-tab-subtitle tab-subtitle\" >\r\n  <ng-content></ng-content>\r\n</button>\r\n<div class=\"bottom-line\" [class.bottom-line-hover]=\"bottom_line\" ></div>\r\n", styles: [".tab-subtitle{cursor:pointer;color:var(--cinza);border:none;background:none;text-transform:uppercase;font-size:11px;padding:0;margin:20px 10px;opacity:.8}.tab-subtitle:hover{opacity:1}.tab-subtitle-active{color:var(--tc-primary);opacity:1}.loading{cursor:progress!important}button:disabled{opacity:.6;cursor:not-allowed!important}button:disabled:hover{opacity:.6!important}\n"] }]
         }], ctorParameters: function () { return [{ type: TabMenuService }]; }, propDecorators: { tab: [{
                 type: Input
             }], active: [{
@@ -402,13 +423,20 @@ class TCloudUiTabHeadComponent {
         }
     }
     get scroll() { return this._scroll; }
+    set bottom_line(bottom_line) {
+        if (typeof bottom_line === 'boolean') {
+            this._bottom_line = bottom_line;
+            this.tabMenuService.setTabBottomLine(bottom_line);
+        }
+    }
+    get bottom_line() { return this._bottom_line; }
     constructor(tabMenuService) {
         this.tabMenuService = tabMenuService;
         this._scroll = true;
         this.ID = '';
         this.background = true;
         this.backgroundColor = 'transparent'; // var(--cinza4)
-        this.bottom_line = false;
+        this._bottom_line = false;
     }
     ngOnInit() {
         if (this.background) {
@@ -453,11 +481,11 @@ class TCloudUiTabHeadComponent {
         this.scrollSuave(ccs_s, action == 'next' ? wid + ccs_s : ccs_s - wid, 0, ccs);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, deps: [{ token: TabMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiTabHeadComponent, selector: "tcloud-ui-tab-head", inputs: { scroll: "scroll", background: "background", backgroundColor: "backgroundColor", bottom_line: "bottom_line" }, ngImport: i0, template: "\r\n\r\n<table class=\"tcloud-ui-tab-head area-navigation\">\r\n  <tr>\r\n    <td *ngIf=\"scroll\">\r\n      <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n    </td>\r\n\r\n    <td>\r\n\r\n    </td>\r\n\r\n    <td *ngIf=\"scroll\">\r\n      <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n    </td>\r\n  </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + backgroundColor + ';'\" [class.tab-full]=\"!scroll\" [class.tab-subtitle-line-bottom]=\"bottom_line\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}.tab-full{margin-left:0!important;margin-right:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TCloudUiTabHeadComponent, selector: "tcloud-ui-tab-head", inputs: { scroll: "scroll", background: "background", backgroundColor: "backgroundColor", bottom_line: "bottom_line" }, ngImport: i0, template: "\r\n\r\n<table class=\"tcloud-ui-tab-head area-navigation\">\r\n  <tr>\r\n    <td *ngIf=\"scroll\">\r\n      <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n    </td>\r\n\r\n    <td>\r\n\r\n    </td>\r\n\r\n    <td *ngIf=\"scroll\">\r\n      <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n    </td>\r\n  </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + backgroundColor + ';'\" [class.tab-full]=\"!scroll\" [class.tab-subtitle-line-bottom]=\"bottom_line\">\r\n  <ng-content></ng-content>  \r\n</div>\r\n<div class=\"hr-border-bottom\" *ngIf=\"bottom_line\"></div>\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}.hr-border-bottom{border-bottom:none;border-left:none;border-right:none;margin-top:0!important;border-top:1px solid #ccc;margin-bottom:0}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}.tab-full{margin-left:0!important;margin-right:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TCloudUiTabHeadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-tab-head', template: "\r\n\r\n<table class=\"tcloud-ui-tab-head area-navigation\">\r\n  <tr>\r\n    <td *ngIf=\"scroll\">\r\n      <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n    </td>\r\n\r\n    <td>\r\n\r\n    </td>\r\n\r\n    <td *ngIf=\"scroll\">\r\n      <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n    </td>\r\n  </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + backgroundColor + ';'\" [class.tab-full]=\"!scroll\" [class.tab-subtitle-line-bottom]=\"bottom_line\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;border-radius:10px;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}.tab-full{margin-left:0!important;margin-right:0!important}\n"] }]
+            args: [{ selector: 'tcloud-ui-tab-head', template: "\r\n\r\n<table class=\"tcloud-ui-tab-head area-navigation\">\r\n  <tr>\r\n    <td *ngIf=\"scroll\">\r\n      <button (click)=\"to_scroll('prev')\"> <i class=\"fas fa-chevron-left\"></i> </button>\r\n    </td>\r\n\r\n    <td>\r\n\r\n    </td>\r\n\r\n    <td *ngIf=\"scroll\">\r\n      <button (click)=\"to_scroll('next')\"> <i class=\"fas fa-chevron-right\"></i> </button>\r\n    </td>\r\n  </tr>\r\n</table>\r\n\r\n<div class=\"tc-menu {{ ID }}\" [attr.style]=\"'background: ' + backgroundColor + ';'\" [class.tab-full]=\"!scroll\" [class.tab-subtitle-line-bottom]=\"bottom_line\">\r\n  <ng-content></ng-content>  \r\n</div>\r\n<div class=\"hr-border-bottom\" *ngIf=\"bottom_line\"></div>\r\n", styles: [".area-navigation{display:none;width:100%;line-height:0}.area-navigation button{padding:0!important}.area-navigation td{width:100%;height:0;line-height:0}.area-navigation td:first-child{width:10px!important;text-align:left}.area-navigation td:first-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;right:0;border:none;background-color:transparent;font-size:15px;height:30px}.area-navigation td:last-child{width:10px!important;text-align:right}.area-navigation td:last-child button{color:var(--tc-primary);cursor:pointer;position:relative;top:15px;left:0;border:none;background-color:transparent;font-size:15px;height:30px}.tc-menu{display:flex;align-items:center;overflow:hidden;margin-bottom:5px;z-index:1;position:relative}.hr-border-bottom{border-bottom:none;border-left:none;border-right:none;margin-top:0!important;border-top:1px solid #ccc;margin-bottom:0}@media (max-width: 1440px){.area-navigation{display:block!important;position:relative;top:0;height:2px}.tc-menu{margin-left:15px;margin-right:15px}}.tab-full{margin-left:0!important;margin-right:0!important}\n"] }]
         }], ctorParameters: function () { return [{ type: TabMenuService }]; }, propDecorators: { scroll: [{
                 type: Input
             }], background: [{
@@ -4598,14 +4626,18 @@ class TCloudUiTooltipDirective {
         };
         let hoverOutCallback = () => {
             this.remove = true;
-            const customDiv = document.querySelector('.tc-directive-tooltip');
-            if (customDiv) {
-                customDiv.remove();
+            const customDivAll = document.querySelectorAll('.tc-directive-tooltip');
+            if (customDivAll && customDivAll.length > 0) {
+                customDivAll.forEach((_customDiv) => {
+                    if (_customDiv) {
+                        _customDiv.remove();
+                    }
+                });
             }
         };
         hoverOutCallback;
         setTimeout(() => {
-            const scrollTop = window.scrollY || window.pageYOffset;
+            const scrollTop = window?.scrollY || window?.pageYOffset;
             const tooltip = this.renderer.createElement('div');
             const rect = this.el.nativeElement?.getBoundingClientRect();
             // const direction = this.el.nativeElement?.attributes['ng-reflect--t-cdirection']?.value || 'top';
@@ -4642,15 +4674,17 @@ class TCloudUiTooltipDirective {
     }
     onMouseOut(event) {
         this.remove = true;
-        this.remove_tooltip(document.querySelector('.tc-directive-tooltip'));
-    }
-    remove_tooltip(customDiv) {
-        if (customDiv) {
+        const customDivAll = document.querySelectorAll('.tc-directive-tooltip');
+        if (customDivAll && customDivAll.length > 0) {
             setTimeout(() => {
                 if (this.remove) {
-                    customDiv.remove();
+                    customDivAll.forEach((_customDiv) => {
+                        if (_customDiv) {
+                            _customDiv.remove();
+                        }
+                    });
                 }
-            }, 30);
+            }, 25);
         }
     }
     set TCtooltip(tooltip) {