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>
-  </div>
-  <tb-icon class="tb-hint-tooltip-icon tb-mat-18"
          *ngIf="tooltipText"
          matTooltip="{{ tooltipText }}"
          [matTooltipPosition]="tooltipPosition">{{ hintIcon }}</tb-icon>
-</div>

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

@@ -13,21 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+:host(.tb-hint-tooltip) {
-:host {
-  .tb-hint-tooltip {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 4px;
+}
 
-    &-content {
+:host {
+  .tb-hint-tooltip-content {
     flex: 1 1 auto;
     min-width: 0;
     max-width: fit-content;
   }
 
-    &-icon {
+  .tb-hint-tooltip-icon {
     color: #E0E0E0;
     overflow: visible;
     order: 3;
@@ -38,5 +38,4 @@
       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()