feat(components/ag-grid): add inline help support using custom header components

apps/code-examples/src/app/app.component.html

@@ -34,6 +34,11 @@
           Data Entry Grid with Data Manager
         </a>
       </li>
+      <li>
+        <a routerLink="ag-grid/data-entry-grid/inline-help">
+          Data Entry Grid with inline help
+        </a>
+      </li>
       <li>
         <a routerLink="ag-grid/data-grid/basic">Data Grid (basic)</a>
       </li>
@@ -57,6 +62,11 @@
           Data Grid with top scrollbar
         </a>
       </li>
+      <li>
+        <a routerLink="ag-grid/data-grid/inline-help">
+          Data Grid with inline help
+        </a>
+      </li>
     </ul>
   </li>
   <li>

apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/data-entry-grid-docs-demo-context-menu.component.html

@@ -0,0 +1,17 @@
+<sky-dropdown buttonType="context-menu">
+  <sky-dropdown-menu>
+    <sky-dropdown-item>
+      <button type="button" (click)="actionClicked('Delete')">Delete</button>
+    </sky-dropdown-item>
+    <sky-dropdown-item>
+      <button type="button" (click)="actionClicked('Mark inactive')">
+        Mark inactive
+      </button>
+    </sky-dropdown-item>
+    <sky-dropdown-item>
+      <button type="button" (click)="actionClicked('More info')">
+        More info
+      </button>
+    </sky-dropdown-item>
+  </sky-dropdown-menu>
+</sky-dropdown>

apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/data-entry-grid-docs-demo-context-menu.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+import { ICellRendererAngularComp } from 'ag-grid-angular';
+import { ICellRendererParams } from 'ag-grid-community';
+
+@Component({
+  selector: 'app-data-entry-grid-docs-demo-context-menu',
+  templateUrl: './data-entry-grid-docs-demo-context-menu.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SkyDataEntryGridContextMenuComponent
+  implements ICellRendererAngularComp
+{
+  #name = '';
+
+  public agInit(params: ICellRendererParams): void {
+    this.#name = params.data && params.data.#name;
+  }
+
+  public refresh(): boolean {
+    return false;
+  }
+
+  public actionClicked(action: string): void {
+    alert(`${action} clicked for ${this.#name}`);
+  }
+}

apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/data-entry-grid-docs-demo-data.ts

@@ -0,0 +1,156 @@
+export interface SkyAutocompleteOption {
+  id: string;
+  name: string;
+}
+
+export const SKY_DEPARTMENTS = [
+  {
+    id: '1',
+    name: 'Marketing',
+  },
+  {
+    id: '2',
+    name: 'Sales',
+  },
+  {
+    id: '3',
+    name: 'Engineering',
+  },
+  {
+    id: '4',
+    name: 'Customer Support',
+  },
+];
+
+export const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {
+  Marketing: [
+    {
+      id: '1',
+      name: 'Social Media Coordinator',
+    },
+    {
+      id: '2',
+      name: 'Blog Manager',
+    },
+    {
+      id: '3',
+      name: 'Events Manager',
+    },
+  ],
+  Sales: [
+    {
+      id: '4',
+      name: 'Business Development Representative',
+    },
+    {
+      id: '5',
+      name: 'Account Executive',
+    },
+  ],
+  Engineering: [
+    {
+      id: '6',
+      name: 'Software Engineer',
+    },
+    {
+      id: '7',
+      name: 'Senior Software Engineer',
+    },
+    {
+      id: '8',
+      name: 'Principal Software Engineer',
+    },
+    {
+      id: '9',
+      name: 'UX Designer',
+    },
+    {
+      id: '10',
+      name: 'Product Manager',
+    },
+  ],
+  'Customer Support': [
+    {
+      id: '11',
+      name: 'Customer Support Representative',
+    },
+    {
+      id: '12',
+      name: 'Account Manager',
+    },
+    {
+      id: '13',
+      name: 'Customer Support Specialist',
+    },
+  ],
+};
+
+export interface SkyAgGridDemoRow {
+  selected: boolean;
+  name: string;
+  age: number;
+  startDate: Date;
+  endDate?: Date;
+  department: SkyAutocompleteOption;
+  jobTitle?: SkyAutocompleteOption;
+}
+
+export const SKY_AG_GRID_DEMO_DATA = [
+  {
+    selected: true,
+    name: 'Billy Bob',
+    age: 55,
+    startDate: new Date('12/1/1994'),
+    department: SKY_DEPARTMENTS[3],
+    jobTitle: SKY_JOB_TITLES['Customer Support'][1],
+  },
+  {
+    selected: false,
+    name: 'Jane Deere',
+    age: 33,
+    startDate: new Date('7/15/2009'),
+    department: SKY_DEPARTMENTS[2],
+    jobTitle: SKY_JOB_TITLES['Engineering'][2],
+  },
+  {
+    selected: false,
+    name: 'John Doe',
+    age: 38,
+    startDate: new Date('9/1/2017'),
+    endDate: new Date('9/30/2017'),
+    department: SKY_DEPARTMENTS[1],
+  },
+  {
+    selected: false,
+    name: 'David Smith',
+    age: 51,
+    startDate: new Date('1/1/2012'),
+    endDate: new Date('6/15/2018'),
+    department: SKY_DEPARTMENTS[2],
+    jobTitle: SKY_JOB_TITLES['Engineering'][4],
+  },
+  {
+    selected: true,
+    name: 'Emily Johnson',
+    age: 41,
+    startDate: new Date('1/15/2014'),
+    department: SKY_DEPARTMENTS[0],
+    jobTitle: SKY_JOB_TITLES['Marketing'][2],
+  },
+  {
+    selected: false,
+    name: 'Nicole Davidson',
+    age: 22,
+    startDate: new Date('11/1/2019'),
+    department: SKY_DEPARTMENTS[2],
+    jobTitle: SKY_JOB_TITLES['Engineering'][0],
+  },
+  {
+    selected: false,
+    name: 'Carl Roberts',
+    age: 23,
+    startDate: new Date('11/1/2019'),
+    department: SKY_DEPARTMENTS[2],
+    jobTitle: SKY_JOB_TITLES['Engineering'][3],
+  },
+];

apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/data-entry-grid-docs-demo-edit-modal-context.ts

@@ -0,0 +1,5 @@
+import { SkyAgGridDemoRow } from './data-entry-grid-docs-demo-data';
+
+export class SkyDataEntryGridEditModalContext {
+  public gridData: SkyAgGridDemoRow[] = [];
+}

apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/data-entry-grid-docs-demo-edit-modal.component.html

@@ -0,0 +1,31 @@
+<sky-modal>
+  <sky-modal-header> Edit employee information </sky-modal-header>
+  <sky-modal-content>
+    <div id="docs-edit-grid-modal-content">
+      <sky-ag-grid-wrapper>
+        <ag-grid-angular
+          class="sky-ag-grid-editable"
+          [gridOptions]="gridOptions"
+          [rowData]="gridData"
+        >
+        </ag-grid-angular>
+      </sky-ag-grid-wrapper>
+    </div>
+  </sky-modal-content>
+  <sky-modal-footer>
+    <button
+      class="sky-btn sky-btn-primary"
+      type="button"
+      (click)="instance.save(gridData)"
+    >
+      Save
+    </button>
+    <button
+      class="sky-btn sky-btn-link"
+      type="button"
+      (click)="instance.cancel()"
+    >
+      Cancel
+    </button>
+  </sky-modal-footer>
+</sky-modal>