UI: Angular 15 migration

ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html

@@ -17,7 +17,7 @@
 -->
 <form [formGroup]="smppSmsProviderConfigurationFormGroup" style="padding-bottom: 16px;">
   <div fxLayout="row wrap" fxLayoutGap="6px">
-    <mat-form-field fxFlex.lt-sm="100" fxFlex.gt-sm="15" class="mat-block">
+    <mat-form-field fxFlex.lt-sm="100" fxFlex.gt-xs="25" class="mat-block">
       <mat-label translate>admin.smpp-provider.smpp-version</mat-label>
       <mat-select formControlName="protocolVersion">
         <mat-option *ngFor="let smppVersion of smppVersions" [value]="smppVersion.value">
@@ -32,7 +32,7 @@
         {{'admin.smpp-provider.smpp-host-required' | translate}}
       </mat-error>
     </mat-form-field>
-    <mat-form-field fxFlex.lt-sm="100" fxFlex.gt-sm="30" class="mat-block">
+    <mat-form-field fxFlex.lt-sm="100" fxFlex.gt-xs="25" class="mat-block">
       <mat-label translate>admin.smpp-provider.smpp-port</mat-label>
       <input required matInput type="number" formControlName="port">
       <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('port').hasError('required')">

ui-ngx/src/app/modules/home/components/sms/twilio-sms-provider-configuration.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="twilioSmsProviderConfigurationFormGroup" style="padding-bottom: 16px;">
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic">
     <mat-label translate>admin.number-from</mat-label>
     <input type="tel" required [pattern]="phoneNumberPatternTwilio" matInput formControlName="numberFrom">
     <mat-error *ngIf="twilioSmsProviderConfigurationFormGroup.get('numberFrom').hasError('required')">

ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.scss

