From 4eafcec8f983ff4d9517e28090bff065247d23b0 Mon Sep 17 00:00:00 2001
From: nikhil-ht <ngorde@elimu.io>
Date: Wed, 28 Dec 2022 18:56:46 +0530
Subject: [PATCH 01/10] Support grid item control

---
 src/app/app.module.ts                         |  4 +-
 src/app/lhc-form/lhc-form.component.html      |  3 +
 .../lhc-item-gird/lhc-item-gird.component.css |  4 ++
 .../lhc-item-gird.component.html              | 56 +++++++++++++++++++
 .../lhc-item-gird.component.spec.ts           | 23 ++++++++
 .../lhc-item-gird/lhc-item-gird.component.ts  | 18 ++++++
 .../lhc-item-group.component.html             |  3 +
 7 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 src/app/lhc-item-gird/lhc-item-gird.component.css
 create mode 100644 src/app/lhc-item-gird/lhc-item-gird.component.html
 create mode 100644 src/app/lhc-item-gird/lhc-item-gird.component.spec.ts
 create mode 100644 src/app/lhc-item-gird/lhc-item-gird.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1987df171..cc98a83d9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -54,6 +54,7 @@ import { SafeHtmlPipe } from './safe-html.pipe';
 import { LhcButtonPopoverComponent } from './lhc-button-popover/lhc-button-popover.component';
 import { LhcItemAttachmentComponent } from './lhc-item-attachment/lhc-item-attachment.component';
 import { LhcItemMessagesComponent } from './lhc-item-messages/lhc-item-messages.component';
+import { LhcItemGirdComponent } from './lhc-item-gird/lhc-item-gird.component';
 
 
 registerLocaleData(en);
@@ -87,7 +88,8 @@ registerLocaleData(en);
     SafeHtmlPipe,
     LhcButtonPopoverComponent,
     LhcItemAttachmentComponent,
-    LhcItemMessagesComponent
+    LhcItemMessagesComponent,
+    LhcItemGirdComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/lhc-form/lhc-form.component.html b/src/app/lhc-form/lhc-form.component.html
index 64d13041c..db37cc686 100644
--- a/src/app/lhc-form/lhc-form.component.html
+++ b/src/app/lhc-form/lhc-form.component.html
@@ -21,6 +21,9 @@
         <ng-container *ngSwitchCase="'matrix'">
           <lhc-group-matrix [item]="lhcFormData" [formLevel]='true'></lhc-group-matrix>
         </ng-container>
