@skyux/code-examples 14.4.0 → 14.5.0

package/fesm2022/skyux-code-examples.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, inject, ChangeDetectionStrategy, Input, viewChild, signal, effect, Injectable, ChangeDetectorRef, input, computed, linkedSignal, untracked, ViewChild, InjectionToken } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy, Input, viewChild, signal, effect, Injectable, ChangeDetectorRef, input, computed, model, resource, afterNextRender, linkedSignal, untracked, ViewChild, InjectionToken } from '@angular/core';
 import * as i2 from '@skyux/action-bars';
 import { SkySummaryActionBarModule } from '@skyux/action-bars';
 import * as i1 from '@skyux/indicators';
@@ -15,7 +15,7 @@ import { SkyTabsModule, SkySectionedFormService, SkySectionedFormMessageType, Sk
 import * as i1$4 from '@skyux/ag-grid';
 import { SkyAgGridService, SkyCellType, SkyAgGridModule, SkyAgGridHeaderInfo } from '@skyux/ag-grid';
 import * as i1$5 from '@skyux/layout';
-import { SkyToolbarModule, SkyDescriptionListModule, SkyFluidGridModule, SkyActionButtonModule, SkyBackToTopModule, SkyBoxModule, SkyCardModule, SkyDefinitionListModule, SkyFormatModule, SkyInlineDeleteModule, SkyPageSummaryModule, SkyTextExpandRepeaterModule, SkyTextExpandModule } from '@skyux/layout';
+import { SkyToolbarModule, SkyDescriptionListModule, SkyBoxModule, SkyFluidGridModule, SkyActionButtonModule, SkyBackToTopModule, SkyCardModule, SkyDefinitionListModule, SkyFormatModule, SkyInlineDeleteModule, SkyPageSummaryModule, SkyTextExpandRepeaterModule, SkyTextExpandModule } from '@skyux/layout';
 import * as i2$1 from '@skyux/lookup';
 import { SkySearchModule, SkyAutocompleteModule, SkyCountryFieldModule, SkyLookupModule, SkyLookupShowMoreCustomPickerContext, SkySelectionModalService } from '@skyux/lookup';
 import { AgGridAngular } from 'ag-grid-angular';
@@ -51,6 +51,7 @@ import * as i1$9 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
 import * as i4$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { SkyDataGrid, SkyDataGridColumn } from '@skyux/data-grid';
 import * as i2$8 from '@skyux/datetime';
 import { SkyDatePipeModule, SkyDateRangeCalculatorId, SkyDateRangePickerModule, SkyDateRangeService, SkyDateRangeCalculatorType, SkyDatepickerModule, SkyTimepickerModule } from '@skyux/datetime';
 import * as i1$a from '@skyux/errors';
@@ -245,7 +246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'app-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyDropdownModule], template: "<sky-dropdown buttonType=\"context-menu\" [label]=\"contextMenuAriaLabel\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"deleteAriaLabel\"\n        (click)=\"actionClicked('Delete')\"\n      >\n        Delete\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"markInactiveAriaLabel\"\n        (click)=\"actionClicked('Mark inactive')\"\n      >\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moreInfoAriaLabel\"\n        (click)=\"actionClicked('More info')\"\n      >\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n" }]
         }] });
 
