refactoring

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html

@@ -19,7 +19,7 @@
   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
     <div class="fixed-title-width tb-required" [style.width.%]="50"
          tb-hint-tooltip-icon="{{ 'gateway.max-number-of-workers-hint' | translate }}">
-      {{ 'gateway.max-number-of-workers' | translate }}
+      <div tbTruncateTooltip>{{ 'gateway.max-number-of-workers' | translate }}</div>
     </div>
     <div class="tb-flex no-gap">
       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -41,7 +41,7 @@
   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
     <div class="fixed-title-width tb-required" [style.width.%]="50"
          tb-hint-tooltip-icon="{{ 'gateway.max-messages-queue-for-worker-hint' | translate }}">
-      {{ 'gateway.max-messages-queue-for-worker' | translate }}
+      <div tbTruncateTooltip>{{ 'gateway.max-messages-queue-for-worker' | translate }}</div>
     </div>
     <div class="tb-flex no-gap">
       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.ts

@@ -33,6 +33,7 @@ import { CommonModule } from '@angular/common';
 import { WorkersConfig } from '@home/components/widget/lib/gateway/gateway-widget.models';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { TooltipDirective } from '@shared/directives/tooltip/tooltip.directive';
 
 @Component({
   selector: 'tb-workers-config-control',
@@ -42,6 +43,7 @@ import { takeUntil } from 'rxjs/operators';
   imports: [
     CommonModule,
     SharedModule,
+    TooltipDirective,
   ],
   providers: [
     {

ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html

@@ -15,12 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-hint-tooltip">
+<ng-content class="tb-hint-tooltip-content"></ng-content>
-  <div class="tb-hint-tooltip-content">
+<tb-icon class="tb-hint-tooltip-icon tb-mat-18"
-    <ng-content></ng-content>
+         *ngIf="tooltipText"
-  </div>
+         matTooltip="{{ tooltipText }}"
-  <tb-icon class="tb-hint-tooltip-icon tb-mat-18"
+         [matTooltipPosition]="tooltipPosition">{{ hintIcon }}</tb-icon>
-           *ngIf="tooltipText"
-           matTooltip="{{ tooltipText }}"
-           [matTooltipPosition]="tooltipPosition">{{ hintIcon }}</tb-icon>
-</div>

ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss

@@ -13,30 +13,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+:host(.tb-hint-tooltip) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
 
 :host {
-  .tb-hint-tooltip {
+  .tb-hint-tooltip-content {
-    display: flex;
+    flex: 1 1 auto;
-    flex-direction: row;
+    min-width: 0;
-    align-items: center;
+    max-width: fit-content;
-    gap: 4px;
+  }
-
-    &-content {
-      flex: 1 1 auto;
-      min-width: 0;
-      max-width: fit-content;
-    }
 
-    &-icon {
+  .tb-hint-tooltip-icon {
-      color: #E0E0E0;
+    color: #E0E0E0;
-      overflow: visible;
+    overflow: visible;
-      order: 3;
+    order: 3;
-      margin-left: 4px;
+    margin-left: 4px;
-      flex-shrink: 0;
+    flex-shrink: 0;
 
-      &:hover {
+    &:hover {
-        color: #9E9E9E;
+      color: #9E9E9E;
-      }
     }
   }
 }

ui-ngx/src/app/shared/components/hint-tooltip-icon.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Input } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 import { TooltipPosition } from '@angular/material/tooltip';
 
 @Component({
@@ -24,6 +24,7 @@ import { TooltipPosition } from '@angular/material/tooltip';
 })
 export class HintTooltipIconComponent {
 
+  @HostBinding('class.tb-hint-tooltip')
   @Input('tb-hint-tooltip-icon') tooltipText: string;
 
   @Input()