+        <ng-container *ngSwitchCase="'grid'">
+          <lhc-item-gird [item]="lhcFormData" [formLevel]='true'></lhc-item-gird>
+        </ng-container>
         <!-- vertical -->
         <ng-container *ngSwitchDefault>
           <!-- data row, for each item -->
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.css b/src/app/lhc-item-gird/lhc-item-gird.component.css
new file mode 100644
index 000000000..1dd2a512c
--- /dev/null
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.css
@@ -0,0 +1,4 @@
+.lhc-form-horizontal-table td {
+    vertical-align: top;
+  }
+  
\ No newline at end of file
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.html b/src/app/lhc-item-gird/lhc-item-gird.component.html
new file mode 100644
index 000000000..dcc8280ca
--- /dev/null
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.html
@@ -0,0 +1,56 @@
+<ng-container *ngIf="item">
+    <div class="lhc-layout-horizontal lf-table-item {{lhcDataService.getSiblingStatus(item)}} "
+      *ngIf="item._horizontalTableHeader && lhcDataService.getHorizontalTableInfo()[item._horizontalTableId]">
+      <div ng-attr-role="{{item.header ? 'heading' : undefined}}"
+          ng-attr-aria-level="{{item.header ? item._displayLevel+1 : undefined}}"
+          class="lhc-form-horizontal-table-title" *ngIf="!formLevel">
+        <lhc-item-question-text [item]="item" ></lhc-item-question-text>
+      </div>
+  
+      <table class="lhc-form-horizontal-table">
+        <colgroup>
+          <col class="lhc-de-button" *ngIf="item._questionRepeatable && lhcDataService.getHorizontalTableInfo()[item._horizontalTableId].tableRows.length>1">
+          <ng-container *ngFor="let col of lhcDataService.getHorizontalTableInfo()[item._horizontalTableId].columnHeaders; trackBy lhcDataService.trackByColumnHeaderId">
+            <col *ngIf="!col.item._isHiddenFromView" [ngStyle]="lhcDataService.getTableColumnStyle(col)">
+          </ng-container>
+        </colgroup>
+        <thead>
+        <tr>
+          <th class="lhc-form-horizontal-table-header" *ngIf="item._questionRepeatable && lhcDataService.getHorizontalTableInfo()[item._horizontalTableId].tableRows.length>1"></th>
+          <ng-container *ngFor="let col of lhcDataService.getHorizontalTableInfo()[item._horizontalTableId].columnHeaders; trackBy lhcDataService.trackByColumnHeaderId">
+            <th *ngIf="!col.item._isHiddenFromView" class="lhc-form-horizontal-table-header" id="{{col.id}}">
+              <lhc-item-question-text [item]="col.item" ></lhc-item-question-text>
+            </th>
+          </ng-container>
+        </tr>
+        </thead>
+        <tbody id="" class="">
+        <tr *ngFor="let row of lhcDataService.getHorizontalTableInfo()[item._horizontalTableId].tableRows; trackBy: lhcDataService.trackByRowHeaderElementId"
+            class="lhc-data-row has-ng-animate">
+          <td class="lhc-de-button" *ngIf="item._questionRepeatable && lhcDataService.getHorizontalTableInfo()[item._horizontalTableId].tableRows.length>1">
+            <button *ngIf="!lhcDataService.hasOneRepeatingItem(item)" type="button"
+                    id="del-{{row.header._elementId}}"
+                    class="lhc-float-button lhc-button" (click)="lhcDataService.removeOneRepeatingItem(row.header)"
+                    title='Remove this row of "{{ row.header.question }}"'>-</button>
+          </td>
+  
+          <ng-container *ngFor="let cell of row.cells; trackBy: lhcDataService.trackByElementId">
+            <td *ngIf="!cell._isHiddenFromView"
+                class="{{lhcDataService.getRowClass(cell)}} {{lhcDataService.getSkipLogicClass(cell)}} {{lhcDataService.getActiveRowClass(cell)}}">
+              <div class="lf-form-item-data tooltipContainer">
+                <lhc-item-question [item]="cell" [options]="{hideQuestionText: true}" class="lhc-de"></lhc-item-question>
+              </div>
+            </td>
+          </ng-container>
+        </tr>
+        </tbody>
+      </table>
+  
+      <!-- a button at the end of each repeating section -->
+      <div *ngIf="item._questionRepeatable && lhcDataService.targetShown(item) && !item._isHiddenFromView" class="lhc-button-padding {{lhcDataService.getSkipLogicClass(item)}}">
+        <lhc-button-popover [item]="item" [popoverType]="'repeating-item'" buttonLabel= '+ Add another row of "{{item._text}}"' [append]="true"></lhc-button-popover>
+      </div>
+    </div>
+  
+  </ng-container>
+  
\ No newline at end of file
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.spec.ts b/src/app/lhc-item-gird/lhc-item-gird.component.spec.ts
new file mode 100644
index 000000000..d929f9f3e
--- /dev/null
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LhcItemGirdComponent } from './lhc-item-gird.component';
+
+describe('LhcItemGirdComponent', () => {
+  let component: LhcItemGirdComponent;
+  let fixture: ComponentFixture<LhcItemGirdComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LhcItemGirdComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LhcItemGirdComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.ts b/src/app/lhc-item-gird/lhc-item-gird.component.ts
new file mode 100644
index 000000000..45a74d23a
--- /dev/null
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { LhcDataService} from '../../lib/lhc-data.service';
+
+@Component({
+  selector: 'lhc-item-gird',
+  templateUrl: './lhc-item-gird.component.html',
+  styleUrls: ['./lhc-item-gird.component.css']
+})
+export class LhcItemGirdComponent  {
+
+
+  @Input() item;
+  @Input() formLevel: boolean = false;
+  
+  constructor(public lhcDataService: LhcDataService) {
+  }
+
+}
diff --git a/src/app/lhc-item-group/lhc-item-group.component.html b/src/app/lhc-item-group/lhc-item-group.component.html
index 7bfa62de7..38eb4ff39 100644
--- a/src/app/lhc-item-group/lhc-item-group.component.html
+++ b/src/app/lhc-item-group/lhc-item-group.component.html
@@ -8,4 +8,7 @@
   <ng-container *ngSwitchCase="'vertical'">
     <lhc-group-vertical [item]="item"></lhc-group-vertical>
   </ng-container>
+  <ng-container *ngSwitchCase="'grid'">
+    <lhc-item-gird [item]="item"></lhc-item-gird>
+  </ng-container>
 </ng-container>

From 060d2fa70e27c322a6e89bca78651308f399eb51 Mon Sep 17 00:00:00 2001
From: nikhil-ht <ngorde@elimu.io>
Date: Mon, 2 Jan 2023 16:11:38 +0530
Subject: [PATCH 02/10] Added component for grid view

---
 .../lhc-item-gird/lhc-item-gird.component.css | 16 +++-
 .../lhc-item-gird.component.html              | 89 ++++++++-----------
 src/fhir/sdc-import-common.js                 | 10 ++-
 3 files changed, 58 insertions(+), 57 deletions(-)

diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.css b/src/app/lhc-item-gird/lhc-item-gird.component.css
index 1dd2a512c..e52eedf2a 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.css
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.css
@@ -1,4 +1,18 @@
 .lhc-form-horizontal-table td {
     vertical-align: top;
   }
-  
\ No newline at end of file
+  
+  .lhc-form .lf-form-matrix-table-title {
+    background: #e6f1ff; /*#E8E8E8;*/
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    margin: 0 0 0 1px;
+    text-align: left;
+  
+    border-width: 0;
+    border-top: 2px solid white; /* leave space between headers */
+    padding: 4px 2px 4px 2px;
+  }
\ No newline at end of file
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.html b/src/app/lhc-item-gird/lhc-item-gird.component.html
index dcc8280ca..43d1b2e52 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.html
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.html
@@ -1,56 +1,37 @@
-<ng-container *ngIf="item">
-    <div class="lhc-layout-horizontal lf-table-item {{lhcDataService.getSiblingStatus(item)}} "
-      *ngIf="item._horizontalTableHeader && lhcDataService.getHorizontalTableInfo()[item._horizontalTableId]">
-      <div ng-attr-role="{{item.header ? 'heading' : undefined}}"
-          ng-attr-aria-level="{{item.header ? item._displayLevel+1 : undefined}}"
-          class="lhc-form-horizontal-table-title" *ngIf="!formLevel">
-        <lhc-item-question-text [item]="item" ></lhc-item-question-text>
-      </div>
-  
-      <table class="lhc-form-horizontal-table">
-        <colgroup>
-          <col class="lhc-de-button" *ngIf="item._questionRepeatable && lhcDataService.getHorizontalTableInfo()[item._horizontalTableId].tableRows.length>1">
-          <ng-container *ngFor="let col of lhcDataService.getHorizontalTableInfo()[item._horizontalTableId].columnHeaders; trackBy lhcDataService.trackByColumnHeaderId">
-            <col *ngIf="!col.item._isHiddenFromView" [ngStyle]="lhcDataService.getTableColumnStyle(col)">
-          </ng-container>
-        </colgroup>
-        <thead>
-        <tr>
-          <th class="lhc-form-horizontal-table-header" *ngIf="item._questionRepeatable && lhcDataService.getHorizontalTableInfo()[item._horizontalTableId].tableRows.length>1"></th>
-          <ng-container *ngFor="let col of lhcDataService.getHorizontalTableInfo()[item._horizontalTableId].columnHeaders; trackBy lhcDataService.trackByColumnHeaderId">
-            <th *ngIf="!col.item._isHiddenFromView" class="lhc-form-horizontal-table-header" id="{{col.id}}">
-              <lhc-item-question-text [item]="col.item" ></lhc-item-question-text>
-            </th>
-          </ng-container>
-        </tr>
-        </thead>
-        <tbody id="" class="">
-        <tr *ngFor="let row of lhcDataService.getHorizontalTableInfo()[item._horizontalTableId].tableRows; trackBy: lhcDataService.trackByRowHeaderElementId"
-            class="lhc-data-row has-ng-animate">
-          <td class="lhc-de-button" *ngIf="item._questionRepeatable && lhcDataService.getHorizontalTableInfo()[item._horizontalTableId].tableRows.length>1">
-            <button *ngIf="!lhcDataService.hasOneRepeatingItem(item)" type="button"
-                    id="del-{{row.header._elementId}}"
-                    class="lhc-float-button lhc-button" (click)="lhcDataService.removeOneRepeatingItem(row.header)"
-                    title='Remove this row of "{{ row.header.question }}"'>-</button>
+<div *ngIf="item" class="lhc-layout-matrix lf-table-item {{lhcDataService.getSiblingStatus(item)}}">
+  <div class="lf-form-matrix-table-title" *ngIf="!formLevel">
+    <lhc-item-question-text [item]="item" ></lhc-item-question-text>
+  </div>
+
+  <table class="lf-form-matrix-table lf-form-table">
+      <colgroup>
+        <col class="lf-question">
+        <col *ngFor="let answer of item.items[0].answers">
+        <col class="other-answer" *ngIf="item.items[0].dataType ==='CWE'">
+      </colgroup>
+      <thead>
+
+      <tr class="lhc-matrix-table-header-row">
+        <th class="lf-question lf-form-table-header"></th>
+        <th *ngFor="let answer of item.items[1].items; index as i;"
+            class="lf-form-matrix-cell lf-form-table-header"
+            id="answer-{{index}}">{{answer.question}}</th>
+        <th class="lf-form-matrix-cell-other lf-form-table-header" *ngIf="item.items[0].dataType ==='CWE'"
+         id="otherAnswer">Other</th>
+      </tr>
+      </thead>
+      <tbody>
+      <ng-container *ngFor="let subItem of item.items; trackBy: lhcDataService.trackByElementId">
+        <tr *ngIf="!subItem._isHiddenFromView" role="radiogroup"
+            aria-labeledby="label-{{subItem._elementId }}"
+            aria-describedby="help-{{ subItem._parentItem._elementId }} help-{{ subItem._elementId }}">
+          <td class="lf-question">
+            <lhc-item-question-text [item]="subItem" ></lhc-item-question-text>
+            <lhc-item-messages [item]="subItem" ></lhc-item-messages>
           </td>
-  
-          <ng-container *ngFor="let cell of row.cells; trackBy: lhcDataService.trackByElementId">
-            <td *ngIf="!cell._isHiddenFromView"
-                class="{{lhcDataService.getRowClass(cell)}} {{lhcDataService.getSkipLogicClass(cell)}} {{lhcDataService.getActiveRowClass(cell)}}">
-              <div class="lf-form-item-data tooltipContainer">
-                <lhc-item-question [item]="cell" [options]="{hideQuestionText: true}" class="lhc-de"></lhc-item-question>
-              </div>
-            </td>
-          </ng-container>
         </tr>
-        </tbody>
-      </table>
-  
-      <!-- a button at the end of each repeating section -->
-      <div *ngIf="item._questionRepeatable && lhcDataService.targetShown(item) && !item._isHiddenFromView" class="lhc-button-padding {{lhcDataService.getSkipLogicClass(item)}}">
-        <lhc-button-popover [item]="item" [popoverType]="'repeating-item'" buttonLabel= '+ Add another row of "{{item._text}}"' [append]="true"></lhc-button-popover>
-      </div>
-    </div>
-  
-  </ng-container>
-  
\ No newline at end of file
+      </ng-container>
+      </tbody>
+    </table>
+
+</div>
diff --git a/src/fhir/sdc-import-common.js b/src/fhir/sdc-import-common.js
index 936c17942..8552f28f7 100644
--- a/src/fhir/sdc-import-common.js
+++ b/src/fhir/sdc-import-common.js
@@ -801,13 +801,19 @@ function addCommonSDCImportFns(ns) {
           break;
         case 'Table': // backward-compatibility with old export
         case 'gtable':  // Not in STU3, but we'll accept it
-          if(lfItem.dataType === 'SECTION') {
+          if (lfItem.dataType === 'SECTION') {
             displayControl.questionLayout = "horizontal";
           }
           break;
+
+        case 'grid':  // Not in STU3, but we'll accept it
+          if (lfItem.dataType === 'SECTION') {
+            displayControl.questionLayout = "grid";
+          }
+          break;
         case 'Matrix': // backward-compatibility with old export
         case 'table':
-          if(lfItem.dataType === 'SECTION') {
+          if (lfItem.dataType === 'SECTION') {
             displayControl.questionLayout = "matrix";
           }
           break;

From d9d291c6031c21f6c7bf849e839b04da49fab5d6 Mon Sep 17 00:00:00 2001
From: nikhil-ht-el <ngorde@elimu.io>
Date: Mon, 2 Jan 2023 18:42:47 +0530
Subject: [PATCH 03/10] Added logic for dynamic headers

---
 package.json                                    |  3 ++-
 .../lhc-item-gird/lhc-item-gird.component.html  |  6 ++----
 .../lhc-item-gird/lhc-item-gird.component.ts    | 17 ++++++++++++++++-
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 823e17048..06ef276ce 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,7 @@
     "ts-node": "~10.9.1",
     "tslint": "~6.1.3",
     "typescript": "~4.8.4",
-    "webpack-cli": "^4.10.0"
+    "webpack-cli": "^4.10.0",
+    "lodash": "^4.17.21"
   }
 }
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.html b/src/app/lhc-item-gird/lhc-item-gird.component.html
index 43d1b2e52..1997780c0 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.html
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.html
@@ -13,11 +13,9 @@
 
       <tr class="lhc-matrix-table-header-row">
         <th class="lf-question lf-form-table-header"></th>
-        <th *ngFor="let answer of item.items[1].items; index as i;"
+        <th *ngFor="let header of uniqueGridHeaders; index as i;"
             class="lf-form-matrix-cell lf-form-table-header"
-            id="answer-{{index}}">{{answer.question}}</th>
-        <th class="lf-form-matrix-cell-other lf-form-table-header" *ngIf="item.items[0].dataType ==='CWE'"
-         id="otherAnswer">Other</th>
+            id="answer-{{index}}">{{header}}</th>
       </tr>
       </thead>
       <tbody>
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.ts b/src/app/lhc-item-gird/lhc-item-gird.component.ts
index 45a74d23a..7dda19282 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.ts
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { LhcDataService} from '../../lib/lhc-data.service';
+import * as _ from "lodash";
 
 @Component({
   selector: 'lhc-item-gird',
@@ -11,8 +12,22 @@ export class LhcItemGirdComponent  {
 
   @Input() item;
   @Input() formLevel: boolean = false;
-  
+  uniqueGridHeaders: any[] = [];
   constructor(public lhcDataService: LhcDataService) {
   }
 
+  ngOnInit(): void {
+    this.createCustomHeaders(this.item);
+  }
+ 
+  createCustomHeaders(item): void{
+    _.forEach(item.items, (questionItems, key) => {
+      _.forEach(questionItems.items, (subItems,key) => {  
+        if(!_.includes(this.uniqueGridHeaders, subItems.question)){
+          this.uniqueGridHeaders.push(subItems.question);
+        }
+      });
+    });
+  }
+
 }

From 890dc22336c1d5b8f15d1c7b61470c9e85420e40 Mon Sep 17 00:00:00 2001
From: nikhil-ht <ngorde@elimu.io>
Date: Mon, 2 Jan 2023 20:23:19 +0530
Subject: [PATCH 04/10] Shows all subItems in table datacells on the basis of
 datype of subQuestion

---
 src/app/lhc-item-gird/lhc-item-gird.component.html | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.html b/src/app/lhc-item-gird/lhc-item-gird.component.html
index 1997780c0..3f85a9c73 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.html
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.html
@@ -27,6 +27,16 @@
             <lhc-item-question-text [item]="subItem" ></lhc-item-question-text>
             <lhc-item-messages [item]="subItem" ></lhc-item-messages>
           </td>
+
+          <ng-container *ngFor="let cell of subItem.items; trackBy: lhcDataService.trackByElementId">
+            <td *ngIf="!cell._isHiddenFromView"
+                class="{{lhcDataService.getRowClass(cell)}} {{lhcDataService.getSkipLogicClass(cell)}} {{lhcDataService.getActiveRowClass(cell)}}">
+              <div class="lf-form-item-data tooltipContainer">
+                <lhc-item-question [item]="cell" [options]="{hideQuestionText: true}" class="lhc-de"></lhc-item-question>
+              </div>
+            </td>
+          </ng-container>
+
         </tr>
       </ng-container>
       </tbody>

From a8620ccceb6443a41e3261db693a19a1e835f022 Mon Sep 17 00:00:00 2001
From: nikhil-ht <ngorde@elimu.io>
Date: Tue, 3 Jan 2023 18:00:38 +0530
Subject: [PATCH 05/10] Change the styles of grid layout and added header
 cloumn for main observation

---
 .../lhc-item-gird/lhc-item-gird.component.css | 66 ++++++++++++++-----
 .../lhc-item-gird.component.html              | 12 ++++
 src/lhc-form.css                              |  4 ++
 src/treeline-bar.css                          | 17 +++++
 4 files changed, 81 insertions(+), 18 deletions(-)

diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.css b/src/app/lhc-item-gird/lhc-item-gird.component.css
index e52eedf2a..3b4a770a1 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.css
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.css
@@ -1,18 +1,48 @@
-.lhc-form-horizontal-table td {
-    vertical-align: top;
-  }
-  
-  .lhc-form .lf-form-matrix-table-title {
-    background: #e6f1ff; /*#E8E8E8;*/
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    margin: 0 0 0 1px;
-    text-align: left;
-  
-    border-width: 0;
-    border-top: 2px solid white; /* leave space between headers */
-    padding: 4px 2px 4px 2px;
-  }
\ No newline at end of file
+/*** grid layout ***/
+.lhc-form .lhc-layout-grid.lhc-item  {
+  padding-bottom: 2px;
+}
+.lhc-form .lf-form-grid-table {
+  border-collapse: separate;
+  border-radius: 4px;
+  box-sizing: border-box;
+  margin: 2px 4px 0 1px;
+  text-align: left;
+  border: 1px solid #ced5d9;
+}
+.lhc-form .lf-form-grid-table .lhc-grid-table-header-row {
+  background: #E8E8E8;
+}
+.lhc-form .lf-form-grid-table-title {
+  background: #e6f1ff; /*#E8E8E8;*/
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0 0 0 1px;
+  text-align: left;
+
+  border-width: 0;
+  border-top: 2px solid white; /* leave space between headers */
+  padding: 4px 2px 4px 2px;
+}
+.lhc-form .lf-form-grid-table .lf-question {
+  width: 25%;
+}
+.lhc-form .lf-form-grid-answer {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.lhc-form .lf-form-grid-cell,
+.lhc-form .lf-form-grid-cell-other {
+  text-align: center;
+}
+.lhc-form .lf-form-grid-table th {
+  padding: 4px;
+}
+.lhc-form .lf-form-grid-table td {
+  padding: 4px;
+  border-top: 1px solid #ced5d9;
+}
+/*** end of grid layout ***/
\ No newline at end of file
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.html b/src/app/lhc-item-gird/lhc-item-gird.component.html
index 3f85a9c73..f8bfaf5ec 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.html
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.html
@@ -13,6 +13,7 @@
 
       <tr class="lhc-matrix-table-header-row">
         <th class="lf-question lf-form-table-header"></th>
+        <th>{{item.question}}</th>
         <th *ngFor="let header of uniqueGridHeaders; index as i;"
             class="lf-form-matrix-cell lf-form-table-header"
             id="answer-{{index}}">{{header}}</th>
@@ -28,6 +29,17 @@
             <lhc-item-messages [item]="subItem" ></lhc-item-messages>
           </td>
 
+          <td class="lf-form-matrix-cell-other" *ngIf="subItem.dataType ==='BL'"
+            aria-labeledby=otherAnswer>
+            <span class="lf-form-matrix-answer">
+              <label>
+                <input type="radio" id="{{subItem._elementId + '_other'}}" [(ngModel)]="subItem._otherValueChecked"
+                        [value]="'true'" name="{{subItem._elementId}}">
+              </label>
+            </span>
+          </td> 
+          
+          <!-- <td></td> -->
           <ng-container *ngFor="let cell of subItem.items; trackBy: lhcDataService.trackByElementId">
             <td *ngIf="!cell._isHiddenFromView"
                 class="{{lhcDataService.getRowClass(cell)}} {{lhcDataService.getSkipLogicClass(cell)}} {{lhcDataService.getActiveRowClass(cell)}}">
diff --git a/src/lhc-form.css b/src/lhc-form.css
index c83e8ba93..1329d4e49 100644
--- a/src/lhc-form.css
+++ b/src/lhc-form.css
@@ -232,6 +232,10 @@
 .lhc-form.lf-template-table .lhc-layout-matrix {
   padding-right: 6px;
 }
+/*** grid layout ***/
+.lhc-form.lf-template-table .lhc-layout-grid {
+  padding-right: 6px;
+}
 
 /* not to show title when the entire form is in horizontal or matrix layout */
 .lf-top-section .lhc-layout-horizontal .lhc-form-horizontal-table-title,
diff --git a/src/treeline-bar.css b/src/treeline-bar.css
index 3cc8a2cab..27bfc8b01 100644
--- a/src/treeline-bar.css
+++ b/src/treeline-bar.css
@@ -46,6 +46,23 @@
 }
 /* end of tree lines */
 
+/*no tree lines for form level horizontal and grid layouts */
+.lf-top-section .lhc-layout-grid.lhc-item,
+.lf-top-section .lhc-layout-grid.lhc-item {
+  padding: 0 4px 0 3px;
+}
+.lf-top-section .lhc-layout-horizontal.lhc-item::before,
+.lf-top-section .lhc-layout-grid.lhc-item::before {
+  border: 0;
+}
+.lf-top-section .lhc-layout-horizontal.lhc-item::after,
+.lf-top-section .lhc-layout-grid.lhc-item::after {
+  border: 0;
+}
+/* end of tree lines */
+
+
+
 /* bar style */
 /* no horizontal bar */
 .lf-indentation-bar .lhc-item::before {

From d3ecc67ab40e5a984d270486d8e93f2d87e1106c Mon Sep 17 00:00:00 2001
From: nikhil-ht <ngorde@elimu.io>
Date: Tue, 3 Jan 2023 18:10:39 +0530
Subject: [PATCH 06/10] Show the all items of main observation on the basis of
 datatype

---
 .../lhc-item-gird/lhc-item-gird.component.html  | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.html b/src/app/lhc-item-gird/lhc-item-gird.component.html
index f8bfaf5ec..9fd1826be 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.html
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.html
@@ -28,18 +28,13 @@
             <lhc-item-question-text [item]="subItem" ></lhc-item-question-text>
             <lhc-item-messages [item]="subItem" ></lhc-item-messages>
           </td>
-
-          <td class="lf-form-matrix-cell-other" *ngIf="subItem.dataType ==='BL'"
-            aria-labeledby=otherAnswer>
-            <span class="lf-form-matrix-answer">
-              <label>
-                <input type="radio" id="{{subItem._elementId + '_other'}}" [(ngModel)]="subItem._otherValueChecked"
-                        [value]="'true'" name="{{subItem._elementId}}">
-              </label>
-            </span>
-          </td> 
           
-          <!-- <td></td> -->
+          <td>
+            <div class="lf-form-item-data tooltipContainer">
+              <lhc-item-question [item]="subItem" [options]="{hideQuestionText: true}" class="lhc-de"></lhc-item-question>
+            </div>
+          </td> 
+
           <ng-container *ngFor="let cell of subItem.items; trackBy: lhcDataService.trackByElementId">
             <td *ngIf="!cell._isHiddenFromView"
                 class="{{lhcDataService.getRowClass(cell)}} {{lhcDataService.getSkipLogicClass(cell)}} {{lhcDataService.getActiveRowClass(cell)}}">

From 6ebab459ec8a982880437ebb8ce06e1223f9a625 Mon Sep 17 00:00:00 2001
From: nikhil-ht <ngorde@elimu.io>
Date: Fri, 6 Jan 2023 17:02:45 +0530
Subject: [PATCH 07/10] Applied styles to grid layout

---
 .../lhc-item-gird/lhc-item-gird.component.css | 48 ---------------
 .../lhc-item-gird.component.html              | 61 +++++++++----------
 .../lhc-item-gird/lhc-item-gird.component.ts  |  1 -
 src/grid-table.css                            | 48 +++++++++++++++
 4 files changed, 78 insertions(+), 80 deletions(-)
 create mode 100644 src/grid-table.css

diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.css b/src/app/lhc-item-gird/lhc-item-gird.component.css
index 3b4a770a1..e69de29bb 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.css
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.css
@@ -1,48 +0,0 @@
-/*** grid layout ***/
-.lhc-form .lhc-layout-grid.lhc-item  {
-  padding-bottom: 2px;
-}
-.lhc-form .lf-form-grid-table {
-  border-collapse: separate;
-  border-radius: 4px;
-  box-sizing: border-box;
-  margin: 2px 4px 0 1px;
-  text-align: left;
-  border: 1px solid #ced5d9;
-}
-.lhc-form .lf-form-grid-table .lhc-grid-table-header-row {
-  background: #E8E8E8;
-}
-.lhc-form .lf-form-grid-table-title {
-  background: #e6f1ff; /*#E8E8E8;*/
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  margin: 0 0 0 1px;
-  text-align: left;
-
-  border-width: 0;
-  border-top: 2px solid white; /* leave space between headers */
-  padding: 4px 2px 4px 2px;
-}
-.lhc-form .lf-form-grid-table .lf-question {
-  width: 25%;
-}
-.lhc-form .lf-form-grid-answer {
-  padding-left: 5px;
-  padding-right: 5px;
-}
-.lhc-form .lf-form-grid-cell,
-.lhc-form .lf-form-grid-cell-other {
-  text-align: center;
-}
-.lhc-form .lf-form-grid-table th {
-  padding: 4px;
-}
-.lhc-form .lf-form-grid-table td {
-  padding: 4px;
-  border-top: 1px solid #ced5d9;
-}
-/*** end of grid layout ***/
\ No newline at end of file
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.html b/src/app/lhc-item-gird/lhc-item-gird.component.html
index 9fd1826be..9db114750 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.html
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.html
@@ -1,52 +1,51 @@
-<div *ngIf="item" class="lhc-layout-matrix lf-table-item {{lhcDataService.getSiblingStatus(item)}}">
-  <div class="lf-form-matrix-table-title" *ngIf="!formLevel">
-    <lhc-item-question-text [item]="item" ></lhc-item-question-text>
+<div *ngIf="item" class="lhc-layout-grid lf-table-item {{lhcDataService.getSiblingStatus(item)}}">
+  <div class="lf-form-grid-table-title" *ngIf="!formLevel">
+    <lhc-item-question-text [item]="item"></lhc-item-question-text>
   </div>
 
-  <table class="lf-form-matrix-table lf-form-table">
-      <colgroup>
-        <col class="lf-question">
-        <col *ngFor="let answer of item.items[0].answers">
-        <col class="other-answer" *ngIf="item.items[0].dataType ==='CWE'">
-      </colgroup>
-      <thead>
+  <table class="lf-form-grid-table lf-form-table">
+    <colgroup>
+      <col class="lf-question">
+      <col *ngFor="let answer of item.items[0].answers">
+      <col class="other-answer" *ngIf="item.items[0].dataType ==='CWE'">
+    </colgroup>
+    <thead>
 
-      <tr class="lhc-matrix-table-header-row">
+      <tr class="lhc-grid-table-header-row">
         <th class="lf-question lf-form-table-header"></th>
         <th>{{item.question}}</th>
-        <th *ngFor="let header of uniqueGridHeaders; index as i;"
-            class="lf-form-matrix-cell lf-form-table-header"
-            id="answer-{{index}}">{{header}}</th>
+        <th *ngFor="let header of uniqueGridHeaders; index as i;" class="lf-form-grid-cell lf-form-table-header"
+          id="answer-{{index}}">{{header}}</th>
       </tr>
-      </thead>
-      <tbody>
+    </thead>
+    <tbody>
       <ng-container *ngFor="let subItem of item.items; trackBy: lhcDataService.trackByElementId">
-        <tr *ngIf="!subItem._isHiddenFromView" role="radiogroup"
-            aria-labeledby="label-{{subItem._elementId }}"
-            aria-describedby="help-{{ subItem._parentItem._elementId }} help-{{ subItem._elementId }}">
+        <tr *ngIf="!subItem._isHiddenFromView" role="radiogroup" aria-labeledby="label-{{subItem._elementId }}"
+          aria-describedby="help-{{ subItem._parentItem._elementId }} help-{{ subItem._elementId }}">
           <td class="lf-question">
-            <lhc-item-question-text [item]="subItem" ></lhc-item-question-text>
-            <lhc-item-messages [item]="subItem" ></lhc-item-messages>
+            <lhc-item-question-text [item]="subItem"></lhc-item-question-text>
+            <lhc-item-messages [item]="subItem"></lhc-item-messages>
           </td>
-          
+
           <td>
             <div class="lf-form-item-data tooltipContainer">
-              <lhc-item-question [item]="subItem" [options]="{hideQuestionText: true}" class="lhc-de"></lhc-item-question>
+              <lhc-item-question [item]="subItem" [options]="{hideQuestionText: true}" class="lhc-de">
+              </lhc-item-question>
             </div>
-          </td> 
+          </td>
 
           <ng-container *ngFor="let cell of subItem.items; trackBy: lhcDataService.trackByElementId">
-            <td *ngIf="!cell._isHiddenFromView"
-                class="{{lhcDataService.getRowClass(cell)}} {{lhcDataService.getSkipLogicClass(cell)}} {{lhcDataService.getActiveRowClass(cell)}}">
+            <td
+              class="{{lhcDataService.getRowClass(cell)}} {{lhcDataService.getSkipLogicClass(cell)}} {{lhcDataService.getActiveRowClass(cell)}}">
               <div class="lf-form-item-data tooltipContainer">
-                <lhc-item-question [item]="cell" [options]="{hideQuestionText: true}" class="lhc-de"></lhc-item-question>
+                <lhc-item-question [item]="cell" [options]="{hideQuestionText: true}" class="lhc-de">
+                </lhc-item-question>
               </div>
             </td>
           </ng-container>
 
         </tr>
       </ng-container>
-      </tbody>
-    </table>
-
-</div>
+    </tbody>
+  </table>
+</div>
\ No newline at end of file
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.ts b/src/app/lhc-item-gird/lhc-item-gird.component.ts
index 7dda19282..b2c6b788e 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.ts
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.ts
@@ -29,5 +29,4 @@ export class LhcItemGirdComponent  {
       });
     });
   }
-
 }
diff --git a/src/grid-table.css b/src/grid-table.css
new file mode 100644
index 000000000..ac1f0e76c
--- /dev/null
+++ b/src/grid-table.css
@@ -0,0 +1,48 @@
+/*** grid layout ***/
+.lhc-form .lhc-layout-grid.lhc-item  {
+    padding-bottom: 2px;
+  }
+  .lhc-form .lf-form-grid-table {
+    border-collapse: separate;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin: 2px 4px 0 1px;
+    text-align: left;
+    border: 1px solid #ced5d9;
+  }
+  .lhc-form .lf-form-grid-table .lhc-grid-table-header-row {
+    background: #E8E8E8;
+  }
+  .lhc-form .lf-form-grid-table-title {
+    background: #e6f1ff; /*#E8E8E8;*/
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    margin: 0 0 0 1px;
+    text-align: left;
+  
+    border-width: 0;
+    border-top: 2px solid white; /* leave space between headers */
+    padding: 4px 2px 4px 2px;
+  }
+  .lhc-form .lf-form-grid-table .lf-question {
+    width: 25%;
+  }
+  .lhc-form .lf-form-grid-answer {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+  
+  .lhc-form .lf-form-grid-cell-other {
+    text-align: center;
+  }
+  .lhc-form .lf-form-grid-table th {
+    padding: 4px;
+  }
+  .lhc-form .lf-form-grid-table td {
+    padding: 4px;
+    border-top: 1px solid #ced5d9;
+  }
+  /*** end of grid layout ***/
\ No newline at end of file

From 4cfc0f6f356e2a74aa2ed2219652a51fdcaa53b9 Mon Sep 17 00:00:00 2001
From: nikhil-ht-el <ngorde@elimu.io>
Date: Thu, 12 Jan 2023 10:41:30 +0530
Subject: [PATCH 08/10] Fix-minor-UI-issues

---
 src/app/lhc-item-gird/lhc-item-gird.component.css  | 11 +++++++++++
 src/app/lhc-item-gird/lhc-item-gird.component.html | 12 ++++++------
 src/app/lhc-item-gird/lhc-item-gird.component.ts   |  2 +-
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.css b/src/app/lhc-item-gird/lhc-item-gird.component.css
index e69de29bb..a7e678b9f 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.css
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.css
@@ -0,0 +1,11 @@
+.lhc-form-horizontal-table-header {
+    overflow: hidden;
+    vertical-align: top;
+    background: none repeat scroll 0 0 #E8E8E8;
+    padding: 4px 2px;
+    text-align: left ;
+    color: #666666;
+    font-weight: 400;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+  }
\ No newline at end of file
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.html b/src/app/lhc-item-gird/lhc-item-gird.component.html
index 9db114750..d0b2f8f1f 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.html
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.html
@@ -12,15 +12,15 @@
     <thead>
 
       <tr class="lhc-grid-table-header-row">
-        <th class="lf-question lf-form-table-header"></th>
-        <th>{{item.question}}</th>
-        <th *ngFor="let header of uniqueGridHeaders; index as i;" class="lf-form-grid-cell lf-form-table-header"
+        <th class="lhc-form-horizontal-table-header"></th>
+        <th class="lhc-form-horizontal-table-header">{{item.question}}</th>
+        <th *ngFor="let header of uniqueGridHeaders; index as i;" class="lhc-form-horizontal-table-header"
           id="answer-{{index}}">{{header}}</th>
       </tr>
     </thead>
     <tbody>
       <ng-container *ngFor="let subItem of item.items; trackBy: lhcDataService.trackByElementId">
-        <tr *ngIf="!subItem._isHiddenFromView" role="radiogroup" aria-labeledby="label-{{subItem._elementId }}"
+        <tr *ngIf="subItem && lhcDataService.targetShown(subItem) && !subItem._isHiddenFromView" role="radiogroup" aria-labeledby="label-{{subItem._elementId }}"
           aria-describedby="help-{{ subItem._parentItem._elementId }} help-{{ subItem._elementId }}">
           <td class="lf-question">
             <lhc-item-question-text [item]="subItem"></lhc-item-question-text>
@@ -35,7 +35,7 @@
           </td>
 
           <ng-container *ngFor="let cell of subItem.items; trackBy: lhcDataService.trackByElementId">
-            <td
+            <td *ngIf="cell && lhcDataService.targetShown(cell) && !cell._isHiddenFromView"
               class="{{lhcDataService.getRowClass(cell)}} {{lhcDataService.getSkipLogicClass(cell)}} {{lhcDataService.getActiveRowClass(cell)}}">
               <div class="lf-form-item-data tooltipContainer">
                 <lhc-item-question [item]="cell" [options]="{hideQuestionText: true}" class="lhc-de">
@@ -48,4 +48,4 @@
       </ng-container>
     </tbody>
   </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.ts b/src/app/lhc-item-gird/lhc-item-gird.component.ts
index b2c6b788e..d716670b3 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.ts
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.ts
@@ -23,7 +23,7 @@ export class LhcItemGirdComponent  {
   createCustomHeaders(item): void{
     _.forEach(item.items, (questionItems, key) => {
       _.forEach(questionItems.items, (subItems,key) => {  
-        if(!_.includes(this.uniqueGridHeaders, subItems.question)){
+        if(!_.includes(this.uniqueGridHeaders, subItems.question) && subItems.skipLogic?.conditions[0]?.trigger?.value != 'alwaysHide'){
           this.uniqueGridHeaders.push(subItems.question);
         }
       });

From b1ab17218836a790ee20cf49049864d4750332f3 Mon Sep 17 00:00:00 2001
From: nikhil-ht <ngorde@elimu.io>
Date: Thu, 12 Jan 2023 14:41:24 +0530
Subject: [PATCH 09/10] Added css for grid layout header

---
 src/app/lhc-item-gird/lhc-item-gird.component.css  | 11 -----------
 src/app/lhc-item-gird/lhc-item-gird.component.html |  6 +++---
 src/grid-table.css                                 | 13 +++++++++++++
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.css b/src/app/lhc-item-gird/lhc-item-gird.component.css
index a7e678b9f..e69de29bb 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.css
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.css
@@ -1,11 +0,0 @@
-.lhc-form-horizontal-table-header {
-    overflow: hidden;
-    vertical-align: top;
-    background: none repeat scroll 0 0 #E8E8E8;
-    padding: 4px 2px;
-    text-align: left ;
-    color: #666666;
-    font-weight: 400;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-  }
\ No newline at end of file
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.html b/src/app/lhc-item-gird/lhc-item-gird.component.html
index d0b2f8f1f..712703d82 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.html
+++ b/src/app/lhc-item-gird/lhc-item-gird.component.html
@@ -12,9 +12,9 @@
     <thead>
 
       <tr class="lhc-grid-table-header-row">
-        <th class="lhc-form-horizontal-table-header"></th>
-        <th class="lhc-form-horizontal-table-header">{{item.question}}</th>
-        <th *ngFor="let header of uniqueGridHeaders; index as i;" class="lhc-form-horizontal-table-header"
+        <th class="lhc-form-grid-table-header"></th>
+        <th class="lhc-form-grid-table-header">{{item.question}}</th>
+        <th *ngFor="let header of uniqueGridHeaders; index as i;" class="lhc-form-grid-table-header"
           id="answer-{{index}}">{{header}}</th>
       </tr>
     </thead>
diff --git a/src/grid-table.css b/src/grid-table.css
index ac1f0e76c..4a9ff7a31 100644
--- a/src/grid-table.css
+++ b/src/grid-table.css
@@ -13,6 +13,19 @@
   .lhc-form .lf-form-grid-table .lhc-grid-table-header-row {
     background: #E8E8E8;
   }
+  
+  .lhc-form-grid-table-header {
+    overflow: hidden;
+    vertical-align: top;
+    background: none repeat scroll 0 0 #E8E8E8;
+    padding: 4px 2px;
+    text-align: left ;
+    color: #666666;
+    font-weight: 400;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+  }
+  
   .lhc-form .lf-form-grid-table-title {
     background: #e6f1ff; /*#E8E8E8;*/
     -moz-border-radius: 4px;

From 45c9c0c9f9b1146c58e4090d95a9d7114a20d865 Mon Sep 17 00:00:00 2001
From: nikhil-ht <ngorde@elimu.io>
Date: Mon, 16 Jan 2023 22:19:14 +0530
Subject: [PATCH 10/10] Updated  component name and css classes as per
 suggestions

---
 package.json                                  |  3 +-
 src/app/app.module.ts                         |  4 +--
 src/app/lhc-form/lhc-form.component.html      |  4 +--
 .../lhc-group-grid.component.css}             |  0
 .../lhc-group-grid.component.html}            |  8 ++---
 .../lhc-group-grid.component.spec.ts          | 25 +++++++++++++++
 .../lhc-group-grid.component.ts               | 31 ++++++++++++++++++
 .../lhc-item-gird.component.spec.ts           | 23 -------------
 .../lhc-item-gird/lhc-item-gird.component.ts  | 32 -------------------
 .../lhc-item-group.component.html             |  2 +-
 src/grid-table.css                            | 16 +++++-----
 11 files changed, 74 insertions(+), 74 deletions(-)
 rename src/app/{lhc-item-gird/lhc-item-gird.component.css => lhc-group-grid/lhc-group-grid.component.css} (100%)
 rename src/app/{lhc-item-gird/lhc-item-gird.component.html => lhc-group-grid/lhc-group-grid.component.html} (92%)
 create mode 100644 src/app/lhc-group-grid/lhc-group-grid.component.spec.ts
 create mode 100644 src/app/lhc-group-grid/lhc-group-grid.component.ts
 delete mode 100644 src/app/lhc-item-gird/lhc-item-gird.component.spec.ts
 delete mode 100644 src/app/lhc-item-gird/lhc-item-gird.component.ts

diff --git a/package.json b/package.json
index 06ef276ce..823e17048 100644
--- a/package.json
+++ b/package.json
@@ -104,7 +104,6 @@
     "ts-node": "~10.9.1",
     "tslint": "~6.1.3",
     "typescript": "~4.8.4",
-    "webpack-cli": "^4.10.0",
-    "lodash": "^4.17.21"
+    "webpack-cli": "^4.10.0"
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index cc98a83d9..a0e826c71 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -54,7 +54,7 @@ import { SafeHtmlPipe } from './safe-html.pipe';
 import { LhcButtonPopoverComponent } from './lhc-button-popover/lhc-button-popover.component';
 import { LhcItemAttachmentComponent } from './lhc-item-attachment/lhc-item-attachment.component';
 import { LhcItemMessagesComponent } from './lhc-item-messages/lhc-item-messages.component';
-import { LhcItemGirdComponent } from './lhc-item-gird/lhc-item-gird.component';
+import { LhcGroupGridComponent } from './lhc-group-grid/lhc-group-grid.component';
 
 
 registerLocaleData(en);
@@ -89,7 +89,7 @@ registerLocaleData(en);
     LhcButtonPopoverComponent,
     LhcItemAttachmentComponent,
     LhcItemMessagesComponent,
-    LhcItemGirdComponent
+    LhcGroupGridComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/lhc-form/lhc-form.component.html b/src/app/lhc-form/lhc-form.component.html
index db37cc686..f3a3a3b35 100644
--- a/src/app/lhc-form/lhc-form.component.html
+++ b/src/app/lhc-form/lhc-form.component.html
@@ -1,7 +1,7 @@
 <form *ngIf="lhcFormData" class="lhc-form lf-template-table novalidate {{viewModeClass}}" autocomplete="off" #lhcFormContainer>
 
     <div class="lhc-form-title" role="heading" aria-level=1>
-      <span id="label-{{ lhcFormData.code }}" class="lf-question" [style]="lhcFormData._obj_titleCSS"
+      <span id="label-{{ lhcFormData.code }}" class="lhc-question" [style]="lhcFormData._obj_titleCSS"
         >{{lhcFormData.name || lhcFormData.fhirQName}}</span>
       <span class="lf-item-code" *ngIf="lhcFormData.templateOptions.showQuestionCode">
         <a *ngIf="lhcFormData._linkToDef" href="{{ lhcFormData._linkToDef }}" target="_blank" rel="noopener noreferrer">[{{ lhcFormData.code }}]</a>
@@ -22,7 +22,7 @@
           <lhc-group-matrix [item]="lhcFormData" [formLevel]='true'></lhc-group-matrix>
         </ng-container>
         <ng-container *ngSwitchCase="'grid'">
-          <lhc-item-gird [item]="lhcFormData" [formLevel]='true'></lhc-item-gird>
+          <lhc-group-grid [item]="lhcFormData" [formLevel]='true'></lhc-group-grid>
         </ng-container>
         <!-- vertical -->
         <ng-container *ngSwitchDefault>
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.css b/src/app/lhc-group-grid/lhc-group-grid.component.css
similarity index 100%
rename from src/app/lhc-item-gird/lhc-item-gird.component.css
rename to src/app/lhc-group-grid/lhc-group-grid.component.css
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.html b/src/app/lhc-group-grid/lhc-group-grid.component.html
similarity index 92%
rename from src/app/lhc-item-gird/lhc-item-gird.component.html
rename to src/app/lhc-group-grid/lhc-group-grid.component.html
index 712703d82..f57906f48 100644
--- a/src/app/lhc-item-gird/lhc-item-gird.component.html
+++ b/src/app/lhc-group-grid/lhc-group-grid.component.html
@@ -1,11 +1,11 @@
 <div *ngIf="item" class="lhc-layout-grid lf-table-item {{lhcDataService.getSiblingStatus(item)}}">
-  <div class="lf-form-grid-table-title" *ngIf="!formLevel">
+  <div class="lhc-form-grid-table-title" *ngIf="!formLevel">
     <lhc-item-question-text [item]="item"></lhc-item-question-text>
   </div>
 
-  <table class="lf-form-grid-table lf-form-table">
+  <table class="lhc-form-grid-table lf-form-table">
     <colgroup>
-      <col class="lf-question">
+      <col class="lhc-question">
       <col *ngFor="let answer of item.items[0].answers">
       <col class="other-answer" *ngIf="item.items[0].dataType ==='CWE'">
     </colgroup>
@@ -22,7 +22,7 @@
       <ng-container *ngFor="let subItem of item.items; trackBy: lhcDataService.trackByElementId">
         <tr *ngIf="subItem && lhcDataService.targetShown(subItem) && !subItem._isHiddenFromView" role="radiogroup" aria-labeledby="label-{{subItem._elementId }}"
           aria-describedby="help-{{ subItem._parentItem._elementId }} help-{{ subItem._elementId }}">
-          <td class="lf-question">
+          <td class="lhc-question">
             <lhc-item-question-text [item]="subItem"></lhc-item-question-text>
             <lhc-item-messages [item]="subItem"></lhc-item-messages>
           </td>
diff --git a/src/app/lhc-group-grid/lhc-group-grid.component.spec.ts b/src/app/lhc-group-grid/lhc-group-grid.component.spec.ts
new file mode 100644
index 000000000..48b4ecfff
--- /dev/null
+++ b/src/app/lhc-group-grid/lhc-group-grid.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LhcGroupGridComponent } from './lhc-group-grid.component';
+
+describe('LhcGroupGridComponent', () => {
+  let component: LhcGroupGridComponent;
+  let fixture: ComponentFixture<LhcGroupGridComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LhcGroupGridComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LhcGroupGridComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/lhc-group-grid/lhc-group-grid.component.ts b/src/app/lhc-group-grid/lhc-group-grid.component.ts
new file mode 100644
index 000000000..be2c91995
--- /dev/null
+++ b/src/app/lhc-group-grid/lhc-group-grid.component.ts
@@ -0,0 +1,31 @@
+import { Component, Input } from '@angular/core';
+import { LhcDataService} from '../../lib/lhc-data.service';
+
+@Component({
+  selector: 'lhc-group-grid',
+  templateUrl: './lhc-group-grid.component.html',
+  styleUrls: ['./lhc-group-grid.component.css']
+})
+export class LhcGroupGridComponent  {
+
+
+  @Input() item;
+  @Input() formLevel: boolean = false;
+  uniqueGridHeaders: any[] = [];
+  constructor(public lhcDataService: LhcDataService) {
+  }
+
+  ngOnInit(): void {
+    this.createCustomHeaders(this.item);
+  }
+ 
+  createCustomHeaders(item):void{
+    item.items.forEach(questionItems => {
+      questionItems.items.forEach(subItems => {
+        if(!this.uniqueGridHeaders.includes(subItems.question)  && subItems.skipLogic?.conditions[0]?.trigger?.value != 'alwaysHide'){
+          this.uniqueGridHeaders.push(subItems.question);
+        }   
+    });
+    });
+  }
+}
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.spec.ts b/src/app/lhc-item-gird/lhc-item-gird.component.spec.ts
deleted file mode 100644
index d929f9f3e..000000000
--- a/src/app/lhc-item-gird/lhc-item-gird.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LhcItemGirdComponent } from './lhc-item-gird.component';
-
-describe('LhcItemGirdComponent', () => {
-  let component: LhcItemGirdComponent;
-  let fixture: ComponentFixture<LhcItemGirdComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ LhcItemGirdComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(LhcItemGirdComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/lhc-item-gird/lhc-item-gird.component.ts b/src/app/lhc-item-gird/lhc-item-gird.component.ts
deleted file mode 100644
index d716670b3..000000000
--- a/src/app/lhc-item-gird/lhc-item-gird.component.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { LhcDataService} from '../../lib/lhc-data.service';
-import * as _ from "lodash";
-
-@Component({
-  selector: 'lhc-item-gird',
-  templateUrl: './lhc-item-gird.component.html',
-  styleUrls: ['./lhc-item-gird.component.css']
-})
-export class LhcItemGirdComponent  {
-
-
-  @Input() item;
-  @Input() formLevel: boolean = false;
-  uniqueGridHeaders: any[] = [];
-  constructor(public lhcDataService: LhcDataService) {
-  }
-
-  ngOnInit(): void {
-    this.createCustomHeaders(this.item);
-  }
- 
-  createCustomHeaders(item): void{
-    _.forEach(item.items, (questionItems, key) => {
-      _.forEach(questionItems.items, (subItems,key) => {  
-        if(!_.includes(this.uniqueGridHeaders, subItems.question) && subItems.skipLogic?.conditions[0]?.trigger?.value != 'alwaysHide'){
-          this.uniqueGridHeaders.push(subItems.question);
-        }
-      });
-    });
-  }
-}
diff --git a/src/app/lhc-item-group/lhc-item-group.component.html b/src/app/lhc-item-group/lhc-item-group.component.html
index 38eb4ff39..a692c732b 100644
--- a/src/app/lhc-item-group/lhc-item-group.component.html
+++ b/src/app/lhc-item-group/lhc-item-group.component.html
@@ -9,6 +9,6 @@
     <lhc-group-vertical [item]="item"></lhc-group-vertical>
   </ng-container>
   <ng-container *ngSwitchCase="'grid'">
-    <lhc-item-gird [item]="item"></lhc-item-gird>
+    <lhc-group-grid [item]="item"></lhc-group-grid>
   </ng-container>
 </ng-container>
diff --git a/src/grid-table.css b/src/grid-table.css
index 4a9ff7a31..bd8fd2585 100644
--- a/src/grid-table.css
+++ b/src/grid-table.css
@@ -2,7 +2,7 @@
 .lhc-form .lhc-layout-grid.lhc-item  {
     padding-bottom: 2px;
   }
-  .lhc-form .lf-form-grid-table {
+  .lhc-form .lhc-form-grid-table {
     border-collapse: separate;
     border-radius: 4px;
     box-sizing: border-box;
@@ -10,7 +10,7 @@
     text-align: left;
     border: 1px solid #ced5d9;
   }
-  .lhc-form .lf-form-grid-table .lhc-grid-table-header-row {
+  .lhc-form .lhc-form-grid-table .lhc-grid-table-header-row {
     background: #E8E8E8;
   }
   
@@ -26,7 +26,7 @@
     border-radius: 4px;
   }
   
-  .lhc-form .lf-form-grid-table-title {
+  .lhc-form .lhc-form-grid-table-title {
     background: #e6f1ff; /*#E8E8E8;*/
     -moz-border-radius: 4px;
     border-radius: 4px;
@@ -40,21 +40,21 @@
     border-top: 2px solid white; /* leave space between headers */
     padding: 4px 2px 4px 2px;
   }
-  .lhc-form .lf-form-grid-table .lf-question {
+  .lhc-form .lhc-form-grid-table .lhc-question {
     width: 25%;
   }
-  .lhc-form .lf-form-grid-answer {
+  .lhc-form .lhc-form-grid-answer {
     padding-left: 5px;
     padding-right: 5px;
   }
   
-  .lhc-form .lf-form-grid-cell-other {
+  .lhc-form .lhc-form-grid-cell-other {
     text-align: center;
   }
-  .lhc-form .lf-form-grid-table th {
+  .lhc-form .lhc-form-grid-table th {
     padding: 4px;
   }
-  .lhc-form .lf-form-grid-table td {
+  .lhc-form .lhc-form-grid-table td {
     padding: 4px;
     border-top: 1px solid #ced5d9;
   }