(feat) O3-2531: Enhance form control sizing for improved UX in tablet mode

packages/esm-form-entry-app/src/app/fe-wrapper/fe-wrapper.component.html

@@ -1,33 +1,55 @@
 <div *ngIf="loadingError" class="form-container">
   <div class="cds--tile error-tile">
-    <h4 class="heading">{{'errorWithForm' | translate}}</h4>
+    <h4 class="heading">{{ 'errorWithForm' | translate }}</h4>
     <p class="helperText">
-      {{'tryOpeningAnotherForm' | translate}}
+      {{ 'tryOpeningAnotherForm' | translate }}
     </p>
     <p class="separator">or</p>
     <button class="cds--btn cds--btn--sm cds--btn--ghost" (click)="closeForm()">
-      {{'closeThisPanel' | translate}}
+      {{ 'closeThisPanel' | translate }}
     </button>
   </div>
 </div>
-<div *ngIf="formState !== 'submitted'" [ngClass]="{'error': formState === 'readyWithValidationErrors'}">
+<div *ngIf="formState !== 'submitted'" [ngClass]="{ error: formState === 'readyWithValidationErrors' }">
   <div class="content">
-    <div *ngIf="formState === 'ready' || formState === 'readyWithValidationErrors' || formState === 'submitting' || formState === 'submissionError'" class="form-container">
+    <div
+      *ngIf="
+        formState === 'ready' ||
+        formState === 'readyWithValidationErrors' ||
+        formState === 'submitting' ||
+        formState === 'submissionError'
+      "
+      class="form-container"
+    >
       <div>
         <form class="cds--form no-padding" *ngIf="form" [formGroup]="form.rootNode.control">
-          <ofe-form-renderer [labelMap]="labelMap" [node]="form.rootNode"></ofe-form-renderer>          
+          <ofe-form-renderer
+            [formSubmissionTemplate]="buttonsTemplate"
+            [labelMap]="labelMap"
+            [node]="form.rootNode"
+          ></ofe-form-renderer>
         </form>
       </div>
-      <div *ngIf="showDiscardSubmitButtons" class="cds-btn--set button-set">
-        <button class="cds--btn cds--btn--secondary" (click)="closeForm()" type="button">{{ 'discardButton' | translate}}</button>
-        <button [disabled]="formState === 'submitting'" class="cds--btn cds--btn--primary" (click)="onSubmit()" type="submit">
-          <span *ngIf="formState !== 'submitting'">{{'saveAndCloseButton' | translate}}</span>
-          <loader *ngIf="formState === 'submitting'" loadingMessage={{submitting | translate}}></loader>
-        </button>
+      <ng-template #buttonsTemplate>
+        <div *ngIf="showDiscardSubmitButtons" class="saveAndCloseButtons">
+          <button
+            [disabled]="formState === 'submitting'"
+            class="cds--btn cds--btn--primary"
+            (click)="onSubmit()"
+            type="submit"
+          >
+            <span *ngIf="formState !== 'submitting'">{{ 'saveAndCloseButton' | translate }}</span>
+            <loader *ngIf="formState === 'submitting'" [loadingMessage]="'submitting' | translate"></loader>
+          </button>
+          <button class="cds--btn cds--btn--secondary" (click)="closeForm()" type="button">
+            {{ 'discardButton' | translate }}
+          </button>
+        </div>
+      </ng-template>
     </div>
   </div>
-</div>
 
-<div *ngIf="formState === 'loading'" class="loader-container">
-  <loader class="loader" loadingMessage={{loading | translate=""></loader>
+  <div *ngIf="formState === 'loading'" class="loader-container">
+    <loader class="loader" [loadingMessage]="'loading' | translate"></loader>
+  </div>
 </div>

packages/esm-form-entry-app/src/app/fe-wrapper/fe-wrapper.component.scss

@@ -166,3 +166,20 @@
   border-bottom: 1px solid var(--brand-03);
   padding: 0.625rem;
 }
+
+.saveAndCloseButtons {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  row-gap: 0.625rem;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  margin-left: 0.625rem;
+  @include type.type-style("body-short-01");
+  border-top: 1px solid #a8a8a8;
+
+  & button {
+    width: 100%;
+    padding-inline-end: 0;
+  }
+}

yarn.lock

@@ -7280,31 +7280,30 @@ __metadata:
   linkType: hard
 
 "@openmrs/ngx-formentry@npm:next":
-  version: 4.0.1-pre.287
-  resolution: "@openmrs/ngx-formentry@npm:4.0.1-pre.287"
+  version: 4.0.1-pre.321
+  resolution: "@openmrs/ngx-formentry@npm:4.0.1-pre.321"
   dependencies:
     tslib: ^2.3.0
   peerDependencies:
-    "@angular-extensions/elements": ^12.6.0
-    "@angular/animations": ">=11.2.14 <=12.0.4"
-    "@angular/cdk": ">=11.2.13 <=12.0.4"
-    "@angular/common": ">=11.2.14 <=12.0.4"
-    "@angular/compiler": ">=11.2.14 <=12.0.4"
-    "@angular/core": ">=11.2.14 <=12.0.4"
-    "@angular/forms": ">=11.2.14 <=12.0.4"
+    "@angular/animations": ^14.3.0
+    "@angular/cdk": ^14.2.7
+    "@angular/common": ^14.3.0
+    "@angular/compiler": ^14.3.0
+    "@angular/compiler-cli": ^14.3.0
+    "@angular/core": ^14.3.0
+    "@angular/forms": ^14.3.0
     "@carbon/styles": ^1.11.0
-    "@ng-select/ng-select": ^6.1.0
-    "@ngx-translate/core": ^13.0.0
-    hammerjs: ^2.0.8
-    lodash: ^4.17.4
-    moment: ^2.17.1
-    ngx-file-uploader: ^0.0.18
-    ngx-webcam: ^0.2.2
-    reflect-metadata: ^0.1.9
-    shelljs: ^0.7.0
+    "@ng-select/ng-select": ^9.1.0
+    "@ngx-translate/core": ^14.0.0
+    "@openmrs/ngx-file-uploader": "*"
+    lodash: "*"
+    moment: ^2.29.4
+    ngx-webcam: ^0.4.1
+    reflect-metadata: ^0.1.13
+    shelljs: ^0.7.8
     slick-carousel: ^1.6.0
     tree-model: ^1.0.5
-  checksum: 8f3a07a3fc38b8dea5c4a1027a401e81f154a4860801fb8566b24c700498a1522fcda8b9c8703ab00fe9a42690e21a1596413779bf8dc7cc7311a92a394f78b1
+  checksum: c5492992602b293e8712176ae51292ef7c9c687eb91b781e5c33f120a32223839f39a9aa01df431d4fd5268c402c1d332e380186c97e1b52ce0c501970225ff8
   languageName: node
   linkType: hard