UI: Added maxLength parameter to tbJson pipe for truncating large attribute values

Added optional maxLength parameter to the tbJson pipe. When provided,
truncates the stringified result and appends an ellipsis character.
Updated attribute table to use tbJson:300 for key and value display
while preserving full untruncated data for copy-to-clipboard.

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html

@@ -170,7 +170,7 @@
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'attribute.key' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let attribute" class="attribute">
             <div class="flex flex-row" style="align-items: center">
-              <span class="ellipsis">{{ attribute.key }}</span>
+              <span class="ellipsis">{{ attribute.key | tbJson:300 }}</span>
               <tb-copy-button
                 class="attribute-copy"
                 [disabled]="isLoading$ | async"
@@ -191,7 +191,7 @@
                     (click)="editAttribute($event, attribute)">
             <div class="flex flex-1 flex-row" style="align-items: center">
               <div class="flex flex-1 flex-row" style="overflow: hidden; align-items: center;">
-                <span class="ellipsis">{{attribute.value | tbJson}}</span>
+                <span class="ellipsis">{{attribute.value | tbJson:300}}</span>
                 @if (attribute.value !== '') {
                   <tb-copy-button
                     class="attribute-copy"

ui-ngx/src/app/shared/pipe/tbJson.pipe.ts

@@ -22,12 +22,18 @@ import { isNumber, isObject } from '@core/utils';
     standalone: false
 })
 export class TbJsonPipe implements PipeTransform {
-  transform(value: any): string {
+  transform(value: any, maxLength?: number): string {
+    let result: string;
     if (isObject(value)) {
-      return JSON.stringify(value);
+      result = JSON.stringify(value);
     } else if (isNumber(value)) {
-      return value.toString();
+      result = value.toString();
+    } else {
+      result = value;
     }
-    return value;
+    if (maxLength != null && maxLength > 0 && result && result.length > maxLength) {
+      return result.slice(0, maxLength) + '\u2026';
+    }
+    return result;
   }
 }