-const DEPARTMENTS$a = [
+const DEPARTMENTS$c = [
     {
         id: '1',
         name: 'Marketing',
@@ -263,7 +264,7 @@ const DEPARTMENTS$a = [
         name: 'Customer Support',
     },
 ];
-const JOB_TITLES$a = {
+const JOB_TITLES$c = {
     Marketing: [
         {
             id: '1',
@@ -331,16 +332,16 @@ const AG_GRID_DEMO_DATA$b = [
         name: 'Billy Bob',
         age: 55,
         startDate: new Date('12/1/1994'),
-        department: DEPARTMENTS$a[3],
-        jobTitle: JOB_TITLES$a['Customer Support'][1],
+        department: DEPARTMENTS$c[3],
+        jobTitle: JOB_TITLES$c['Customer Support'][1],
     },
     {
         selected: false,
         name: 'Jane Deere',
         age: 33,
         startDate: new Date('7/15/2009'),
-        department: DEPARTMENTS$a[2],
-        jobTitle: JOB_TITLES$a['Engineering'][2],
+        department: DEPARTMENTS$c[2],
+        jobTitle: JOB_TITLES$c['Engineering'][2],
     },
     {
         selected: false,
@@ -348,7 +349,7 @@ const AG_GRID_DEMO_DATA$b = [
         age: 38,
         startDate: new Date('9/1/2017'),
         endDate: new Date('9/30/2017'),
-        department: DEPARTMENTS$a[1],
+        department: DEPARTMENTS$c[1],
     },
     {
         selected: false,
@@ -356,32 +357,32 @@ const AG_GRID_DEMO_DATA$b = [
         age: 51,
         startDate: new Date('1/1/2012'),
         endDate: new Date('6/15/2018'),
-        department: DEPARTMENTS$a[2],
-        jobTitle: JOB_TITLES$a['Engineering'][4],
+        department: DEPARTMENTS$c[2],
+        jobTitle: JOB_TITLES$c['Engineering'][4],
     },
     {
         selected: true,
         name: 'Emily Johnson',
         age: 41,
         startDate: new Date('1/15/2014'),
-        department: DEPARTMENTS$a[0],
-        jobTitle: JOB_TITLES$a['Marketing'][2],
+        department: DEPARTMENTS$c[0],
+        jobTitle: JOB_TITLES$c['Marketing'][2],
     },
     {
         selected: false,
         name: 'Nicole Davidson',
         age: 22,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$a[2],
-        jobTitle: JOB_TITLES$a['Engineering'][0],
+        department: DEPARTMENTS$c[2],
+        jobTitle: JOB_TITLES$c['Engineering'][0],
     },
     {
         selected: false,
         name: 'Carl Roberts',
         age: 23,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$a[2],
-        jobTitle: JOB_TITLES$a['Engineering'][3],
+        department: DEPARTMENTS$c[2],
+        jobTitle: JOB_TITLES$c['Engineering'][3],
     },
 ];
 
@@ -495,7 +496,7 @@ let EditModalComponent$2 = class EditModalComponent {
                         cellEditorParams: (params) => {
                             return {
                                 skyComponentProperties: {
-                                    data: DEPARTMENTS$a,
+                                    data: DEPARTMENTS$c,
                                     selectionChange: (change) => {
                                         this.#departmentSelectionChange(change, params.node);
                                     },
@@ -518,7 +519,7 @@ let EditModalComponent$2 = class EditModalComponent {
                             const editParams = { skyComponentProperties: { data: [] } };
                             if (selectedDepartment) {
                                 editParams.skyComponentProperties.data =
-                                    JOB_TITLES$a[selectedDepartment];
+                                    JOB_TITLES$c[selectedDepartment];
                             }
                             return editParams;
                         },
@@ -734,7 +735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'app-ag-grid-data-entry-grid-basic-example', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AgGridAngular, SkyAgGridModule, SkySearchModule, SkyToolbarModule], template: "<sky-toolbar>\n  <sky-toolbar-item>\n    <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"openModal()\">\n      Edit\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item>\n    <sky-search\n      [debounceTime]=\"250\"\n      (searchApply)=\"searchApplied($event)\"\n      (searchChange)=\"searchApplied($event)\"\n      (searchClear)=\"searchApplied($event)\"\n    />\n  </sky-toolbar-item>\n</sky-toolbar>\n<sky-ag-grid-wrapper>\n  <ag-grid-angular [gridOptions]=\"gridOptions\" />\n</sky-ag-grid-wrapper>\n" }]
         }], ctorParameters: () => [] });
 
-const DEPARTMENTS$9 = [
+const DEPARTMENTS$b = [
     {
         id: '1',
         name: 'Marketing',
@@ -752,7 +753,7 @@ const DEPARTMENTS$9 = [
         name: 'Customer Support',
     },
 ];
-const JOB_TITLES$9 = {
+const JOB_TITLES$b = {
     Marketing: [
         {
             id: '1',
@@ -821,8 +822,8 @@ const AG_GRID_DEMO_DATA$a = [
         name: 'Billy Bob',
         age: 55,
         startDate: new Date('12/1/1994'),
-        department: DEPARTMENTS$9[3],
-        jobTitle: JOB_TITLES$9['Customer Support'][1],
+        department: DEPARTMENTS$b[3],
+        jobTitle: JOB_TITLES$b['Customer Support'][1],
     },
     {
         id: 'aea50a38-aa1e-44e0-94b5-52d3f577767f',
@@ -830,8 +831,8 @@ const AG_GRID_DEMO_DATA$a = [
         name: 'Jane Deere',
         age: 33,
         startDate: new Date('7/15/2009'),
-        department: DEPARTMENTS$9[2],
-        jobTitle: JOB_TITLES$9['Engineering'][2],
+        department: DEPARTMENTS$b[2],
+        jobTitle: JOB_TITLES$b['Engineering'][2],
     },
     {
         id: 'e74afbe4-5016-4a20-9803-30a301835c4f',
@@ -840,8 +841,8 @@ const AG_GRID_DEMO_DATA$a = [
         age: 38,
         startDate: new Date('9/1/2017'),
         endDate: new Date('9/30/2017'),
-        department: DEPARTMENTS$9[1],
-        jobTitle: JOB_TITLES$9['Sales'][1],
+        department: DEPARTMENTS$b[1],
+        jobTitle: JOB_TITLES$b['Sales'][1],
     },
     {
         id: '0274faf9-388e-497d-bced-f2bef3eafcfd',
@@ -850,8 +851,8 @@ const AG_GRID_DEMO_DATA$a = [
         age: 51,
         startDate: new Date('1/1/2012'),
         endDate: new Date('6/15/2018'),
-        department: DEPARTMENTS$9[2],
-        jobTitle: JOB_TITLES$9['Engineering'][4],
+        department: DEPARTMENTS$b[2],
+        jobTitle: JOB_TITLES$b['Engineering'][4],
     },
     {
         id: '09b7da69-0272-4fe0-ace3-658a6d8f175c',
@@ -859,8 +860,8 @@ const AG_GRID_DEMO_DATA$a = [
         name: 'Emily Johnson',
         age: 41,
         startDate: new Date('1/15/2014'),
-        department: DEPARTMENTS$9[0],
-        jobTitle: JOB_TITLES$9['Marketing'][2],
+        department: DEPARTMENTS$b[0],
+        jobTitle: JOB_TITLES$b['Marketing'][2],
     },
     {
         id: '3accf076-fff1-4229-bad3-7d2d42d2c42a',
@@ -868,8 +869,8 @@ const AG_GRID_DEMO_DATA$a = [
         name: 'Nicole Davidson',
         age: 22,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$9[2],
-        jobTitle: JOB_TITLES$9['Engineering'][0],
+        department: DEPARTMENTS$b[2],
+        jobTitle: JOB_TITLES$b['Engineering'][0],
     },
     {
         id: 'a8456cf4-4f8d-40ee-a91a-ece9c2327fe4',
@@ -877,8 +878,8 @@ const AG_GRID_DEMO_DATA$a = [
         name: 'Carl Roberts',
         age: 23,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$9[2],
-        jobTitle: JOB_TITLES$9['Engineering'][3],
+        department: DEPARTMENTS$b[2],
+        jobTitle: JOB_TITLES$b['Engineering'][3],
     },
 ];
 
@@ -934,7 +935,7 @@ let EditModalComponent$1 = class EditModalComponent {
                         cellEditorParams: (params) => {
                             return {
                                 skyComponentProperties: {
-                                    data: DEPARTMENTS$9,
+                                    data: DEPARTMENTS$b,
                                     selectionChange: (change) => {
                                         this.#departmentSelectionChange(change, params.node);
                                     },
@@ -957,7 +958,7 @@ let EditModalComponent$1 = class EditModalComponent {
                             const editParams = { skyComponentProperties: { data: [] } };
                             if (selectedDepartment) {
                                 editParams.skyComponentProperties.data =
-                                    JOB_TITLES$9[selectedDepartment];
+                                    JOB_TITLES$b[selectedDepartment];
                             }
                             return editParams;
                         },
@@ -1019,7 +1020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }] });
 
 let ExampleService$6 = class ExampleService {
-    #jobs = Object.values(JOB_TITLES$9).flat();
+    #jobs = Object.values(JOB_TITLES$b).flat();
     search(searchText) {
         searchText = searchText.toUpperCase();
         const matchingJobs = this.#jobs.filter((job) => job.name?.toUpperCase().includes(searchText));
@@ -1413,7 +1414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     ], template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-data-manager-toolbar-left-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        type=\"button\"\n        (click)=\"openModal()\"\n      >\n        Edit\n      </button>\n    </sky-data-manager-toolbar-left-item>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item\n        [labelText]=\"recordCount() === 1 ? 'Record' : 'Records'\"\n        [value]=\"recordCount()\"\n      />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items()\" />\n</sky-data-manager>\n" }]
         }], ctorParameters: () => [] });
 
-const DEPARTMENTS$8 = [
+const DEPARTMENTS$a = [
     {
         id: '1',
         name: 'Marketing',
@@ -1431,7 +1432,7 @@ const DEPARTMENTS$8 = [
         name: 'Customer Support',
     },
 ];
-const JOB_TITLES$8 = {
+const JOB_TITLES$a = {
     Marketing: [
         {
             id: '1',
@@ -1499,16 +1500,16 @@ const AG_GRID_DEMO_DATA$9 = [
         name: 'Billy Bob',
         age: 55,
         startDate: new Date('12/1/1994'),
-        department: DEPARTMENTS$8[3],
-        jobTitle: JOB_TITLES$8['Customer Support'][1],
+        department: DEPARTMENTS$a[3],
+        jobTitle: JOB_TITLES$a['Customer Support'][1],
     },
     {
         selected: false,
         name: 'Jane Deere',
         age: 33,
         startDate: new Date('7/15/2009'),
-        department: DEPARTMENTS$8[2],
-        jobTitle: JOB_TITLES$8['Engineering'][2],
+        department: DEPARTMENTS$a[2],
+        jobTitle: JOB_TITLES$a['Engineering'][2],
     },
     {
         selected: false,
@@ -1516,7 +1517,7 @@ const AG_GRID_DEMO_DATA$9 = [
         age: 38,
         startDate: new Date('9/1/2017'),
         endDate: new Date('9/30/2017'),
-        department: DEPARTMENTS$8[1],
+        department: DEPARTMENTS$a[1],
     },
     {
         selected: false,
@@ -1524,32 +1525,32 @@ const AG_GRID_DEMO_DATA$9 = [
         age: 51,
         startDate: new Date('1/1/2012'),
         endDate: new Date('6/15/2018'),
-        department: DEPARTMENTS$8[2],
-        jobTitle: JOB_TITLES$8['Engineering'][4],
+        department: DEPARTMENTS$a[2],
+        jobTitle: JOB_TITLES$a['Engineering'][4],
     },
     {
         selected: true,
         name: 'Emily Johnson',
         age: 41,
         startDate: new Date('1/15/2014'),
-        department: DEPARTMENTS$8[0],
-        jobTitle: JOB_TITLES$8['Marketing'][2],
+        department: DEPARTMENTS$a[0],
+        jobTitle: JOB_TITLES$a['Marketing'][2],
     },
     {
         selected: false,
         name: 'Nicole Davidson',
         age: 22,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$8[2],
-        jobTitle: JOB_TITLES$8['Engineering'][0],
+        department: DEPARTMENTS$a[2],
+        jobTitle: JOB_TITLES$a['Engineering'][0],
     },
     {
         selected: false,
         name: 'Carl Roberts',
         age: 23,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$8[2],
-        jobTitle: JOB_TITLES$8['Engineering'][3],
+        department: DEPARTMENTS$a[2],
+        jobTitle: JOB_TITLES$a['Engineering'][3],
     },
 ];
 
@@ -1691,7 +1692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'app-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyDropdownModule], template: "<sky-dropdown buttonType=\"context-menu\" [label]=\"contextMenuAriaLabel\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"deleteAriaLabel\"\n        (click)=\"actionClicked('Delete')\"\n      >\n        Delete\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"markInactiveAriaLabel\"\n        (click)=\"actionClicked('Mark inactive')\"\n      >\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moreInfoAriaLabel\"\n        (click)=\"actionClicked('More info')\"\n      >\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n" }]
         }] });
 
-const DEPARTMENTS$7 = [
+const DEPARTMENTS$9 = [
     {
         id: '1',
         name: 'Marketing',
@@ -1709,7 +1710,7 @@ const DEPARTMENTS$7 = [
         name: 'Customer Support',
     },
 ];
-const JOB_TITLES$7 = {
+const JOB_TITLES$9 = {
     Marketing: [
         {
             id: '1',
@@ -1777,16 +1778,16 @@ const AG_GRID_DEMO_DATA$8 = [
         name: 'Billy Bob',
         age: 55,
         startDate: new Date('12/1/1994'),
-        department: DEPARTMENTS$7[3],
-        jobTitle: JOB_TITLES$7['Customer Support'][1],
+        department: DEPARTMENTS$9[3],
+        jobTitle: JOB_TITLES$9['Customer Support'][1],
     },
     {
         selected: false,
         name: 'Jane Deere',
         age: 33,
         startDate: new Date('7/15/2009'),
-        department: DEPARTMENTS$7[2],
-        jobTitle: JOB_TITLES$7['Engineering'][2],
+        department: DEPARTMENTS$9[2],
+        jobTitle: JOB_TITLES$9['Engineering'][2],
     },
     {
         selected: false,
@@ -1794,7 +1795,7 @@ const AG_GRID_DEMO_DATA$8 = [
         age: 38,
         startDate: new Date('9/1/2017'),
         endDate: new Date('9/30/2017'),
-        department: DEPARTMENTS$7[1],
+        department: DEPARTMENTS$9[1],
     },
     {
         selected: false,
@@ -1802,32 +1803,32 @@ const AG_GRID_DEMO_DATA$8 = [
         age: 51,
         startDate: new Date('1/1/2012'),
         endDate: new Date('6/15/2018'),
-        department: DEPARTMENTS$7[2],
-        jobTitle: JOB_TITLES$7['Engineering'][4],
+        department: DEPARTMENTS$9[2],
+        jobTitle: JOB_TITLES$9['Engineering'][4],
     },
     {
         selected: true,
         name: 'Emily Johnson',
         age: 41,
         startDate: new Date('1/15/2014'),
-        department: DEPARTMENTS$7[0],
-        jobTitle: JOB_TITLES$7['Marketing'][2],
+        department: DEPARTMENTS$9[0],
+        jobTitle: JOB_TITLES$9['Marketing'][2],
     },
     {
         selected: false,
         name: 'Nicole Davidson',
         age: 22,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$7[2],
-        jobTitle: JOB_TITLES$7['Engineering'][0],
+        department: DEPARTMENTS$9[2],
+        jobTitle: JOB_TITLES$9['Engineering'][0],
     },
     {
         selected: false,
         name: 'Carl Roberts',
         age: 23,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$7[2],
-        jobTitle: JOB_TITLES$7['Engineering'][3],
+        department: DEPARTMENTS$9[2],
+        jobTitle: JOB_TITLES$9['Engineering'][3],
     },
 ];
 
@@ -1904,7 +1905,7 @@ class EditModalComponent {
                         cellEditorParams: (params) => {
                             return {
                                 skyComponentProperties: {
-                                    data: DEPARTMENTS$7,
+                                    data: DEPARTMENTS$9,
                                     selectionChange: (change) => {
                                         this.#departmentSelectionChange(change, params.node);
                                     },
@@ -1927,7 +1928,7 @@ class EditModalComponent {
                             const editParams = { skyComponentProperties: { data: [] } };
                             if (selectedDepartment) {
                                 editParams.skyComponentProperties.data =
-                                    JOB_TITLES$7[selectedDepartment];
+                                    JOB_TITLES$9[selectedDepartment];
                             }
                             return editParams;
                         },
@@ -2208,7 +2209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'app-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyDropdownModule], template: "<sky-dropdown buttonType=\"context-menu\" [label]=\"contextMenuAriaLabel\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"deleteAriaLabel\"\n        (click)=\"actionClicked('Delete')\"\n      >\n        Delete\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"markInactiveAriaLabel\"\n        (click)=\"actionClicked('Mark inactive')\"\n      >\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moreInfoAriaLabel\"\n        (click)=\"actionClicked('More info')\"\n      >\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n" }]
         }] });
 
-const DEPARTMENTS$6 = [
+const DEPARTMENTS$8 = [
     {
         id: '1',
         name: 'Marketing',
@@ -2226,7 +2227,7 @@ const DEPARTMENTS$6 = [
         name: 'Customer Support',
     },
 ];
-const JOB_TITLES$6 = {
+const JOB_TITLES$8 = {
     Marketing: [
         {
             id: '1',
@@ -2294,16 +2295,16 @@ const AG_GRID_DEMO_DATA$7 = [
         name: 'Billy Bob',
         age: 55,
         startDate: new Date('12/1/1994'),
-        department: DEPARTMENTS$6[3],
-        jobTitle: JOB_TITLES$6['Customer Support'][1],
+        department: DEPARTMENTS$8[3],
+        jobTitle: JOB_TITLES$8['Customer Support'][1],
     },
     {
         selected: false,
         name: 'Jane Deere',
         age: 33,
         startDate: new Date('7/15/2009'),
-        department: DEPARTMENTS$6[2],
-        jobTitle: JOB_TITLES$6['Engineering'][2],
+        department: DEPARTMENTS$8[2],
+        jobTitle: JOB_TITLES$8['Engineering'][2],
     },
     {
         selected: false,
@@ -2311,7 +2312,7 @@ const AG_GRID_DEMO_DATA$7 = [
         age: 38,
         startDate: new Date('9/1/2017'),
         endDate: new Date('9/30/2017'),
-        department: DEPARTMENTS$6[1],
+        department: DEPARTMENTS$8[1],
     },
     {
         selected: false,
@@ -2319,32 +2320,32 @@ const AG_GRID_DEMO_DATA$7 = [
         age: 51,
         startDate: new Date('1/1/2012'),
         endDate: new Date('6/15/2018'),
-        department: DEPARTMENTS$6[2],
-        jobTitle: JOB_TITLES$6['Engineering'][4],
+        department: DEPARTMENTS$8[2],
+        jobTitle: JOB_TITLES$8['Engineering'][4],
     },
     {
         selected: true,
         name: 'Emily Johnson',
         age: 41,
         startDate: new Date('1/15/2014'),
-        department: DEPARTMENTS$6[0],
-        jobTitle: JOB_TITLES$6['Marketing'][2],
+        department: DEPARTMENTS$8[0],
+        jobTitle: JOB_TITLES$8['Marketing'][2],
     },
     {
         selected: false,
         name: 'Nicole Davidson',
         age: 22,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$6[2],
-        jobTitle: JOB_TITLES$6['Engineering'][0],
+        department: DEPARTMENTS$8[2],
+        jobTitle: JOB_TITLES$8['Engineering'][0],
     },
     {
         selected: false,
         name: 'Carl Roberts',
         age: 23,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$6[2],
-        jobTitle: JOB_TITLES$6['Engineering'][3],
+        department: DEPARTMENTS$8[2],
+        jobTitle: JOB_TITLES$8['Engineering'][3],
     },
 ];
 
@@ -2459,7 +2460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'app-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyDropdownModule], template: "<sky-dropdown buttonType=\"context-menu\" [label]=\"contextMenuAriaLabel\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"deleteAriaLabel\"\n        (click)=\"actionClicked('Delete')\"\n      >\n        Delete\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"markInactiveAriaLabel\"\n        (click)=\"actionClicked('Mark inactive')\"\n      >\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moreInfoAriaLabel\"\n        (click)=\"actionClicked('More info')\"\n      >\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n" }]
         }] });
 
-const DEPARTMENTS$5 = [
+const DEPARTMENTS$7 = [
     {
         id: '1',
         name: 'Marketing',
@@ -2477,7 +2478,7 @@ const DEPARTMENTS$5 = [
         name: 'Customer Support',
     },
 ];
-const JOB_TITLES$5 = {
+const JOB_TITLES$7 = {
     Marketing: [
         {
             id: '1',
@@ -2544,51 +2545,51 @@ const AG_GRID_DEMO_DATA$6 = [
         name: 'Billy Bob',
         age: 55,
         startDate: new Date('12/1/1994'),
-        department: DEPARTMENTS$5[3],
-        jobTitle: JOB_TITLES$5['Customer Support'][1],
+        department: DEPARTMENTS$7[3],
+        jobTitle: JOB_TITLES$7['Customer Support'][1],
     },
     {
         name: 'Jane Deere',
         age: 33,
         startDate: new Date('7/15/2009'),
-        department: DEPARTMENTS$5[2],
-        jobTitle: JOB_TITLES$5['Engineering'][2],
+        department: DEPARTMENTS$7[2],
+        jobTitle: JOB_TITLES$7['Engineering'][2],
     },
     {
         name: 'John Doe',
         age: 38,
         startDate: new Date('9/1/2017'),
         endDate: new Date('9/30/2017'),
-        department: DEPARTMENTS$5[1],
+        department: DEPARTMENTS$7[1],
     },
     {
         name: 'David Smith',
         age: 51,
         startDate: new Date('1/1/2012'),
         endDate: new Date('6/15/2018'),
-        department: DEPARTMENTS$5[2],
-        jobTitle: JOB_TITLES$5['Engineering'][4],
+        department: DEPARTMENTS$7[2],
+        jobTitle: JOB_TITLES$7['Engineering'][4],
     },
     {
         name: 'Emily Johnson',
         age: 41,
         startDate: new Date('1/15/2014'),
-        department: DEPARTMENTS$5[0],
-        jobTitle: JOB_TITLES$5['Marketing'][2],
+        department: DEPARTMENTS$7[0],
+        jobTitle: JOB_TITLES$7['Marketing'][2],
     },
     {
         name: 'Nicole Davidson',
         age: 22,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$5[2],
-        jobTitle: JOB_TITLES$5['Engineering'][0],
+        department: DEPARTMENTS$7[2],
+        jobTitle: JOB_TITLES$7['Engineering'][0],
     },
     {
         name: 'Carl Roberts',
         age: 23,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$5[2],
-        jobTitle: JOB_TITLES$5['Engineering'][3],
+        department: DEPARTMENTS$7[2],
+        jobTitle: JOB_TITLES$7['Engineering'][3],
     },
 ];
 
@@ -2667,7 +2668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'app-ag-grid-data-grid-basic-example', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AgGridAngular, SkyAgGridModule], template: "<sky-ag-grid-wrapper>\n  <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"gridData\" />\n</sky-ag-grid-wrapper>\n" }]
         }], ctorParameters: () => [] });
 
-const DEPARTMENTS$4 = [
+const DEPARTMENTS$6 = [
     {
         id: '1',
         name: 'Marketing',
@@ -2685,7 +2686,7 @@ const DEPARTMENTS$4 = [
         name: 'Customer Support',
     },
 ];
-const JOB_TITLES$4 = {
+const JOB_TITLES$6 = {
     Marketing: [
         {
             id: '1',
@@ -2753,16 +2754,16 @@ const AG_GRID_DEMO_DATA$5 = [
         name: 'Billy Bob',
         age: 55,
         startDate: new Date('12/1/1994'),
-        department: DEPARTMENTS$4[3],
-        jobTitle: JOB_TITLES$4['Customer Support'][1],
+        department: DEPARTMENTS$6[3],
+        jobTitle: JOB_TITLES$6['Customer Support'][1],
     },
     {
         id: 'aea50a38-aa1e-44e0-94b5-52d3f577767f',
         name: 'Jane Deere',
         age: 33,
         startDate: new Date('7/15/2009'),
-        department: DEPARTMENTS$4[2],
-        jobTitle: JOB_TITLES$4['Engineering'][2],
+        department: DEPARTMENTS$6[2],
+        jobTitle: JOB_TITLES$6['Engineering'][2],
     },
     {
         id: 'e74afbe4-5016-4a20-9803-30a301835c4f',
@@ -2770,8 +2771,8 @@ const AG_GRID_DEMO_DATA$5 = [
         age: 38,
         startDate: new Date('9/1/2017'),
         endDate: new Date('9/30/2017'),
-        department: DEPARTMENTS$4[1],
-        jobTitle: JOB_TITLES$4['Sales'][1],
+        department: DEPARTMENTS$6[1],
+        jobTitle: JOB_TITLES$6['Sales'][1],
     },
     {
         id: '0274faf9-388e-497d-bced-f2bef3eafcfd',
@@ -2779,8 +2780,8 @@ const AG_GRID_DEMO_DATA$5 = [
         age: 51,
         startDate: new Date('1/1/2012'),
         endDate: new Date('6/15/2018'),
-        department: DEPARTMENTS$4[2],
-        jobTitle: JOB_TITLES$4['Engineering'][4],
+        department: DEPARTMENTS$6[2],
+        jobTitle: JOB_TITLES$6['Engineering'][4],
     },
     {
         id: '09b7da69-0272-4fe0-ace3-658a6d8f175c',
@@ -2788,29 +2789,29 @@ const AG_GRID_DEMO_DATA$5 = [
         name: 'Emily Johnson',
         age: 41,
         startDate: new Date('1/15/2014'),
-        department: DEPARTMENTS$4[0],
-        jobTitle: JOB_TITLES$4['Marketing'][2],
+        department: DEPARTMENTS$6[0],
+        jobTitle: JOB_TITLES$6['Marketing'][2],
     },
     {
         id: '3accf076-fff1-4229-bad3-7d2d42d2c42a',
         name: 'Nicole Davidson',
         age: 22,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$4[2],
-        jobTitle: JOB_TITLES$4['Engineering'][0],
+        department: DEPARTMENTS$6[2],
+        jobTitle: JOB_TITLES$6['Engineering'][0],
     },
     {
         id: 'a8456cf4-4f8d-40ee-a91a-ece9c2327fe4',
         name: 'Carl Roberts',
         age: 23,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$4[2],
-        jobTitle: JOB_TITLES$4['Engineering'][3],
+        department: DEPARTMENTS$6[2],
+        jobTitle: JOB_TITLES$6['Engineering'][3],
     },
 ];
 
 let ExampleService$5 = class ExampleService {
-    #jobs = Object.values(JOB_TITLES$4).flat();
+    #jobs = Object.values(JOB_TITLES$6).flat();
     search(searchText) {
         searchText = searchText.toUpperCase();
         const matchingJobs = this.#jobs.filter((job) => job.name?.toUpperCase().includes(searchText));
@@ -3166,7 +3167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     ], template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item\n        [labelText]=\"recordCount() === 1 ? 'Record' : 'Records'\"\n        [value]=\"recordCount()\"\n      />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n" }]
         }], ctorParameters: () => [] });
 
-const DEPARTMENTS$3 = [
+const DEPARTMENTS$5 = [
     {
         id: '1',
         name: 'Marketing',
@@ -3184,7 +3185,7 @@ const DEPARTMENTS$3 = [
         name: 'Customer Support',
     },
 ];
-const JOB_TITLES$3 = {
+const JOB_TITLES$5 = {
     Marketing: [
         {
             id: '1',
@@ -3252,16 +3253,16 @@ const AG_GRID_DEMO_DATA$4 = [
         name: 'Billy Bob',
         age: 55,
         startDate: new Date('12/1/1994'),
-        department: DEPARTMENTS$3[3],
-        jobTitle: JOB_TITLES$3['Customer Support'][1],
+        department: DEPARTMENTS$5[3],
+        jobTitle: JOB_TITLES$5['Customer Support'][1],
     },
     {
         id: 'aea50a38-aa1e-44e0-94b5-52d3f577767f',
         name: 'Jane Deere',
         age: 33,
         startDate: new Date('7/15/2009'),
-        department: DEPARTMENTS$3[2],
-        jobTitle: JOB_TITLES$3['Engineering'][2],
+        department: DEPARTMENTS$5[2],
+        jobTitle: JOB_TITLES$5['Engineering'][2],
     },
     {
         id: 'e74afbe4-5016-4a20-9803-30a301835c4f',
@@ -3269,8 +3270,8 @@ const AG_GRID_DEMO_DATA$4 = [
         age: 38,
         startDate: new Date('9/1/2017'),
         endDate: new Date('9/30/2017'),
-        department: DEPARTMENTS$3[1],
-        jobTitle: JOB_TITLES$3['Sales'][1],
+        department: DEPARTMENTS$5[1],
+        jobTitle: JOB_TITLES$5['Sales'][1],
     },
     {
         id: '0274faf9-388e-497d-bced-f2bef3eafcfd',
@@ -3278,8 +3279,8 @@ const AG_GRID_DEMO_DATA$4 = [
         age: 51,
         startDate: new Date('1/1/2012'),
         endDate: new Date('6/15/2018'),
-        department: DEPARTMENTS$3[2],
-        jobTitle: JOB_TITLES$3['Engineering'][4],
+        department: DEPARTMENTS$5[2],
+        jobTitle: JOB_TITLES$5['Engineering'][4],
     },
     {
         id: '09b7da69-0272-4fe0-ace3-658a6d8f175c',
@@ -3287,29 +3288,29 @@ const AG_GRID_DEMO_DATA$4 = [
         name: 'Emily Johnson',
         age: 41,
         startDate: new Date('1/15/2014'),
-        department: DEPARTMENTS$3[0],
-        jobTitle: JOB_TITLES$3['Marketing'][2],
+        department: DEPARTMENTS$5[0],
+        jobTitle: JOB_TITLES$5['Marketing'][2],
     },
     {
         id: '3accf076-fff1-4229-bad3-7d2d42d2c42a',
         name: 'Nicole Davidson',
         age: 22,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$3[2],
-        jobTitle: JOB_TITLES$3['Engineering'][0],
+        department: DEPARTMENTS$5[2],
+        jobTitle: JOB_TITLES$5['Engineering'][0],
     },
     {
         id: 'a8456cf4-4f8d-40ee-a91a-ece9c2327fe4',
         name: 'Carl Roberts',
         age: 23,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$3[2],
-        jobTitle: JOB_TITLES$3['Engineering'][3],
+        department: DEPARTMENTS$5[2],
+        jobTitle: JOB_TITLES$5['Engineering'][3],
     },
 ];
 
 let ExampleService$4 = class ExampleService {
-    #jobs = Object.values(JOB_TITLES$3).flat();
+    #jobs = Object.values(JOB_TITLES$5).flat();
     search(searchText) {
         searchText = searchText.toUpperCase();
         const matchingJobs = this.#jobs.filter((job) => job.name?.toUpperCase().includes(searchText));
@@ -3677,7 +3678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'app-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyDropdownModule], template: "<sky-dropdown buttonType=\"context-menu\" [label]=\"contextMenuAriaLabel\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"deleteAriaLabel\"\n        (click)=\"actionClicked('Delete')\"\n      >\n        Delete\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"markInactiveAriaLabel\"\n        (click)=\"actionClicked('Mark inactive')\"\n      >\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moreInfoAriaLabel\"\n        (click)=\"actionClicked('More info')\"\n      >\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n" }]
         }] });
 
-const DEPARTMENTS$2 = [
+const DEPARTMENTS$4 = [
     {
         id: '1',
         name: 'Marketing',
@@ -3695,7 +3696,7 @@ const DEPARTMENTS$2 = [
         name: 'Customer Support',
     },
 ];
-const JOB_TITLES$2 = {
+const JOB_TITLES$4 = {
     Marketing: [
         {
             id: '1',
@@ -3762,51 +3763,51 @@ const AG_GRID_DEMO_DATA$3 = [
         name: 'Billy Bob',
         age: 55,
         startDate: new Date('12/1/1994'),
-        department: DEPARTMENTS$2[3],
-        jobTitle: JOB_TITLES$2['Customer Support'][1],
+        department: DEPARTMENTS$4[3],
+        jobTitle: JOB_TITLES$4['Customer Support'][1],
     },
     {
         name: 'Jane Deere',
         age: 33,
         startDate: new Date('7/15/2009'),
-        department: DEPARTMENTS$2[2],
-        jobTitle: JOB_TITLES$2['Engineering'][2],
+        department: DEPARTMENTS$4[2],
+        jobTitle: JOB_TITLES$4['Engineering'][2],
     },
     {
         name: 'John Doe',
         age: 38,
         startDate: new Date('9/1/2017'),
         endDate: new Date('9/30/2017'),
-        department: DEPARTMENTS$2[1],
+        department: DEPARTMENTS$4[1],
     },
     {
         name: 'David Smith',
         age: 51,
         startDate: new Date('1/1/2012'),
         endDate: new Date('6/15/2018'),
-        department: DEPARTMENTS$2[2],
-        jobTitle: JOB_TITLES$2['Engineering'][4],
+        department: DEPARTMENTS$4[2],
+        jobTitle: JOB_TITLES$4['Engineering'][4],
     },
     {
         name: 'Emily Johnson',
         age: 41,
         startDate: new Date('1/15/2014'),
-        department: DEPARTMENTS$2[0],
-        jobTitle: JOB_TITLES$2['Marketing'][2],
+        department: DEPARTMENTS$4[0],
+        jobTitle: JOB_TITLES$4['Marketing'][2],
     },
     {
         name: 'Nicole Davidson',
         age: 22,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$2[2],
-        jobTitle: JOB_TITLES$2['Engineering'][0],
+        department: DEPARTMENTS$4[2],
+        jobTitle: JOB_TITLES$4['Engineering'][0],
     },
     {
         name: 'Carl Roberts',
         age: 23,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$2[2],
-        jobTitle: JOB_TITLES$2['Engineering'][3],
+        department: DEPARTMENTS$4[2],
+        jobTitle: JOB_TITLES$4['Engineering'][3],
     },
 ];
 
@@ -3983,7 +3984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'app-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyDropdownModule], template: "<sky-dropdown buttonType=\"context-menu\" [label]=\"contextMenuAriaLabel\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"deleteAriaLabel\"\n        (click)=\"actionClicked('Delete')\"\n      >\n        Delete\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"markInactiveAriaLabel\"\n        (click)=\"actionClicked('Mark inactive')\"\n      >\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moreInfoAriaLabel\"\n        (click)=\"actionClicked('More info')\"\n      >\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n" }]
         }] });
 
-const DEPARTMENTS$1 = [
+const DEPARTMENTS$3 = [
     {
         id: '1',
         name: 'Marketing',
@@ -4001,7 +4002,7 @@ const DEPARTMENTS$1 = [
         name: 'Customer Support',
     },
 ];
-const JOB_TITLES$1 = {
+const JOB_TITLES$3 = {
     Marketing: [
         {
             id: '1',
@@ -4068,51 +4069,51 @@ const AG_GRID_DEMO_DATA$2 = [
         name: 'Billy Bob',
         age: 55,
         startDate: new Date('12/1/1994'),
-        department: DEPARTMENTS$1[3],
-        jobTitle: JOB_TITLES$1['Customer Support'][1],
+        department: DEPARTMENTS$3[3],
+        jobTitle: JOB_TITLES$3['Customer Support'][1],
     },
     {
         name: 'Jane Deere',
         age: 33,
         startDate: new Date('7/15/2009'),
-        department: DEPARTMENTS$1[2],
-        jobTitle: JOB_TITLES$1['Engineering'][2],
+        department: DEPARTMENTS$3[2],
+        jobTitle: JOB_TITLES$3['Engineering'][2],
     },
     {
         name: 'John Doe',
         age: 38,
         startDate: new Date('9/1/2017'),
         endDate: new Date('9/30/2017'),
-        department: DEPARTMENTS$1[1],
+        department: DEPARTMENTS$3[1],
     },
     {
         name: 'David Smith',
         age: 51,
         startDate: new Date('1/1/2012'),
         endDate: new Date('6/15/2018'),
-        department: DEPARTMENTS$1[2],
-        jobTitle: JOB_TITLES$1['Engineering'][4],
+        department: DEPARTMENTS$3[2],
+        jobTitle: JOB_TITLES$3['Engineering'][4],
     },
     {
         name: 'Emily Johnson',
         age: 41,
         startDate: new Date('1/15/2014'),
-        department: DEPARTMENTS$1[0],
-        jobTitle: JOB_TITLES$1['Marketing'][2],
+        department: DEPARTMENTS$3[0],
+        jobTitle: JOB_TITLES$3['Marketing'][2],
     },
     {
         name: 'Nicole Davidson',
         age: 22,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$1[2],
-        jobTitle: JOB_TITLES$1['Engineering'][0],
+        department: DEPARTMENTS$3[2],
+        jobTitle: JOB_TITLES$3['Engineering'][0],
     },
     {
         name: 'Carl Roberts',
         age: 23,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS$1[2],
-        jobTitle: JOB_TITLES$1['Engineering'][3],
+        department: DEPARTMENTS$3[2],
+        jobTitle: JOB_TITLES$3['Engineering'][3],
     },
 ];
 
@@ -4367,7 +4368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'app-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyDropdownModule], template: "<sky-dropdown buttonType=\"context-menu\" [label]=\"contextMenuAriaLabel\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"deleteAriaLabel\"\n        (click)=\"actionClicked('Delete')\"\n      >\n        Delete\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"markInactiveAriaLabel\"\n        (click)=\"actionClicked('Mark inactive')\"\n      >\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"moreInfoAriaLabel\"\n        (click)=\"actionClicked('More info')\"\n      >\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n" }]
         }] });
 
-const DEPARTMENTS = [
+const DEPARTMENTS$2 = [
     {
         id: '1',
         name: 'Marketing',
@@ -4385,7 +4386,7 @@ const DEPARTMENTS = [
         name: 'Customer Support',
     },
 ];
-const JOB_TITLES = {
+const JOB_TITLES$2 = {
     Marketing: [
         {
             id: '1',
@@ -4453,16 +4454,16 @@ const AG_GRID_DEMO_DATA = [
         name: 'Billy Bob',
         age: 55,
         startDate: new Date('12/1/1994'),
-        department: DEPARTMENTS[3],
-        jobTitle: JOB_TITLES['Customer Support'][1],
+        department: DEPARTMENTS$2[3],
+        jobTitle: JOB_TITLES$2['Customer Support'][1],
     },
     {
         selected: false,
         name: 'Jane Deere',
         age: 33,
         startDate: new Date('7/15/2009'),
-        department: DEPARTMENTS[2],
-        jobTitle: JOB_TITLES['Engineering'][2],
+        department: DEPARTMENTS$2[2],
+        jobTitle: JOB_TITLES$2['Engineering'][2],
     },
     {
         selected: false,
@@ -4470,7 +4471,7 @@ const AG_GRID_DEMO_DATA = [
         age: 38,
         startDate: new Date('9/1/2017'),
         endDate: new Date('9/30/2017'),
-        department: DEPARTMENTS[1],
+        department: DEPARTMENTS$2[1],
     },
     {
         selected: false,
@@ -4478,32 +4479,32 @@ const AG_GRID_DEMO_DATA = [
         age: 51,
         startDate: new Date('1/1/2012'),
         endDate: new Date('6/15/2018'),
-        department: DEPARTMENTS[2],
-        jobTitle: JOB_TITLES['Engineering'][4],
+        department: DEPARTMENTS$2[2],
+        jobTitle: JOB_TITLES$2['Engineering'][4],
     },
     {
         selected: true,
         name: 'Emily Johnson',
         age: 41,
         startDate: new Date('1/15/2014'),
-        department: DEPARTMENTS[0],
-        jobTitle: JOB_TITLES['Marketing'][2],
+        department: DEPARTMENTS$2[0],
+        jobTitle: JOB_TITLES$2['Marketing'][2],
     },
     {
         selected: false,
         name: 'Nicole Davidson',
         age: 22,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS[2],
-        jobTitle: JOB_TITLES['Engineering'][0],
+        department: DEPARTMENTS$2[2],
+        jobTitle: JOB_TITLES$2['Engineering'][0],
     },
     {
         selected: false,
         name: 'Carl Roberts',
         age: 23,
         startDate: new Date('11/1/2019'),
-        department: DEPARTMENTS[2],
-        jobTitle: JOB_TITLES['Engineering'][3],
+        department: DEPARTMENTS$2[2],
+        jobTitle: JOB_TITLES$2['Engineering'][3],
     },
 ];
 
@@ -5183,6 +5184,525 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 type: Input
             }] } });
 
+const DEPARTMENTS$1 = [
+    {
+        id: '1',
+        name: 'Marketing',
+    },
+    {
+        id: '2',
+        name: 'Sales',
+    },
+    {
+        id: '3',
+        name: 'Engineering',
+    },
+    {
+        id: '4',
+        name: 'Customer Support',
+    },
+];
+const JOB_TITLES$1 = {
+    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',
+        },
+    ],
+};
+const DATA_GRID_DEMO_DATA$3 = [
+    {
+        id: '1',
+        name: 'Billy Bob',
+        age: 55,
+        startDate: new Date('12/1/1994'),
+        department: DEPARTMENTS$1[3],
+        jobTitle: JOB_TITLES$1['Customer Support'][1],
+    },
+    {
+        id: '2',
+        name: 'Jane Deere',
+        age: 33,
+        startDate: new Date('7/15/2009'),
+        department: DEPARTMENTS$1[2],
+        jobTitle: JOB_TITLES$1['Engineering'][2],
+    },
+    {
+        id: '3',
+        name: 'John Doe',
+        age: 38,
+        startDate: new Date('9/1/2017'),
+        endDate: new Date('9/30/2017'),
+        department: DEPARTMENTS$1[1],
+    },
+    {
+        id: '4',
+        name: 'David Smith',
+        age: 51,
+        startDate: new Date('1/1/2012'),
+        endDate: new Date('6/15/2018'),
+        department: DEPARTMENTS$1[2],
+        jobTitle: JOB_TITLES$1['Engineering'][4],
+    },
+    {
+        id: '5',
+        name: 'Emily Johnson',
+        age: 41,
+        startDate: new Date('1/15/2014'),
+        department: DEPARTMENTS$1[0],
+        jobTitle: JOB_TITLES$1['Marketing'][2],
+    },
+    {
+        id: '6',
+        name: 'Nicole Davidson',
+        age: 22,
+        startDate: new Date('11/1/2019'),
+        department: DEPARTMENTS$1[2],
+        jobTitle: JOB_TITLES$1['Engineering'][0],
+    },
+    {
+        id: '7',
+        name: 'Carl Roberts',
+        age: 23,
+        startDate: new Date('11/1/2019'),
+        department: DEPARTMENTS$1[2],
+        jobTitle: JOB_TITLES$1['Engineering'][3],
+    },
+];
+
+/**
+ * @title Basic data grid
+ */
+class DataGridBasicExampleComponent {
+    constructor() {
+        this.gridData = signal(DATA_GRID_DEMO_DATA$3, ...(ngDevMode ? [{ debugName: "gridData" }] : []));
+        this.selectedRowIds = model([], ...(ngDevMode ? [{ debugName: "selectedRowIds" }] : []));
+        this.selectedNames = computed(() => {
+            const selectedRowIds = this.selectedRowIds();
+            return this.gridData()
+                .filter((row) => selectedRowIds.includes(row.id))
+                .map((row) => row.name)
+                .sort((a, b) => a.localeCompare(b))
+                .join(', ');
+        }, ...(ngDevMode ? [{ debugName: "selectedNames" }] : []));
+    }
+    actionClicked(row, action) {
+        alert(`${action} clicked for ${row.name}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DataGridBasicExampleComponent, isStandalone: true, selector: "app-data-grid-basic-example", inputs: { selectedRowIds: { classPropertyName: "selectedRowIds", publicName: "selectedRowIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRowIds: "selectedRowIdsChange" }, ngImport: i0, template: "@let names = selectedNames();\n\n<sky-box class=\"sky-theme-margin-bottom-l\">\n  <sky-box-content>\n    Selected rows: {{ names }}\n    @if (!names) {\n      <em class=\"sky-theme-font-body-deemphasized-m\">no rows selected</em>\n    }\n  </sky-box-content>\n</sky-box>\n\n<sky-data-grid\n  data-sky-id=\"example-data-grid\"\n  multiselect\n  [data]=\"gridData()\"\n  [(selectedRowIds)]=\"selectedRowIds\"\n>\n  <sky-data-grid-column\n    columnId=\"context\"\n    headingText=\"Context menu\"\n    headingHidden\n    width=\"50\"\n    [resizable]=\"false\"\n    [sortable]=\"false\"\n    [template]=\"contextMenu\"\n  />\n  <sky-data-grid-column field=\"name\" headingText=\"Name\" />\n  <sky-data-grid-column\n    field=\"age\"\n    headingText=\"Age\"\n    dataType=\"number\"\n    width=\"60\"\n    helpPopoverTitle=\"Age\"\n    helpPopoverContent=\"The team member's current age, in years.\"\n  />\n  <sky-data-grid-column\n    field=\"startDate\"\n    headingText=\"Start date\"\n    dataType=\"date\"\n  />\n  <sky-data-grid-column\n    field=\"endDate\"\n    headingText=\"End date\"\n    dataType=\"date\"\n  />\n  <sky-data-grid-column field=\"department\" headingText=\"Department\">\n    <ng-template let-row=\"row\">{{ row.department?.name }}</ng-template>\n  </sky-data-grid-column>\n  <sky-data-grid-column field=\"jobTitle\" headingText=\"Title\">\n    <ng-template let-row=\"row\">{{ row.jobTitle?.name }}</ng-template>\n  </sky-data-grid-column>\n</sky-data-grid>\n\n<ng-template #contextMenu let-row=\"row\">\n  <sky-dropdown\n    buttonType=\"context-menu\"\n    [attr.data-sky-id]=\"'context-menu-' + row.id\"\n    [label]=\"`Context menu for ${row?.name}`\"\n  >\n    <sky-dropdown-menu>\n      <sky-dropdown-item>\n        <button\n          type=\"button\"\n          [attr.aria-label]=\"`Mark ${row?.name} inactive`\"\n          (click)=\"actionClicked(row, 'Mark inactive')\"\n        >\n          Mark inactive\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button\n          type=\"button\"\n          [attr.aria-label]=\"`More info for ${row?.name}`\"\n          (click)=\"actionClicked(row, 'More info')\"\n        >\n          More info\n        </button>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$5.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$5.λ43, selector: "sky-box-content" }, { kind: "component", type: SkyDataGrid, selector: "sky-data-grid", inputs: ["autoSort", "autoPage", "columnFit", "compact", "data", "labelText", "loading", "minHeight", "multiselect", "pageSize", "pageQueryParam", "rowCount", "stacked", "topScrollEnabled", "page", "selectedRowIds", "sort"], outputs: ["pageChange", "selectedRowIdsChange", "sortChange"] }, { kind: "component", type: SkyDataGridColumn, selector: "sky-data-grid-column", inputs: ["columnHidden", "columnId", "dataType", "field", "flexWidth", "headingText", "headingHidden", "helpPopoverTitle", "helpPopoverContent", "locked", "resizable", "sortable", "template", "width", "wrapText"] }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$3.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$3.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridBasicExampleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-data-grid-basic-example', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyBoxModule, SkyDataGrid, SkyDataGridColumn, SkyDropdownModule], template: "@let names = selectedNames();\n\n<sky-box class=\"sky-theme-margin-bottom-l\">\n  <sky-box-content>\n    Selected rows: {{ names }}\n    @if (!names) {\n      <em class=\"sky-theme-font-body-deemphasized-m\">no rows selected</em>\n    }\n  </sky-box-content>\n</sky-box>\n\n<sky-data-grid\n  data-sky-id=\"example-data-grid\"\n  multiselect\n  [data]=\"gridData()\"\n  [(selectedRowIds)]=\"selectedRowIds\"\n>\n  <sky-data-grid-column\n    columnId=\"context\"\n    headingText=\"Context menu\"\n    headingHidden\n    width=\"50\"\n    [resizable]=\"false\"\n    [sortable]=\"false\"\n    [template]=\"contextMenu\"\n  />\n  <sky-data-grid-column field=\"name\" headingText=\"Name\" />\n  <sky-data-grid-column\n    field=\"age\"\n    headingText=\"Age\"\n    dataType=\"number\"\n    width=\"60\"\n    helpPopoverTitle=\"Age\"\n    helpPopoverContent=\"The team member's current age, in years.\"\n  />\n  <sky-data-grid-column\n    field=\"startDate\"\n    headingText=\"Start date\"\n    dataType=\"date\"\n  />\n  <sky-data-grid-column\n    field=\"endDate\"\n    headingText=\"End date\"\n    dataType=\"date\"\n  />\n  <sky-data-grid-column field=\"department\" headingText=\"Department\">\n    <ng-template let-row=\"row\">{{ row.department?.name }}</ng-template>\n  </sky-data-grid-column>\n  <sky-data-grid-column field=\"jobTitle\" headingText=\"Title\">\n    <ng-template let-row=\"row\">{{ row.jobTitle?.name }}</ng-template>\n  </sky-data-grid-column>\n</sky-data-grid>\n\n<ng-template #contextMenu let-row=\"row\">\n  <sky-dropdown\n    buttonType=\"context-menu\"\n    [attr.data-sky-id]=\"'context-menu-' + row.id\"\n    [label]=\"`Context menu for ${row?.name}`\"\n  >\n    <sky-dropdown-menu>\n      <sky-dropdown-item>\n        <button\n          type=\"button\"\n          [attr.aria-label]=\"`Mark ${row?.name} inactive`\"\n          (click)=\"actionClicked(row, 'Mark inactive')\"\n        >\n          Mark inactive\n        </button>\n      </sky-dropdown-item>\n      <sky-dropdown-item>\n        <button\n          type=\"button\"\n          [attr.aria-label]=\"`More info for ${row?.name}`\"\n          (click)=\"actionClicked(row, 'More info')\"\n        >\n          More info\n        </button>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</ng-template>\n" }]
+        }], propDecorators: { selectedRowIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowIds", required: false }] }, { type: i0.Output, args: ["selectedRowIdsChange"] }] } });
+
+const DATA_GRID_DEMO_DATA$2 = [
+    { id: '1', name: 'Billy Bob', age: 55, startDate: new Date('12/1/1994') },
+    { id: '2', name: 'Jane Deere', age: 33, startDate: new Date('7/15/2009') },
+    { id: '3', name: 'John Doe', age: 38, startDate: new Date('9/1/2017') },
+    { id: '4', name: 'David Smith', age: 51, startDate: new Date('1/1/2012') },
+    { id: '5', name: 'Emily Johnson', age: 41, startDate: new Date('1/15/2014') },
+    {
+        id: '6',
+        name: 'Nicole Davidson',
+        age: 22,
+        startDate: new Date('11/1/2019'),
+    },
+    { id: '7', name: 'Carl Roberts', age: 23, startDate: new Date('11/1/2019') },
+    { id: '8', name: 'Maria Garcia', age: 47, startDate: new Date('3/12/2003') },
+    { id: '9', name: 'Liang Chen', age: 36, startDate: new Date('5/30/2015') },
+    { id: '10', name: 'Aisha Khan', age: 29, startDate: new Date('8/4/2018') },
+    { id: '11', name: 'Tom Anderson', age: 60, startDate: new Date('2/2/1989') },
+    { id: '12', name: 'Sofia Rossi', age: 44, startDate: new Date('10/20/2006') },
+    {
+        id: '13',
+        name: 'Noah Williams',
+        age: 31,
+        startDate: new Date('6/18/2013'),
+    },
+    { id: '14', name: 'Priya Patel', age: 27, startDate: new Date('4/9/2020') },
+    { id: '15', name: 'Lucas Martin', age: 39, startDate: new Date('7/1/2011') },
+    { id: '16', name: 'Hannah Lee', age: 34, startDate: new Date('9/22/2016') },
+    { id: '17', name: 'Omar Haddad', age: 49, startDate: new Date('1/5/2001') },
+    { id: '18', name: 'Grace Kim', age: 26, startDate: new Date('12/12/2021') },
+    { id: '19', name: 'Ethan Brown', age: 53, startDate: new Date('3/30/1998') },
+    {
+        id: '20',
+        name: 'Olivia Wilson',
+        age: 42,
+        startDate: new Date('5/14/2008'),
+    },
+    { id: '21', name: 'Diego Torres', age: 37, startDate: new Date('8/27/2014') },
+    { id: '22', name: 'Mei Tanaka', age: 30, startDate: new Date('2/16/2017') },
+    { id: '23', name: 'Samuel Owens', age: 58, startDate: new Date('11/3/1992') },
+];
+function compareRows(a, b, field) {
+    switch (field) {
+        case 'age':
+            return a.age - b.age;
+        case 'startDate':
+            return a.startDate.getTime() - b.startDate.getTime();
+        default:
+            return a.name.localeCompare(b.name);
+    }
+}
+/**
+ * Simulates a server request for a single page of sorted data. A real SPA would
+ * issue this request to its backend and let the server apply the sort and paging.
+ */
+function getServerPage(options) {
+    const { page, pageSize, sort } = options;
+    const sorted = [...DATA_GRID_DEMO_DATA$2];
+    if (sort) {
+        sorted.sort((a, b) => compareRows(a, b, sort.field));
+        if (sort.direction === 'desc') {
+            sorted.reverse();
+        }
+    }
+    const start = (page - 1) * pageSize;
+    return {
+        items: sorted.slice(start, start + pageSize),
+        totalCount: DATA_GRID_DEMO_DATA$2.length,
+    };
+}
+
+/**
+ * @title Data grid with a server-side resource data source
+ */
+class DataGridLoadingExampleComponent {
+    #behavior;
+    constructor() {
+        // Simulate network latency.
+        this.delay = input(600, ...(ngDevMode ? [{ debugName: "delay" }] : []));
+        this.pageSize = 5;
+        this.page = signal(1, ...(ngDevMode ? [{ debugName: "page" }] : []));
+        this.sort = signal({
+            field: 'name',
+            direction: 'asc',
+        }, ...(ngDevMode ? [{ debugName: "sort" }] : []));
+        // The total number of rows available on the server, used to size the paging
+        // controls. It is held in its own signal so it persists across page loads.
+        this.rowCount = signal(0, ...(ngDevMode ? [{ debugName: "rowCount" }] : []));
+        // Demonstration resource. An actual SPA might use [httpResource](https://angular.dev/api/common/http/httpResource)
+        // to load remote data. The server applies the sort and returns one page at a
+        // time, so `autoSort` and `autoPage` are disabled on the grid below.
+        this.data = resource({ ...(ngDevMode ? { debugName: "data" } : {}), params: () => ({
+                behavior: this.#behavior(),
+                delay: this.delay(),
+                page: this.page(),
+                pageSize: this.pageSize,
+                sort: this.sort(),
+            }),
+            loader: async ({ params, abortSignal }) => {
+                switch (params.behavior) {
+                    case 'data':
+                        await new Promise((resolve) => setTimeout(resolve, params.delay));
+                        return getServerPage(params);
+                    case 'empty':
+                        await new Promise((resolve) => setTimeout(resolve, params.delay));
+                        return { items: [], totalCount: 0 };
+                    case 'loading':
+                        return await new Promise((resolve) => {
+                            abortSignal.addEventListener('abort', () => {
+                                resolve({ items: [], totalCount: 0 });
+                            });
+                        });
+                    default:
+                        throw new Error();
+                }
+            } });
+        this.#behavior = signal('data', ...(ngDevMode ? [{ debugName: "#behavior" }] : []));
+        afterNextRender(() => {
+            this.data.reload();
+        });
+        // Keep the paging controls in sync with the server's most recent total.
+        effect(() => {
+            const value = this.data.value();
+            if (value) {
+                this.rowCount.set(value.totalCount);
+            }
+        });
+    }
+    showData() {
+        this.page.set(1);
+        this.#behavior.set('data');
+    }
+    showEmpty() {
+        this.#behavior.set('empty');
+    }
+    showLoading() {
+        this.#behavior.set('loading');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridLoadingExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: DataGridLoadingExampleComponent, isStandalone: true, selector: "app-data-grid-loading-example", inputs: { delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"sky-theme-margin-bottom-l\">\n  <button\n    class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n    type=\"button\"\n    data-sky-id=\"show-data-button\"\n    (click)=\"showData()\"\n  >\n    Show data\n  </button>\n  <button\n    class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n    type=\"button\"\n    data-sky-id=\"show-empty-button\"\n    (click)=\"showEmpty()\"\n  >\n    Show empty state\n  </button>\n  <button\n    class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n    type=\"button\"\n    data-sky-id=\"show-loading-button\"\n    (click)=\"showLoading()\"\n  >\n    Show loading state\n  </button>\n</div>\n\n<sky-data-grid\n  data-sky-id=\"example-data-grid\"\n  autoSort=\"false\"\n  autoPage=\"false\"\n  minHeight=\"100\"\n  [data]=\"data.value()?.items ?? []\"\n  [loading]=\"data.isLoading()\"\n  [pageSize]=\"pageSize\"\n  [rowCount]=\"rowCount()\"\n  [(page)]=\"page\"\n  [(sort)]=\"sort\"\n>\n  <sky-data-grid-column\n    field=\"name\"\n    headingText=\"Name\"\n    helpPopoverTitle=\"Server-side sorting and paging\"\n    helpPopoverContent=\"Each sort or page change issues a new request to the server.\"\n  />\n  <sky-data-grid-column\n    field=\"age\"\n    headingText=\"Age\"\n    dataType=\"number\"\n    width=\"80\"\n    helpPopoverTitle=\"Age\"\n    helpPopoverContent=\"The team member's current age, in years.\"\n  />\n  <sky-data-grid-column\n    field=\"startDate\"\n    headingText=\"Start date\"\n    dataType=\"date\"\n  />\n</sky-data-grid>\n", dependencies: [{ kind: "component", type: SkyDataGrid, selector: "sky-data-grid", inputs: ["autoSort", "autoPage", "columnFit", "compact", "data", "labelText", "loading", "minHeight", "multiselect", "pageSize", "pageQueryParam", "rowCount", "stacked", "topScrollEnabled", "page", "selectedRowIds", "sort"], outputs: ["pageChange", "selectedRowIdsChange", "sortChange"] }, { kind: "component", type: SkyDataGridColumn, selector: "sky-data-grid-column", inputs: ["columnHidden", "columnId", "dataType", "field", "flexWidth", "headingText", "headingHidden", "helpPopoverTitle", "helpPopoverContent", "locked", "resizable", "sortable", "template", "width", "wrapText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridLoadingExampleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-data-grid-loading-example', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyDataGrid, SkyDataGridColumn], template: "<div class=\"sky-theme-margin-bottom-l\">\n  <button\n    class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n    type=\"button\"\n    data-sky-id=\"show-data-button\"\n    (click)=\"showData()\"\n  >\n    Show data\n  </button>\n  <button\n    class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n    type=\"button\"\n    data-sky-id=\"show-empty-button\"\n    (click)=\"showEmpty()\"\n  >\n    Show empty state\n  </button>\n  <button\n    class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n    type=\"button\"\n    data-sky-id=\"show-loading-button\"\n    (click)=\"showLoading()\"\n  >\n    Show loading state\n  </button>\n</div>\n\n<sky-data-grid\n  data-sky-id=\"example-data-grid\"\n  autoSort=\"false\"\n  autoPage=\"false\"\n  minHeight=\"100\"\n  [data]=\"data.value()?.items ?? []\"\n  [loading]=\"data.isLoading()\"\n  [pageSize]=\"pageSize\"\n  [rowCount]=\"rowCount()\"\n  [(page)]=\"page\"\n  [(sort)]=\"sort\"\n>\n  <sky-data-grid-column\n    field=\"name\"\n    headingText=\"Name\"\n    helpPopoverTitle=\"Server-side sorting and paging\"\n    helpPopoverContent=\"Each sort or page change issues a new request to the server.\"\n  />\n  <sky-data-grid-column\n    field=\"age\"\n    headingText=\"Age\"\n    dataType=\"number\"\n    width=\"80\"\n    helpPopoverTitle=\"Age\"\n    helpPopoverContent=\"The team member's current age, in years.\"\n  />\n  <sky-data-grid-column\n    field=\"startDate\"\n    headingText=\"Start date\"\n    dataType=\"date\"\n  />\n</sky-data-grid>\n" }]
+        }], ctorParameters: () => [], propDecorators: { delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }] } });
+
+const DEPARTMENTS = [
+    {
+        id: '1',
+        name: 'Marketing',
+    },
+    {
+        id: '2',
+        name: 'Sales',
+    },
+    {
+        id: '3',
+        name: 'Engineering',
+    },
+    {
+        id: '4',
+        name: 'Customer Support',
+    },
+];
+const JOB_TITLES = {
+    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',
+        },
+    ],
+};
+const DATA_GRID_DEMO_DATA$1 = [
+    {
+        id: '1',
+        name: 'Billy Bob',
+        age: 55,
+        startDate: new Date('12/1/1994'),
+        department: DEPARTMENTS[3],
+        jobTitle: JOB_TITLES['Customer Support'][1],
+        active: true,
+    },
+    {
+        id: '2',
+        name: 'Jane Deere',
+        age: 33,
+        startDate: new Date('7/15/2009'),
+        department: DEPARTMENTS[2],
+        jobTitle: JOB_TITLES['Engineering'][2],
+        active: true,
+    },
+    {
+        id: '3',
+        name: 'John Doe',
+        age: 38,
+        startDate: new Date('9/1/2017'),
+        endDate: new Date('9/30/2017'),
+        department: DEPARTMENTS[1],
+        active: true,
+    },
+    {
+        id: '4',
+        name: 'David Smith',
+        age: 51,
+        startDate: new Date('1/1/2012'),
+        endDate: new Date('6/15/2018'),
+        department: DEPARTMENTS[2],
+        jobTitle: JOB_TITLES['Engineering'][4],
+        active: false,
+    },
+    {
+        id: '5',
+        name: 'Emily Johnson',
+        age: 41,
+        startDate: new Date('1/15/2014'),
+        department: DEPARTMENTS[0],
+        jobTitle: JOB_TITLES['Marketing'][2],
+        active: true,
+    },
+    {
+        id: '6',
+        name: 'Nicole Davidson',
+        age: 22,
+        startDate: new Date('11/1/2019'),
+        department: DEPARTMENTS[2],
+        jobTitle: JOB_TITLES['Engineering'][0],
+        active: true,
+    },
+    {
+        id: '7',
+        name: 'Carl Roberts',
+        age: 23,
+        startDate: new Date('11/1/2019'),
+        department: DEPARTMENTS[2],
+        jobTitle: JOB_TITLES['Engineering'][3],
+        active: true,
+    },
+];
+
+/**
+ * @title Data grid with paging using router query parameters
+ */
+class DataGridPagingExampleComponent {
+    constructor() {
+        this.data = DATA_GRID_DEMO_DATA$1;
+        // For demo purposes, only use the query string if we're running the demo in its own SPA as a route and not on the documentation site.
+        this.pageQueryParam = inject(ActivatedRoute, { optional: true })?.component ===
+            DataGridPagingExampleComponent
+            ? 'page'
+            : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridPagingExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DataGridPagingExampleComponent, isStandalone: true, selector: "app-data-grid-paging-example", ngImport: i0, template: "<sky-data-grid\n  data-sky-id=\"example-data-grid\"\n  pageSize=\"5\"\n  [data]=\"data\"\n  [pageQueryParam]=\"pageQueryParam\"\n>\n  <sky-data-grid-column field=\"name\" flexWidth=\"3\" headingText=\"Name\" />\n  <sky-data-grid-column\n    field=\"age\"\n    headingText=\"Age\"\n    dataType=\"number\"\n    flexWidth=\"1\"\n    helpPopoverTitle=\"Age\"\n    helpPopoverContent=\"The team member's current age, in years.\"\n  />\n  <sky-data-grid-column\n    field=\"startDate\"\n    headingText=\"Start date\"\n    dataType=\"date\"\n    flexWidth=\"2\"\n  />\n  <sky-data-grid-column\n    field=\"endDate\"\n    headingText=\"End date\"\n    dataType=\"date\"\n    flexWidth=\"2\"\n  />\n  <sky-data-grid-column\n    field=\"department\"\n    headingText=\"Department\"\n    flexWidth=\"3\"\n  >\n    <ng-template let-value=\"value\">{{ value?.name ?? '' }}</ng-template>\n  </sky-data-grid-column>\n  <sky-data-grid-column field=\"jobTitle\" headingText=\"Job title\" flexWidth=\"4\">\n    <ng-template let-value=\"value\">{{ value?.name ?? '' }}</ng-template>\n  </sky-data-grid-column>\n  <sky-data-grid-column\n    field=\"active\"\n    headingText=\"Active\"\n    dataType=\"boolean\"\n    flexWidth=\"1\"\n  />\n</sky-data-grid>\n", dependencies: [{ kind: "component", type: SkyDataGrid, selector: "sky-data-grid", inputs: ["autoSort", "autoPage", "columnFit", "compact", "data", "labelText", "loading", "minHeight", "multiselect", "pageSize", "pageQueryParam", "rowCount", "stacked", "topScrollEnabled", "page", "selectedRowIds", "sort"], outputs: ["pageChange", "selectedRowIdsChange", "sortChange"] }, { kind: "component", type: SkyDataGridColumn, selector: "sky-data-grid-column", inputs: ["columnHidden", "columnId", "dataType", "field", "flexWidth", "headingText", "headingHidden", "helpPopoverTitle", "helpPopoverContent", "locked", "resizable", "sortable", "template", "width", "wrapText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridPagingExampleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-data-grid-paging-example', imports: [SkyDataGrid, SkyDataGridColumn], changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-data-grid\n  data-sky-id=\"example-data-grid\"\n  pageSize=\"5\"\n  [data]=\"data\"\n  [pageQueryParam]=\"pageQueryParam\"\n>\n  <sky-data-grid-column field=\"name\" flexWidth=\"3\" headingText=\"Name\" />\n  <sky-data-grid-column\n    field=\"age\"\n    headingText=\"Age\"\n    dataType=\"number\"\n    flexWidth=\"1\"\n    helpPopoverTitle=\"Age\"\n    helpPopoverContent=\"The team member's current age, in years.\"\n  />\n  <sky-data-grid-column\n    field=\"startDate\"\n    headingText=\"Start date\"\n    dataType=\"date\"\n    flexWidth=\"2\"\n  />\n  <sky-data-grid-column\n    field=\"endDate\"\n    headingText=\"End date\"\n    dataType=\"date\"\n    flexWidth=\"2\"\n  />\n  <sky-data-grid-column\n    field=\"department\"\n    headingText=\"Department\"\n    flexWidth=\"3\"\n  >\n    <ng-template let-value=\"value\">{{ value?.name ?? '' }}</ng-template>\n  </sky-data-grid-column>\n  <sky-data-grid-column field=\"jobTitle\" headingText=\"Job title\" flexWidth=\"4\">\n    <ng-template let-value=\"value\">{{ value?.name ?? '' }}</ng-template>\n  </sky-data-grid-column>\n  <sky-data-grid-column\n    field=\"active\"\n    headingText=\"Active\"\n    dataType=\"boolean\"\n    flexWidth=\"1\"\n  />\n</sky-data-grid>\n" }]
+        }] });
+
+const DATA_GRID_DEMO_DATA = [
+    { id: '1', name: 'Billy Bob', age: 55, startDate: new Date('12/1/1994') },
+    { id: '2', name: 'Jane Deere', age: 33, startDate: new Date('7/15/2009') },
+    { id: '3', name: 'John Doe', age: 38, startDate: new Date('9/1/2017') },
+    { id: '4', name: 'David Smith', age: 51, startDate: new Date('1/1/2012') },
+    { id: '5', name: 'Emily Johnson', age: 41, startDate: new Date('1/15/2014') },
+];
+
+/**
+ * @title Data grid with two-way sort binding
+ */
+class DataGridSortingExampleComponent {
+    constructor() {
+        this.data = DATA_GRID_DEMO_DATA;
+        this.sort = signal({
+            field: 'name',
+            direction: 'asc',
+        }, ...(ngDevMode ? [{ debugName: "sort" }] : []));
+        this.sortDescription = computed(() => {
+            const sort = this.sort();
+            if (!sort) {
+                return '(no sort applied)';
+            }
+            return `${sort.field} (${sort.direction === 'desc' ? 'descending' : 'ascending'})`;
+        }, ...(ngDevMode ? [{ debugName: "sortDescription" }] : []));
+    }
+    sortByAgeDescending() {
+        this.sort.set({ field: 'age', direction: 'desc' });
+    }
+    clearSort() {
+        this.sort.set(undefined);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridSortingExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DataGridSortingExampleComponent, isStandalone: true, selector: "app-data-grid-sorting-example", ngImport: i0, template: "<sky-box class=\"sky-theme-margin-bottom-l\">\n  <sky-box-content>\n    Current sort:\n    <strong data-sky-id=\"current-sort\" class=\"sky-theme-margin-right-s\">{{\n      sortDescription()\n    }}</strong>\n    <button\n      class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n      type=\"button\"\n      data-sky-id=\"sort-by-age-button\"\n      (click)=\"sortByAgeDescending()\"\n    >\n      Sort by age (descending)\n    </button>\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      data-sky-id=\"clear-sort-button\"\n      (click)=\"clearSort()\"\n    >\n      Clear sort\n    </button>\n  </sky-box-content>\n</sky-box>\n\n<sky-data-grid data-sky-id=\"example-data-grid\" [data]=\"data\" [(sort)]=\"sort\">\n  <sky-data-grid-column field=\"name\" headingText=\"Name\" />\n  <sky-data-grid-column\n    field=\"age\"\n    headingText=\"Age\"\n    dataType=\"number\"\n    width=\"80\"\n    helpPopoverTitle=\"Age\"\n    helpPopoverContent=\"The team member's current age, in years.\"\n  />\n  <sky-data-grid-column\n    field=\"startDate\"\n    headingText=\"Start date\"\n    dataType=\"date\"\n  />\n</sky-data-grid>\n", dependencies: [{ kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$5.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$5.λ43, selector: "sky-box-content" }, { kind: "component", type: SkyDataGrid, selector: "sky-data-grid", inputs: ["autoSort", "autoPage", "columnFit", "compact", "data", "labelText", "loading", "minHeight", "multiselect", "pageSize", "pageQueryParam", "rowCount", "stacked", "topScrollEnabled", "page", "selectedRowIds", "sort"], outputs: ["pageChange", "selectedRowIdsChange", "sortChange"] }, { kind: "component", type: SkyDataGridColumn, selector: "sky-data-grid-column", inputs: ["columnHidden", "columnId", "dataType", "field", "flexWidth", "headingText", "headingHidden", "helpPopoverTitle", "helpPopoverContent", "locked", "resizable", "sortable", "template", "width", "wrapText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataGridSortingExampleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-data-grid-sorting-example', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyBoxModule, SkyDataGrid, SkyDataGridColumn], template: "<sky-box class=\"sky-theme-margin-bottom-l\">\n  <sky-box-content>\n    Current sort:\n    <strong data-sky-id=\"current-sort\" class=\"sky-theme-margin-right-s\">{{\n      sortDescription()\n    }}</strong>\n    <button\n      class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n      type=\"button\"\n      data-sky-id=\"sort-by-age-button\"\n      (click)=\"sortByAgeDescending()\"\n    >\n      Sort by age (descending)\n    </button>\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      data-sky-id=\"clear-sort-button\"\n      (click)=\"clearSort()\"\n    >\n      Clear sort\n    </button>\n  </sky-box-content>\n</sky-box>\n\n<sky-data-grid data-sky-id=\"example-data-grid\" [data]=\"data\" [(sort)]=\"sort\">\n  <sky-data-grid-column field=\"name\" headingText=\"Name\" />\n  <sky-data-grid-column\n    field=\"age\"\n    headingText=\"Age\"\n    dataType=\"number\"\n    width=\"80\"\n    helpPopoverTitle=\"Age\"\n    helpPopoverContent=\"The team member's current age, in years.\"\n  />\n  <sky-data-grid-column\n    field=\"startDate\"\n    headingText=\"Start date\"\n    dataType=\"date\"\n  />\n</sky-data-grid>\n" }]
+        }] });
+
 const DATA_MANAGER_DEMO_DATA = [
     {
         id: '1',
@@ -14344,5 +14864,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarsSummaryActionBarBasicExampleComponent, ActionBarsSummaryActionBarErrorExampleComponent, ActionBarsSummaryActionBarModalExampleComponent, ActionBarsSummaryActionBarTabExampleComponent, AgGridDataEntryGridBasicExampleComponent, AgGridDataEntryGridDataManagerAddedExampleComponent, AgGridDataEntryGridFocusExampleComponent, AgGridDataEntryGridInlineHelpExampleComponent, AgGridDataGridBasicExampleComponent, AgGridDataGridBasicMultiselectExampleComponent, AgGridDataGridDataManagerExampleComponent, AgGridDataGridDataManagerMultiselectExampleComponent, AgGridDataGridInlineHelpExampleComponent, AgGridDataGridPagingExampleComponent, AgGridDataGridTemplateRefColumnExampleComponent, AgGridDataGridTopScrollExampleComponent, AngularTreeComponentAngularTreeBasicExampleComponent, AngularTreeComponentAngularTreeHelpKeyExampleComponent, AngularTreeComponentAngularTreePreselectedNodesExampleComponent, AutonumericCurrencyExampleComponent, AutonumericInternationalFormattingExampleComponent, AutonumericOptionsProviderExampleComponent, AutonumericPresetExampleComponent, AvatarExampleComponent, ColorpickerBasicExampleComponent, ColorpickerHelpKeyExampleComponent, ColorpickerProgrammaticExampleComponent, CoreIdExampleComponent, CoreMediaQueryBasicExampleComponent, CoreMediaQueryResponsiveHostExampleComponent, CoreNumericBasicExampleComponent, DataManagerBasicExampleComponent, DatetimeDatePipeBasicExampleComponent, DatetimeDateRangePickerBasicExampleComponent, DatetimeDateRangePickerCustomCalculatorExampleComponent, DatetimeDateRangePickerHelpKeyExampleComponent, DatetimeDatepickerBasicExampleComponent, DatetimeDatepickerCustomDatesExampleComponent, DatetimeDatepickerFuzzyExampleComponent, DatetimeTimepickerBasicExampleComponent, ErrorsErrorEmbeddedExampleComponent, ErrorsErrorModalExampleComponent, FilterBarLookupExampleComponent, FilterBarModalExampleComponent, FilterBarSelectableExampleComponent, FlyoutBasicExampleComponent, FlyoutCustomHeadersExampleComponent, FormsCharacterCountExampleComponent, FormsCheckboxBasicExampleComponent, FormsCheckboxHelpKeyExampleComponent, FormsCheckboxIconGroupExampleComponent, FormsFieldGroupBasicExampleComponent, FormsFieldGroupHelpKeyExampleComponent, FormsFileAttachmentBasicExampleComponent, FormsFileAttachmentHelpKeyExampleComponent, FormsFileDropBasicExampleComponent, FormsFileDropHelpKeyExampleComponent, FormsInputBoxBasicExampleComponent, FormsInputBoxWithCustomFormErrorsExampleComponent, FormsRadioHelpKeyExampleComponent, FormsRadioIconExampleComponent, FormsRadioStandardExampleComponent, FormsSelectionBoxCheckboxExampleComponent, FormsSelectionBoxRadioExampleComponent, FormsToggleSwitchBasicExampleComponent, FormsToggleSwitchHelpKeyExampleComponent, HelpInlineActionClickExampleComponent, HelpInlineHelpKeyExampleComponent, HelpInlinePopoverExampleComponent, IconBasicExampleComponent, IconIconButtonExampleComponent, IndicatorsAlertBasicExampleComponent, IndicatorsIllustrationBasicExampleComponent, IndicatorsKeyInfoBasicExampleComponent, IndicatorsKeyInfoHelpKeyExampleComponent, IndicatorsLabelBasicExampleComponent, IndicatorsStatusIndicatorBasicExampleComponent, IndicatorsStatusIndicatorHelpKeyExampleComponent, IndicatorsTextHighlightBasicExampleComponent, IndicatorsTokensBasicExampleComponent, IndicatorsTokensCustomExampleComponent, IndicatorsWaitElementExampleComponent, IndicatorsWaitPageExampleComponent, InlineFormBasicExampleComponent, InlineFormCustomButtonsExampleComponent, InlineFormRepeatersExampleComponent, LayoutActionButtonBasicExampleComponent, LayoutActionButtonPermalinkExampleComponent, LayoutBackToTopInfiniteScrollExampleComponent, LayoutBackToTopRepeaterExampleComponent, LayoutBoxBasicExampleComponent, LayoutBoxHelpKeyExampleComponent, LayoutCardBasicExampleComponent, LayoutDefinitionListBasicExampleComponent, LayoutDescriptionListHelpKeyExampleComponent, LayoutDescriptionListHorizontalExampleComponent, LayoutDescriptionListInlineHelpExampleComponent, LayoutDescriptionListLongDescriptionExampleComponent, LayoutDescriptionListVerticalExampleComponent, LayoutFluidGridExampleComponent, LayoutFormatExampleComponent, LayoutInlineDeleteCustomExampleComponent, LayoutInlineDeleteRepeaterExampleComponent, LayoutPageSummaryBasicExampleComponent, LayoutTextExpandInlineExampleComponent, LayoutTextExpandModalExampleComponent, LayoutTextExpandNewlineExampleComponent, LayoutTextExpandRepeaterExampleComponent, LayoutToolbarBasicExampleComponent, LayoutToolbarSectionedExampleComponent, ListsFilterInlineExampleComponent, ListsInfiniteScrollRepeaterExampleComponent, ListsListSummaryBasicExampleComponent, ListsPagingBasicExampleComponent, ListsPagingWithContentExampleComponent, ListsRepeaterAddRemoveExampleComponent, ListsRepeaterBasicExampleComponent, ListsRepeaterInlineFormExampleComponent, ListsSortBasicExampleComponent, LookupAddItemExampleComponent, LookupAutocompleteAdvancedExampleComponent, LookupAutocompleteAnyValueExampleComponent, LookupAutocompleteBasicExampleComponent, LookupAutocompleteCustomSearchExampleComponent, LookupAutocompleteSearchFiltersExampleComponent, LookupCountryFieldBasicExampleComponent, LookupCustomPickerExampleComponent, LookupMultiSelectExampleComponent, LookupResultTemplatesExampleComponent, LookupSearchBasicExampleComponent, LookupSelectionModalAddItemExampleComponent, LookupSelectionModalBasicExampleComponent, LookupSingleSelectExampleComponent, ModalsConfirmBasicWithControllerExampleComponent, ModalsConfirmBasicWithHarnessExampleComponent, ModalsModalBasicWithBannerExampleComponent, ModalsModalBasicWithControllerExampleComponent, ModalsModalBasicWithHarnessExampleComponent, ModalsModalBasicWithHarnessHelpKeyExampleComponent, ModalsModalWithErrorExampleComponent, NavbarExampleComponent, PagesActionHubExampleComponent, PagesPageDataManagerSplitViewFitLayoutExampleComponent, PagesPageHomePageBlocksLayoutExampleComponent, PagesPageListPageListLayoutExampleComponent, PagesPageListPageTabsLayoutExampleComponent, PagesPageRecordPageBlocksLayoutExampleComponent, PagesPageRecordPageTabsLayoutExampleComponent, PagesPageSplitViewPageFitLayoutExampleComponent, PhoneFieldBasicExampleComponent, PopoversDropdownBasicExampleComponent, PopoversPopoverBasicExampleComponent, PopoversPopoverProgrammaticExampleComponent, ProgressIndicatorPassiveIndicatorBasicExampleComponent, ProgressIndicatorWaterfallIndicatorBasicExampleComponent, ProgressIndicatorWizardBasicExampleComponent, RouterHrefBasicExampleComponent, SplitViewBasicExampleComponent, SplitViewPageBoundExampleComponent, TabsDynamicAddCloseExampleComponent, TabsDynamicExampleComponent, TabsSectionedFormModalExampleComponent, TabsStaticAddCloseExampleComponent, TabsStaticExampleComponent, TabsVerticalTabsBasicExampleComponent, TabsVerticalTabsGroupedExampleComponent, TabsVerticalTabsMixedExampleComponent, TabsWizardBasicExampleComponent, TextEditorExampleComponent, TextEditorHelpKeyExampleComponent, TextEditorRichTextDisplayExampleComponent, TilesBasicExampleComponent, ToastBasicExampleComponent, ToastCustomComponentExampleComponent, ValidationEmailValidationControlValidatorExampleComponent, ValidationEmailValidationDirectiveExampleComponent, ValidationUrlValidationControlValidatorExampleComponent, ValidationUrlValidationDirectiveExampleComponent };
+export { ActionBarsSummaryActionBarBasicExampleComponent, ActionBarsSummaryActionBarErrorExampleComponent, ActionBarsSummaryActionBarModalExampleComponent, ActionBarsSummaryActionBarTabExampleComponent, AgGridDataEntryGridBasicExampleComponent, AgGridDataEntryGridDataManagerAddedExampleComponent, AgGridDataEntryGridFocusExampleComponent, AgGridDataEntryGridInlineHelpExampleComponent, AgGridDataGridBasicExampleComponent, AgGridDataGridBasicMultiselectExampleComponent, AgGridDataGridDataManagerExampleComponent, AgGridDataGridDataManagerMultiselectExampleComponent, AgGridDataGridInlineHelpExampleComponent, AgGridDataGridPagingExampleComponent, AgGridDataGridTemplateRefColumnExampleComponent, AgGridDataGridTopScrollExampleComponent, AngularTreeComponentAngularTreeBasicExampleComponent, AngularTreeComponentAngularTreeHelpKeyExampleComponent, AngularTreeComponentAngularTreePreselectedNodesExampleComponent, AutonumericCurrencyExampleComponent, AutonumericInternationalFormattingExampleComponent, AutonumericOptionsProviderExampleComponent, AutonumericPresetExampleComponent, AvatarExampleComponent, ColorpickerBasicExampleComponent, ColorpickerHelpKeyExampleComponent, ColorpickerProgrammaticExampleComponent, CoreIdExampleComponent, CoreMediaQueryBasicExampleComponent, CoreMediaQueryResponsiveHostExampleComponent, CoreNumericBasicExampleComponent, DataGridBasicExampleComponent, DataGridLoadingExampleComponent, DataGridPagingExampleComponent, DataGridSortingExampleComponent, DataManagerBasicExampleComponent, DatetimeDatePipeBasicExampleComponent, DatetimeDateRangePickerBasicExampleComponent, DatetimeDateRangePickerCustomCalculatorExampleComponent, DatetimeDateRangePickerHelpKeyExampleComponent, DatetimeDatepickerBasicExampleComponent, DatetimeDatepickerCustomDatesExampleComponent, DatetimeDatepickerFuzzyExampleComponent, DatetimeTimepickerBasicExampleComponent, ErrorsErrorEmbeddedExampleComponent, ErrorsErrorModalExampleComponent, FilterBarLookupExampleComponent, FilterBarModalExampleComponent, FilterBarSelectableExampleComponent, FlyoutBasicExampleComponent, FlyoutCustomHeadersExampleComponent, FormsCharacterCountExampleComponent, FormsCheckboxBasicExampleComponent, FormsCheckboxHelpKeyExampleComponent, FormsCheckboxIconGroupExampleComponent, FormsFieldGroupBasicExampleComponent, FormsFieldGroupHelpKeyExampleComponent, FormsFileAttachmentBasicExampleComponent, FormsFileAttachmentHelpKeyExampleComponent, FormsFileDropBasicExampleComponent, FormsFileDropHelpKeyExampleComponent, FormsInputBoxBasicExampleComponent, FormsInputBoxWithCustomFormErrorsExampleComponent, FormsRadioHelpKeyExampleComponent, FormsRadioIconExampleComponent, FormsRadioStandardExampleComponent, FormsSelectionBoxCheckboxExampleComponent, FormsSelectionBoxRadioExampleComponent, FormsToggleSwitchBasicExampleComponent, FormsToggleSwitchHelpKeyExampleComponent, HelpInlineActionClickExampleComponent, HelpInlineHelpKeyExampleComponent, HelpInlinePopoverExampleComponent, IconBasicExampleComponent, IconIconButtonExampleComponent, IndicatorsAlertBasicExampleComponent, IndicatorsIllustrationBasicExampleComponent, IndicatorsKeyInfoBasicExampleComponent, IndicatorsKeyInfoHelpKeyExampleComponent, IndicatorsLabelBasicExampleComponent, IndicatorsStatusIndicatorBasicExampleComponent, IndicatorsStatusIndicatorHelpKeyExampleComponent, IndicatorsTextHighlightBasicExampleComponent, IndicatorsTokensBasicExampleComponent, IndicatorsTokensCustomExampleComponent, IndicatorsWaitElementExampleComponent, IndicatorsWaitPageExampleComponent, InlineFormBasicExampleComponent, InlineFormCustomButtonsExampleComponent, InlineFormRepeatersExampleComponent, LayoutActionButtonBasicExampleComponent, LayoutActionButtonPermalinkExampleComponent, LayoutBackToTopInfiniteScrollExampleComponent, LayoutBackToTopRepeaterExampleComponent, LayoutBoxBasicExampleComponent, LayoutBoxHelpKeyExampleComponent, LayoutCardBasicExampleComponent, LayoutDefinitionListBasicExampleComponent, LayoutDescriptionListHelpKeyExampleComponent, LayoutDescriptionListHorizontalExampleComponent, LayoutDescriptionListInlineHelpExampleComponent, LayoutDescriptionListLongDescriptionExampleComponent, LayoutDescriptionListVerticalExampleComponent, LayoutFluidGridExampleComponent, LayoutFormatExampleComponent, LayoutInlineDeleteCustomExampleComponent, LayoutInlineDeleteRepeaterExampleComponent, LayoutPageSummaryBasicExampleComponent, LayoutTextExpandInlineExampleComponent, LayoutTextExpandModalExampleComponent, LayoutTextExpandNewlineExampleComponent, LayoutTextExpandRepeaterExampleComponent, LayoutToolbarBasicExampleComponent, LayoutToolbarSectionedExampleComponent, ListsFilterInlineExampleComponent, ListsInfiniteScrollRepeaterExampleComponent, ListsListSummaryBasicExampleComponent, ListsPagingBasicExampleComponent, ListsPagingWithContentExampleComponent, ListsRepeaterAddRemoveExampleComponent, ListsRepeaterBasicExampleComponent, ListsRepeaterInlineFormExampleComponent, ListsSortBasicExampleComponent, LookupAddItemExampleComponent, LookupAutocompleteAdvancedExampleComponent, LookupAutocompleteAnyValueExampleComponent, LookupAutocompleteBasicExampleComponent, LookupAutocompleteCustomSearchExampleComponent, LookupAutocompleteSearchFiltersExampleComponent, LookupCountryFieldBasicExampleComponent, LookupCustomPickerExampleComponent, LookupMultiSelectExampleComponent, LookupResultTemplatesExampleComponent, LookupSearchBasicExampleComponent, LookupSelectionModalAddItemExampleComponent, LookupSelectionModalBasicExampleComponent, LookupSingleSelectExampleComponent, ModalsConfirmBasicWithControllerExampleComponent, ModalsConfirmBasicWithHarnessExampleComponent, ModalsModalBasicWithBannerExampleComponent, ModalsModalBasicWithControllerExampleComponent, ModalsModalBasicWithHarnessExampleComponent, ModalsModalBasicWithHarnessHelpKeyExampleComponent, ModalsModalWithErrorExampleComponent, NavbarExampleComponent, PagesActionHubExampleComponent, PagesPageDataManagerSplitViewFitLayoutExampleComponent, PagesPageHomePageBlocksLayoutExampleComponent, PagesPageListPageListLayoutExampleComponent, PagesPageListPageTabsLayoutExampleComponent, PagesPageRecordPageBlocksLayoutExampleComponent, PagesPageRecordPageTabsLayoutExampleComponent, PagesPageSplitViewPageFitLayoutExampleComponent, PhoneFieldBasicExampleComponent, PopoversDropdownBasicExampleComponent, PopoversPopoverBasicExampleComponent, PopoversPopoverProgrammaticExampleComponent, ProgressIndicatorPassiveIndicatorBasicExampleComponent, ProgressIndicatorWaterfallIndicatorBasicExampleComponent, ProgressIndicatorWizardBasicExampleComponent, RouterHrefBasicExampleComponent, SplitViewBasicExampleComponent, SplitViewPageBoundExampleComponent, TabsDynamicAddCloseExampleComponent, TabsDynamicExampleComponent, TabsSectionedFormModalExampleComponent, TabsStaticAddCloseExampleComponent, TabsStaticExampleComponent, TabsVerticalTabsBasicExampleComponent, TabsVerticalTabsGroupedExampleComponent, TabsVerticalTabsMixedExampleComponent, TabsWizardBasicExampleComponent, TextEditorExampleComponent, TextEditorHelpKeyExampleComponent, TextEditorRichTextDisplayExampleComponent, TilesBasicExampleComponent, ToastBasicExampleComponent, ToastCustomComponentExampleComponent, ValidationEmailValidationControlValidatorExampleComponent, ValidationEmailValidationDirectiveExampleComponent, ValidationUrlValidationControlValidatorExampleComponent, ValidationUrlValidationDirectiveExampleComponent };
 //# sourceMappingURL=skyux-code-examples.mjs.map