refactoring

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

@@ -18,7 +18,7 @@
 <div class="tb-form-panel no-border no-padding padding-top" [formGroup]="serverConfigFormGroup">
   <div class="server-settings">
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" translate>gateway.server-url</div>
+      <div class="fixed-title-width" tbTruncateTooltip translate>gateway.server-url</div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <input matInput name="value" formControlName="url" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -36,7 +36,7 @@
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.opcua-timeout' | translate }}">
-        {{ 'gateway.timeout' | translate }}
+        <div tbTruncateTooltip>{{ 'gateway.timeout' | translate }}</div>
       </div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -55,7 +55,7 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" translate>gateway.security</div>
+      <div class="fixed-title-width" tbTruncateTooltip translate>gateway.security</div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="security">
@@ -66,7 +66,7 @@
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.scan-period' | translate }}">
-        {{ 'gateway.scan-period' | translate }}
+        <div tbTruncateTooltip>{{ 'gateway.scan-period' | translate }}</div>
       </div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -87,7 +87,7 @@
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
       <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.sub-check-period' | translate }}">
-        {{ 'gateway.sub-check-period' | translate }}
+        <div tbTruncateTooltip>{{ 'gateway.sub-check-period' | translate }}</div>
       </div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -110,7 +110,7 @@
   <div class="tb-form-row" fxLayoutAlign="space-between center">
     <mat-slide-toggle class="mat-slide" formControlName="enableSubscriptions">
       <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.enable-subscription' | translate }}">
-        {{ 'gateway.enable-subscription' | translate }}
+        <div tbTruncateTooltip>{{ 'gateway.enable-subscription' | translate }}</div>
       </mat-label>
     </mat-slide-toggle>
   </div>

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

@@ -36,6 +36,7 @@ import { CommonModule } from '@angular/common';
 import { SecurityConfigComponent } from '@home/components/widget/lib/gateway/connectors-configuration/public-api';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { TooltipDirective } from '@shared/directives/public-api';
 
 @Component({
   selector: 'tb-server-config',
@@ -59,6 +60,7 @@ import { takeUntil } from 'rxjs/operators';
     CommonModule,
     SharedModule,
     SecurityConfigComponent,
+    TooltipDirective,
   ]
 })
 export class ServerConfigComponent implements ControlValueAccessor, Validator, OnDestroy {

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

@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-hint-tooltip">
-  <div class="tb-hint-tooltip-content" tbTruncateTooltip>
+  <div class="tb-hint-tooltip-content">
     <ng-content></ng-content>
   </div>
   <tb-icon class="tb-hint-tooltip-icon tb-mat-18"

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

@@ -24,6 +24,7 @@
     &-content {
       flex: 1 1 auto;
       min-width: 0;
+      max-width: fit-content;
     }
 
     &-icon {

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

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

ui-ngx/src/app/shared/directives/tooltip/tooltip.directive.ts

@@ -18,7 +18,6 @@ import {
   AfterViewInit,
   Directive,
   ElementRef,
-  inject,
   Input,
   OnDestroy,
   OnInit,
@@ -39,18 +38,20 @@ export class TooltipDirective implements OnInit, AfterViewInit, OnDestroy {
   @Input() tooltipEnabled = true;
   @Input() position: TooltipPosition = 'above';
 
-  private elementRef = inject(ElementRef);
-  private renderer = inject(Renderer2);
-  private tooltip = inject(MatTooltip);
   private destroy$ = new Subject<void>();
 
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    private tooltip: MatTooltip
+  ) {}
+
   ngOnInit(): void {
     this.observeMouseEvents();
+    this.applyTruncationStyles();
   }
 
   ngAfterViewInit(): void {
-    this.applyTruncationStyles();
-
     if (!this.text) {
       this.text = this.elementRef.nativeElement.innerText;
     }

ui-ngx/src/app/shared/shared.module.ts

@@ -219,7 +219,6 @@ import { ImageGalleryDialogComponent } from '@shared/components/image/image-gall
 import { RuleChainSelectPanelComponent } from '@shared/components/rule-chain/rule-chain-select-panel.component';
 import { WidgetButtonComponent } from '@shared/components/button/widget-button.component';
 import { HexInputComponent } from '@shared/components/color-picker/hex-input.component';
-import { TooltipDirective } from '@shared/directives/public-api';
 
 export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
   return markedOptionsService;
@@ -473,7 +472,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     DndModule,
     NgxFlowModule,
     NgxFlowchartModule,
-    TooltipDirective,
     // ngx-markdown
     MarkdownModule.forRoot({
       sanitize: SecurityContext.NONE,