@@ -17,7 +17,8 @@
 
 :host {
   .dialog-container {
-    min-width: 650px !important;
+    min-width: 750px !important;
+    max-width: 750px !important;
 
     @media #{$mat-lt-md} {
       min-width: 100% !important;

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 :host {
+  display: block;
+  margin-bottom: 16px;
   tb-json-object-edit.tb-rule-node-configuration-json {
     display: block;
     height: 300px;

ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html

@@ -60,6 +60,7 @@
               <label translate>rulenode.metadata</label>
             </div>
             <tb-key-val-map
+              subscriptSizing="dynamic"
               formControlName="metadata"
               titleText="rulenode.metadata">
             </tb-key-val-map>

ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.scss

@@ -64,7 +64,7 @@
 
   div.tb-editor-area-title-panel {
     position: absolute;
-    top: 13px;
+    top: 8px;
     right: 40px;
     z-index: 5;
     font-size: .8rem;

ui-ngx/src/app/shared/components/kv-map.component.html

@@ -16,17 +16,15 @@
 
 -->
 <section fxLayout="column" class="tb-kv-map" [formGroup]="kvListFormGroup">
-  <label translate class="tb-title no-padding">{{ titleText }}</label>
-  <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="max-height: 40px;"
+  <label translate class="tb-title">{{ titleText }}</label>
+  <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"
        formArrayName="keyVals"
        *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index">
-    <mat-form-field fxFlex class="mat-block"
-                    style="max-height: 40px;">
+    <mat-form-field fxFlex class="mat-block" subscriptSizing="{{ subscriptSizing }}">
       <input [formControl]="keyValControl.get('key')" matInput required
              placeholder="{{ (keyPlaceholderText ? keyPlaceholderText : 'key-val.key') | translate }}"/>
     </mat-form-field>
-    <mat-form-field fxFlex class="mat-block"
-                    style="max-height: 40px;">
+    <mat-form-field fxFlex class="mat-block" subscriptSizing="{{ subscriptSizing }}">
       <input [formControl]="keyValControl.get('value')" matInput required
              placeholder="{{ (valuePlaceholderText ? valuePlaceholderText : 'key-val.value') | translate }}"/>
     </mat-form-field>

ui-ngx/src/app/shared/components/kv-map.component.ts

@@ -31,6 +31,7 @@ import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Subscription } from 'rxjs';
+import { SubscriptSizing } from '@angular/material/form-field';
 
 @Component({
   selector: 'tb-key-val-map',
@@ -61,6 +62,9 @@ export class KeyValMapComponent extends PageComponent implements ControlValueAcc
 
   @Input() noDataText: string;
 
+  @Input()
+  subscriptSizing: SubscriptSizing = 'fixed';
+
   kvListFormGroup: UntypedFormGroup;
 
   private propagateChange = null;

ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html

@@ -16,10 +16,11 @@
 
 -->
 <mat-form-field [formGroup]="relationTypeFormGroup" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
-  <mat-label>{{ required  ? ('relation.relation-type' | translate) : ( !modelValue ? ('relation.any-relation-type' | translate) : ' ') }}</mat-label>
+  <mat-label *ngIf="required">{{ 'relation.relation-type' | translate }}</mat-label>
   <input matInput type="text"
          #relationTypeInput
          formControlName="relationType"
+         [placeholder]="!required ? ('relation.any-relation-type' | translate) : ''"
          (focusin)="onFocus()"
          [required]="required"
          [matAutocomplete]="relationTypeAutocomplete">

ui-ngx/src/app/shared/components/script-lang.component.scss

@@ -13,37 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
-/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
-/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
 .mat-button-toggle-group.tb-script-lang-toggle-group {
-  /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
-  /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
   &.mat-button-toggle-group-appearance-standard {
     border: none;
     border-radius: 18px;
-    /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
     .mat-button-toggle+.mat-button-toggle {
       border-left: none;
     }
   }
-  /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
-  /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
   .mat-button-toggle {
     background: rgba(0, 0, 0, 0.06);
     height: 36px;
     align-items: center;
     display: flex;
-    /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
     .mat-button-toggle-ripple {
       top: 2px;
       left: 2px;
@@ -52,19 +34,13 @@
       border-radius: 16px;
     }
   }
-  /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
   .mat-button-toggle-button {
     color: #959595;
   }
-  /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
   .mat-button-toggle-focus-overlay {
     border-radius: 16px;
     margin: 2px;
   }
-  /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
   .mat-button-toggle-checked .mat-button-toggle-button {
     background-color: #305680;
     color: #fff;
@@ -72,15 +48,11 @@
     margin-left: 2px;
     margin-right: 2px;
   }
-  /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
   .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
     line-height: 32px;
     font-size: 16px;
     font-weight: 500;
   }
-  /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
- */
   .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
     opacity: .01;
   }

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

@@ -24,7 +24,7 @@ import { FlowInjectionToken, NgxFlowModule } from '@flowjs/ngx-flow';
 import { NgxFlowchartModule } from 'ngx-flowchart';
 import Flow from '@flowjs/flow.js';
 
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCardModule } from '@angular/material/card';
@@ -198,7 +198,16 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     TbPopoverService,
     {
       provide: MAT_SELECT_CONFIG,
-      useValue: { overlayPanelClass: 'tb-select-overlay' }
+      useValue: {
+        overlayPanelClass: 'tb-select-overlay',
+        hideSingleSelectionIndicator: true
+      }
+    },
+    {
+      provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
+      useValue: {
+        hideSingleSelectionIndicator: true
+      }
     }
   ],
   declarations: [

ui-ngx/src/scss/mixins.scss

@@ -37,6 +37,10 @@
     display: block;
     margin: auto;
   }
+  .mat-mdc-button-touch-target {
+    width: #{$size}px;
+    height: #{$size}px;
+  }
 }
 
 @mixin tb-checkered-bg() {

ui-ngx/src/styles.scss

@@ -264,10 +264,11 @@ div {
 }
 
 .tb-hint {
-  padding-bottom: 15px;
-  font-size: 12px;
-  line-height: 14px;
-  color: #808080;
+  padding: 0 16px 16px;
+  font-size: var(--mdc-typography-caption-font-size, 12px);
+  line-height: var(--mdc-typography-caption-line-height, 20px);
+  font-weight: var(--mdc-typography-caption-font-weight, 400);
+  letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
 }
 
 .mat-caption {
@@ -1491,4 +1492,8 @@ mat-label {
       }
     }
   }
+
+  .mat-expansion-panel {
+    color: inherit;
+  }
 }