From b005b7961ec6b8dd3bbddea75b72972d7dc3273e Mon Sep 17 00:00:00 2001
From: deaflynx <artemio.babak@gmail.com>
Date: Mon, 15 Sep 2025 15:11:43 +0300
Subject: [PATCH 1/2] Version control components: refactor ng-template syntax;
 outline appearance.

---
 .../vc/complex-version-create.component.html  | 131 ++++++++-------
 .../vc/complex-version-load.component.html    | 100 +++++------
 ...entity-types-version-create.component.html | 157 +++++++++---------
 .../entity-types-version-create.component.ts  |   4 -
 .../entity-types-version-load.component.html  | 127 +++++++-------
 .../vc/entity-version-create.component.html   |  33 ++--
 .../vc/entity-version-restore.component.html  |  99 +++++------
 ...move-other-entities-confirm.component.html |   2 +-
 .../vc/branch-autocomplete.component.html     |   5 +-
 .../vc/branch-autocomplete.component.ts       |   5 +-
 10 files changed, 337 insertions(+), 326 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
index e97e02190a..1e1f89bfb8 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
@@ -15,76 +15,79 @@
     limitations under the License.
 
 -->
-<section *ngIf="!versionCreateResult$" class="flex flex-col" style="height: 100%;">
-  <mat-toolbar>
-    <h2>{{ 'version-control.create-entities-version' | translate }}</h2>
-    <span class="flex-1"></span>
-  </mat-toolbar>
-  <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
-                    *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <form [formGroup]="createVersionFormGroup" class="flex flex-col" style="flex: 1; padding-top: 16px; overflow: auto;">
-    <div class="flex flex-col gt-sm:flex-row gt-sm:gap-2">
-      <tb-branch-autocomplete
-        class="flex-1"
-        required
-        formControlName="branch">
-      </tb-branch-autocomplete>
-      <mat-form-field class="mat-block flex-1">
-        <mat-label translate>version-control.version-name</mat-label>
-        <input required matInput formControlName="versionName">
-        <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
-                        createVersionFormGroup.get('versionName').hasError('pattern')">
-          {{ 'version-control.version-name-required' | translate }}
-        </mat-error>
+@if (!versionCreateResult$) {
+  <section class="flex flex-col" style="height: 100%;">
+    <mat-toolbar>
+      <h2>{{ 'version-control.create-entities-version' | translate }}</h2>
+      <span class="flex-1"></span>
+    </mat-toolbar>
+    <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
+                      [class.hidden]="(isLoading$ | async) === false">
+    </mat-progress-bar>
+    <form [formGroup]="createVersionFormGroup" class="flex flex-col" style="flex: 1; padding-top: 16px; overflow: auto;">
+      <div class="flex flex-col gt-sm:flex-row gt-sm:gap-2">
+        <tb-branch-autocomplete
+          class="flex-1"
+          appearance="outline"
+          required
+          formControlName="branch">
+        </tb-branch-autocomplete>
+        <mat-form-field class="mat-block flex-1" appearance="outline">
+          <mat-label translate>version-control.version-name</mat-label>
+          <input required matInput formControlName="versionName">
+          <mat-error [class.hidden]="!(createVersionFormGroup.get('versionName').hasError('required') ||
+                                       createVersionFormGroup.get('versionName').hasError('pattern'))">
+            {{ 'version-control.version-name-required' | translate }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+      <mat-form-field class="mat-block" style="margin-bottom: 24px;" appearance="outline">
+        <mat-label translate>version-control.default-sync-strategy</mat-label>
+        <mat-select required formControlName="syncStrategy">
+          @for (strategy of syncStrategies; track strategy) {
+            <mat-option [value]="strategy">
+              {{syncStrategyTranslations.get(strategy) | translate}}
+            </mat-option>
+          }
+        </mat-select>
+        <mat-hint [innerHTML]="(syncStrategyHints.get(createVersionFormGroup.get('syncStrategy').value) | translate) | safe:'html'"></mat-hint>
       </mat-form-field>
+      <tb-entity-types-version-create
+        formControlName="entityTypes">
+      </tb-entity-types-version-create>
+    </form>
+    <div class="flex items-center justify-end gap-2" style="padding-top: 16px;">
+      <button mat-button color="primary"
+              type="button"
+              [disabled]="(isLoading$ | async)"
+              (click)="cancel()" cdkFocusInitial>
+        {{ 'action.cancel' | translate }}
+      </button>
+      <button mat-raised-button color="primary"
+              type="button"
+              (click)="export()"
+              [disabled]="(isLoading$ | async) || createVersionFormGroup.invalid || !createVersionFormGroup.dirty">
+        {{ 'action.create' | translate }}
+      </button>
     </div>
-    <mat-form-field class="mat-block" style="margin-bottom: 24px;">
-      <mat-label translate>version-control.default-sync-strategy</mat-label>
-      <mat-select required formControlName="syncStrategy">
-        <mat-option *ngFor="let strategy of syncStrategies" [value]="strategy">
-          {{syncStrategyTranslations.get(strategy) | translate}}
-        </mat-option>
-      </mat-select>
-      <mat-hint [innerHTML]="(syncStrategyHints.get(createVersionFormGroup.get('syncStrategy').value) | translate) | safe:'html'"></mat-hint>
-    </mat-form-field>
-    <tb-entity-types-version-create
-      formControlName="entityTypes">
-    </tb-entity-types-version-create>
-  </form>
-  <div class="flex items-center justify-end gap-2" style="padding-top: 16px;">
-    <button mat-button color="primary"
-            type="button"
-            [disabled]="(isLoading$ | async)"
-            (click)="cancel()" cdkFocusInitial>
-      {{ 'action.cancel' | translate }}
-    </button>
-    <button mat-raised-button color="primary"
-            type="button"
-            (click)="export()"
-            [disabled]="(isLoading$ | async) || createVersionFormGroup.invalid || !createVersionFormGroup.dirty">
-      {{ 'action.create' | translate }}
-    </button>
-  </div>
-</section>
-<section *ngIf="versionCreateResult$">
-  <section *ngIf="resultMessage">
-    <div class="mat-headline-6 vc-result-message" [innerHtml]="resultMessage"></div>
   </section>
-  <div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" class="flex items-center justify-end gap-2">
-    <button mat-button color="primary"
-            type="button"
-            [disabled]="(isLoading$ | async)"
-            (click)="cancel()" cdkFocusInitial>
-      {{ 'action.close' | translate }}
-    </button>
-  </div>
-  <ng-template #progress>
+} @else {
+  <div class="mat-headline-6 vc-result-message" [class.hidden]="!resultMessage" [innerHtml]="resultMessage"></div>
+  @if ((versionCreateResult$ | async)?.done || hasError) {
+    <div class="flex items-center justify-end gap-2">
+      <button mat-button color="primary"
+              type="button"
+              [disabled]="(isLoading$ | async)"
+              (click)="cancel()" cdkFocusInitial>
+        {{ 'action.close' | translate }}
+      </button>
+    </div>
+  } @else {
     <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.creating-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
       </div>
     </section>
-  </ng-template>
-</section>
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
index 17e6663a03..885058c9c9 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
@@ -15,59 +15,63 @@
     limitations under the License.
 
 -->
-<section *ngIf="!versionLoadResult$" class="flex flex-col" style="height: 100%;">
-  <mat-toolbar>
-    <h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2>
-    <span class="flex-1"></span>
-  </mat-toolbar>
-  <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
-                    *ngIf="isLoading$ | async">
-  </mat-progress-bar>
-  <form [formGroup]="loadVersionFormGroup" class="flex flex-col" style="flex: 1; padding: 16px 0; overflow-y: auto; overflow-x: hidden">
-    <tb-entity-types-version-load
-      formControlName="entityTypes">
-    </tb-entity-types-version-load>
-  </form>
-  <div tb-hint-tooltip-icon="{{ 'version-control.rollback-on-error-hint' | translate }}" [formGroup]="loadVersionFormGroup">
-    <mat-slide-toggle formControlName="rollbackOnError">
-      {{ 'version-control.rollback-on-error' | translate }}
-    </mat-slide-toggle>
-  </div>
-  <div class="flex items-center justify-end gap-2" style="padding-top: 16px;">
-    <button mat-button color="primary"
-            type="button"
-            [disabled]="(isLoading$ | async)"
-            (click)="cancel()" cdkFocusInitial>
-      {{ 'action.cancel' | translate }}
-    </button>
-    <button mat-raised-button color="primary"
-            type="button"
-            (click)="restore()"
-            [disabled]="(isLoading$ | async) || loadVersionFormGroup.invalid">
-      {{ 'action.restore' | translate }}
-    </button>
-  </div>
-</section>
-<section *ngIf="versionLoadResult$">
-  <div *ngIf="(versionLoadResult$ | async)?.done && !entityTypeLoadResults?.length && !errorMessage" class="mat-headline-6 vc-result-message">
+@if (!versionLoadResult$) {
+  <section class="flex flex-col" style="height: 100%;">
+    <mat-toolbar>
+      <h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2>
+      <span class="flex-1"></span>
+    </mat-toolbar>
+    <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
+                      [class.hidden]="(isLoading$ | async) === false">
+    </mat-progress-bar>
+    <form [formGroup]="loadVersionFormGroup" class="flex flex-col" style="flex: 1; padding: 16px 0; overflow-y: auto; overflow-x: hidden">
+      <tb-entity-types-version-load
+        formControlName="entityTypes">
+      </tb-entity-types-version-load>
+    </form>
+    <div tb-hint-tooltip-icon="{{ 'version-control.rollback-on-error-hint' | translate }}" [formGroup]="loadVersionFormGroup">
+      <mat-slide-toggle formControlName="rollbackOnError">
+        {{ 'version-control.rollback-on-error' | translate }}
+      </mat-slide-toggle>
+    </div>
+    <div class="flex items-center justify-end gap-2" style="padding-top: 16px;">
+      <button mat-button color="primary"
+              type="button"
+              [disabled]="(isLoading$ | async)"
+              (click)="cancel()" cdkFocusInitial>
+        {{ 'action.cancel' | translate }}
+      </button>
+      <button mat-raised-button color="primary"
+              type="button"
+              (click)="restore()"
+              [disabled]="(isLoading$ | async) || loadVersionFormGroup.invalid">
+        {{ 'action.restore' | translate }}
+      </button>
+    </div>
+  </section>
+} @else {
+  <div [class.hidden]="!((versionLoadResult$ | async)?.done && !entityTypeLoadResults?.length && !errorMessage)" class="mat-headline-6 vc-result-message">
     {{ 'version-control.no-entities-restored' | translate }}
   </div>
-  <div *ngIf="errorMessage" class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
-  <div *ngFor="let entityTypeLoadResult of entityTypeLoadResults" class="mat-headline-6 vc-result-message">{{ entityTypeLoadResultMessage(entityTypeLoadResult) }}</div>
-  <div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress" class="flex items-center justify-end gap-2">
-    <button mat-button color="primary"
-            type="button"
-            [disabled]="(isLoading$ | async)"
-            (click)="cancel()" cdkFocusInitial>
-      {{ 'action.close' | translate }}
-    </button>
-  </div>
-  <ng-template #progress>
+  <div [class.hidden]="!errorMessage" class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
+  @for (entityTypeLoadResult of entityTypeLoadResults; track entityTypeLoadResult.entityType) {
+    <div class="mat-headline-6 vc-result-message">{{ entityTypeLoadResultMessage(entityTypeLoadResult) }}</div>
+  }
+  @if ((versionLoadResult$ | async)?.done || hasError) {
+    <div class="flex items-center justify-end gap-2">
+      <button mat-button color="primary"
+              type="button"
+              [disabled]="(isLoading$ | async)"
+              (click)="cancel()" cdkFocusInitial>
+        {{ 'action.close' | translate }}
+      </button>
+    </div>
+  } @else {
     <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.restoring-entities-from-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
       </div>
     </section>
-  </ng-template>
-</section>
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
index 8fdf22f6cd..343040e782 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
@@ -18,86 +18,89 @@
 <fieldset [formGroup]="entityTypesVersionCreateFormGroup" class="fields-group flex flex-col">
   <legend class="group-title" translate>version-control.entities-to-export</legend>
   <div class="flex flex-col" style="flex: 1; overflow: auto;">
-    <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
-             let $index = index; last as isLast;"
-         class="flex flex-row items-center justify-start" [class.pb-2]="!isLast">
-      <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
-                           [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
-        <mat-expansion-panel-header>
-          <div class="flex flex-1 flex-row items-center justify-start">
-            <mat-panel-title>
-              <div class="flex flex-1 flex-row items-center justify-start">
-                <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
-              </div>
-            </mat-panel-title>
-            <span class="flex-1"></span>
-            <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
-                    type="button"
-                    (click)="removeEntityType($index)"
-                    matTooltip="{{ 'action.remove' | translate }}"
-                    matTooltipPosition="above">
-              <mat-icon>delete</mat-icon>
-            </button>
-          </div>
-        </mat-expansion-panel-header>
-        <div class="entity-type-config-content flex flex-col gap-2">
-          <mat-divider></mat-divider>
-          <div class="flex flex-row xs:flex-col gt-xs:gap-4">
-            <tb-entity-type-select
-              showLabel
-              formControlName="entityType"
-              required
-              [filterAllowedEntityTypes]="false"
-              [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
-            </tb-entity-type-select>
-            <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4" formGroupName="config">
-              <mat-form-field class="mat-block flex-1">
-                <mat-label translate>version-control.sync-strategy</mat-label>
-                <mat-select formControlName="syncStrategy">
-                  <mat-option [value]="'default'">
-                    {{ 'version-control.default' | translate }}
-                  </mat-option>
-                  <mat-option *ngFor="let strategy of syncStrategies" [value]="strategy">
-                    {{syncStrategyTranslations.get(strategy) | translate}}
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
-              <div class="flex flex-1 flex-col">
-                <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
-                  {{ 'version-control.export-credentials' | translate }}
-                </mat-checkbox>
-                <mat-checkbox *ngIf="!entityTypesWithoutRelatedData.has(entityTypeFormGroup.get('entityType').value)" formControlName="saveAttributes">
-                  {{ 'version-control.export-attributes' | translate }}
-                </mat-checkbox>
-                <mat-checkbox *ngIf="!entityTypesWithoutRelatedData.has(entityTypeFormGroup.get('entityType').value)" formControlName="saveRelations">
-                  {{ 'version-control.export-relations' | translate }}
-                </mat-checkbox>
-                <mat-checkbox *ngIf="typesWithCalculatedFields.has(entityTypeFormGroup.get('entityType').value)" formControlName="saveCalculatedFields">
-                  {{ 'version-control.export-calculated-fields' | translate }}
-                </mat-checkbox>
+    @for (entityTypeFormGroup of entityTypesFormGroupArray(); track entityTypeFormGroup; let index = $index, isLast = $last) {
+      <div class="flex flex-row items-center justify-start" [class.pb-2]="!isLast">
+        <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
+                             [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
+          <mat-expansion-panel-header>
+            <div class="flex flex-1 flex-row items-center justify-start">
+              <mat-panel-title>
+                <div class="flex flex-1 flex-row items-center justify-start">
+                  <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
+                </div>
+              </mat-panel-title>
+              <span class="flex-1"></span>
+              <button [class.hidden]="disabled" mat-icon-button style="min-width: 40px;"
+                      type="button"
+                      (click)="removeEntityType(index)"
+                      matTooltip="{{ 'action.remove' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </mat-expansion-panel-header>
+          <div class="entity-type-config-content flex flex-col gap-2">
+            <mat-divider></mat-divider>
+            <div class="flex flex-row xs:flex-col gt-xs:gap-4">
+              <tb-entity-type-select
+                showLabel
+                formControlName="entityType"
+                appearance="outline"
+                required
+                [filterAllowedEntityTypes]="false"
+                [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
+              </tb-entity-type-select>
+              <div class="flex flex-1 flex-row xs:flex-col gt-xs:gap-4" formGroupName="config">
+                <mat-form-field class="mat-block flex-1" appearance="outline">
+                  <mat-label translate>version-control.sync-strategy</mat-label>
+                  <mat-select formControlName="syncStrategy">
+                    <mat-option [value]="'default'">
+                      {{ 'version-control.default' | translate }}
+                    </mat-option>
+                    @for (strategy of syncStrategies; track strategy) {
+                      <mat-option [value]="strategy">
+                        {{syncStrategyTranslations.get(strategy) | translate}}
+                      </mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+                <div class="flex flex-1 flex-col">
+                  <mat-checkbox [class.hidden]="entityTypeFormGroup.get('entityType').value !== entityTypes.DEVICE" formControlName="saveCredentials">
+                    {{ 'version-control.export-credentials' | translate }}
+                  </mat-checkbox>
+                  <mat-checkbox [class.hidden]="entityTypesWithoutRelatedData.has(entityTypeFormGroup.get('entityType').value)" formControlName="saveAttributes">
+                    {{ 'version-control.export-attributes' | translate }}
+                  </mat-checkbox>
+                  <mat-checkbox [class.hidden]="entityTypesWithoutRelatedData.has(entityTypeFormGroup.get('entityType').value)" formControlName="saveRelations">
+                    {{ 'version-control.export-relations' | translate }}
+                  </mat-checkbox>
+                  <mat-checkbox [class.hidden]="!typesWithCalculatedFields.has(entityTypeFormGroup.get('entityType').value)" formControlName="saveCalculatedFields">
+                    {{ 'version-control.export-calculated-fields' | translate }}
+                  </mat-checkbox>
+                </div>
               </div>
             </div>
+            <div class="flex flex-row xs:flex-col gt-xs:min-h-19 gt-xs:items-center gt-xs:justify-start gt-xs:gap-4"
+                 formGroupName="config">
+              <mat-slide-toggle formControlName="allEntities">
+                {{ 'version-control.all-entities' | translate }}
+              </mat-slide-toggle>
+              @if (!entityTypeFormGroup.get('config').get('allEntities').value) {
+                <tb-entity-list
+                  class="flex-1"
+                  appearance="outline"
+                  [entityType]="entityTypeFormGroup.get('entityType').value"
+                  required
+                  formControlName="entityIds">
+                </tb-entity-list>
+              }
+            </div>
           </div>
-          <div class="flex flex-row xs:flex-col gt-xs:min-h-19 gt-xs:items-center gt-xs:justify-start gt-xs:gap-4"
-               formGroupName="config">
-            <mat-slide-toggle formControlName="allEntities">
-              {{ 'version-control.all-entities' | translate }}
-            </mat-slide-toggle>
-            <tb-entity-list
-              class="flex-1"
-              [class.!hidden]="entityTypeFormGroup.get('config').get('allEntities').value"
-              [entityType]="entityTypeFormGroup.get('entityType').value"
-              required
-              formControlName="entityIds">
-            </tb-entity-list>
-          </div>
-        </div>
-      </mat-expansion-panel>
-    </div>
-    <div *ngIf="!entityTypesFormGroupArray().length">
-          <span translate
-                class="tb-prompt flex items-center justify-center">version-control.no-entities-to-export-prompt</span>
-    </div>
+        </mat-expansion-panel>
+      </div>
+    } @empty {
+      <span translate class="tb-prompt flex items-center justify-center">version-control.no-entities-to-export-prompt</span>
+    }
   </div>
   <div style="padding-top: 16px;" class="flex flex-row">
     <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts
index 8618e405b0..731ff7aa3c 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts
@@ -186,10 +186,6 @@ export class EntityTypesVersionCreateComponent extends PageComponent implements
     return !!(entityTypeControl as any).expanded;
   }
 
-  public trackByEntityType(index: number, entityTypeControl: AbstractControl): any {
-    return entityTypeControl;
-  }
-
   public removeEntityType(index: number) {
     (this.entityTypesVersionCreateFormGroup.get('entityTypes') as UntypedFormArray).removeAt(index);
   }
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
index b877d19b63..32da6c4e35 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
@@ -18,73 +18,72 @@
 <fieldset class="fields-group flex flex-col" [formGroup]="entityTypesVersionLoadFormGroup">
   <legend class="group-title" translate>version-control.entities-to-restore</legend>
   <div class="flex flex-col" style="flex: 1; overflow: auto;">
-    <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
-             let $index = index; last as isLast;"
-         class="flex flex-row items-center justify-start" [class.pb-2]="!isLast">
-      <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
-                           [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
-        <mat-expansion-panel-header>
-          <div class="flex flex-1 flex-row items-center justify-start">
-            <mat-panel-title>
-              <div class="flex flex-1 flex-row items-center justify-start">
-                <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
-              </div>
-            </mat-panel-title>
-            <span class="flex-1"></span>
-            <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
-                    type="button"
-                    (click)="removeEntityType($index)"
-                    matTooltip="{{ 'action.remove' | translate }}"
-                    matTooltipPosition="above">
-              <mat-icon>delete</mat-icon>
-            </button>
-          </div>
-        </mat-expansion-panel-header>
-        <div class="entity-type-config-content flex flex-col gap-2">
-          <mat-divider></mat-divider>
-          <div class="flex flex-row xs:flex-col gt-xs:gap-8">
-            <tb-entity-type-select
-              class="flex-1"
-              showLabel
-              formControlName="entityType"
-              required
-              [filterAllowedEntityTypes]="false"
-              [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
-            </tb-entity-type-select>
-            <div class="flex flex-1 flex-row xs:flex-col xs:gap-2 gt-xs:gap-4" formGroupName="config">
-              <div class="flex flex-1 flex-col">
-                <mat-checkbox #removeOtherEntitiesCheckbox
-                              formControlName="removeOtherEntities"
-                              (change)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup)">
-                  {{ 'version-control.remove-other-entities' | translate }}
-                </mat-checkbox>
-                <mat-checkbox formControlName="findExistingEntityByName">
-                  {{ 'version-control.find-existing-entity-by-name' | translate }}
-                </mat-checkbox>
-              </div>
-              <div class="flex flex-1 flex-col">
-                <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials">
-                  {{ 'version-control.load-credentials' | translate }}
-                </mat-checkbox>
-                <mat-checkbox *ngIf="!entityTypesWithoutRelatedData.has(entityTypeFormGroup.get('entityType').value)" formControlName="loadAttributes">
-                  {{ 'version-control.load-attributes' | translate }}
-                </mat-checkbox>
-                <mat-checkbox *ngIf="!entityTypesWithoutRelatedData.has(entityTypeFormGroup.get('entityType').value)" formControlName="loadRelations">
-                  {{ 'version-control.load-relations' | translate }}
-                </mat-checkbox>
-                <mat-checkbox *ngIf="typesWithCalculatedFields.has(entityTypeFormGroup.get('entityType').value)" formControlName="loadCalculatedFields">
-                  {{ 'version-control.load-calculated-fields' | translate }}
-                </mat-checkbox>
+    @for (entityTypeFormGroup of entityTypesFormGroupArray(); track entityTypeFormGroup; let index = $index, isLast = $last) {
+      <div class="flex flex-row items-center justify-start" [class.pb-2]="!isLast">
+        <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
+                             [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
+          <mat-expansion-panel-header>
+            <div class="flex flex-1 flex-row items-center justify-start">
+              <mat-panel-title>
+                <div class="flex flex-1 flex-row items-center justify-start">
+                  <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
+                </div>
+              </mat-panel-title>
+              <span class="flex-1"></span>
+              <button [class.hidden]="disabled" mat-icon-button style="min-width: 40px;"
+                      type="button"
+                      (click)="removeEntityType(index)"
+                      matTooltip="{{ 'action.remove' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </mat-expansion-panel-header>
+          <div class="entity-type-config-content flex flex-col gap-2">
+            <mat-divider></mat-divider>
+            <div class="flex flex-row xs:flex-col gt-xs:gap-8">
+              <tb-entity-type-select
+                class="flex-1"
+                showLabel
+                formControlName="entityType"
+                required
+                appearance="outline"
+                [filterAllowedEntityTypes]="false"
+                [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
+              </tb-entity-type-select>
+              <div class="flex flex-1 flex-row xs:flex-col xs:gap-2 gt-xs:gap-4" formGroupName="config">
+                <div class="flex flex-1 flex-col">
+                  <mat-checkbox #removeOtherEntitiesCheckbox
+                                formControlName="removeOtherEntities"
+                                (change)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup)">
+                    {{ 'version-control.remove-other-entities' | translate }}
+                  </mat-checkbox>
+                  <mat-checkbox formControlName="findExistingEntityByName">
+                    {{ 'version-control.find-existing-entity-by-name' | translate }}
+                  </mat-checkbox>
+                </div>
+                <div class="flex flex-1 flex-col">
+                  <mat-checkbox [class.hidden]="entityTypeFormGroup.get('entityType').value !== entityTypes.DEVICE" formControlName="loadCredentials">
+                    {{ 'version-control.load-credentials' | translate }}
+                  </mat-checkbox>
+                  <mat-checkbox [class.hidden]="entityTypesWithoutRelatedData.has(entityTypeFormGroup.get('entityType').value)" formControlName="loadAttributes">
+                    {{ 'version-control.load-attributes' | translate }}
+                  </mat-checkbox>
+                  <mat-checkbox [class.hidden]="entityTypesWithoutRelatedData.has(entityTypeFormGroup.get('entityType').value)" formControlName="loadRelations">
+                    {{ 'version-control.load-relations' | translate }}
+                  </mat-checkbox>
+                  <mat-checkbox [class.hidden]="!typesWithCalculatedFields.has(entityTypeFormGroup.get('entityType').value)" formControlName="loadCalculatedFields">
+                    {{ 'version-control.load-calculated-fields' | translate }}
+                  </mat-checkbox>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </mat-expansion-panel>
-    </div>
-    <div *ngIf="!entityTypesFormGroupArray().length">
-          <span translate
-                class="tb-prompt flex items-center justify-center">version-control.no-entities-to-restore-prompt</span>
-    </div>
+        </mat-expansion-panel>
+      </div>
+    } @empty {
+      <span translate class="tb-prompt flex items-center justify-center">version-control.no-entities-to-restore-prompt</span>
+    }
   </div>
   <div style="padding-top: 16px;" class="flex flex-row">
     <button mat-raised-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
index da4c31a1b8..5004160919 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
@@ -15,39 +15,40 @@
     limitations under the License.
 
 -->
-<section *ngIf="!versionCreateResult$">
+@if (!versionCreateResult$) {
   <mat-toolbar>
     <h2>{{ 'version-control.create-entity-version' | translate }}</h2>
     <span class="flex-1"></span>
   </mat-toolbar>
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
-                    *ngIf="isLoading$ | async">
+                    [class.hidden]="(isLoading$ | async) === false">
   </mat-progress-bar>
   <form [formGroup]="createVersionFormGroup" style="padding-top: 16px;">
     <fieldset [disabled]="isLoading$ | async">
       <div class="flex flex-1 flex-col">
         <tb-branch-autocomplete
           required
+          appearance="outline"
           formControlName="branch">
         </tb-branch-autocomplete>
-        <mat-form-field class="mat-block flex-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label translate>version-control.version-name</mat-label>
           <input required matInput formControlName="versionName">
-          <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
-                            createVersionFormGroup.get('versionName').hasError('pattern')">
+          <mat-error [class.hidden]="!(createVersionFormGroup.get('versionName').hasError('required') ||
+                                       createVersionFormGroup.get('versionName').hasError('pattern'))">
             {{ 'version-control.version-name-required' | translate }}
           </mat-error>
         </mat-form-field>
-        <mat-checkbox *ngIf="entityId.entityType === entityTypes.DEVICE" formControlName="saveCredentials" style="margin-bottom: 16px;">
+        <mat-checkbox [class.hidden]="entityId.entityType !== entityTypes.DEVICE" formControlName="saveCredentials" style="margin-bottom: 16px;">
           {{ 'version-control.export-credentials' | translate }}
         </mat-checkbox>
-        <mat-checkbox *ngIf="!entityTypesWithoutRelatedData.has(entityId.entityType)" formControlName="saveAttributes" style="margin-bottom: 16px;">
+        <mat-checkbox [class.hidden]="entityTypesWithoutRelatedData.has(entityId.entityType)" formControlName="saveAttributes" style="margin-bottom: 16px;">
           {{ 'version-control.export-attributes' | translate }}
         </mat-checkbox>
-        <mat-checkbox *ngIf="!entityTypesWithoutRelatedData.has(entityId.entityType)" formControlName="saveRelations" style="margin-bottom: 16px;">
+        <mat-checkbox [class.hidden]="entityTypesWithoutRelatedData.has(entityId.entityType)" formControlName="saveRelations" style="margin-bottom: 16px;">
           {{ 'version-control.export-relations' | translate }}
         </mat-checkbox>
-        <mat-checkbox *ngIf="typesWithCalculatedFields.has(entityId.entityType)" formControlName="saveCalculatedFields" class="mb-4">
+        <mat-checkbox [class.hidden]="!typesWithCalculatedFields.has(entityId.entityType)" formControlName="saveCalculatedFields" class="mb-4">
           {{ 'version-control.export-calculated-fields' | translate }}
         </mat-checkbox>
       </div>
@@ -67,10 +68,9 @@
       {{ 'action.create' | translate }}
     </button>
   </div>
-</section>
-<section *ngIf="versionCreateResult$">
-  <section *ngIf="(versionCreateResult$ | async)?.done || resultMessage; else progress">
-    <section *ngIf="resultMessage">
+} @else {
+  @if ((versionCreateResult$ | async)?.done || resultMessage) {
+    <section [class.hidden]="!resultMessage">
       <div class="mat-headline-6 vc-result-message">{{ resultMessage }}</div>
       <div class="flex items-center justify-end gap-2">
         <button mat-button color="primary"
@@ -81,13 +81,12 @@
         </button>
       </div>
     </section>
-  </section>
-  <ng-template #progress>
+  } @else {
     <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.creating-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
       </div>
     </section>
-  </ng-template>
-</section>
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
index 1183223850..2936bbf3eb 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
@@ -15,51 +15,53 @@
     limitations under the License.
 
 -->
-<section *ngIf="!versionLoadResult$">
-  <mat-toolbar *ngIf="entityDataInfo">
-    <h2>{{ 'version-control.restore-entity-from-version' | translate: {versionName} }}</h2>
-    <span class="flex-1"></span>
-  </mat-toolbar>
-  <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
-                    *ngIf="entityDataInfo && (isLoading$ | async)">
-  </mat-progress-bar>
-  <mat-spinner *ngIf="!entityDataInfo" mode="indeterminate" diameter="80"></mat-spinner>
-  <form *ngIf="entityDataInfo" [formGroup]="restoreFormGroup" style="padding-top: 16px;">
-    <fieldset [disabled]="isLoading$ | async">
-      <div class="flex flex-1 flex-col">
-        <mat-checkbox *ngIf="entityDataInfo.hasCredentials" formControlName="loadCredentials" style="margin-bottom: 16px;">
-          {{ 'version-control.load-credentials' | translate }}
-        </mat-checkbox>
-        <mat-checkbox *ngIf="entityDataInfo.hasAttributes" formControlName="loadAttributes" style="margin-bottom: 16px;">
-          {{ 'version-control.load-attributes' | translate }}
-        </mat-checkbox>
-        <mat-checkbox *ngIf="entityDataInfo.hasRelations" formControlName="loadRelations" style="margin-bottom: 16px;">
-          {{ 'version-control.load-relations' | translate }}
-        </mat-checkbox>
-        <mat-checkbox *ngIf="entityDataInfo.hasCalculatedFields" formControlName="loadCalculatedFields" class="mb-4">
-          {{ 'version-control.load-calculated-fields' | translate }}
-        </mat-checkbox>
-      </div>
-    </fieldset>
-  </form>
-  <div *ngIf="entityDataInfo"  class="flex items-center justify-end gap-2">
-    <button mat-button color="primary"
-            type="button"
-            [disabled]="(isLoading$ | async)"
-            (click)="cancel()" cdkFocusInitial>
-      {{ 'action.cancel' | translate }}
-    </button>
-    <button mat-raised-button color="primary"
-            type="button"
-            (click)="restore()"
-            [disabled]="(isLoading$ | async) || restoreFormGroup.invalid">
-      {{ 'action.restore' | translate }}
-    </button>
-  </div>
-</section>
-<section *ngIf="versionLoadResult$">
-  <section *ngIf="(versionLoadResult$ | async)?.done || errorMessage; else progress">
-    <section *ngIf="errorMessage">
+@if (!versionLoadResult$) {
+  @if (entityDataInfo) {
+    <mat-toolbar>
+      <h2>{{ 'version-control.restore-entity-from-version' | translate: {versionName} }}</h2>
+      <span class="flex-1"></span>
+    </mat-toolbar>
+    <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
+                      [class.hidden]="(isLoading$ | async) === false">
+    </mat-progress-bar>
+    <form [formGroup]="restoreFormGroup" style="padding-top: 16px;">
+      <fieldset [disabled]="isLoading$ | async">
+        <div class="flex flex-1 flex-col">
+          <mat-checkbox [class.hidden]="!entityDataInfo?.hasCredentials" formControlName="loadCredentials" style="margin-bottom: 16px;">
+            {{ 'version-control.load-credentials' | translate }}
+          </mat-checkbox>
+          <mat-checkbox [class.hidden]="!entityDataInfo?.hasAttributes" formControlName="loadAttributes" style="margin-bottom: 16px;">
+            {{ 'version-control.load-attributes' | translate }}
+          </mat-checkbox>
+          <mat-checkbox [class.hidden]="!entityDataInfo?.hasRelations" formControlName="loadRelations" style="margin-bottom: 16px;">
+            {{ 'version-control.load-relations' | translate }}
+          </mat-checkbox>
+          <mat-checkbox [class.hidden]="!entityDataInfo?.hasCalculatedFields" formControlName="loadCalculatedFields" class="mb-4">
+            {{ 'version-control.load-calculated-fields' | translate }}
+          </mat-checkbox>
+        </div>
+      </fieldset>
+    </form>
+    <div class="flex items-center justify-end gap-2">
+      <button mat-button color="primary"
+              type="button"
+              [disabled]="(isLoading$ | async)"
+              (click)="cancel()" cdkFocusInitial>
+        {{ 'action.cancel' | translate }}
+      </button>
+      <button mat-raised-button color="primary"
+              type="button"
+              (click)="restore()"
+              [disabled]="(isLoading$ | async) || restoreFormGroup.invalid">
+        {{ 'action.restore' | translate }}
+      </button>
+    </div>
+  } @else {
+    <mat-spinner mode="indeterminate" diameter="80"></mat-spinner>
+  }
+} @else {
+  @if ((versionLoadResult$ | async)?.done || errorMessage) {
+    <section [class.hidden]="!errorMessage">
       <div class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
       <div class="flex items-center justify-end gap-2">
         <button mat-button color="primary"
@@ -70,13 +72,12 @@
         </button>
       </div>
     </section>
-  </section>
-  <ng-template #progress>
+  } @else {
     <section class="flex flex-col items-center justify-center">
       <div class="mat-headline-6 vc-result-message progress">
         <span translate>version-control.restoring-entity-version</span>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
       </div>
     </section>
-  </ng-template>
-</section>
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html b/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
index 71796247dc..6bd46bb9c8 100644
--- a/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
@@ -19,7 +19,7 @@
   <form [formGroup]="confirmFormGroup" style="padding-top: 16px;">
     <fieldset [disabled]="(isLoading$ | async)">
       <div style="user-select: none;" [innerHTML]="removeOtherEntitiesConfirmText"></div>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <input matInput formControlName="verification"/>
       </mat-form-field>
     </fieldset>
diff --git a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html
index 4515797a85..665b4d63ad 100644
--- a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html
@@ -15,7 +15,10 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="branchFormGroup" class="mat-block" [floatLabel]="(selectionMode || emptyPlaceholder) ? 'always' : 'auto'" subscriptSizing="{{ subscriptSizing }}">
+<mat-form-field [formGroup]="branchFormGroup" class="mat-block"
+                [floatLabel]="(selectionMode || emptyPlaceholder) ? 'always' : 'auto'"
+                [appearance]="appearance"
+                [subscriptSizing]="subscriptSizing">
   <mat-label>{{ 'version-control.branch' | translate }}</mat-label>
   <input matInput type="text" placeholder="{{emptyPlaceholder || ((loading ? 'common.loading' : 'version-control.select-branch') | translate)}}"
          #branchInput
diff --git a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.ts b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.ts
index fb440477f8..a6d6d5e87b 100644
--- a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.ts
@@ -35,7 +35,7 @@ import { BranchInfo } from '@shared/models/vc.models';
 import { EntitiesVersionControlService } from '@core/http/entities-version-control.service';
 import { isNotEmptyStr } from '@core/utils';
 import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import { SubscriptSizing } from '@angular/material/form-field';
+import { SubscriptSizing, MatFormFieldAppearance } from '@angular/material/form-field';
 
 @Component({
   selector: 'tb-branch-autocomplete',
@@ -57,6 +57,9 @@ export class BranchAutocompleteComponent implements ControlValueAccessor, OnInit
   @Input()
   subscriptSizing: SubscriptSizing = 'fixed';
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   private requiredValue: boolean;
 
   get required(): boolean {

From c9e75d776c84948f129a3c8f54ddad61af709fcd Mon Sep 17 00:00:00 2001
From: deaflynx <artemio.babak@gmail.com>
Date: Mon, 15 Sep 2025 17:29:13 +0300
Subject: [PATCH 2/2] Version control: minor form style enhancement.

---
 .../components/vc/entity-types-version-create.component.html     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
index 343040e782..b2160e8ab8 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
@@ -89,6 +89,7 @@
                 <tb-entity-list
                   class="flex-1"
                   appearance="outline"
+                  subscriptSizing="dynamic"
                   [entityType]="entityTypeFormGroup.get('entityType').value"
                   required
                   formControlName="entityIds">