@dev-tcloud/tcloud-ui 2.3.2 → 2.3.4

package/lib/_directives/tooltip/tooltip.directive.d.ts

@@ -7,7 +7,6 @@ export declare class TCloudUiTooltipDirective {
     info_text: string;
     onMouseOver(event: MouseEvent): void;
     onMouseOut(event: MouseEvent): void;
-    remove_tooltip(customDiv: any): void;
     set TCtooltip(tooltip: any);
     private _direction;
     set TCdirection(direction: any);

package/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-head/tcloud-ui-tab-head.component.d.ts

@@ -9,7 +9,9 @@ export declare class TCloudUiTabHeadComponent implements OnInit {
     ID: string;
     background: boolean;
     backgroundColor: '#FFFFFF' | '#F1F1F1' | 'white' | 'transparent';
-    bottom_line: boolean;
+    private _bottom_line;
+    set bottom_line(bottom_line: boolean);
+    get bottom_line(): boolean;
     constructor(tabMenuService: TabMenuService);
     ngOnInit(): void;
     generateID(): string;

package/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-subtitle/tcloud-ui-tab-subtitle.component.d.ts

@@ -10,8 +10,8 @@ export declare class TCloudUiTabSubtitleComponent implements OnInit, OnDestroy {
     set disabled(disabled: boolean);
     get disabled(): boolean;
     loading: boolean;
+    bottom_line: boolean;
     private subscription;
-    private subscription2;
     constructor(tabMenuService: TabMenuService);
     ngOnInit(): void;
     toTab(): void;

package/lib/_modules/tcloud-ui-tab-menu/components/tcloud-ui-tab-title/tcloud-ui-tab-title.component.d.ts

@@ -8,11 +8,11 @@ export declare class TCloudUiTabTitleComponent implements OnInit, OnDestroy {
     title: string | undefined;
     active: boolean;
     loading: boolean;
+    bottom_line: boolean;
     private _disabled;
     set disabled(disabled: boolean);
     get disabled(): boolean;
     private subscription;
-    private subscription2;
     constructor(tabMenuService: TabMenuService);
     ngOnInit(): void;
     toTab(): void;

package/lib/_modules/tcloud-ui-tab-menu/services/tab-menu.service.d.ts

@@ -7,6 +7,9 @@ export declare class TabMenuService {
     private _scroll;
     private scrollSubject;
     scrollState$: import("rxjs").Observable<boolean>;
+    private _bottom_line;
+    private bottom_lineSubject;
+    bottom_lineState$: import("rxjs").Observable<boolean>;
     private _tab;
     private tabSubject;
     tabState$: import("rxjs").Observable<string>;
@@ -19,6 +22,8 @@ export declare class TabMenuService {
     constructor(_route: ActivatedRoute, _router: Router);
     setTabScroll(scroll: boolean): void;
     getTabScroll(): boolean | undefined;
+    setTabBottomLine(bottom_line: boolean): void;
+    getTabBottomLine(): boolean | undefined;
     setTabLoading(loading: boolean): void;
     getTabLoading(): boolean | undefined;
     setTabfull(full: boolean): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-tcloud/tcloud-ui",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "peerDependencies": {
     "@angular/common": "^16.2.0",
     "@angular/core": "^16.2.0"

package/scss/components/custom/tab-menu.scss

@@ -2,49 +2,50 @@
     tcloud-ui-tab-head{
         tcloud-ui-tab-title, tcloud-ui-tab-subtitle {
             flex-grow: 1;
-
             button {
-            min-width: 100% !important;
+              min-width: 100% !important;
+            }
+            .tab-title, .tab-subtitle{ 
+              opacity: 0.8;
+            }
+            .tab-title-active,
+            .tab-title:hover, 
+            .tab-title:focus,
+            .tab-subtitle:hover,
+            .tab-subtitle:focus{
+              opacity: 1 !important;
             }
         }
     }
 }
 
-.tab-subtitle-line-bottom {
-    border-radius: 0 !important;
-    border-bottom: 1px solid #BCBCBC;
-
-    .tab-subtitle {
-      border-bottom: 4px solid transparent !important;
-      margin: 0 !important;
-      padding: 16px 32px !important;
-      transition: .3s ease-in-out;
-
-      &:hover {
-        :not(.tab-title-active) {
-        border-bottom: 4px solid transparent !important;
-        }
-      }
-    }
-
-    .tab-subtitle-active {
-      border-bottom: 4px solid var(--tc-primary) !important;
+.tc-menu {
+  &:has(> tcloud-ui-tab-title){
+    border-radius: 10px;
+  }
+  &:not(.tab-subtitle-line-bottom){
+    .bottom-line{
+      height: 0px !important;
     }
+  }
+}
 
-    .tab-title{
-      border-bottom: 4px solid transparent !important;
-    }
+.bottom-line{
+  background-color: transparent;
+  height: 4px;
+}
 
-    .tab-title-active{
-      border-bottom: 4px solid var(--tc-primary) !important;
-    }
 
-    .tab-title:hover{
-      :not(.tab-title-active) {
-        background: none !important;
-        color: var(--tc-gray-500) !important;
-      }
+tcloud-ui-tab-subtitle, 
+tcloud-ui-tab-title{  
+  .tab-subtitle-active + .bottom-line-hover,
+  .tab-title-active + .bottom-line-hover {
+    background-color: var(--tc-primary) !important;
+  }
 
-      border-bottom: 4px solid var(--tc-primary) !important;
+  &:hover{    
+    .bottom-line-hover{
+      background-color: var(--tc-primary) !important;
     }
-  }
+  }
+}

package/scss/tcloud/custom/tcloud-prime.scss

@@ -1312,52 +1312,6 @@ body.tc-prime {
     }
   }
 
-//==========================================================
-// Prime T-Cloud UI KIT Components
-//==========================================================
-
-  //====================================
-  // Tab Menu
-  //====================================
-
-  .tab-title {
-
-    &:hover {
-      background: var(--tc-complemt-2) !important;
-    }
-
-    &.tab-title-active {
-      @include prime-bg;
-    }
-  }
-
-  .area-navigation {
-
-    td {
-      &:first-child,
-      &:last-child {
-
-        button {
-          @include prime-color;
-        }
-      }
-    }
-  }
-
-
-  .subnav {
-
-    .tc-menu {
-      background: none !important;
-    }
-  }
-
-
-
-
-
-
-
 
   //====================================
   // Modal