Added the support for the Item Control grid extension.

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 { LhcGroupGridComponent } from './lhc-group-grid/lhc-group-grid.component';
 
 
 registerLocaleData(en);
@@ -87,7 +88,8 @@ registerLocaleData(en);
     SafeHtmlPipe,
     LhcButtonPopoverComponent,
     LhcItemAttachmentComponent,
-    LhcItemMessagesComponent
+    LhcItemMessagesComponent,
+    LhcGroupGridComponent
   ],
   imports: [
     BrowserModule,

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>
@@ -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-group-grid [item]="lhcFormData" [formLevel]='true'></lhc-group-grid>
+        </ng-container>
         <!-- vertical -->
         <ng-container *ngSwitchDefault>
           <!-- data row, for each item -->

src/app/lhc-group-grid/lhc-group-grid.component.html

@@ -0,0 +1,51 @@
+<div *ngIf="item" class="lhc-layout-grid lf-table-item {{lhcDataService.getSiblingStatus(item)}}">
+  <div class="lhc-form-grid-table-title" *ngIf="!formLevel">
+    <lhc-item-question-text [item]="item"></lhc-item-question-text>
+  </div>
+
+  <table class="lhc-form-grid-table lf-form-table">
+    <colgroup>
+      <col class="lhc-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-grid-table-header-row">
+        <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>
+    <tbody>
+      <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="lhc-question">
+            <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>
+            </div>
+          </td>
+
+          <ng-container *ngFor="let cell of subItem.items; trackBy: lhcDataService.trackByElementId">
+            <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">
+                </lhc-item-question>
+              </div>
+            </td>
+          </ng-container>
+
+        </tr>
+      </ng-container>
+    </tbody>
+  </table>
+</div>

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();
+  });
+});

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);
+        }   
+    });
+    });
+  }
+}

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-group-grid [item]="item"></lhc-group-grid>
+  </ng-container>
 </ng-container>

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;

src/grid-table.css

@@ -0,0 +1,61 @@
+/*** grid layout ***/
+.lhc-form .lhc-layout-grid.lhc-item  {
+    padding-bottom: 2px;
+  }
+  .lhc-form .lhc-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 .lhc-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 .lhc-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 .lhc-form-grid-table .lhc-question {
+    width: 25%;
+  }
+  .lhc-form .lhc-form-grid-answer {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  .lhc-form .lhc-form-grid-cell-other {
+    text-align: center;
+  }
+  .lhc-form .lhc-form-grid-table th {
+    padding: 4px;
+  }
+  .lhc-form .lhc-form-grid-table td {
+    padding: 4px;
+    border-top: 1px solid #ced5d9;
+  }
+  /*** end of grid layout ***/

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,

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 {