Refine search page and hero search: dynamic subscript, mat-select paginator, search propagation

- Use subscriptSizing="dynamic" on hero search and search page inputs
- Replace native select with mat-select for items-per-page in search page
- Propagate search text to type pages via ?search= query param
- Remove back button negative margin

ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.html

@@ -57,7 +57,7 @@
                 (mouseleave)="onHeroTypeLeave()">{{ ht.labelKey | translate }}@if (!last) {,}</span>
         }
       </div>
-      <mat-form-field appearance="outline" class="tb-iot-hub-hero-search" #searchField>
+      <mat-form-field appearance="outline" class="tb-iot-hub-hero-search" subscriptSizing="dynamic" #searchField>
         <input matInput #searchInput
                [placeholder]="'iot-hub.search-placeholder' | translate"
                [(ngModel)]="searchText"

ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss

@@ -214,10 +214,6 @@
       0 114px 46px 0 rgba(0, 0, 0, 0.01),
       0 178px 50px 0 rgba(0, 0, 0, 0);
   }
-
-  .mat-mdc-form-field-subscript-wrapper {
-    display: none;
-  }
 }
 
 // Search popup panel (mat-autocomplete overlay)

ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.html

@@ -33,7 +33,7 @@
 
   <!-- Search + Sort row -->
   <div class="tb-search-toolbar">
-    <mat-form-field appearance="outline" class="tb-search-input-field">
+    <mat-form-field appearance="outline" class="tb-search-input-field" subscriptSizing="dynamic">
       <input matInput
              [(ngModel)]="searchText"
              (input)="onSearchInput()"
@@ -79,12 +79,12 @@
           </button>
         </div>
         <div class="tb-search-page-size">
-          <span>{{ 'iot-hub.items-per-page' | translate }}</span>
+          <span>{{ 'iot-hub.items-per-page' | translate }}:</span>
-          <select [ngModel]="pageSize" (ngModelChange)="onPageSizeChange($event)">
+          <mat-select [value]="pageSize" (selectionChange)="onPageSizeChange($event.value)" class="tb-search-page-size-select">
             @for (size of pageSizeOptions; track size) {
-              <option [value]="size">{{ size }}</option>
+              <mat-option [value]="size">{{ size }}</mat-option>
             }
-          </select>
+          </mat-select>
         </div>
       </div>
     </div>

ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.scss

@@ -33,7 +33,6 @@
 // Back button
 .tb-search-back-btn {
   align-self: flex-start;
-  margin-bottom: -20px;
 }
 
 // Title — Design: 28px Medium, black-primary
@@ -63,10 +62,6 @@
   ::ng-deep .mat-mdc-text-field-wrapper {
     border-radius: 8px;
   }
-
-  .mat-mdc-form-field-subscript-wrapper {
-    display: none;
-  }
 }
 
 .tb-search-sort-btn {
@@ -133,18 +128,22 @@
   align-items: center;
   gap: 8px;
   font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.2px;
   color: rgba(0, 0, 0, 0.76);
+  margin-left: auto;
+}
+
+.tb-search-page-size-select {
+  width: 77px;
+  height: 40px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+  padding: 6px 12px;
 
-  select {
+  ::ng-deep .mat-mdc-select-trigger {
-    width: 77px;
-    height: 40px;
-    border: 1px solid rgba(0, 0, 0, 0.12);
-    border-radius: 4px;
-    padding: 8px 12px;
     font-size: 14px;
-    font-family: inherit;
-    background: white;
-    cursor: pointer;
   }
 }
 

ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-search.component.ts

@@ -194,7 +194,8 @@ export class TbIotHubSearchComponent implements OnInit, OnDestroy {
   }
 
   navigateToType(type: ItemType): void {
-    this.router.navigate(['/iot-hub', this.getTypeRoute(type)]);
+    const search = this.searchText?.trim() || undefined;
+    this.router.navigate(['/iot-hub', this.getTypeRoute(type)], { queryParams: { search } });
   }
 
   // Installed items