git commit -m "WEB-355 Alignments of buttons and input boxes blemished in create-edit-template.component.html"

src/app/templates/create-edit-template/create-edit-template.component.html

@@ -6,7 +6,7 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
             <mat-select required formControlName="entity">
-              <mat-option *ngFor="let entity of templateData.entities" [value]="entity.id">
+              <mat-option *ngFor="let entity of templateData.entities; trackBy: trackByEntityId" [value]="entity.id">
                 {{ entity.name }}
               </mat-option>
             </mat-select>
@@ -19,7 +19,7 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
             <mat-select required formControlName="type">
-              <mat-option *ngFor="let type of templateData.types" [value]="type.id">
+              <mat-option *ngFor="let type of templateData.types; trackBy: trackByTypeId" [value]="type.id">
                 {{ type.name }}
               </mat-option>
             </mat-select>
@@ -41,14 +41,18 @@
       </mat-card-content>
     </form>
 
-    <div role="toggle" class="flex-33">
+    <mat-card-content>
+      <div role="toggle" class="advanced-options-wrapper">
         <button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">
           {{ 'labels.buttons.Advanced Options' | translate }}
         </button>
       </div>
 
       <ng-container role="mappers" *ngIf="showAdvanceOptions">
-      <div *ngFor="let mapper of mappers; index as i" class="layout-row gap-2percent">
+        <div
+          *ngFor="let mapper of mappers; index as i; trackBy: trackByMapperIndex"
+          class="mapper-row layout-row gap-2percent"
+        >
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Mapper Key' | translate }}</mat-label>
             <input matInput [formControl]="mapper.mapperskey" />
@@ -73,8 +77,10 @@
           </button>
         </div>
       </ng-container>
+    </mat-card-content>
 
-    <div role="editor">
+    <mat-card-content>
+      <div role="editor" class="editor-wrapper">
         <label for="ckeditor" class="required-label required-label-ckeditor">
           {{ 'labels.inputs.Text' | translate }} <span class="required-asterisk">*</span>
         </label>
@@ -85,7 +91,9 @@
           [data]="templateData.template?.text"
         ></ckeditor>
       </div>
+    </mat-card-content>
 
+    <mat-card-content>
       <div role="template-parameters">
         <mat-accordion>
           <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 0">
@@ -100,7 +108,7 @@
                 mat-stroked-button
                 color="primary"
                 class="parameter"
-              *ngFor="let label of clientParameterLabels"
+                *ngFor="let label of clientParameterLabels; trackBy: trackByLabel"
                 (click)="addText(label)"
               >
                 {{ label }}
@@ -120,7 +128,7 @@
                 mat-stroked-button
                 color="primary"
                 class="parameter"
-              *ngFor="let label of loanParameterLabels"
+                *ngFor="let label of loanParameterLabels; trackBy: trackByLabel"
                 (click)="addText(label)"
               >
                 {{ label }}
@@ -140,7 +148,7 @@
                 mat-stroked-button
                 color="primary"
                 class="parameter"
-              *ngFor="let label of repaymentParameterLabels"
+                *ngFor="let label of repaymentParameterLabels; trackBy: trackByLabel"
                 (click)="addText(label)"
               >
                 {{ label }}
@@ -149,6 +157,7 @@
           </mat-expansion-panel>
         </mat-accordion>
       </div>
+    </mat-card-content>
 
     <mat-card-actions class="m-b-20 layout-row layout-xs-column layout-align-center gap-5px">
       <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>

src/app/templates/create-edit-template/create-edit-template.component.scss

@@ -0,0 +1,49 @@
+// Advanced Options button wrapper - aligns with Name field above
+.advanced-options-wrapper {
+  margin-bottom: 16px;
+}
+
+// Mapper row styling - adds space between Advanced Options button and Mapper Key field
+.mapper-row {
+  margin-top: 16px;
+  margin-bottom: 8px;
+
+  // Ensure buttons don't touch the right border
+  .mapper-button {
+    margin-left: 8px;
+  }
+}
+
+// Editor wrapper - prevents CKEditor from touching borders on left and right
+.editor-wrapper {
+  margin-top: 16px;
+
+  .required-label {
+    display: block;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .required-asterisk {
+    color: #f44336;
+  }
+
+  // CKEditor container spacing
+  ::ng-deep {
+    .ck-editor {
+      margin: 0;
+
+      .ck-editor__main {
+        .ck-content {
+          min-height: 200px;
+        }
+      }
+    }
+  }
+}
+
+// Ensure mat-card-content has consistent padding
+mat-card-content {
+  padding: 16px;
+}

src/app/templates/create-edit-template/create-edit-template.component.ts

@@ -259,4 +259,43 @@ export class CreateEditComponent implements OnInit {
       });
     }
   }
+
+  /**
+   * TrackBy function for mappers array to improve ngFor performance.
+   * @param {number} index Index of the item
+   * @returns {number} Index as unique identifier
+   */
+  trackByMapperIndex(index: number): number {
+    return index;
+  }
+
+  /**
+   * TrackBy function for parameter labels to improve ngFor performance.
+   * @param {number} index Index of the item
+   * @param {string} label Label string
+   * @returns {string} Label as unique identifier
+   */
+  trackByLabel(index: number, label: string): string {
+    return label;
+  }
+
+  /**
+   * TrackBy function for entities dropdown to improve ngFor performance.
+   * @param {number} index Index of the item
+   * @param {any} entity Entity object
+   * @returns {number} Entity ID as unique identifier
+   */
+  trackByEntityId(index: number, entity: any): number {
+    return entity.id;
+  }
+
+  /**
+   * TrackBy function for types dropdown to improve ngFor performance.
+   * @param {number} index Index of the item
+   * @param {any} type Type object
+   * @returns {number} Type ID as unique identifier
+   */
+  trackByTypeId(index: number, type: any): number {
+    return type.id;
+  }
 }